视频列表热点功能

src/components/VideoList.vue

@@ -0,0 +1,161 @@
+<template>
+  <div class="video-list">
+    <div class="tab-bar">
+      <button
+        v-for="(item) in typeList"
+        :key="item"
+        class="tab-item"
+        :class="{
+          active: item === activeType
+        }"
+        @click="activeType = item"
+      >
+        {{ item }}
+      </button>
+    </div>
+
+    <ul>
+      <li
+        v-for="(item, index) in activeTypeObj.titleList"
+        :key="index"
+        @click="onClickVideoTitle(index)"
+      >
+        {{ item }}
+      </li>
+    </ul>
+
+    <div
+      v-if="isShowVideo"
+      class="video-wrap"
+    >
+      <button
+        class="close"
+        @click="onClickClose"
+      >
+        <img
+          src="@/assets/images/close.png"
+          alt="关闭"
+          draggable="false"
+        >
+      </button>
+      <video
+        :src="videoSrc"
+        controls
+        autoplay
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import videoList from "@/components/videoList.js"
+
+export default {
+  data() {
+    return {
+      videoList,
+      activeType: videoList[0].type,
+      videoSrc: '',
+      isShowVideo: false,
+    }
+  },
+  computed: {
+    typeList() {
+      return videoList.map((item) => {
+        return item.type
+      })
+    },
+    activeTypeObj() {
+      return videoList.find((item) => {
+        return item.type === this.activeType
+      })
+    }
+  },
+  methods: {
+    onClickVideoTitle(index) {
+      this.videoSrc = this.activeTypeObj.urlList[index]
+      this.isShowVideo = true
+    },
+    onClickClose() {
+      this.isShowVideo = false
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.video-list {
+  display: flex;
+  flex-direction: column;
+  > .tab-bar {
+    flex: 0 0 auto;
+    text-align: center;
+    margin-bottom: 1em;
+    > button {
+      font-size: 24px;
+      color: #494140;
+      width: 120px;
+      height: 1.6em;
+      background: #ccc;
+      &.active {
+        background: #A10E0C;
+        color: #fff;
+      }
+    }
+  }
+  > ul {
+    flex: 1 0 1px;
+    list-style-type: disc;
+    padding-left: 2em;
+    overflow: auto;
+    > li {
+      font-size: 16px;
+      display: list-item;
+      cursor: pointer;
+      margin-bottom: 0.3em;
+      color: #494140;
+      position: relative;
+      &:hover {
+        color: #A10E0C;
+      }
+    }
+  }
+
+  > .video-wrap {
+    background: black;
+    position: absolute;
+    z-index: 0;
+    left: 0;
+    top: -8px;
+    width: 100%;
+    height: calc(100% + 8px * 2);
+    > button.close {
+      position: absolute;
+      top: 29px;
+      right: 37px;
+      width: 28px;
+      height: 28px;
+      z-index: 1;
+      > img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+    > video {
+      background: black;
+      width: 100%;
+      height: 100%;
+
+    }
+  }
+}
+
+::-webkit-scrollbar { width: 5px; height: 5px;} /*宽度是对垂直滚动条而言，高度是对水平滚动条而言*/
+::-webkit-scrollbar-thumb { background: #930909; border-radius: 2.5px; }
+::-webkit-scrollbar-button { display: none; }
+::-webkit-scrollbar-track { background: transparent; background: #ccc; border-radius: 2.5px; }
+// 横竖滚动条轨道交汇处
+::-webkit-scrollbar-corner { background: transparent; }
+// 有必要给resizer设置border_radius吗？
+::-webkit-scrollbar-resizer { background: transparent; }
+</style>

src/components/VideoListMobile.vue

@@ -0,0 +1,163 @@
+<template>
+  <div class="video-list">
+    <div class="tab-bar">
+      <button
+        v-for="(item) in typeList"
+        :key="item"
+        class="tab-item"
+        :class="{
+          active: item === activeType
+        }"
+        @click="activeType = item"
+      >
+        {{ item }}
+      </button>
+    </div>
+
+    <ul>
+      <li
+        v-for="(item, index) in activeTypeObj.titleList"
+        :key="index"
+        @click="onClickVideoTitle(index)"
+      >
+        {{ item }}
+      </li>
+    </ul>
+
+    <div
+      v-if="isShowVideo"
+      class="video-wrap"
+    >
+      <button
+        class="close"
+        @click="onClickClose"
+      >
+        <img
+          src="@/assets/images/close.png"
+          alt="关闭"
+          draggable="false"
+        >
+      </button>
+      <video
+        :src="videoSrc"
+        controls
+        autoplay
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import videoList from "@/components/videoList.js"
+
+export default {
+  data() {
+    return {
+      videoList,
+      activeType: videoList[0].type,
+      videoSrc: '',
+      isShowVideo: false,
+    }
+  },
+  computed: {
+    typeList() {
+      return videoList.map((item) => {
+        return item.type
+      })
+    },
+    activeTypeObj() {
+      return videoList.find((item) => {
+        return item.type === this.activeType
+      })
+    }
+  },
+  methods: {
+    onClickVideoTitle(index) {
+      this.videoSrc = this.activeTypeObj.urlList[index]
+      this.isShowVideo = true
+    },
+    onClickClose() {
+      this.isShowVideo = false
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.video-list {
+  display: flex;
+  flex-direction: column;
+  padding: 20px;
+  > .tab-bar {
+    flex: 0 0 auto;
+    text-align: center;
+    margin-bottom: 1em;
+    > button {
+      font-size: 24px;
+      color: #494140;
+      width: 120px;
+      height: 1.6em;
+      background: #ccc;
+      &.active {
+        background: #A10E0C;
+        color: #fff;
+      }
+    }
+  }
+  > ul {
+    flex: 1 0 1px;
+    list-style-type: disc;
+    padding-left: 2em;
+    padding-right: 1em;
+    overflow: auto;
+    > li {
+      font-size: 20px;
+      display: list-item;
+      cursor: pointer;
+      margin-bottom: 0.6em;
+      color: #fff;
+      position: relative;
+      &:hover {
+        color: #A10E0C;
+      }
+    }
+  }
+
+  > .video-wrap {
+    background: black;
+    position: absolute;
+    z-index: 2;
+    left: 0;
+    top: -8px;
+    width: 100%;
+    height: calc(100% + 8px * 2);
+    > button.close {
+      position: absolute;
+      top: 30px;
+      right: 15px;
+      width: 28px;
+      height: 28px;
+      z-index: 1;
+      > img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+    > video {
+      background: black;
+      width: 100%;
+      height: 100%;
+
+    }
+  }
+}
+
+::-webkit-scrollbar { width: 5px; height: 5px;} /*宽度是对垂直滚动条而言，高度是对水平滚动条而言*/
+::-webkit-scrollbar-thumb { background: #930909; border-radius: 2.5px; }
+::-webkit-scrollbar-button { display: none; }
+::-webkit-scrollbar-track { background: transparent; background: #ccc; border-radius: 2.5px; }
+// 横竖滚动条轨道交汇处
+::-webkit-scrollbar-corner { background: transparent; }
+// 有必要给resizer设置border_radius吗？
+::-webkit-scrollbar-resizer { background: transparent; }
+</style>

src/views/HomeMobile.vue

@@ -1,5 +1,7 @@
 <template>
-  <div class="hotspot-home">
+  <div
+    class="hotspot-home"
+  >
     <button
       class="close"
       @click="onClickClose"
@@ -66,7 +68,7 @@
     </div>
 
     <div
-      v-show="isShowImages"
+      v-if="isShowImages"
       class="swiper-wrapper-mine image-wrap"
     >
       <div
@@ -115,7 +117,10 @@
       </div>
     </div>
 
-    <div class="title-wrap">
+    <div
+      v-if="!isShowVideoList"
+      class="title-wrap"
+    >
       <h1
         :title="hotspotData.title"
         v-html="hotspotData.title"
@@ -123,19 +128,29 @@
     </div>
 
     <p
+      v-if="!isShowVideoList"
       class="desc"
       v-html="descForShow"
     />
+
+    <VideoListMobile
+      v-if="isShowVideoList"
+      class="video-list"
+    />
   </div>
 </template>
 
 <script>
 import Swiper from 'swiper/swiper-bundle.esm.js'
 import 'swiper/swiper-bundle.css'
+import VideoListMobile from "@/components/VideoListMobile.vue"
 
 // import browser from "@/utils/browser";
 
 export default {
+  components: {
+    VideoListMobile,
+  },
   data() {
     return {
       hotspotData: {}, // 热点数据
@@ -151,8 +166,17 @@ export default {
         return this.hotspotData.imagesDesc[this.currentSlideIdx] || this.hotspotData.content
       } else if (this.isShowVideos) {
         return this.hotspotData.videosDesc[this.currentSlideIdx] || this.hotspotData.content
-      } else {
+      } else if (this.isShowVideoList) {
         return ''
+      } else {
+        return this.hotspotData.content
+      }
+    },
+    isShowVideoList() {
+      if (this.hotspotData.content === 'video list') {
+        return true
+      } else {
+        return false
       }
     },
   },
@@ -240,12 +264,14 @@ export default {
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.8);
+  position: relative;
   > button.close {
     position: absolute;
     top: 15px;
     right: 15px;
     width: 28px;
     height: 28px;
+    z-index: 1;
     > img {
       width: 100%;
       height: 100%;
@@ -361,6 +387,15 @@ export default {
     line-height: 19px;
     padding-right: 10px;
   }
+
+  > .video-list {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    padding: 50px;
+  }
 }
 
 /deep/.swiper-pagination-bullet {

src/views/HomeWeb.vue

@@ -99,19 +99,27 @@
     </div>
 
     <p
+      v-if="!isShowVideoList"
       class="desc"
       v-html="descForShow"
     />
+
+    <VideoList
+      v-if="isShowVideoList"
+      class="video-list"
+    />
   </div>
 </template>
 
 <script>
 import Swiper from 'swiper/swiper-bundle.esm.js'
 import 'swiper/swiper-bundle.css'
-
-// import browser from "@/utils/browser";
+import VideoList from "@/components/VideoList.vue"
 
 export default {
+  components: {
+    VideoList,
+  },
   data() {
     return {
       hotspotData: {}, // 热点数据
@@ -127,8 +135,17 @@ export default {
         return this.hotspotData.imagesDesc[this.currentSlideIdx] || this.hotspotData.content
       } else if (this.isShowVideos) {
         return this.hotspotData.videosDesc[this.currentSlideIdx] || this.hotspotData.content
-      } else {
+      } else if (this.isShowVideoList) {
         return ''
+      } else {
+        return this.hotspotData.content
+      }
+    },
+    isShowVideoList() {
+      if (this.hotspotData.content === 'video list') {
+        return true
+      } else {
+        return false
       }
     },
   },
@@ -346,6 +363,14 @@ export default {
     overflow: auto;
     padding-right: 6px;
   }
+
+  > .video-list {
+    font-size: 16px;
+    color: #494140;
+    line-height: 19px;
+    height: calc(100% - 32px - 28px);
+    padding-right: 6px;
+  }
 }
 
 /deep/.swiper-pagination-bullet-active {