124

src/views/StationLevel/layout/VideoMore.vue

@@ -0,0 +1,141 @@
+<template>
+  <div class="video-more-container">
+    <div class="switch-btn prev" @click="handlePrev">
+        <img src="@/assets/images/icon_08.png" alt="">
+    </div>
+    <div class="video-grid">
+      <div v-for="index in 4" :key="index" class="video-cell">
+        <div class="video-wrapper">
+          <video class="video-player" controls>
+            <source src="" type="video/mp4">
+          </video>
+          <div class="video-controls">
+            <div class="time-display">01:32</div>
+            <div class="control-buttons">
+              <i class="el-icon-video-play"></i>
+              <i class="el-icon-refresh-right"></i>
+              <i class="el-icon-full-screen"></i>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="switch-btn next" @click="handleNext">
+        <img src="@/assets/images/icon_07.png" alt="">
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'VideoMore',
+  data() {
+    return {
+      currentPage: 1,
+      totalPages: 3
+    }
+  },
+  methods: {
+    handlePrev() {
+      if (this.currentPage > 1) {
+        this.currentPage--
+      }
+    },
+    handleNext() {
+      if (this.currentPage < this.totalPages) {
+        this.currentPage++
+      }
+    }
+  }
+}
+</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 {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-rows: repeat(2, 1fr);
+    gap: 20px;
+    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;
+      }
+    }
+  }
+}
+</style>