wangshusheng / YOHOBUYPC · Commits

Go to a project

Authored by ccbikai
Commit c4c67339765d0780fc4983e06de0711768e275c9 1 parent 1e24e50c

在线客服页面

Inline Side-by-side
Showing 3 changed files with 200 additions and 17 deletions
@function rem($n) {
@return $n / 40 * 1rem;
}
.online-service-detail-page{
.question {
background: #fff;
}
.question-title {
padding: rem(20) rem(30);
font-size: rem(28);
line-height: 1;
color: #b0b0b0;
}
.question-tab {
padding: rem(10) rem(30) rem(30);
font-size: rem(32);
line-height: rem(58);
text-align: center;
color: #b0b0b0;
.current {
color: #444;
}
.line {
padding: 0 rem(32);
}
}
.question-list {
display: none;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
&.current {
display: block;
}
li {
margin-left: rem(30);
width: rem(610);
font-size: rem(28);
line-height: rem(90);
border-bottom: 1px solid #ccc;
a {
display: block;
color: #444;
}
.iconfont {
float: right;
margin-right: rem(30);
color: #ccc;
}
&:last-child {
border-bottom: none;
}
}
}
.connect-info {
margin-top: 30px;
font-size: rem(28);
line-height: rem(50);
background: #fff;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
p {
margin-top: rem(25);
margin-left: rem(-72);
line-height: 1.5;
}
.iconfont {
float: right;
color: #ccc;
}
.connect-item {
position: relative;
a {
display: block;
padding: rem(20) rem(30) rem(20) rem(94);
color: #444;
}
&:after {
content: '';
position: absolute;
right: 0;
bottom: 0;
width: rem(548);
height: 1px;
background: #ccc;
}
&:last-child {
&:after {
content: none;
}
}
}
.icon-chat {
@include retina-sprite($customerIcons, chat);
}
.icon-tel {
@include retina-sprite($customerIcons, tel);
}
.icon {
display: inline-block;
margin-right: rem(14);
margin-left: rem(-70);
vertical-align:middle;
}
}
}
.online-service-detail-page {
.qa-list {
background: #f0f0f0;
.question-item {
margin-bottom: rem(32);
border-top: 1px solid #c8c7cc;
border-bottom: 1px solid #c8c7cc;
background: #fff;
&:last-child {
margin-bottom: 0;
}
}
%qa {
margin-left: rem(30);
padding: 0 rem(40) 0 rem(10);
font-size: rem(30);
line-height: rem(76);
font-weight: bold;
}
.question {
@extend %qa;
position: relative;
&:after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
border-top: 1px solid #c8c7cc;
}
}
.answer {
@extend %qa;
}
}
}
\ No newline at end of file
... ...
{{> layout/header}}
<div class="online-service-page yoho-page">
<form class="question-search">
</form>
<ul class="question-list">
<li class="question-item">
问题问
<span class="iconfont">&#xe604;</span>
</li>
<li class="question-item">
问题问
<span class="iconfont">&#xe604;</span>
</li>
<li class="question-item">
问题问
<span class="iconfont">&#xe604;</span>
</li>
</ul>
<div class="question">
<div class="question-title">问题查询</div>
<div class="question-tab">
<span class="tab-item" data-tab="order">订单问题</span>
<span class="line">|</span>
<span class="tab-item current" data-tab="shopping">购物问题</span>
<span class="line">|</span>
<span class="tab-item" data-tab="other">其他问题</span>
</div>
{{#question}}
<ul class="question-list {{#current}}current{{/current}}" data-tab-name="{{name}}">
{{#list}}
<li class="question-item">
<a href="{{link}}" title="{{title}}">
{{title}}
<span class="iconfont icon-yoho-enter"></span>
</a>
</li>
{{/list}}
</ul>
{{/question}}
</div>
<div class="connect-info">
<div class="connect-item connect-online">
<a href="#" title="在线客服">
<span class="icon icon-chat"></span>
在线客服
<span class="iconfont icon-yoho-enter"></span>
</a>
</div>
<div class="connect-item connect-tel">
<a href="tel:400-889-9649" title="电话客服">
<span class="icon icon-tel"></span>
电话客服
<p>
400-889-9649 &nbsp;&nbsp; 09:00 - 22:30 &nbsp; (周一至周日)
</p>
</a>
</div>
</div>
</div>
{{> layout/footer}}
\ No newline at end of file
... ...
{{> layout/header}}
<div class="online-service-detail-page yoho-page">
<div class="qa-list">
{{# list}}
<div class="question-item">
<div class="question">Q：{{q}}</div>
<div class="answer">{{a}}</div>
</div>
{{/ list}}
</div>
</div>
{{> layout/footer}}
\ No newline at end of file
... ...