example
The main chat page code is as follows
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet/less" href='index.less'>
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.8.1/less.min.js" ></script>
</head>
<body>
<div class="win">
<div class="left">
<div>
<div class="left_box">
<img class="icon" src="img/avatar.jpg" alt="">
</div>
<div class="left_box">
<img class="icon" src="img/select_msg.png">
<!-- <img src="img/msg.png"> -->
</div>
<div class="left_box">
<!-- <img class="icon" src="img/select_friend.png"> -->
<img class="icon" src="img/friend.png">
</div>
</div>
<div class="left_box" @click="logout">
<img class="icon" src="img/exit.png">
</div>
</div>
<div class="chat">
<div class="user">
<div class="search">
<input class="input" placeholder="搜素好友添加">
<div class="add_box">
<img src="img/add.png">
</div>
</div>
<div class="user_list">
<li v-for="i in 5">
<img src="img/avatar.jpg">
<div class="info">
<div class="name_msg">
<span class="name">用户名称</span>
<span class="time">23/01/01</span>
</div>
<div class="msg">
消息
</div>
</div>
</li>
</div>
</div>
<div class="chitchat">
<div class="top">
<span>测试好友名称</span>
</div>
<div class="main">
<div class="show_chat">
<!-- 好友消息-->
<div class="friend" v-for="i in 3">
<div class="avatar_box">
<img class="avatar" src="img/to.jpg">
</div>
<div class="char_user">
<span class="user_name">
测试好友
</span>
<div class='msg_left'>
<span class="msg_text">
你好，这是内容。Hello,this is massage.1.1.1.1.1.1.342523452345
</span>
</div>
</div>
</div>
<!-- 自己消息-->
<div class="my">
<div class="avatar_box">
<img class="avatar" src="img/avatar.jpg">
</div>
<div class="char_user">
<div class='msg_right'>
<span class="msg_text">
你好，这是内容。Hello,this is massage.
</span>
</div>
</div>
</div>
</div>
<div class="input_box">
<div class="tool">
<img src="img/meme.png" alt="">
</div>
<div class="chat_input_box">
<div class="chat_input">
<textarea autofocus></textarea>
</div>
<div class="send">
<button class="send_btn">发送</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div @click="logout" class="close">
<span>×</span>
</div>
</div>
</body>
</html>
LESS style code preview needs to be placed in the same directory
body {
margin: 0;
place-items: center;
min-width: 320px;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
max-width: 1280px;
margin: 0 auto;
text-align: center;
}
.win {
position: relative;
display: flex;
width: 70%;
min-height: 600px;
height: 65%;
margin: 0 auto;
border-radius: 8px;
box-shadow: 0 0 57px #b7b7b7;
}
.left {
border-bottom-left-radius: 8px;
border-top-left-radius: 8px;
color: #fff;
display: flex;
width: 60px;
flex-direction: column;
justify-content: space-between;
overflow: hidden;
background: #e6e0df;
}
.close {
position: absolute;
right: 10px;
cursor: pointer;
span{
font-size: 33px;
}
}
.close:hover{
color: #ce8176;
}
.left_box {
margin: 20px 0;
width: 100%;
cursor: pointer;
}
.icon {
width: 60%;
border-radius: 5px;
}
.msg_left {
word-break:break-all;
position: relative;
max-width: 75%;
min-height: 20px;
padding: 8px;
text-align: start;
margin-left: 15px;
border-radius: 10px;
background: #ebebeb;
clear: both
}
.msg_left:before {
position: absolute;
top: 6px;
left: -20px;
padding: 0;
border: 10px solid;
border-color: transparent #ebebeb transparent transparent;
display: block;
content: '';
z-index: 9;
}
.chat {
position: relative;
display: flex;
min-height: 600px;
width: 100%;
border-radius: 8px;
}
.user {
flex: 6;
background-color: #f7f7f7;
border-right: 1px solid rgba(214, 214, 214, 0.8);
display: flex;
flex-direction: column;
.search {
display: flex;
height: 55px;
align-items: center;
justify-content: space-around;
.input {
padding-left: 10px;
height: 25px;
background-color: #eaeaea;
border-radius: 5px;
border: 1px solid #eaeaea;
outline: none;
width: 70%;
}
.input:focus {
border: 1px solid #eaeaea;
background-color: #f8f8f8;
}
.add_box {
width: 25px;
height: 25px;
background-color: #eaeaea;
border-radius: 3px;
cursor: pointer;
img {
width: 100%;
height: 100%;
}
}
}
.user_list {
flex: 1;
width: 100%;
background-color: #e9e7e6;
overflow-y: scroll;
li {
cursor: default;
display: flex;
list-style: none;
align-items: center;
height: 60px;
.info {
width: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
}
img {
margin: 0 10px;
height: 70%;
border-radius: 6px;
}
.name_msg {
width: 100%;
text-align: start;
.name {
font-size: 15px;
}
.time {
float: right;
padding-right: 8px;
font-size: 12px;
color: #999;
}
}
.time_box {
display: flex;
}
.msg {
color: #999999;
font-size: 14px;
}
}
li:hover {
background-color: #c5c5c6;
}
}
}
.chitchat {
border-bottom-right-radius: 8px;
border-top-right-radius: 8px;
flex: 13;
display: flex;
flex-direction: column;
background-color: #f3f3f3;
.top {
text-align: start;
height: 55px;
padding-left: 20px;
line-height: 55px;
border-bottom: 1px solid rgba(236, 236, 236, 1);
}
.main {
line-height: normal;
flex: 1;
display: flex;
flex-direction: column;
.show_chat {
overflow-y: scroll;
padding: 8px 30px;
border-bottom: 1px solid rgba(236, 236, 236, 1);
height: 60%;
.avatar_box {
width: 40px;
height: 50px;
.avatar {
margin-top: 5px;
display: inline-block;
border-radius: 5px;
width: 100%;
}
}
li {
list-style: none;
}
.friend {
.char_user {
text-align: start;
}
display: flex;
margin-bottom: 10px;
.user_name {
color: #b2b2b2;
font-size: 13px;
margin-left: 20px;
margin-top: -5px;
}
}
.my {
.char_user {
text-align: end;
}
display: flex;
flex-direction: row-reverse;
margin-bottom: 10px;
text-align: end;
.user_name {
color: #b2b2b2;
font-size: 13px;
margin-left: 20px;
margin-top: -5px;
}
.char_user {
text-align: start;
}
}
}
.input_box {
display: flex;
height: 40%;
flex-direction: column;
.tool {
height: 22px;
text-align: start;
padding: 10px 30px;
img {
height: 100%;
}
}
.chat_input_box {
flex: 1;
padding: 0 30px;
.chat_input {
height: 75%;
width: 100%;
textarea {
font-size: 25px;
width: 100%;
height: 80%;
max-height: 100%;
overflow-y: scroll;
border: none;
background-color: #f3f3f3;
resize: none;
}
textarea:focus {
outline-style: none;
}
}
.send {
display: flex;
justify-content: flex-end;
.send_btn {
color: #07c160;
border-radius: 5px;
background-color: #e9e9e9;
height: 30px;
padding: 3px 45px;
outline: none;
border: none;
}
.send_btn:hover {
background-color: #d2d2d2;
}
.send_btn:focus {
outline: none;
}
.send_btn:active {
background-color: #c6c6c6;
}
}
}
}
}
}
.msg_text {
font-size: 14px;
}
.msg_left {
word-break: break-all;
position: relative;
max-width: 75%;
min-height: 20px;
padding: 8px;
text-align: start;
margin-left: 15px;
border-radius: 10px;
background: #ebebeb;
clear: both
}
.msg_left:before {
position: absolute;
top: 6px;
left: -20px;
padding: 0;
border: 10px solid;
border-color: transparent #ebebeb transparent transparent;
display: block;
content: '';
z-index: 9;
}
.msg_right {
position: relative;
word-break: break-all;
max-width: 75%;
min-height: 20px;
padding: 8px;
float: right;
text-align: start;
margin-right: 15px;
border-radius: 10px;
background: #89d961;
clear: both
}
.msg_right:before {
position: absolute;
top: 10px;
right: -20px;
padding: 0;
border: 10px solid;
border-color: transparent transparent transparent #89d961;
display: block;
content: '';
z-index: 9;
}
::-webkit-scrollbar {
/*滚动条整体样式*/
width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
height: 1px;
}
::-webkit-scrollbar-thumb {
/*滚动条里面小方块*/
border-radius: 2px;
box-shadow: inset 0 0 5px rgba(97, 184, 179, 0.1);
background: #c0bdbb;
}
::-webkit-scrollbar-thumb:hover {
background: #adaaa9;
}
::-webkit-scrollbar-track {
/*滚动条里面轨道*/
box-shadow: inset 0 0 5px rgba(87, 175, 187, 0.1);
border-radius: 2px;
background: none;
}
Refer to MAC WeChat client. This article is pure front-end code.
Since the icon file cannot be downloaded in this article, you can contact if you need it, or provide the download address after the resource review is approved (to be updated)
目前已实现扫码浏览器登录、登录二维码过期，暂未开放。
后续会开发微信im实时聊天、好友列表、添加好友、发送表情、聊天记录、在线状态...请持续关注