fe / yohobuywap-node · Commits

Go to a project

Authored by zzzzzzz
Commit 867a001567b901c6c8b09c62ad588a9ed2287f73 1 parent 79678ac8

评价完成50%

Inline Side-by-side
Showing 6 changed files with 232 additions and 78 deletions
... ... @@ -4,20 +4,41 @@
<div class=""></div>
<div></div>
</header>
<!--网络连接失败-->
<div class="connection-failed">
网络连接失败，请稍后再试
</div>
<!--im 主体-->
<div id="chat-window">
<!--时间-->
<div class="chat-time">
2016.09.08 11:33
</div>
<!--客服不在线留言提示-->
<div class="leave-msg-wraper">
<span class="leave-msg">您可以选择<a href="#">留言</a>，客服会以短信形式回复您</span>
</div>
<!--切换客服提示-->
<div class="change-mm">
<span class="leave-msg">智障小HO正在为您服务</span>
</div>
<!--接受消息-->
<div class="msg-wrap recevied-msg">
<img src="" alt="" class="head-icon">
<div class="chat-info">
<i class="arrow"></i>
<span>Hellow!</span>
</div>
</div>
<!--发送消息-->
<div class="msg-wrap send-msg">
<img src="" alt="" class="head-icon">
<div class="chat-info">
<i class="arrow"></i>
<span>what the fuck?a ha? what the fuck?</span>
<i class="send-fail">!</i>
<span>what the fuck?a ha? what the fuck?</span>
</div>
</div>
</div>
... ... @@ -35,4 +56,18 @@
</span>
</div>
</footer>
<div></div>
\ No newline at end of file
<!--评价 主体-->
<div class="comment">
<div class="comment-inner">
<div class="intro">请对我们的服务做出评价<span>X</span></div>
<div class="stars">
<i class="rated"></i>
<i></i>
<i></i>
<i></i>
<i></i>
</div>
</div>
</div>
\ No newline at end of file
... ...
... ... @@ -47,78 +47,4 @@
height: 100px;
background-color: #f7f7f7;
}
/* 聊天气泡 */
.head-icon {
height: 90px;
width: 90px;
background: green;
border-radius: 50%;
}
.chat-info {
position: relative;
overflow: hidden;
span {
display: inline-block;
padding: 25px 35px;
font-size: 28px;
word-break: break-all;
border-radius: 10px;
}
.arrow {
position: absolute;
display: inline-block;
width: 0;
height: 0;
font-size: 0;
border: 10px solid;
border-radius: 2px;
}
}
.msg-wrap {
overflow: hidden;
margin-bottom: 30px;
}
.send-msg {
text-align: right;
span {
margin: 0 12px 0 0;
background: #fff;
color: #444;
}
.head-icon {
float: right;
}
.arrow {
top: 0;
right: 0;
border-color: #fff transparent transparent #fff;
}
}
.recevied-msg {
.head-icon {
float: left;
}
span {
margin: 0 0 0 12px;
background: #888;
color: #fff;
}
.arrow {
top: 0;
left: 0;
border-color: #888 #888 transparent transparent;
}
}
}
... ...
.service-chat {
/* 聊天气泡 */
.head-icon {
height: 90px;
width: 90px;
background: green;
border-radius: 50%;
}
.chat-info {
position: relative;
overflow: hidden;
span {
display: inline-block;
padding: 25px 35px;
font-size: 28px;
word-break: break-all;
border-radius: 10px;
}
}
.msg-wrap {
overflow: hidden;
margin-bottom: 30px;
}
.send-msg {
text-align: right;
span {
margin: 0 12px 0 0;
background: #fff;
color: #444;
max-width: 90%;
&:after {
content: "";
position: absolute;
display: inline-block;
width: 0;
height: 0;
font-size: 0;
border: 10px solid;
border-radius: 2px;
top: 0;
right: 0;
border-color: #fff transparent transparent #fff;
}
}
.head-icon {
float: right;
}
.send-fail {
display: inline-block;
height: 30px;
width: 30px;
font-size: 28px;
line-height: 30px;
text-align: center;
border-radius: 50%;
background: #ff575c;
color: #fff;
}
}
.recevied-msg {
.head-icon {
float: left;
}
span {
margin: 0 0 0 10px;
background: #888;
color: #fff;
&:before {
content: "";
position: absolute;
display: inline-block;
width: 0;
height: 0;
font-size: 0;
border: 10px solid;
border-radius: 2px;
top: 0;
left: 0;
border-color: #888 #888 transparent transparent;
}
}
}
/* 网络连接失败 */
.connection-failed {
position: absolute;
top: 85px;
left: 0;
text-align: center;
height: 70px;
width: 100%;
line-height: 70px;
color: #fff;
background: rgba(255, 0, 0, 0.5);
z-index: 1;
}
/* 时间 */
.chat-time {
text-align: center;
font-size: 24px;
color: #b0b0b0;
margin-bottom: 20px;
}
/* 客服留言 */
.leave-msg-wraper,
.change-mm {
text-align: center;
margin-bottom: 20px;
}
.leave-msg {
display: inline-block;
padding: 15px 35px;
background: rgba(0, 0, 0, 0.2);
border-radius: 5px;
color: #fff;
font-size: 24px;
overflow: hidden;
a {
color: #4a90e2;
}
}
}
... ...
.service-chat {
/* 评价 */
.comment {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba(0, 0, 0, 0.5);
&-inner {
position: absolute;
bottom: 0;
height: 586px;
width: 100%;
background: #fff;
.intro {
height: 90px;
text-align: center;
color: #444;
font-size: 32px;
line-height: 90px;
padding: 0 30px;
border-bottom: 1px solid #e0e0e0;
span {
float: right;
}
}
.stars {
padding-top: 60px;
text-align: center;
i {
display: inline-block;
height: 53px;
width: 53px;
margin-left: 40px;
background: resolve("service/chat/star-trans.png");
background-size: 100% 100%;
}
i:nth-child(1) {
margin: 0;
}
i.rated {
background: resolve("service/chat/star-yellow.png");
background-size: 100% 100%;
}
}
}
}
}
... ...