elementui+vue实现一个pc端聊天窗口及时通讯页面代码
代码语言:html
所属分类:布局界面
代码描述:elementui+vue实现一个pc端聊天窗口及时通讯页面代码
代码标签: elementui vue pc端 聊天窗口 及时 通讯
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>element-ui常用单选按钮元素</title> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/element-ui.2.15.1.css"> <style> .chatPop1 :hover { background-color: #FAFAFA; } .chatPop1 span { background-color: #fff; padding: 5px 8px; display: inline-block; border-radius: 10px; margin: 0px 0 10px 10px; position: relative; border: 1px solid #E3E3E3; max-width: 290px; } .chatPop1 span::after { content: ''; border: 8px solid #ffffff00; border-right: 8px solid #fff; position: absolute; top: 8px; left: -16px; } .chatPop2 :hover { background-color: #2683f5; } .chatPop2 span { background-color: #2683f5; padding: 5px 8px; display: inline-block; border-radius: 10px; margin: 0px 15px 10px 10px; position: relative; border: 1px solid #E3E3E3; max-width: 290px; float: right; color: #fff; } .chatPop2 span::after { content: ''; border: 8px solid #ffffff00; border-right: 8px solid #2683f5; position: absolute; top: 8px; right: -16px; transform: rotateY(180deg) } .custom { border: 0px solid blue; height: 670px; width: 795px; } .wxchatBorder { width: 795px; height: 670px; border: 1px solid red; margin-left: -20px; margin-top: -59.5px; } .wxchatBorderLeft { width: 250px; height: 670px; background-color: #eeebe9; display: inline-block; float: left; margin-left: -20px; margin-top: -60px; } .wxchatPeople { color: #000000; font-size: 14px; } .wxchatNews { color: #999; padding-top: 5px; font-size: 12px; } .wxchatName { color: #000000; font-size: 20px; float: left; padding-left: 30px; padding-top: 20px; } .wxchatMore { color: #999; font-size: 20px; float: right; margin-right: 23px; padding-top: 17px; } .wxchatBorderRight { max-width: 245px; height: 670px; // background-color: #000; // border: 2px solid red; display: inline-block; float: right; margin-right: -22px; // margin-left: 40px; margin-top: -60px; } .wxchatBorderRightTop { width: 545px; height: 60px; background-color: #f5f5f5; border-bottom: 1px solid #e7e7e7; display: block; float: right; margin-right: -20px; margin-top: -60px; } .wxchatBorderRightMid { width: 545px; height: 428px; background-color: #f5f5f5; display: block; float: right; margin-right: -20px; } .wxchatBorderRightBottom { width: 545px; height: 152px; background-color: #fff; display: block; float: right; margin-right: -20px; } .wxchatIcon1 { display: inline-block; padding: 8px 10px 10px 30px; width: 40px; height: 40px; font-size: 20px; } .wxchatIcon2 { display: inline-block; padding: 8px 10px 10px 20px; width: 40px; height: 40px; font-size: 20px; } .wxchatIcon3 { display: inline-block; padding: 8px 10px 10px 10px; width: 40px; height: 40px; font-size: 20px; } .wxchatIcon4 { display: inline-block; padding: 8px 10px 10px 0px; width: 40px; height: 40px; font-size: 20px; } .sendButton { float: right; margin-top: 5px; margin-right:14px; } </style> </head> <body> <div id="myVue"> <el-dialog v-dialogDrag title="" :visible.sync="dialogTableVisible" custom-class="custom" :modal="false" :show-close="false"> <div class="wxchatBorderLeft"> <el-row> <div style="padding: 10px;"> <div style="display: inline-block;"> <el-input placeholder="搜索" prefix-icon="el-icon-search" v-model="input2" size="mini"> </el-input> </div> <div style="display: inline-block;"> <i class="el-icon-plus"></i> </div> </div> </el-row> <el-row> <div> <el-col :span="24"> <div style="display: inline-block;padding: 12px;"> <el-avatar shape="square" :src="squareUrl"></el-avatar> </div> <div style="display: inline-block;"> <el-col> <div class="wxchatPeople">张小小</div> </el-col> <el-col> <div class="wxchatNews">你在干什么</div> <.........完整代码请登录后点击上方下载按钮下载查看
网友评论0