Add online service

pages/index.vue

@@ -13,7 +13,7 @@
         <div class="cs-title"><img src="~/assets/images/24h.png">在线客服</div>
         <div class="cs-enTitle">
           <span>Customer Service</span>
-          <img src="~/assets/images/arrow.png">
+          <img src="~/assets/images/arrow_right.png">
         </div>
         <div class="cs-content">7*24小时专线服务 贴心至上</div>
       </div>
@@ -51,7 +51,8 @@
             <div class="csMask-text">
               客服不会主动给会员卡号引导会员存款，如果客服主动要求将资金转入某张银行卡，<span>请勿进行资金交易</span>，否则引发的不到账等情况，概不负责。
             </div>
-            <div class="csMask-btn">我已了解</div>
+
+            <div class="csMask-btn"><nuxt-link to="service">我已了解</nuxt-link></div>
           </div>
         </div>
       </div>
@@ -269,11 +270,14 @@ export default {
 .csMask-btn {
   background: linear-gradient(to right, #62b3ff 0%, #3d72fa, #3d72fa);
   border-radius: 1.5rem;
-  color: #fff;
   text-align: center;
   padding: 0.7rem 0;
 }
 
+.csMask-btn a {
+  color: white;
+}
+
 .q1Mask-header {
   height: 3rem;
   position: fixed;

pages/service.vue

+<template>
+  <div class="container">
+    <div class="header">
+      <img src="~/assets/images/arrow_left.png" @click="$router.go(-1)">
+      在线客服
+    </div>
+    <div class="iframe">
+      <iframe :src="serviceLink" frameborder="0"></iframe>
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ServicePage',
+  data() {
+    return {
+      serviceLink: 'https://chatweb.3dd31.com/chat/text/chat_1IZwcZ.html?skill=2c9483b57e086c2b017e1a538e8b3843&amp;l=zh'
+    }
+  },
+}
+</script>
+
+<style>
+.container {
+  height: 100vh;
+}
+
+.header {
+  background-color: white;
+  color: #414655;
+  height: 3rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 1.2rem;
+}
+
+.header img {
+  position: absolute;
+  left: 1.5rem;
+  height: 1rem;
+}
+
+.iframe {
+  height: calc(100vh - 3rem);
+  width: 100%;
+}
+
+.iframe iframe {
+  height: 100%;
+  width: 100%;
+}
+</style>