| 1 |
- {"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":[]}
|
