wangshusheng / YOHOBUYPC · Commits

Go to a project

Authored by ccbikai
Commit 35f01108cdd5dce802c95ddd70f94350ba315531 1 parent fc233e4f

在线客服样式 JS

Inline Side-by-side
Showing 7 changed files with 65 additions and 23 deletions
... ... @@ -7,4 +7,5 @@
require('./order');
require('./fav');
require('./index');
require('./coupons');
\ No newline at end of file
require('./coupons');
require('./online-service');
\ No newline at end of file
... ...
/**
* 在线客服
* @author: bikai<kai.bi@yoho.cn>
* @date: 2015/11/16
*/
var $ = require('jquery');
var $questionTab = $('.question-tab .tab-item');
$questionTab.on('touchend', function(){
var clickTab = $(this).data('tab');
clickTab = '[data-tab-name="' + clickTab + '"]';
$questionTab.removeClass('current');
$(this).addClass('current');
$('.question-list').removeClass('current');
$(clickTab).addClass('current');
});
... ...
@import "home", "vip-grade", "order", "coupons", "personal-details", "yoho-coin", "recommend-for-you", "fav", "suggest", "address";
\ No newline at end of file
@import "home", "vip-grade", "order", "coupons", "personal-details", "yoho-coin", "recommend-for-you", "fav", "suggest", "address", "online-service";
\ No newline at end of file
... ...
... ... @@ -2,7 +2,9 @@
@return $n / 40 * 1rem;
}
.online-service-detail-page{
.online-service-page{
background: #f0f0f0;
.question {
background: #fff;
}
... ... @@ -20,11 +22,14 @@
line-height: rem(58);
text-align: center;
color: #b0b0b0;
.current {
color: #444;
}
.line {
padding: 0 rem(32);
margin: 0 rem(32);
border-left: 1px solid #b0b0b0;
}
}
... ... @@ -32,24 +37,29 @@
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;
}
... ... @@ -63,14 +73,16 @@
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;
.icon-yoho-enter {
color: #ccc;
float: right;
}
.connect-item {
position: relative;
... ... @@ -94,15 +106,9 @@
}
}
}
.icon-chat {
@include retina-sprite($customerIcons, chat);
}
.icon-tel {
@include retina-sprite($customerIcons, tel);
}
.icon {
display: inline-block;
margin-right: rem(14);
margin-right: rem(28);
margin-left: rem(-70);
vertical-align:middle;
}
... ... @@ -110,12 +116,14 @@
}
.online-service-detail-page {
background: #f0f0f0;
.qa-list {
background: #f0f0f0;
.question-item {
margin-bottom: rem(32);
border-top: 1px solid #c8c7cc;
border-bottom: 1px solid #c8c7cc;
color: #444;
background: #fff;
&:last-child {
margin-bottom: 0;
... ...
{{> layout/header}}
<div class="online-service-page yoho-page">
{{# service}}
<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="line"></span>
<span class="tab-item current" data-tab="shopping">购物问题</span>
<span class="line">|</span>
<span class="line"></span>
<span class="tab-item" data-tab="other">其他问题</span>
</div>
{{#question}}
... ... @@ -15,24 +16,25 @@
<li class="question-item">
<a href="{{link}}" title="{{title}}">
{{title}}
<span class="iconfont icon-yoho-enter"></span>
<span class="iconfont icon-yoho-enter">&#xe604;</span>
</a>
</li>
{{/list}}
</ul>
{{/question}}
</div>
{{/ service}}
<div class="connect-info">
<div class="connect-item connect-online">
<a href="#" title="在线客服">
<span class="icon icon-chat"></span>
<span class="icon iconfont icon-chat">&#xe620;</span>
在线客服
<span class="iconfont icon-yoho-enter"></span>
<span class="iconfont icon-yoho-enter">&#xe604;</span>
</a>
</div>
<div class="connect-item connect-tel">
<a href="tel:400-889-9649" title="电话客服">
<span class="icon icon-tel"></span>
<span class="icon iconfont icon-tel">&#xe620;</span>
电话客服
<p>
400-889-9649 &nbsp;&nbsp; 09:00 - 22:30 &nbsp; (周一至周日)
... ...
... ... @@ -212,16 +212,19 @@
seajs.use('js/me/order');
</script>
{{/if}}
{{!-- 个人中心: 商品收藏&品牌收藏 --}}
{{#if favPage}}
<script>
seajs.use('js/me/fav');
</script>
{{/if}}
{{#if couponsPage}}
<script>
seajs.use('js/me/coupons');
</script>
{{/if}}
{{#if onlineServicePage}}
<script>
seajs.use('js/me/online-service');
</script>
{{/if}}
\ No newline at end of file
... ...
... ... @@ -243,8 +243,17 @@ class HomeController extends AbstractAction
//在线客服
public function onlineServiceAction()
{
// 设置网站标题
$this->setTitle('在线客服');
$this->setNavHeader('在线客服', true, SITE_MAIN);
$service = home\OnlineModel::getOnlineServiceInfo();
$this->_view->display('online_service', $service);
$this->_view->display('online_service', array(
'onlineServicePage' => true,
// 'pageFooter' => true,
'service' => $service
));
}
//在线客服-具体详情
... ...