xzlz_JczWeb/src/views/StationLevel/layout/VideoMore.vue

<template>
  <div class="video-more-container">
    <el-carousel style="height: 100%;" motion-blur indicator-position="none" :autoplay="false"
      @change="handleCarouselChange">
      <el-carousel-item v-for="(item, index) in sbList" :key="index">
        <div class="video-grid" v-if="activeIndex == index">
          <div v-for="(items, indexs) in item" :key="indexs" class="video-cell">
            <WsIframe :sbbh="items.sbbh" />
          </div>
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import WsIframe from '@/components/wsIframe/index.vue'
import emitter from "@/utils/eventBus.js";
const activeIndex = ref(0)
const handleCarouselChange = (index) => {
  activeIndex.value = index
}
const sbList = ref([1])
onMounted(() => {
  emitter.on("getSxtGetList", (res) => {
    sbList.value = Array.from({ length: Math.ceil(res.length / 4) == 0 ? 1 : Math.ceil(res.length / 4) }, (_, row) => {
      return res.slice(row * 4, row * 4 + 4)
    }
    );
  })
})
</script>

<style lang="scss" scoped>
.video-more-container {
  width: 100%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
  position: relative;

  .switch-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    transition: all 0.3s;
    color: #fff;
    z-index: 1;

    &.prev {
      left: 0;
      border-radius: 0 4px 4px 0;
    }

    &.next {
      right: 0;
      border-radius: 4px 0 0 4px;
    }
  }

  .video-grid {
    padding: 10px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 10px;
    height: 100%;
  }

  .video-cell {

    position: relative;
    background: url('~@/assets/images/bg13.png') no-repeat;
    background-size: 100% 100%;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
  }

  .video-wrapper {
    background-color: #000;
    position: relative;
    width: 100%;
    height: 100%;
  }

  .video-player {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .video-controls {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
  }

  .time-display {
    font-size: 14px;
  }

  .control-buttons {
    display: flex;
    gap: 15px;

    i {
      cursor: pointer;
      font-size: 20px;

      &:hover {
        color: #409EFF;
      }
    }
  }
}

::v-deep .el-carousel__container {
  height: 100% !important;
}
</style>