{"ast":null,"code":"import { getVideoList } from '@/api';\nexport default {\n  name: 'VideoGrid',\n  data() {\n    return {\n      videoList: [],\n      total: 0,\n      currentPage: 1\n    };\n  },\n  mounted() {\n    this.loadVideos();\n  },\n  methods: {\n    async loadVideos() {\n      const res = await getVideoList({\n        page: this.currentPage\n      });\n      this.videoList = res.data.list;\n      this.total = res.data.total;\n    }\n  }\n};","map":{"version":3,"names":["getVideoList","name","data","videoList","total","currentPage","mounted","loadVideos","methods","res","page","list"],"sources":["src/components/VideoMonitor/VideoGrid.vue"],"sourcesContent":["<template>\n  <div class=\"panel-box video-grid\">\n    <div class=\"panel-title\">\n      实时视频监控\n      <span class=\"video-count\">共 {{ total }} 路</span>\n    </div>\n    <div class=\"panel-content\">\n      <div class=\"grid-container\">\n        <div\n          v-for=\"video in videoList\"\n          :key=\"video.id\"\n          class=\"video-cell\"\n        >\n          <div class=\"video-placeholder\">\n            <div class=\"video-glow\"></div>\n            <i class=\"el-icon-video-camera\"></i>\n          </div>\n          <div class=\"video-label\">{{ video.name }}</div>\n        </div>\n      </div>\n      <div class=\"grid-pagination\">\n        <el-pagination\n          small\n          layout=\"prev, pager, next\"\n          :total=\"total\"\n          :page-size=\"9\"\n          :current-page.sync=\"currentPage\"\n          @current-change=\"loadVideos\"\n          class=\"dark-pagination\"\n        />\n      </div>\n    </div>\n  </div>\n</template>\n\n<script>\nimport { getVideoList } from '@/api'\n\nexport default {\n  name: 'VideoGrid',\n  data() {\n    return {\n      videoList: [],\n      total: 0,\n      currentPage: 1\n    }\n  },\n  mounted() {\n    this.loadVideos()\n  },\n  methods: {\n    async loadVideos() {\n      const res = await getVideoList({ page: this.currentPage })\n      this.videoList = res.data.list\n      this.total = res.data.total\n    }\n  }\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.video-grid {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n\n  .panel-content {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n  }\n}\n\n.video-count {\n  font-size: 12px;\n  color: $text-muted;\n  font-weight: normal;\n  margin-left: auto;\n}\n\n.grid-container {\n  flex: 1;\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  grid-template-rows: repeat(3, 1fr);\n  gap: 12px;\n}\n\n.video-cell {\n  position: relative;\n  border: 1px solid $border-color;\n  border-radius: 4px;\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n}\n\n.video-placeholder {\n  flex: 1;\n  background: rgba(10, 26, 58, 0.8);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  overflow: hidden;\n\n  i {\n    font-size: 32px;\n    color: rgba(255, 255, 255, 0.1);\n    z-index: 1;\n  }\n}\n\n// 蓝色光晕效果\n.video-glow {\n  position: absolute;\n  width: 120px;\n  height: 120px;\n  background: radial-gradient(circle, rgba(30, 144, 255, 0.15) 0%, transparent 70%);\n  border-radius: 50%;\n  animation: pulse 3s ease-in-out infinite;\n}\n\n@keyframes pulse {\n  0%, 100% { transform: scale(0.8); opacity: 0.5; }\n  50% { transform: scale(1.2); opacity: 1; }\n}\n\n.video-label {\n  padding: 6px 10px;\n  font-size: 12px;\n  color: $text-secondary;\n  background: rgba(13, 34, 71, 0.9);\n  border-top: 1px solid $border-color;\n}\n\n.grid-pagination {\n  display: flex;\n  justify-content: center;\n  padding-top: 12px;\n}\n\n.dark-pagination {\n  ::v-deep {\n    .btn-prev, .btn-next, .el-pager li {\n      background: transparent;\n      color: $text-secondary;\n      border: 1px solid $border-color;\n      min-width: 28px;\n      height: 28px;\n      line-height: 28px;\n\n      &:hover, &.active {\n        color: $accent-cyan;\n        border-color: $accent-blue;\n      }\n    }\n  }\n}\n</style>\n"],"mappings":"AAoCA,SAAAA,YAAA;AAEA;EACAC,IAAA;EACAC,KAAA;IACA;MACAC,SAAA;MACAC,KAAA;MACAC,WAAA;IACA;EACA;EACAC,QAAA;IACA,KAAAC,UAAA;EACA;EACAC,OAAA;IACA,MAAAD,WAAA;MACA,MAAAE,GAAA,SAAAT,YAAA;QAAAU,IAAA,OAAAL;MAAA;MACA,KAAAF,SAAA,GAAAM,GAAA,CAAAP,IAAA,CAAAS,IAAA;MACA,KAAAP,KAAA,GAAAK,GAAA,CAAAP,IAAA,CAAAE,KAAA;IACA;EACA;AACA","ignoreList":[]},"metadata":{},"sourceType":"module","externalDependencies":[]}