导航图标设置

src/api/index.js

@@ -25,6 +25,7 @@ export default {
   columnDisplayFloatingBar: `/iasf/SysFloatingColumnSchemeService/SysFloatingColumnScheme/columnDisplayFloatingBar`,
   showTheFooterAccordingToTheColumn: `/iasf/SysFooterSetupService/SysFooterSetup/showTheFooterAccordingToTheColumn`,
   findLogo: `/iasf/LogoService/Logo/findById`,
+  navList: `/iasf/SysNavigationIconService/SysNavigationIcon/list`,
 
   listMarketing: `/nakadai/nakadai/mall/marketing/promotion/pagingQueryList`,
   courseProduct: `/iasf/productDetails/courseProduct`,

src/components/occuQrcode/index.vue

@@ -1,16 +1,8 @@
 <template>
-  <el-dialog title=""
+  <el-dialog title="" :visible.sync="diaVisible" center :width="$store.getters.getModelType ? '500px' : '100%'"
-             :visible.sync="diaVisible"
+    append-to-body :top="qrcodeTop" lock-scroll custom-class="qrcode-dia">
-             center
-             :width="$store.getters.getModelType ? '500px' : '100%'"
-             append-to-body
-             :top="qrcodeTop"
-             lock-scroll
-             custom-class="qrcode-dia">
     <div class="pic-wrap">
-      <img class="pic"
+      <img class="pic" src="@/assets/images/occupationlab.png" alt="">
-           src="@/assets/images/occupationlab.png"
-           alt="">
     </div>
   </el-dialog>
 </template>
@@ -46,30 +38,35 @@ export default {
 </script>
 <style lang="scss" scoped>
 /deep/.qrcode-dia {
+  background-color: transparent;
+
+  .el-dialog__header,
+  .el-dialog__body {
+    padding: 0;
     background-color: transparent;
-    .el-dialog__header,
+    overflow: hidden;
-    .el-dialog__body {
+  }
-        padding: 0;
+
-        background-color: transparent;
+  .el-dialog__headerbtn .el-dialog__close {
-        overflow: hidden;
+    color: #fff;
-    }
+  }
-    .el-dialog__headerbtn .el-dialog__close {
+
-        color: #fff;
+  .pic-wrap {
-    }
+    display: flex;
-    .pic-wrap {
+    justify-content: center;
-        display: flex;
+    align-items: center;
-        justify-content: center;
+  }
-        align-items: center;
+
-    }
+  .pic {
-    .pic {
+    width: 100%;
-        width: 100%;
+  }
-    }
 }
+
 @media (max-width: 1200px) {
-    /deep/.qrcode-dia {
+  /deep/.qrcode-dia {
-        .pic {
+    .pic {
-            width: 95%;
+      width: 95%;
-        }
     }
+  }
 }
 </style>

src/layouts/header/index.vue

@@ -10,11 +10,22 @@
     <template v-if="$store.getters.getModelType">
       <navbar v-if="navShow" ref="nav" :isHome.sync="isHome" :isEstate.sync="isEstate" :isIasf.sync="isIasf"
         @showMoreBtns="updateBtnsType"></navbar>
+      <!-- 导航最右侧工具栏 -->
       <div class="tools">
-        <div class="login" @click="toLogin">
+        <div v-for="(item, i) in tools" :key="i" class="item" @click="toolClick(item)">
-          <img src="@/assets/images/user.png" alt="">
+          <img v-if="item.icon" :src="item.icon" alt="" class="icon">
-          <span>注册登录</span>
+          <span v-if="item.buttonText" class="text">{{ item.buttonText }}</span>
         </div>
+        <!-- 如果图标超过5个，则显示省略号 -->
+        <el-popover v-if="tools.length > 5" placement="bottom" width="297" trigger="click" popper-class="tool-more">
+          <ul class="more-wrap">
+            <li v-for="(item, i) in tools" :key="i" class="item" @click="toolClick(item)">
+              <img v-if="item.icon" :src="item.icon" alt="" class="icon">
+              <p v-if="item.buttonText" class="text">{{ item.buttonText }}</p>
+            </li>
+          </ul>
+          <i slot="reference" class="el-icon-more cursor-pointer" style="color: #535353"></i>
+        </el-popover>
       </div>
     </template>
     <!-- 手机端 -->
@@ -26,14 +37,18 @@
       </div>
     </div>
 
-    <occuQrcode :visible.sync="qrcodeVisible" />
+    <el-dialog title="" :visible.sync="toolVisible" center :width="$store.getters.getModelType ? '500px' : '100%'"
+      append-to-body :top="qrcodeTop" lock-scroll custom-class="qrcode-dia">
+      <div class="pic-wrap">
+        <img class="pic" :src="toolPic" alt="">
+      </div>
+    </el-dialog>
   </div>
 </template>
 <script>
 import Util from '@/libs/util'
 import { mapMutations } from 'vuex'
 import navbar from '../navbar'
-import occuQrcode from '@/components/occuQrcode'
 export default {
   data () {
     return {
@@ -53,11 +68,14 @@ export default {
         logoUrl: '',
       },
       timer: null,
+      qrcodeTop: '100px',
+      tools: [],
+      toolVisible: false,
+      toolPic: '',
     };
   },
   components: {
     navbar,
-    occuQrcode
   },
   computed: {
     isSfel () {
@@ -83,7 +101,12 @@ export default {
   },
   mounted () {
     this.getLogo()
+    this.getTool()
     this.setKeyword('')
+
+    const height = (window.innerHeight - (this.$store.getters.getModelType ? 758 : 600)) / 2
+    this.qrcodeTop = (height > 0 ? height : 0) + 'px'
+
     window.addEventListener('scroll', this.handleScroll) // 监听页面滚动
     document.body.addEventListener('click', e => {
       e.stopPropagation()
@@ -101,6 +124,13 @@ export default {
         this.logoForm = res.data
       }
     },
+    // 获取导航图标
+    async getTool () {
+      const res = await this.$post(`${this.api.navList}?siteId=${this.site}&isDisable=0`)
+      if (res.data) {
+        this.tools = res.data
+      }
+    },
     toIndex () {
       this.$refs.nav.jump()
     },
@@ -152,6 +182,17 @@ export default {
       location.href = this.$router.resolve(`/column?siteId=${id}`).href
       location.reload()
     },
+    // 图标点击
+    toolClick (item) {
+      // 链接
+      if (item.buttonContent === '0') {
+        item.newTab ? window.open(item.linkAddress) : (location.href = item.linkAddress)
+      } else {
+        // 弹框
+        this.toolPic = item.imagePath
+        this.toolVisible = true
+      }
+    },
     // 注册登录
     toLogin () {
       if (this.GTA) {
@@ -223,16 +264,29 @@ $height: 90px;
   }
 
   .tools {
-    .login {
+    display: flex;
+    align-items: center;
+
+    .item {
       display: inline-flex;
       align-items: center;
+      margin-right: 15px;
       cursor: pointer;
 
+      &:last-child {
+        margin-right: 0;
+      }
+
       &:hover {
         opacity: 0.9;
       }
 
-      span {
+      .icon {
+        max-width: 30px;
+        max-height: 30px;
+      }
+
+      .text {
         margin-left: 5px;
         color: #666;
         font-size: 14px;
@@ -240,6 +294,8 @@ $height: 90px;
     }
   }
 
+
+
   .search {
     margin-right: 43px;
   }
@@ -315,6 +371,40 @@ $height: 90px;
   overflow-y: scroll;
 }
 
+/deep/.qrcode-dia {
+  background-color: transparent;
+  box-shadow: none;
+
+  .el-dialog__header,
+  .el-dialog__body {
+    padding: 0;
+    background-color: transparent;
+    overflow: hidden;
+  }
+
+  .el-dialog__headerbtn .el-dialog__close {
+    color: #fff;
+  }
+
+  .pic-wrap {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .pic {
+    max-width: 100%;
+  }
+}
+
+@media (max-width: 1200px) {
+  /deep/.qrcode-dia {
+    .pic {
+      width: 95%;
+    }
+  }
+}
+
 @media (max-width: 1660px) {
   .header {
     .logo {
@@ -349,3 +439,5 @@ $height: 90px;
   }
 }
 </style>
+<style lang="scss">
+/style>

src/setting.js

@@ -7,7 +7,7 @@ const isGta = url.includes('139.159.254.212'); // 国泰安
 let host = `${location.origin}/`
 if (isDev) {
   host = 'http://192.168.31.217:10000/'
-  host = 'https://huorantech.com'
+  // host = 'https://huorantech.com'
 }
 
 const Setting = {

src/styles/common.scss

@@ -234,3 +234,39 @@
       color: rgba(0, 0, 0, 0.25);
   }
 }
+.tool-more {
+  .more-wrap {
+    display: flex;
+    flex-wrap: wrap;
+
+    .item {
+      display: inline-flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      width: 80px;
+      height: 80px;
+      margin: 5px;
+      border: 1px solid #d9d9d9;
+      border-radius: 8px;
+      cursor: pointer;
+    }
+    &:hover {
+      opacity: 0.9;
+      .text {
+        color: #1583ff;
+      }
+    }
+
+    .icon {
+      max-width: 30px;
+      max-height: 30px;
+    }
+
+    .text {
+      margin-top: 5px;
+      color: #666;
+      font-size: 14px;
+    }
+  }
+}