在线客服页面

+@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;
+        }
+    }
+}

 {{> layout/header}}
 {{> layout/header}}
 <div class="online-service-page yoho-page">
 <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>
 </div>
 {{> layout/footer}}
 {{> layout/footer}}

+{{> 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}}