悬浮栏联调完成

src/api/index.js

@@ -22,8 +22,7 @@ export default {
   oneLevelChecksThemAll: `/iasf/sysColumn/oneLevelChecksThemAll`,
   queryArticlesByColumnType: `/iasf/sysColumn/queryArticlesByColumnType`,
   seoList: `/iasf/seo/list`,
-  listFloating: `/iasf/SysFloatingColumnSchemeService/SysFloatingColumnScheme/floatingBarList`,
-  findFloating: `/iasf/SysFloatingColumnSchemeService/SysFloatingColumnScheme/findById`,
+  columnDisplayFloatingBar: `/iasf/SysFloatingColumnSchemeService/SysFloatingColumnScheme/columnDisplayFloatingBar`,
 
   listMarketing: `/nakadai/nakadai/mall/marketing/promotion/pagingQueryList`,
   // 产品中心

src/layouts/footer/index.vue

@@ -82,6 +82,18 @@
         </div>
       </div>
     </div>
+
+    <div class="tool">
+      <div v-for="(item, i) in floatings" :key="i" class="float">
+        <div class="item" :style="{ backgroundImage: 'url(' + item.pictureAddress + ')' }"></div>
+        <div class="popup">
+          <p v-if="item.schemeTitle" class="tips">{{ item.schemeTitle }}</p>
+          <div v-html="item.schemeContentJson"></div>
+        </div>
+      </div>
+
+      <div class="item topping" @click="topping"></div>
+    </div>
   </div>
 </template>
 <script>
@@ -94,7 +106,8 @@ export default {
       showDefaultPath: ['/home', '/iasf'], // 展示默认页脚的页面
       showContactPath: ['/news', '/sfel', '/talent', '/careers', '/edu', '/news'], // 展示联系我们页脚的页面
       columns: [],
-      modules: []
+      modules: [],
+      floatings: [],
     };
   },
   computed: {
@@ -107,6 +120,7 @@ export default {
   watch: {
     '$route': {
       handler () {
+        this.getFloating()
         if (this.$route.path === '/iasf') {
           this.isIasf = true
           this.getInfo()
@@ -118,6 +132,7 @@ export default {
   },
   mounted () {
     this.getColumn()
+
   },
   methods: {
     // 资讯
@@ -146,6 +161,20 @@ export default {
         }
       }).catch(err => { })
     },
+    // 查询悬浮栏
+    async getFloating () {
+      const { id } = this.$route.query
+      if (id) {
+        const { data } = await this.$post(`${this.api.columnDisplayFloatingBar}?columnId=${id}`)
+        this.floatings = data
+        console.log("🚀 ~ getFloating ~ this.floatings:", this.floatings)
+      }
+    },
+    // 置顶
+    topping () {
+      document.documentElement.scrollTop = 0
+      document.body.scrollTop = 0
+    },
     // 判断是否有添加链接
     isLink (linkName) {
       return linkName !== '无' && linkName !== ''
@@ -389,6 +418,57 @@ export default {
   }
 }
 
+.tool {
+  z-index: 10;
+  position: fixed;
+  bottom: 100px;
+  right: 30px;
+
+  .item {
+    width: 45px;
+    height: 45px;
+    margin-bottom: 10px;
+    border: 1px solid #e5e5e5;
+    cursor: pointer;
+    background-color: #fff;
+    background-position: center center;
+    background-repeat: no-repeat;
+
+    &:hover {
+      border-color: #1692ff;
+    }
+  }
+
+  .topping {
+    background: #fff url(https://huorantech.com/images/index/top.png) center center/auto no-repeat;
+
+    &:hover {
+      background-image: url(https://huorantech.com/images/index/top-1.png);
+      background-color: #006eff;
+    }
+  }
+
+  .popup {
+    position: absolute;
+    display: none;
+    top: -100px;
+    right: 45px;
+    padding: 20px;
+    background-color: #fff;
+    background-clip: padding-box;
+    border-right: 25px solid transparent;
+    box-shadow: 0px 0px 8px 0 rgba(231, 231, 231, 0.3) inset;
+  }
+
+  .float {
+    position: relative;
+
+    &:hover .popup {
+      display: block;
+    }
+  }
+}
+
 @media (max-width: 1500px) {
   .footer {
     padding: 64px 10% 25px;

src/layouts/home/index.vue

@@ -25,7 +25,7 @@ export default {
   },
   components: {
     vHead,
-    vFooter
+    vFooter,
   },
   computed: {
     isHome () {

src/pages/aboutUs/index.vue

@@ -185,20 +185,6 @@
         </div>
       </div>
     </div>
-
-    <div class="tool">
-      <template v-for="(item, i) in floatings">
-        <div v-for="(module, j) in item.modules" :key="j" class="float">
-          <div class="item" :style="{ backgroundImage: 'url(' + module.pictureAddress + ')' }"></div>
-          <div class="popup">
-            <p v-if="module.schemeTitle" class="tips">{{ module.schemeTitle }}</p>
-            <div v-html="module.schemeContentJson"></div>
-          </div>
-        </div>
-      </template>
-
-      <div class="item topping"></div>
-    </div>
   </div>
 </template>
 
@@ -215,33 +201,15 @@ export default {
       active: '',
       clients: [1, 2, 3, 4, 5],
       sr: null,
-      floatings: [],
     }
   },
   components: {
     scroll
   },
   mounted () {
-    this.getFloating()
+    
   },
   methods: {
-    // 查询悬浮栏
-    async getFloating () {
-      const { data } = await this.$post(this.api.listFloating, {
-        siteId: this.site,
-        search: '',
-        pageNum: 1,
-        pageSize: 10,
-        isForeground: 1,
-      })
-      data.records.map(async e => {
-        const { data } = await this.$post(`${this.api.findFloating}?id=${e.floatingBarSchemeId}`)
-        this.$set(e, 'modules', data.floatingColumnSchemeModules)
-        // e.modules = data.floatingColumnSchemeModules
-      })
-      this.floatings = data.records
-      console.log("🚀 ~ getFloating ~ this.floatings:", this.floatings)
-    },
     // 初始化动画
     initAnimate () {
       const sr = ScrollReveal()
@@ -305,11 +273,6 @@ export default {
         }
       }).catch(err => { })
     },
-    // 置顶
-    topping () {
-      document.documentElement.scrollTop = 0
-      document.body.scrollTop = 0
-    },
     // 问卷调查
     toQues () {
       window.open('https://www.wjx.cn/vm/wB0RcMm.aspx')
@@ -1231,56 +1194,6 @@ export default {
   }
 }
 
-.tool {
-  z-index: 10;
-  position: fixed;
-  bottom: 100px;
-  right: 30px;
-
-  .item {
-    width: 45px;
-    height: 45px;
-    margin-bottom: 10px;
-    border: 1px solid #e5e5e5;
-    cursor: pointer;
-    background-color: #fff;
-    background-position: center center;
-    background-repeat: no-repeat;
-
-    &:hover {
-      border-color: #1692ff;
-    }
-  }
-
-  .topping {
-    background: #fff url(https://huorantech.com/images/index/top.png) center center/auto no-repeat;
-
-    &:hover {
-      background-image: url(https://huorantech.com/images/index/top-1.png);
-      background-color: #006eff;
-    }
-  }
-
-  .popup {
-    position: absolute;
-    display: none;
-    top: -100px;
-    right: 45px;
-    padding: 20px;
-    background-color: #fff;
-    background-clip: padding-box;
-    border-right: 25px solid transparent;
-  }
-
-  .float {
-    position: relative;
-
-    &:hover .popup {
-      display: block;
-    }
-  }
-}
-
 @media (max-width: 1730px) {
   .wrap {
     .banner {