在线客服样式 JS

@@ -7,4 +7,5 @@
 require('./order');
 require('./order');
 require('./fav');
 require('./fav');
 require('./index');
 require('./index');
-require('./coupons');
+require('./coupons');
+require('./online-service');

+/**
+ * 在线客服
+ * @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";
+@import "home", "vip-grade", "order", "coupons", "personal-details", "yoho-coin", "recommend-for-you", "fav", "suggest", "address", "online-service";

@@ -2,7 +2,9 @@
     @return $n / 40 * 1rem;
     @return $n / 40 * 1rem;
 }
 }
 
 
-.online-service-detail-page{
+.online-service-page{
+    background: #f0f0f0;
+
     .question {
     .question {
         background: #fff;
         background: #fff;
     }
     }
@@ -20,11 +22,14 @@
         line-height: rem(58);
         line-height: rem(58);
         text-align: center;
         text-align: center;
         color: #b0b0b0;
         color: #b0b0b0;
+
         .current {
         .current {
             color: #444;
             color: #444;
         }
         }
+
         .line {
         .line {
-            padding: 0 rem(32);
+            margin: 0 rem(32);
+            border-left: 1px solid #b0b0b0;
         }
         }
     }
     }
 
 
@@ -32,24 +37,29 @@
         display: none;
         display: none;
         border-top: 1px solid #ccc;
         border-top: 1px solid #ccc;
         border-bottom: 1px solid #ccc;
         border-bottom: 1px solid #ccc;
+
         &.current {
         &.current {
             display: block;
             display: block;
         }
         }
+
         li {
         li {
             margin-left: rem(30);
             margin-left: rem(30);
             width: rem(610);
             width: rem(610);
             font-size: rem(28);
             font-size: rem(28);
             line-height: rem(90);
             line-height: rem(90);
             border-bottom: 1px solid #ccc;
             border-bottom: 1px solid #ccc;
+
             a {
             a {
                 display: block;
                 display: block;
                 color: #444;
                 color: #444;
             }
             }
+
             .iconfont {
             .iconfont {
                 float: right;
                 float: right;
                 margin-right: rem(30);
                 margin-right: rem(30);
                 color: #ccc;
                 color: #ccc;
             }
             }
+
             &:last-child {
             &:last-child {
                 border-bottom: none;
                 border-bottom: none;
             }
             }
@@ -63,14 +73,16 @@
         background: #fff;
         background: #fff;
         border-top: 1px solid #ccc;
         border-top: 1px solid #ccc;
         border-bottom: 1px solid #ccc;
         border-bottom: 1px solid #ccc;
+
         p {
         p {
             margin-top: rem(25);
             margin-top: rem(25);
             margin-left: rem(-72);
             margin-left: rem(-72);
             line-height: 1.5;
             line-height: 1.5;
         }
         }
-        .iconfont {
-            float: right;
+
+        .icon-yoho-enter {
             color: #ccc;
             color: #ccc;
+            float: right;
         }
         }
         .connect-item {
         .connect-item {
             position: relative;
             position: relative;
@@ -94,15 +106,9 @@
                 }
                 }
             }
             }
         }
         }
-        .icon-chat {
-            @include retina-sprite($customerIcons, chat);
-        }
-        .icon-tel {
-            @include retina-sprite($customerIcons, tel);
-        }
         .icon {
         .icon {
             display: inline-block;
             display: inline-block;
-            margin-right: rem(14);
+            margin-right: rem(28);
             margin-left: rem(-70);
             margin-left: rem(-70);
             vertical-align:middle;
             vertical-align:middle;
         }
         }
@@ -110,12 +116,14 @@
 }
 }
 
 
 .online-service-detail-page {
 .online-service-detail-page {
+    background: #f0f0f0;
+
     .qa-list {
     .qa-list {
-        background: #f0f0f0;
         .question-item {
         .question-item {
             margin-bottom: rem(32);
             margin-bottom: rem(32);
             border-top: 1px solid #c8c7cc;
             border-top: 1px solid #c8c7cc;
             border-bottom: 1px solid #c8c7cc;
             border-bottom: 1px solid #c8c7cc;
+            color: #444;
             background: #fff;
             background: #fff;
             &:last-child {
             &:last-child {
                 margin-bottom: 0;
                 margin-bottom: 0;

 {{> layout/header}}
 {{> layout/header}}
 <div class="online-service-page yoho-page">
 <div class="online-service-page yoho-page">
+    {{# service}}
     <div class="question">
     <div class="question">
         <div class="question-title">问题查询</div>
         <div class="question-title">问题查询</div>
         <div class="question-tab">
         <div class="question-tab">
             <span class="tab-item" data-tab="order">订单问题</span>
             <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="tab-item current" data-tab="shopping">购物问题</span>
-            <span class="line">|</span>
+            <span class="line"></span>
             <span class="tab-item" data-tab="other">其他问题</span>
             <span class="tab-item" data-tab="other">其他问题</span>
         </div>
         </div>
         {{#question}}
         {{#question}}
@@ -15,24 +16,25 @@
             <li class="question-item">
             <li class="question-item">
                 <a href="{{link}}" title="{{title}}">
                 <a href="{{link}}" title="{{title}}">
                     {{title}}
                     {{title}}
-                    <span class="iconfont icon-yoho-enter"></span>
+                    <span class="iconfont icon-yoho-enter">&#xe604;</span>
                 </a>
                 </a>
             </li>
             </li>
             {{/list}}
             {{/list}}
         </ul>
         </ul>
         {{/question}}
         {{/question}}
     </div>
     </div>
+    {{/ service}}
     <div class="connect-info">
     <div class="connect-info">
         <div class="connect-item connect-online">
         <div class="connect-item connect-online">
             <a href="#" title="在线客服">
             <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>
             </a>
         </div>
         </div>
         <div class="connect-item connect-tel">
         <div class="connect-item connect-tel">
             <a href="tel:400-889-9649" title="电话客服">
             <a href="tel:400-889-9649" title="电话客服">
-                <span class="icon icon-tel"></span>
+                <span class="icon iconfont icon-tel">&#xe620;</span>
                 电话客服
                 电话客服
                 <p>
                 <p>
                 400-889-9649 &nbsp;&nbsp; 09:00 - 22:30 &nbsp; (周一至周日)
                 400-889-9649 &nbsp;&nbsp; 09:00 - 22:30 &nbsp; (周一至周日)

@@ -212,16 +212,19 @@
     seajs.use('js/me/order');
     seajs.use('js/me/order');
 </script>
 </script>
 {{/if}}
 {{/if}}
-
 {{!-- 个人中心: 商品收藏&品牌收藏 --}}
 {{!-- 个人中心: 商品收藏&品牌收藏 --}}
 {{#if favPage}}
 {{#if favPage}}
 <script>
 <script>
     seajs.use('js/me/fav');
     seajs.use('js/me/fav');
 </script>
 </script>
 {{/if}}
 {{/if}}
-
 {{#if couponsPage}}
 {{#if couponsPage}}
 <script>
 <script>
     seajs.use('js/me/coupons');
     seajs.use('js/me/coupons');
 </script>
 </script>
+{{/if}}
+{{#if onlineServicePage}}
+<script>
+    seajs.use('js/me/online-service');
+</script>
 {{/if}}
 {{/if}}

@@ -243,8 +243,17 @@ class HomeController extends AbstractAction
     //在线客服
     //在线客服
     public function onlineServiceAction()
     public function onlineServiceAction()
     {
     {
+        // 设置网站标题
+        $this->setTitle('在线客服');
+        $this->setNavHeader('在线客服', true, SITE_MAIN);
+
         $service = home\OnlineModel::getOnlineServiceInfo();
         $service = home\OnlineModel::getOnlineServiceInfo();
-        $this->_view->display('online_service', $service);
+
+        $this->_view->display('online_service', array(
+            'onlineServicePage' => true,
+            // 'pageFooter' => true,
+            'service' => $service
+        ));
     }
     }
 
 
     //在线客服-具体详情
     //在线客服-具体详情