upp

定制化热点/src/views/Device.vue

@@ -16,7 +16,7 @@
       </div>
       <div class="titleTxt">Equipment</div>
       <!-- 设备列表 -->
-      <div class="forBox">
+      <div class="forBox" ref="scrollDom">
         <div class="noneInfo0" v-show="isAllNoFu">No Information</div>
         <div class="noneInfo1" v-if="!data.length">No Information</div>
         <div class="one" v-for="item1 in data" :key="item1.id" v-else>
@@ -68,6 +68,11 @@
             </div>
           </div>
         </div>
+
+        <!-- 回到顶部 -->
+        <div class="toTopBox" :class="{ toTopBoxAc: toTop }" @click="toTopFu">
+          <img src="../assets/images/toTop.svg" alt="" />
+        </div>
       </div>
     </div>
     <!-- a标签的下载 -->
@@ -96,6 +101,12 @@ const baseUrl =
 
 export default {
   name: "Device",
+  props: {
+    devieShow: {
+      type: Boolean,
+      default: false,
+    },
+  },
   components: {},
   data() {
     return {
@@ -103,11 +114,24 @@ export default {
       data: [],
       noInfo: false,
       isAllNoFu: true,
+      toTop: false,
     };
   },
   computed: {},
-  watch: {},
+  watch: {
+    devieShow(val) {
+      if (val) {
+        window.addEventListener("scroll", this.scroolFu, true);
+      } else {
+        window.removeEventListener("scroll", this.scroolFu, true);
+      }
+    },
+  },
   methods: {
+    // 点击回到顶部
+    toTopFu() {
+      this.$refs.scrollDom.scrollTo({ top: 0, behavior: "smooth" });
+    },
     // 点击下载手册
     async downFu(item) {
       // console.log(123, item);
@@ -124,9 +148,16 @@ export default {
       const flag = val.some((v) => v.children);
       return flag;
     },
+    // 监听滚动
+    scroolFu() {
+      // console.log("-----------------");
+      const num = this.$refs.scrollDom.scrollTop;
+      this.toTop = num >= 200;
+    },
   },
   created() {},
   async mounted() {
+    // 获取设备列表
     const res = await (
       await this.$http.get(`${baseUrl}/api/show/product/getTree`)
     ).data;
@@ -141,7 +172,9 @@ export default {
       }
     });
     this.data = res.data;
-    // 获取设备列表
+
+    // 2023删除
+    window.addEventListener("scroll", this.scroolFu, true);
   },
   beforeCreate() {}, //生命周期 - 创建之前
   beforeMount() {}, //生命周期 - 挂载之前
@@ -168,6 +201,10 @@ export default {
   border-top: 10px solid #00a0e6;
   background-color: #fff;
   .close {
+    // 2023删除
+    opacity: 0;
+    pointer-events: none;
+
     padding: 20px 20px 0 0;
     height: 50px;
     text-align: right;
@@ -178,6 +215,33 @@ export default {
   .main {
     padding-left: 40px;
     height: calc(100% - 80px);
+    position: relative;
+    // 回到顶部
+    .toTopBox {
+      opacity: 0;
+      pointer-events: none;
+      transition: all 0.3s;
+      position: absolute;
+      bottom: 20px;
+      right: 20px;
+      width: 40px;
+      height: 40px;
+      background-color: rgba(0, 0, 0, 0.6);
+      border-radius: 50%;
+      cursor: pointer;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      & > img {
+        width: 20px;
+        height: 20px;
+      }
+    }
+    .toTopBoxAc {
+      opacity: 1;
+      pointer-events: auto;
+    }
+
     .title {
       height: 40px;
       display: flex;

定制化热点/src/views/Home.vue

@@ -19,9 +19,12 @@
       <div class="swBox1" v-if="images.length > 1">
         <Swiper class="warpper" :options="optionsImg">
           <SwiperSlide v-for="(item, i) in images" :key="i">
-            <div class="slide" :title="imagesDesc[i] ? imagesDesc[i] : '图片'">
-              <div class="txt">
-                {{ imagesDesc[i] ? imagesDesc[i] : "图片" }}
+            <div
+              class="slide"
+              :title="imagesDesc[i] ? imagesDesc[i] : 'picture'"
+            >
+              <div class="txt" v-show="0">
+                {{ imagesDesc[i] ? imagesDesc[i] : "picture" }}
               </div>
               <img
                 style="cursor: pointer"
@@ -37,9 +40,11 @@
       <div
         class="oneImgBox"
         v-else-if="images[0]"
-        :title="imagesDesc[0] ? imagesDesc[0] : '图片'"
+        :title="imagesDesc[0] ? imagesDesc[0] : 'picture'"
       >
-        <div class="oneTxt">{{ imagesDesc[0] ? imagesDesc[0] : "图片" }}</div>
+        <div class="oneTxt" v-show="0">
+          {{ imagesDesc[0] ? imagesDesc[0] : "picture" }}
+        </div>
         <img v-lazy="images[0]" alt="" @click="lookImg(images[0])" />
       </div>
       <!-- 多视频轮播 -->
@@ -49,14 +54,14 @@
             <div
               class="slide"
               @click="videoSrc = item.url"
-              :title="videosDesc[i] ? videosDesc[i] : '视频'"
+              :title="videosDesc[i] ? videosDesc[i] : 'video'"
             >
               <!-- 遮罩 -->
               <div class="smBox">
                 <img src="../assets/images/play.png" alt="" />
               </div>
               <div class="txt">
-                {{ videosDesc[i] ? videosDesc[i] : "视频" }}
+                {{ videosDesc[i] ? videosDesc[i] : "video" }}
               </div>
 
               <video :src="item.url"></video>
@@ -69,9 +74,9 @@
         class="oneVideoBox"
         v-else-if="videos[0]"
         @click="videoSrc = videos[0].url"
-        :title="videosDesc[0] ? videosDesc[0] : '视频'"
+        :title="videosDesc[0] ? videosDesc[0] : 'video'"
       >
-        <div class="oneTxt">{{ videosDesc[0] ? videosDesc[0] : "视频" }}</div>
+        <div class="oneTxt">{{ videosDesc[0] ? videosDesc[0] : "video" }}</div>
         <video :src="videos[0].url"></video>
         <!-- 遮罩 -->
         <div class="smBox">
@@ -91,7 +96,7 @@
     </div>
     <!-- 点击下载设备出来的盒子 -->
     <div class="DevieBox" :class="{ DevieBoxShow: devieShow }">
-      <Device @closePage='devieShow=false'/>
+      <Device @closePage="devieShow = false" :devieShow='devieShow'/>
     </div>
   </div>
 </template>
@@ -165,10 +170,10 @@ export default {
         // console.log(123,data);
         this.title = data.title;
         this.content = data.content;
-        this.images = data.images;
-        this.imagesDesc = data.imagesDesc;
-        this.videos = data.video;
-        this.videosDesc = data.videosDesc;
+        this.images = data.images ? data.images : [];
+        this.imagesDesc = data.imagesDesc ? data.imagesDesc : [];
+        this.videos = data.video ? data.video : [];
+        this.videosDesc = data.videosDesc ? data.videosDesc : [];
 
         // 进入发送接口热点统计+1
         if (this.isEn) await this.$http.get(`${baseUrl}/api/show/visit/hot`);
@@ -178,6 +183,10 @@ export default {
     },
   },
   created() {
+    // 2023删除
+    const flag2 = localStorage.getItem("HDB_WJ");
+    if (flag2) this.devieShow = true;
+
     // 监听本地存储改变
     window.addEventListener(
       "storage",
@@ -467,5 +476,9 @@ export default {
     opacity: 1;
     pointer-events: auto;
   }
+  // 2023删除
+  .main{
+    opacity: 0;
+  }
 }
 </style>