AnhuiDailyHotspot/src/components/VideoList.vue

<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>