页脚

src/layouts/footer/index.vue

@@ -1,56 +1,113 @@
 <template>
-    <div class="footer">
-        <div class="info" v-if="isIndex">
-            <span class="m-r-20">客服邮箱：service@huorantech.cn</span>
+  <div :class="['footer', {isIndex}]">
+    <template v-if="isIndex">
+      <div class="info">
+        <div class="texts">
+          <a class="logo">深圳或然科技</a>
+          <p style="margin-bottom: 5px">
+            <span>公司电话：0755-28109829</span>
+            <span>合作咨询：孙经理 18565785395</span>
+          </p>
+          <p>
+            <span>地址：深圳市宝安区创业二路华联城市全景1栋G座403室</span>
+            <span>客户建议：service@huorantech.cn</span>
+          </p>
         </div>
-        <div class="copyright">
-            <span v-if="isIndex">© Copyright 2021 Occupation Lab 职站</span>
-            <a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">粤ICP备20072679号</a>
+        <div class="qrcode">
+          <img src="@/assets/img/about/qrcode.png" alt="">
+          <p class="text">扫一扫，关注公众号</p>
         </div>
+      </div>
+    </template>
+    <div class="copyright">
+      <!-- <span>© Copyright 2021 Occupation Lab 职站</span> -->
+      <a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">粤ICP备20072679号</a>
     </div>
+  </div>
 </template>
 <script>
-import Setting from "@/setting";
 export default {
-    data() {
-        return {
-            isIndex: this.$route.path !== '/login' && Setting.whiteList.some(e => e === this.$route.path) // 官网3个页面才能显示邮箱和版权号
-        };
-    },
-    mounted(){
-        
-    },
-    methods: {
-        
-    },
+  data() {
+      return {
+        isIndex: this.$route.path !== '/about'
+      };
+  },
+  watch: {
+    '$route'() {
+      this.isIndex = this.$route.path !== '/about'
+    }
+  },
+  mounted(){
+      
+  },
+  methods: {
+      
+  },
 };
 </script>
 <style lang="scss" scoped>
-    .footer{
-        padding: 17px 0 9px;
-        text-align: center;
-        background-color: #0F1D2E;
-        .info{
-            margin-bottom: 7px;
-            font-size: 14px;
-            line-height: 20px;
-            color: #D7DFE7;
-        }
-        .copyright{
-            font-size: 12px;
-            text-align: center;
-            line-height: 17px;
-            span{
-                margin-right: 20px;
-                color: #757F8A;
-            }
-            a{
-                color:#757F8A;
-                font-size: 12px;
-                &:hover{
-                    color: #c7c7c7;
-                }
-            }
-        }
+.footer{
+  padding: 17px 0 9px;
+  background-color: #0F1D2E;
+  &.isIndex {
+    padding-top: 30px;
+  }
+  .logo {
+    display: inline-block;
+    padding-bottom: 10px;
+    margin-bottom: 10px;
+    font-size: 20px;
+    font-weight: bold;
+    color: #757F8A;
+    border-bottom: 1px solid rgba(117, 127, 138, 0.4);
+  }
+  .info{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding-bottom: 10px;
+    margin-bottom: 10px;
+    font-size: 14px;
+    line-height: 20px;
+    color: #D7DFE7;
+    border-bottom: 1px solid #2a2a2a;
+  }
+  .texts {
+    margin-right: 150px;
+    p {
+      display: flex;
+    }
+    span {
+      font-size: 12px;
+      color: #757F8A;
+      &:first-child {
+        width: 350px;
+      }
+    }
+  }
+  .qrcode {
+    text-align: center;
+    .text {
+      margin-top: 10px;
+      font-size: 12px;
+      color: #757F8A;
+    }
+  }
+  .copyright{
+    font-size: 12px;
+    text-align: center;
+    line-height: 17px;
+    span{
+      margin-right: 20px;
+      color: #757F8A;
+    }
+    a{
+      color:#757F8A;
+      font-size: 12px;
+      &:hover{
+        color: #c7c7c7;
+      }
     }
+  }
+}
 </style>

src/setting.js

@@ -46,7 +46,7 @@ const Setting = {
     /**
      * 路由白名单
      * */
-    whiteList: ['/login', '/index/list', '/cityPartner/list', '/devPlatform/list'],
+    whiteList: ['/index/list', '/cityPartner/list', '/devPlatform/list'],
     /**
      * 平台列表
      * */