msb-public
/
go-fly
mirror of https://github.com/taoshihan1991/go-fly.git
1
0
Code Issues Projects Releases Wiki Activity

更新一下界面

Browse Source
master
taoshihan 3 years ago
parent 9daff59ed7
commit c2a2352828
3 changed files with 51 additions and 26 deletions
Show Stats Download Patch File Download Diff File

51
static/css/common.css
Unescape View File

@ -1,7 +1,9 @@
*{padding:0;margin:0} *{padding:0;margin:0}
.floatRight{float: right;} .floatRight{float: right;}
.clear{clear: both;} .clear{clear: both;}
.visitorBody{
background-color: #eef0f6;
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 { .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
font-family: inherit; font-family: inherit;
font-weight: 500; font-weight: 500;
@ -285,12 +287,17 @@
max-width: 800px; max-width: 800px;
margin:0 auto; margin:0 auto;
} }
.chatCenter{background: #fff;max-width: 800px;margin: 0 auto;border: 1px solid #d1d1d1;margin-top: 10px;box-shadow: 2px 2px 6px rgba(0,0,0,.3);} .chatCenter{
background: #fff;
margin: 0 auto;
box-shadow: 2px 2px 6px rgba(0,0,0,.3);
overflow: hidden;
width: 100%;
}
.chatContext{ .chatContext{
width: 100%; width: 100%;
text-align: left; text-align: left;
position: relative; position: relative;
margin-bottom: 105px;
background: rgb(245,245,245); background: rgb(245,245,245);
} }
.chatBox{ .chatBox{
@ -300,7 +307,7 @@
/*margin-bottom: 80px;*/ /*margin-bottom: 80px;*/
} }
.chatVisitorPage{ .chatVisitorPage{
height: calc(100% - 105px); height: calc(100% - 150px);
overflow-y: auto; overflow-y: auto;
} }
.chatVisitorPage .chatBox{ .chatVisitorPage .chatBox{
@ -377,7 +384,7 @@ a{color: #07a9fe;text-decoration: none;}
} }
.chatTitle{height: 30px;line-height: 30px;color: #1989fa} .chatTitle{height: 30px;line-height: 30px;color: #1989fa}
.chatBoxSend{background: #fff;position: fixed;bottom: 0px;width: 100%;height: 105px;max-width: 800px;z-index: 99;} .chatBoxSend{background: #fff;height: 100px;}
.chatBoxSendBtn{float: right;margin: 12px 4px 0 0;} .chatBoxSendBtn{float: right;margin: 12px 4px 0 0;}
.footContact{text-align: center;} .footContact{text-align: center;}
.footContact a{font-size: 12px;color: #999;text-decoration: none;} .footContact a{font-size: 12px;color: #999;text-decoration: none;}
@ -448,3 +455,37 @@ a{color: #07a9fe;text-decoration: none;}
} }
.iconBtnsBox .kefuSendBtn{margin-right: 4px;float: right;} .iconBtnsBox .kefuSendBtn{margin-right: 4px;float: right;}
.clear{clear:both;} .clear{clear:both;}
.chatEntTitle {
padding: 0 5px;
width: 100%;
z-index: 9;
margin: 0 auto;
height: 50px;
line-height: 50px;
overflow: hidden;
font-size: 14px;
color: #fff;
overflow: hidden;
background-color: rgb(11 113 236);
align-items: center;
justify-content: left;
display: flex;
}
.chatEntTitleLogo{
margin-right: 5px;
}
@media screen and (min-width: 900px) {
.chatCenter {
border-top: none;
border-bottom: none;
border-radius: 8px;
height: 94% !important;
position: absolute;
top: 18px;
left: 50%;
margin-left: -450px;
max-width: 900px;
}
}

BIN
static/images/avator.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 70 KiB

26
static/templates/chat_page.html
Unescape View File

@ -16,32 +16,16 @@
<link rel="stylesheet" href="/static/css/common.css?v=1.0.0" /> <link rel="stylesheet" href="/static/css/common.css?v=1.0.0" />
<link rel="stylesheet" href="/static/css/icono.min.css" /> <link rel="stylesheet" href="/static/css/icono.min.css" />
</head> </head>
<body> <body class="visitorBody">
<div id="app" class="chatCenter"> <div id="app" class="chatCenter">
<template> <template>
<!--客服代码--> <!--客服代码-->
<div class="chatEntTitle">
<el-avatar class="chatEntTitleLogo" :size="35" src="/static/images/avator.jpg"></el-avatar>
<span>在线客服咨询</span>
</div>
<div class="chatContext chatVisitorPage"> <div class="chatContext chatVisitorPage">
<div class="chatBox"> <div class="chatBox">
<el-alert
style="margin:10px 0px;width: 100%"
:title="chatTitle"
:closable="false"
type="success">
</el-alert>
<el-row :gutter="2" v-show="replys.length>0">
<el-col :span="3"><el-avatar shape="square" :size="36" :src="noticeAvatar"></el-avatar></el-col>
<el-col :span="21">
<div class="chatUser"><{noticeName}></div>
<div class="chatContent visitorReply" >
<div v-for="reply in replys">
<div class="visitorReplyTitle"><{reply.group_name}></div>
<div v-on:click="sendReply(item.item_name)" class="visitorReplyContent" v-for="item in reply.items"><{item.item_name}></div>
</div>
</div>
</el-col>
<div class="clear"></div>
</el-row>
<el-row :gutter="2" v-for="v in msgList" v-bind:class="{'chatBoxMe': v.is_kefu==true}"> <el-row :gutter="2" v-for="v in msgList" v-bind:class="{'chatBoxMe': v.is_kefu==true}">
<div class="chatTime" v-bind:class="{'chatTimeHide': v.show_time==false}"><span><{v.time}></span></div> <div class="chatTime" v-bind:class="{'chatTimeHide': v.show_time==false}"><span><{v.time}></span></div>
<el-col :span="3"><el-avatar shape="square" :size="36" :src="v.avator"></el-avatar></el-col> <el-col :span="3"><el-avatar shape="square" :size="36" :src="v.avator"></el-avatar></el-col>

Write Preview
Loading…
Cancel
Save