update1

components/common/onlineInformationBtn.vue

@@ -1,9 +1,10 @@
 <template>
-  <span class="zxzx-btn" @click="btnClick">在线咨询</span>
+  <a class="zxzx-btn" :href="linkForKefu" target="_blank">在线咨询</a>
 
 </template>
 
 <script>
+import {linkForKefu} from "~/defaultConfig"
 export default {
   name: "onlineInformation",
   props: {
@@ -12,6 +13,11 @@ export default {
       default: '1'
     }
   },
+  data() {
+    return {
+      linkForKefu
+    }
+  },
   methods: {
     btnClick() {
       this.$router.push({name: 'courseware'});

components/sidebar.vue

@@ -1,101 +1,175 @@
 <template>
   <div class="client-sidebar mta-hidden-xs">
-      <ul>
-          <li><a class="sidebar-default-box"><i></i><p>在线资讯</p></a></li>
-          <li>
-            <div class="sidebar-default-box"><i @click="backTop"></i><p>电话资讯</p></div>
-            <div class="sidebar-hover-box">
-              <span>服务热线</span><h4>400-099-0883</h4>
-            </div>
-          </li>
-          <li><div class="sidebar-default-box"><i></i><p>客户经理</p></div>
-            <div class="sidebar-hover-box">
-              <img :src="img1">
-            </div>
-          </li>
-          <li  v-if="btnFlag"><i @click="backTop"></i><p>置顶</p></li>
-      </ul>
+    <ul>
+      <li><a class="sidebar-default-box" :href="linkForKefu" target="_blank"><i></i>
+        <p>在线资讯</p></a></li>
+      <li>
+        <div class="sidebar-default-box"><i></i>
+          <p>电话资讯</p></div>
+        <div class="sidebar-hover-box">
+          <span>服务热线</span><h4>400-099-0883</h4>
+        </div>
+      </li>
+      <li>
+        <div class="sidebar-default-box"><i></i>
+          <p>客户经理</p></div>
+        <div class="sidebar-hover-box">
+          <img :src="img1">
+        </div>
+      </li>
+      <li v-if="btnFlag"><i @click="backTop"></i>
+        <p>置顶</p></li>
+    </ul>
   </div>
 </template>
 
 <script>
-    export default {
-        name: 'mtaSidebar',
-      // vue的两个生命钩子，这里不多解释。
-      // window对象，所有浏览器都支持window对象。它表示浏览器窗口，监听滚动事件
-      mounted () {
-        window.addEventListener('scroll', this.scrollToTop)
-      },
-      destroyed () {
-        window.removeEventListener('scroll', this.scrollToTop)
-      },
-      data(){
-        return {
-          btnFlag:false,
-          img1: require('static/codeImage/code-jingli.png')
-        }
-      },
-      methods: {
-        // 点击图片回到顶部方法，加计时器是为了过渡顺滑
-        backTop() {
-          const that = this
-          let timer = setInterval(() => {
-            let ispeed = Math.floor(-that.scrollTop / 5)
-            document.documentElement.scrollTop = document.body.scrollTop = that.scrollTop + ispeed
-            if (that.scrollTop === 0) {
-              clearInterval(timer)
-            }
-          }, 16)
-        },
-
-        // 为了计算距离顶部的高度，当高度大于60显示回顶部图标，小于60则隐藏
-        scrollToTop() {
-          const that = this
-          let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
-          that.scrollTop = scrollTop
-          if (that.scrollTop > 60) {
-            that.btnFlag = true
-          } else {
-            that.btnFlag = false
-          }
+import {linkForKefu} from "~/defaultConfig"
+
+export default {
+  name: 'mtaSidebar',
+  // vue的两个生命钩子，这里不多解释。
+  // window对象，所有浏览器都支持window对象。它表示浏览器窗口，监听滚动事件
+  mounted() {
+    window.addEventListener('scroll', this.scrollToTop)
+  },
+  destroyed() {
+    window.removeEventListener('scroll', this.scrollToTop)
+  },
+  data() {
+    return {
+      btnFlag: false,
+      img1: require('static/codeImage/code-jingli.png'),
+      linkForKefu
+    }
+  },
+  methods: {
+    // 点击图片回到顶部方法，加计时器是为了过渡顺滑
+    backTop() {
+      const that = this
+      let timer = setInterval(() => {
+        let ispeed = Math.floor(-that.scrollTop / 5)
+        document.documentElement.scrollTop = document.body.scrollTop = that.scrollTop + ispeed
+        if (that.scrollTop === 0) {
+          clearInterval(timer)
         }
+      }, 16)
+    },
+
+    // 为了计算距离顶部的高度，当高度大于60显示回顶部图标，小于60则隐藏
+    scrollToTop() {
+      const that = this
+      let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
+      that.scrollTop = scrollTop
+      if (that.scrollTop > 60) {
+        that.btnFlag = true
+      } else {
+        that.btnFlag = false
       }
-      };
+    }
+  }
+};
 </script>
 
 <style lang="scss" scoped>
-.client-sidebar{
+.client-sidebar {
   //display: none;
-    position: fixed;
-    z-index: 100;
-    top: 300px;
-    right: 0;
-    li{
-      width: 94px;height: 102px;position: relative;
-      i{width: 45px;height: 40px;display: block;margin: 16px auto;background-position: center;background-size: contain;background-repeat: no-repeat}
-      p{font-size:18px;color: #00b96b;text-align: center;}
-      .sidebar-default-box{border: 1px solid #eee;box-sizing: border-box;background: #fff;z-index: 2;background: #fff;position: absolute;top:0;left: 0;right: 0;bottom: 0;}
-      .sidebar-hover-box{
-        width: 220px;height: 102px;display: block;padding: 24px;border: 1px solid #eee;transition: all 0.5s;
-        position: absolute;right: -150px;background: #fff;top: 0;box-sizing: border-box;z-index: 1;
-        span{font-size:16px;display: block;color: #1f1f1f;margin-bottom: 10px}
-        h4{font-size:18px;color: #00b96b;font-weight: bold;}
-
-        img {
-          height: 50px;
-          width: auto;
-        }
-      }
+  position: fixed;
+  z-index: 100;
+  top: 200px;
+  right: 0;
+
+  li {
+    width: 94px;
+    height: 102px;
+    position: relative;
+
+    i {
+      width: 45px;
+      height: 40px;
+      display: block;
+      margin: 16px auto;
+      background-position: center;
+      background-size: contain;
+      background-repeat: no-repeat
+    }
+
+    p {
+      font-size: 18px;
+      color: #00b96b;
+      text-align: center;
     }
-    li:hover{
-      .sidebar-default-box{}
-      .sidebar-hover-box{
-        right: 92px;
+
+    .sidebar-default-box {
+      border: 1px solid #eee;
+      box-sizing: border-box;
+      background: #fff;
+      z-index: 2;
+      background: #fff;
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+    }
+
+    .sidebar-hover-box {
+      width: 220px;
+      height: 102px;
+      display: block;
+      padding: 24px;
+      border: 1px solid #eee;
+      transition: all 0.5s;
+      position: absolute;
+      right: -150px;
+      background: #fff;
+      top: 0;
+      box-sizing: border-box;
+      z-index: 1;
+
+      span {
+        font-size: 16px;
+        display: block;
+        color: #1f1f1f;
+        margin-bottom: 10px
+      }
+
+      h4 {
+        font-size: 18px;
+        color: #00b96b;
+        font-weight: bold;
       }
+
+      img {
+        height: 50px;
+        width: auto;
+      }
+    }
+  }
+
+  li:hover {
+    .sidebar-default-box {
     }
-    li:nth-child(1) i{background-image: url("~static/gangweiIcon/z142.png");}
-    li:nth-child(2) i{background-image: url("~static/gangweiIcon/z143.png");}
-    li:nth-child(3) i{background-image: url("~static/gangweiIcon/z145.png");}
-    li:nth-child(4) i{background-image: url("~static/gangweiIcon/z144.png");}
+
+    .sidebar-hover-box {
+      right: 92px;
+    }
+  }
+
+  li:nth-child(1) i {
+    background-image: url("~static/gangweiIcon/z142.png");
+  }
+
+  li:nth-child(2) i {
+    background-image: url("~static/gangweiIcon/z143.png");
+  }
+
+  li:nth-child(3) i {
+    background-image: url("~static/gangweiIcon/z145.png");
+  }
+
+  li:nth-child(4) i {
+    background-image: url("~static/gangweiIcon/z144.png");
+  }
 }
 </style>

defaultConfig.js

@@ -155,10 +155,11 @@ const chanpinyunying = [
   {text: '团队管理', icon: require(`~/static/gangweiIcon/z59.png`)},
 ]
 
-/**
- * 申请方案
- * @page 首页 课程定制 课程资源
- */
+
+// 资讯链接
+const linkForKefu = 'https://p.qiao.baidu.com/cps/chat?siteId=17930048&userId=40179606&siteToken=e767a987c8404575246ab0084fb2c9bd';
+
+
 
 export {
   BannerImgs,
@@ -171,5 +172,6 @@ export {
   shengchancaigou,
   kechengdingzhi,
   shichangyingxiao_xiaoshou,
-  shichangyingxiao_shichang
+  shichangyingxiao_shichang,
+  linkForKefu
 }