upp

SWKK/src/components/Hot.vue

@@ -24,9 +24,13 @@
             </div>
 
             <!-- 图片 -->
-            <template v-if="type === 'img' || type === '2d'">
+            <template
+              v-if="type === 'img' || type === '2d' || type === 'article'"
+            >
               <img
-                @click="lookImg(`${hotBaseUrl}${hotIdOrName.id}/${type}/${item.id}`)"
+                @click="
+                  lookImg(`${hotBaseUrl}${hotIdOrName.id}/${type}/${item.id}`)
+                "
                 v-lazy="`${hotBaseUrl}${hotIdOrName.id}/${type}/${item.id}`"
                 alt=""
               />
@@ -85,15 +89,17 @@
       v-show="type === 'img'"
       :class="{ hideImgNameBox: !imgNameBox }"
     >
-      <div
-        @click="Swiper.slideTo(index)"
-        class="row"
-        :class="{ rowAc: index === imgInd }"
-        :title="item.name"
-        v-for="(item, index) in data"
-        :key="item.id"
-      >
-        {{ item.name }}
+      <div class="imgNameBox_Row">
+        <div
+          @click="Swiper.slideTo(index)"
+          class="row"
+          :class="{ rowAc: index === imgInd }"
+          :title="item.name"
+          v-for="(item, index) in data"
+          :key="item.id"
+        >
+          {{ item.name }}
+        </div>
       </div>
       <!-- 收起按钮 -->
       <div class="hideName" @click="imgNameBox = false">
@@ -139,7 +145,24 @@
 </template>
 
 <script>
