添加侧边广告悬浮

src/api/index.js

@@ -1,5 +1,11 @@
 import request from '@/utils/request';
 
+export function getDataInfo(params) {
+  return request({
+    url: '/mobile/getJcPropagandaAd',
+    params
+  });
+}
 // 获取用户详细信息
 export function getList(params) {
   return request({

src/views/home/home.vue

@@ -589,9 +589,9 @@ export default {
       const middleIndex = Math.ceil(data.length / 2);
       this.listData = data.slice().splice(0, middleIndex);
       this.listData2 = data.slice().splice(-middleIndex);
-      console.log(this.listData);
+      // console.log(this.listData);
-      console.log(this.listData2);
+      // console.log(this.listData2);
-      console.log(data);
+      // console.log(data);
     });
   }
 };

src/views/index.vue

@@ -1,5 +1,19 @@
 <template>
   <div class="index_page">
+    <div
+      class="couplet"
+      :class="item.type == '1' ? 'c_left' : 'c_right'"
+      v-for="item in dataList"
+      :key="item.id"
+      v-show="item.status == 1"
+    >
+      <div class="couplet-close pointer" @click="item.status = 0">
+        <img src="../assets/image/close.gif" alt="" />
+      </div>
+      <div class="c_content">
+        <img :src="item.pic" alt="" />
+      </div>
+    </div>
     <!-- 右侧悬浮 -->
     <div class="slid" v-if="path == '/home'">
       <div class="item-box">
@@ -64,12 +78,12 @@ import headerPage from './components/header';
 import { mapGetters } from 'vuex';
 import footerPage from './components/footer';
 // import user from '@/store/modules/user';
-// import { getMsgCount } from '@/api/home/news';
+import { getDataInfo } from '@/api/index';
 export default {
   name: 'home',
   components: {
     headerPage,
-    footerPage
+    footerPage,
   },
   data() {
     return {
@@ -104,11 +118,12 @@ export default {
       //     name: '智能评估'
       //   }
       // ],
-      path: this.$route.path == '/' ? '/home' : this.$route.path
+      path: this.$route.path == '/' ? '/home' : this.$route.path,
+      dataList: [],
     };
   },
   computed: {
-    ...mapGetters(['avatar', 'badge'])
+    ...mapGetters(['avatar', 'badge']),
   },
   // watch: {
   //   badge(newVal, oldVal) {
@@ -130,9 +145,14 @@ export default {
     handlePath(path) {
       this.path = path;
       this.$router.push({ path });
-    }
+    },
   },
   created() {
+    getDataInfo({ type: 1 }).then((res) => {
+      getDataInfo({ type: 2 }).then(({ data }) => {
+        this.dataList = [...res.data, ...data];
+      });
+    });
     // console.log(this.badge);
     // console.log(user.state.badge);
     // getMsgCount().then(({ data }) => {
@@ -144,7 +164,7 @@ export default {
     // if (this.badge == 0) {
     //   document.querySelector('.el-badge sup').style = 'display:none';
     // }
-  }
+  },
 };
 </script>
 
@@ -165,6 +185,49 @@ export default {
   //     display: none;
   //   }
   // }
+  .couplet {
+    position: fixed;
+    top: 30%;
+    width: 100px;
+    height: 300px;
+    .couplet-close {
+      width: 43px;
+      height: 11px;
+      position: relative;
+      img {
+        width: 100%;
+        height: 100%;
+        vertical-align: top;
+      }
+    }
+    .c_content {
+      width: 100%;
+      margin-top: 5px;
+      background-color: #f00;
+      img {
+        width: 100%;
+        vertical-align: middle;
+      }
+    }
+  }
+  .c_left {
+    left: 5px;
+    .couplet-close {
+      text-align: left;
+      margin-left: 5px;
+    }
+  }
+  .c_right {
+    right: 5px;
+    .couplet-close {
+      margin-left: calc(100% - 48px);
+    }
+  }
+  @media screen and (max-width: 1365px) {
+    .couplet {
+      display: none;
+    }
+  }
   .slid {
     width: 70px;
     height: 246px;