yjdp-web/src/components/HKVideo/video-container.vue

<template>
  <div v-if="videoData.length === 1" class="video-container1">
    <div class="video-item">
      <div class="tag" :title="videoData[0].name">
        <div class="name">{{ videoData[0].name }}</div>
      </div>
      <HKVideo :dot_data="videoData[0]" :height="866" />
    </div>
  </div>
  <div v-else-if="videoData.length >= 2 && videoData.length <= 4" class="video-container2">
    <div v-for="(item, index) in videoData" :key="index" class="video-item">
      <div class="tag" :title="item.name">
        <div class="name">{{ item.name }}</div>
      </div>
      <HKVideo :dot_data="item" :height="410" />
    </div>
  </div>
  <div v-else-if="videoData.length >= 5 && videoData.length <= 6" class="video-container3">
    <div class="box1">
      <div class="video-item2">
        <div class="tag" :title="videoData[0].name">
          <div class="name">{{ videoData[0].name }}</div>
        </div>
        <HKVideo :dot_data="videoData[0]" :height="562" />
      </div>
    </div>
    <div class="box2">
      <div class="video-item3">
        <div class="tag" :title="videoData[1].name">
          <div class="name">{{ videoData[1].name }}</div>
        </div>
        <HKVideo :dot_data="videoData[1]" :height="258" />
      </div>
      <div class="video-item3">
        <div class="tag" :title="videoData[2].name">
          <div class="name">{{ videoData[2].name }}</div>
        </div>
        <HKVideo :dot_data="videoData[2]" :height="258" />
      </div>
    </div>
    <div class="box3">
      <div class="video-item">
        <div class="tag" :title="videoData[3].name">
          <div class="name">{{ videoData[3].name }}</div>
        </div>
        <HKVideo :dot_data="videoData[3]" :height="258" />
      </div>
      <div class="video-item">
        <div class="tag" :title="videoData[4].name">
          <div class="name">{{ videoData[4].name }}</div>
        </div>
        <HKVideo :dot_data="videoData[4]" :height="258" />
      </div>
      <div class="video-item">
        <div class="tag" :title="videoData[5].name">
          <div class="name">{{ videoData[5].name }}</div>
        </div>
        <HKVideo :dot_data="videoData[5]" :height="258" />
      </div>
    </div>
  </div>
  <div v-else-if="videoData.length >= 7" class="video-container4">
    <div v-for="(item, index) in videoData" :key="index" class="video-item">
      <div class="tag" :title="item.name">
        <div class="name">{{ item.name }}</div>
      </div>
      <HKVideo :dot_data="item" :height="258" />
    </div>
  </div>
  <div v-else class="tip">附近没有可用监控视频</div>
</template>

<script lang="ts" setup>
interface Props {
  videoData: any[];
}
const props = withDefaults(defineProps<Props>(), {});
</script>

<style lang="scss" scoped>
.video-container1 {
  width: 100%;
  height: 100%;
  font-size: 38px;
  .video-item {
    width: 100%;
    height: 100%;
  }
}
.video-container2 {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: 100%;
  font-size: 38px;
  .video-item {
    width: calc(50% - 12px);
    height: 432px;
    margin-bottom: 12px;
    margin-right: 12px;
    &:nth-child(2n) {
      margin-right: 0;
    }
  }
}
.video-container3 {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: 100%;
  font-size: 38px;
  .box1 {
    width: calc(66.66666% - 6px);
    height: 596px;
    margin-bottom: 12px;
    margin-right: 12px;
    .video-item2 {
      width: 100%;
      height: 100%;
    }
  }
  .box2 {
    width: calc(33.33333% - 6px);
    height: 596px;
    .video-item3 {
      width: 100%;
      height: 292px;
      margin-bottom: 12px;
      &:nth-child(2) {
        margin-top: 12px;
      }
    }
  }
  .box3 {
    width: 100%;
    height: 292px;
    display: flex;
  }
  .video-item {
    width: calc(33.33333% - 8px);
    height: 292px;
    margin-bottom: 12px;
    margin-right: 12px;
    &:nth-child(3n) {
      margin-right: 0;
    }
  }
}
.video-container4 {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  font-size: 38px;
  .video-item {
    width: calc(33.33333% - 8px);
    height: 292px;
    margin-bottom: 12px;
    margin-right: 12px;
    &:nth-child(3n) {
      margin-right: 0;
    }
  }
}
.tip {
  width: 100%;
  height: 100%;
  font-size: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.video-item,
.video-item2,
.video-item3 {
  position: relative;
  background: url('@/assets/images/video/videoBg.png');
  background-size: 100% 100%;
  padding: 17px;
  .tag {
    position: absolute;
    bottom: 17px;
    right: 17px;
    color: #fff;
    z-index: 11;
    width: 425px;
    height: 75px;
    background: url('@/assets/images/video/tag2.png') no-repeat;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    .name {
      width: 360px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      text-align: left;
      padding-right: 5px;
    }
  }
}
</style>