-import { hotData,hotBaseUrl } from "./data";
+import { hotData, hotBaseUrl } from "./data";
+// 过滤不显示的 数据
+const hotDataRes = [...hotData];
+
+hotDataRes.forEach((v) => {
+  if (v["img"] && v["img"].length) {
+    v["img"] = v["img"].filter((v) => !v.show);
+  }
+  if (v["2d"] && v["2d"].length) {
+    v["2d"] = v["2d"].filter((v) => !v.show);
+  }
+  if (v["article"] && v["article"].length) {
+    v["article"] = v["article"].filter((v) => !v.show);
+  }
+});
+
+// console.log("----------", hotDataRes);
+
 import Audio from "./Audio.vue";
 import Swiper from "./swiper.js";
 export default {
@@ -158,9 +181,7 @@ export default {
   data() {
     //这里存放数据
     return {
-      hotBaseUrl,//热点图片的前缀 url
-      
-
+      hotBaseUrl, //热点图片的前缀 url
 
       lookPics: [],
 
@@ -168,12 +189,13 @@ export default {
       data: [],
       type: "",
       rightList: [
-        { name: "视频", id: 1, show: false, type: "video" },
-        { name: "模型", id: 2, show: false, type: "link" },
+        { name: "三维", id: 2, show: false, type: "link" },
+        { name: "二维", id: 5, show: false, type: "2d" },
         { name: "音频", id: 3, show: false, type: "audio" },
+        { name: "视频", id: 1, show: false, type: "video" },
         // 定制化
+        { name: "文章", id: 6, show: false, type: "article" },
         { name: "图片", id: 4, show: false, type: "img" },
-        { name: "二维", id: 5, show: false, type: "2d" },
       ],
       Swiper: null,
       KKNum: window.KKNum,
@@ -203,7 +225,7 @@ export default {
       // 定制化
       this.imgInd = 0;
       this.imgNameBox = true;
-      const flag = ["img", "2d"];
+      const flag = ["img", "2d", "article"];
       if (flag.includes(val)) {
         this.data = this.myinfo[val];
       } else this.data = this.info[val];
@@ -257,13 +279,13 @@ export default {
       handler(val) {
         // 通过id获取配置化信息
         // console.log("------------------------", this.hotIdOrName);
-        const myinfo = hotData.find((v) => v.hotId === this.hotIdOrName.id);
+        const myinfo = hotDataRes.find((v) => v.hotId === this.hotIdOrName.id);
         this.info = val;
         let obj = {
-          video: 0,
-          link: 1,
+          video: 3,
+          link: 0,
           audio: 2,
-          image: 3,
+          image: 5,
         };
         for (const k in val) {
           if (val[k].length) this.rightList[obj[k]].show = true;
@@ -271,17 +293,22 @@ export default {
         // 定制化
         if (myinfo) {
           this.myinfo = myinfo;
-          if (myinfo.img && myinfo.img.length) this.rightList[3].show = true;
+          if (myinfo.img && myinfo.img.length) this.rightList[5].show = true;
           if (myinfo["2d"] && myinfo["2d"].length)
+            this.rightList[1].show = true;
+          if (myinfo["article"] && myinfo["article"].length)
             this.rightList[4].show = true;
         }
-        if (myinfo && myinfo.img && myinfo.img.length) this.type = "img";
+        if (val["link"] && val["link"].length) this.type = "link";
         else if (myinfo && myinfo["2d"] && myinfo["2d"].length)
           this.type = "2d";
-        // if (val["image"] && val["image"].length) this.type = "image";
-        else if (val["video"] && val["video"].length) this.type = "video";
-        else if (val["link"] && val["link"].length) this.type = "link";
         else if (val["audio"] && val["audio"].length) this.type = "audio";
+        else if (val["video"] && val["video"].length) this.type = "video";
+        else if (myinfo && myinfo["article"] && myinfo["article"].length)
+          this.type = "article";
+        else if (myinfo && myinfo.img && myinfo.img.length) this.type = "img";
+
+        // if (val["image"] && val["image"].length) this.type = "image";
       },
       immediate: true,
     },
@@ -465,6 +492,7 @@ export default {
             overflow: hidden;
             video {
               height: 100%;
+              width: 100%;
             }
           }
         }
@@ -532,57 +560,65 @@ export default {
     position: absolute;
     z-index: 998;
     width: 400px;
-    padding: 10px 20px 20px;
+    padding: 10px 0px 20px 30px;
     right: 0;
     bottom: 100px;
     background-image: url("../assets/img/Hot/nameBac.png");
     background-size: 100% 100%;
     border-radius: 6px;
     max-height: 700px;
-    &::-webkit-scrollbar {
-      /*滚动条整体样式*/
-      width: 5px;
-      /*高宽分别对应横竖滚动条的尺寸*/
-      height: 1px;
-    }
-
-    &::-webkit-scrollbar-thumb {
-      /*滚动条里面小方块*/
-      border-radius: 1px;
-      -webkit-box-shadow: inset 0 0 5px transparent;
-      background: #d8b275;
-    }
+    .imgNameBox_Row {
+      padding-right: 20px;
+      width: 100%;
+      height: 100%;
+      max-height: 640px;
+      overflow-y: auto;
+      &::-webkit-scrollbar {
+        /*滚动条整体样式*/
+        width: 5px;
+        /*高宽分别对应横竖滚动条的尺寸*/
+        height: 1px;
+      }
 
-    &::-webkit-scrollbar-track {
-      /*滚动条里面轨道*/
-      -webkit-box-shadow: inset 0 0 5px transparent;
-      border-radius: 10px;
-      background: transparent;
-    }
+      &::-webkit-scrollbar-thumb {
+        /*滚动条里面小方块*/
+        border-radius: 1px;
+        -webkit-box-shadow: inset 0 0 5px transparent;
+        background: #d8b275;
+      }
 
-    .row {
-      width: 100%;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      color: #fff;
-      height: 50px;
-      line-height: 49px;
-      cursor: pointer;
-      border-bottom: 1px solid #fff;
-      &:hover {
+      &::-webkit-scrollbar-track {
+        /*滚动条里面轨道*/
+        -webkit-box-shadow: inset 0 0 5px transparent;
+        border-radius: 10px;
+        background: transparent;
+      }
+      .row {
+        width: 100%;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        color: #fff;
+        height: 50px;
+        line-height: 49px;
+        cursor: pointer;
+        border-bottom: 1px solid #fff;
+        &:hover {
+          color: #d8b275;
+        }
+      }
+      .rowAc {
         color: #d8b275;
+        pointer-events: none;
       }
     }
-    .rowAc {
-      color: #d8b275;
-      pointer-events: none;
-    }
+
     .hideName {
       position: absolute;
+      z-index: 9999;
       cursor: pointer;
       top: 50%;
-      left: -20px;
+      left: 0;
       transform: translateY(-50%);
       width: 40px;
       height: 40px;
@@ -590,14 +626,12 @@ export default {
       display: flex;
       align-items: center;
       font-size: 20px;
-      color: #930909;
+      color: yellow;
     }
   }
   .hideImgNameBox {
     opacity: 0;
     right: -400px;
-    .hideName {
-    }
   }
 }
 .active {

SWKK/src/components/Hot编辑器合并版本.vue

@@ -395,6 +395,7 @@ export default {
             overflow: hidden;
             video {
               height: 100%;
+              width: 100%;
             }
           }
         }