From a49b10e3faaabf8474530542dce5be69137193c4 Mon Sep 17 00:00:00 2001
From: duanliang <duanliang>
Date: Fri, 21 Mar 2025 10:58:42 +0800
Subject: [PATCH] =?UTF-8?q?=E9=85=92=E5=BA=97=E6=8E=A5=E5=8F=A3=E5=AF=B9?=
 =?UTF-8?q?=E6=8E=A5=20bug=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/home.js                          |   8 +
 src/components/Select/index.vue          |   4 +-
 src/components/TicketSource/index.vue    |   2 +-
 src/layout/components/Header/index.vue   |  13 +-
 src/views/hotel/components/info-box.vue  |  10 +-
 src/views/hotel/components/video-box.vue | 631 ++++++++++++++++++++++-
 6 files changed, 653 insertions(+), 15 deletions(-)

diff --git a/src/api/home.js b/src/api/home.js
index 12ec04a..ca591f5 100644
--- a/src/api/home.js
+++ b/src/api/home.js
@@ -16,6 +16,14 @@ export function getVideoListApi(data) {
     data
   })
 }
+// 获取区域摄像头
+export function getRegionsListApi(data){
+	return request({
+	  url: '/fjtcc-api/api/largeScreen/video/regions/page',
+	  method: 'post',
+	  data
+	})
+}
 
 // 获取视频播放地址
 export function getPreviewUrlApi(data) {
diff --git a/src/components/Select/index.vue b/src/components/Select/index.vue
index d4edf81..9f97a4c 100644
--- a/src/components/Select/index.vue
+++ b/src/components/Select/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="select">
-    <el-select v-model="modelValue" clearable :placeholder="label" @change="onChange">
+    <el-select size="mini" v-model="modelValue" clearable :placeholder="label" @change="onChange">
       <el-option v-for="item in options" :key="item.id" :label="item.ssname" :value="item.id" />
     </el-select>
   </div>
@@ -29,7 +29,7 @@
     :deep(.el-select__wrapper) {
       min-width: vw(180);
       padding: vh(4) vw(20);
-      min-height: vh(30) !important;
+      height: vh(30) !important;
       line-height: vh(30) !important;
       font-size: vw(14) !important;
       border-radius: vw(100) !important;
diff --git a/src/components/TicketSource/index.vue b/src/components/TicketSource/index.vue
index 1a2940c..32309ba 100644
--- a/src/components/TicketSource/index.vue
+++ b/src/components/TicketSource/index.vue
@@ -69,7 +69,7 @@
         legend: {
           show: true,
           x: 'center',
-          y: '74%',
+          y: '64%',
           itemHeight: fitChartSize(12),
           itemWidth: fitChartSize(12),
           itemGap: fitChartSize(6),
diff --git a/src/layout/components/Header/index.vue b/src/layout/components/Header/index.vue
index 33c63da..f55e85f 100644
--- a/src/layout/components/Header/index.vue
+++ b/src/layout/components/Header/index.vue
@@ -104,9 +104,9 @@
   import { getWeatherApi } from '@/api/home'
   import { getSpotListApi } from '@/api/sentiment'
   import { getHotelListApi } from '@/api/hotel'
-
+   
   import pubSub from 'pubsub-js'
-
+	
   const router = useRouter()
 
   let currentDate = ref('')
@@ -146,7 +146,9 @@
   const handleBack = () => {
     router.push('/home')
   }
+
   const handleCommand = (item, type) => {
+	  
     current.value = ''
     if (type === 'hotel') {
       otherRightLabel.value = '其他场馆'
@@ -167,8 +169,10 @@
         break
     }
   }
+  
   // 点击导航
   const handleNav = (item) => {
+	  console.log(item,'测试一下 ')
     if (isSkip.value) {
       router.push(item.path)
     } else {
@@ -326,6 +330,7 @@
         navLeft.value = hotelRes.data.slice(0, 3)
         otherLeftNav.value = hotelRes.data.slice(3, hotelRes.data.length - 1)
         let venueRes = await getHotelListApi({ hotelStadiumType: 2 })
+		console.log(venueRes,'venueRes')
         navRight.value = venueRes.data.slice(0, 3)
         otherRightNav.value = venueRes.data.slice(3, venueRes.data.length - 1)
         pubSub.publish('hotelChange', hotelRes.data[0])
@@ -424,13 +429,13 @@
       &-item {
         cursor: pointer;
         margin-left: vh(-16);
-        width: vw(210);
+        min-width: vw(210);
         height: vh(56);
         line-height: vh(46);
         font-weight: 600;
         font-size: vw(28);
         text-align: center;
-        padding: 0 vw(30);
+        padding: 0 vw(50);
         color: rgba(208, 236, 255, 0.9);
         background-size: 100% 100%;
         text-overflow: ellipsis;
diff --git a/src/views/hotel/components/info-box.vue b/src/views/hotel/components/info-box.vue
index 4df9375..3946447 100644
--- a/src/views/hotel/components/info-box.vue
+++ b/src/views/hotel/components/info-box.vue
@@ -18,7 +18,7 @@
         </div>
       </div>
     </div>
-    <div class="statistic-box">
+    <div class="statistic-box" v-if="info?.hotelStadiumType==1">
       <div class="statistic-item">
         <div class="statistic-item__label">
           <img src="@/assets/images/dot-primary.svg" alt="" />
@@ -161,11 +161,12 @@
     }
     .statistic {
       &-box {
-        height: vh(114);
+        height: vh(94);
         margin: 0 vw(26);
         gap: vw(20);
         display: flex;
         align-items: center;
+		margin-top:vh(10);
       }
       &-item {
         flex: 1;
@@ -204,10 +205,13 @@
     }
     .desc {
       &-box {
-        margin: 0 vw(20);
+        margin: vh(20) vw(20);
         background-image: url('@/assets/images/bg-3.png');
         background-size: 100% 100%;
       }
+	  &-box-2{
+		
+	  }
       &-container {
         padding: vh(20) vw(20) 0 vw(20);
       }
diff --git a/src/views/hotel/components/video-box.vue b/src/views/hotel/components/video-box.vue
index 1ded173..b70a8c3 100644
--- a/src/views/hotel/components/video-box.vue
+++ b/src/views/hotel/components/video-box.vue
@@ -1,22 +1,347 @@
 <template>
   <div class="video-box">
-    <ul class="videos">
+	  <div v-if="videoLog == 1" class="video-wrapper">
+	    <div class="video-list">
+	      <div
+	        class="video-item"
+	        v-for="(item, index) in videoList"
+	        :key="index"
+	        @click="handleItemVideo(item.hlsUrl, 100, item.cameraIndexCode)"
+	      >
+	        <div class="video-item__inner">
+	          <div
+	            v-if="item.isCollect == 1"
+	            class="video-item__follow"
+	            @click.stop="handleCollect(item.id, item.isCollect, index)"
+	            >取消关注
+	          </div>
+	          <div
+	            v-if="item.isCollect == 0"
+	            class="video-item__unfollow"
+	            @click.stop="handleCollect(item.id, item.isCollect, index)"
+	            >关注
+	          </div>
+	          <video
+	            class="video-item__video"
+	            :id="'monitorVideo' + index"
+	            preload="auto"
+	            muted
+	            autoplay
+	            :controls="false"
+	          >
+	            <source type="application/x-mpegURL" />
+	          </video>
+	          <p class="video-item__title--primary">
+	            {{ item.cameraName || item.scenicAreaId }}
+	          </p>
+	        </div>
+	      </div>
+	    </div>
+	    <div class="pagination">
+	      <el-pagination
+	        v-model:current-page="params.pageNum"
+	        :page-size="params.pageSize"
+	        :total="total"
+	        background
+	        layout="prev, pager, next"
+	        @current-change="currentChange"
+	      />
+	    </div>
+	  </div>
+	  <div v-if="videoLog == 2" class="video-detail">
+	    <div class="video-detail__wrapper">
+	      <video class="video-detail__video" ref="videoRef" muted autoplay controls>
+	        <source type="application/x-mpegURL" />
+	      </video>
+	      <div class="action-box">
+	        <div class="action-item">
+	          <img src="@/assets/images/plus.png" title="焦距变大" @click="handleAction(Z00M_IN)" />
+	          <span>聚焦</span>
+	          <img src="@/assets/images/minus.png" title="焦距变小" @click="handleAction(Z00M_OUT)" />
+	        </div>
+	        <div class="action-item">
+	          <img src="@/assets/images/up.png" title="上转" @click="handleAction(UP)" />
+	          <img src="@/assets/images/down.png" title="下转" @click="handleAction(DOWN)" />
+	          <img
+	            class="pause"
+	            src="@/assets/images/pause.png"
+	            title="停止操作"
+	            @click="handleAction(STOP)"
+	          />
+	          <img src="@/assets/images/left.png" title="左转" @click="handleAction(LEFT)" />
+	          <img src="@/assets/images/right.png" title="右转" @click="handleAction(RIGHT)" />
+	        </div>
+	      </div>
+	    </div>
+	    <div class="video-right">
+	      <div class="flex justify-between">
+	        <Title2 title="异常告警" />
+	        <div class="back-box" @click="handleBack">
+	          <img class="icon" src="@/assets/images/back.png" />
+	          <span>返回</span>
+	        </div>
+	      </div>
+	      <ul class="list">
+	        <li
+	          class="item"
+	          v-for="(item, index) in videoList"
+	          :key="index"
+	          @click="handleItemVideo(item.hlsUrl, 101, item.handleItemVideo)"
+	        >
+	          <div>
+	            <p class="item-title--primary">
+	              {{ item.cameraName || item.scenicAreaId }}
+	            </p>
+	            <video
+	              class="item-img"
+	              :id="'monitorVideo' + index"
+	              muted
+	              autoplay
+	              :controls="false"
+	              style="object-fit: cover"
+	            >
+	              <source src="" type="application/x-mpegURL" />
+	            </video>
+	          </div>
+	        </li>
+	      </ul>
+	    </div>
+	  </div>
+	  
+   <!-- <ul class="videos">
       <li class="video-item" v-for="item in 8" :key="item">
         <img src="@/assets/images/sxzd.png" alt="" />
         <p>
           <span>核心路段：这是一条信息说明</span>
         </p>
       </li>
-    </ul>
-    <div class="pagination-box">
+    </ul> -->
+  <!--  <div class="pagination-box">
       <el-pagination background layout="prev, pager, next" :total="1000" />
-    </div>
+    </div> -->
   </div>
 </template>
 
-<script setup></script>
+<script setup>
+	import { getRegionsListApi,getPreviewUrlApi } from '@/api/home'
+	import {
+	  getVideoTypeApi,
+	  getVideoRegionsApi,
+	  postVideoRemainApi,
+	  postVideoControlApi,
+	  postVideoCollectApi
+	} from '@/api/monitor'
+	import pubSub from 'pubsub-js'
+	import Hls from 'hls.js'
+	const Z00M_IN = 'ZOOM_IN' // 焦距变大
+	const Z00M_OUT = 'ZOOM_OUT' // 焦距变小
+	const UP = 'UP' // 上转
+	const DOWN = 'DOWN' // 下转
+	const LEFT = 'LEFT' // 左转
+	const RIGHT = 'RIGHT' // 右转
+	const STOP = 'STOP' // 停止操作
+	let ACTION = '0'
+	let hlsRefs = []
+	let hlsRef = null
+	let timer = null
+	let videoLog = ref(1)
+	let videoList = ref([])
+	let cameraIndexCode = ref('')
+	let videoRef = ref()
+	let monitorChange = null
+	let total = ref(0)
+	let loading = ref(false)
+	let command = ref('')
+	let params = reactive({
+	    businessScenicArea: "",
+	    cameraName: "",
+		pageNum: 1,
+		pageSize: 6,
+	})
+	const onMonitorChange = () => {
+	  monitorChange = pubSub.subscribe('hotelChange', (res, data) => {
+	    params.businessScenicArea = data.name
+	    params.pageNum = 1
+	    videoList.value = []
+	    total.value = 0
+	    getRegionsList()
+	  })
+	}
+	// 关注
+	const handleCollect = async (id, status, index) => {
+	  await postVideoCollectApi({
+	    id,
+	    isCollect: status == 0 ? 1 : 0
+	  })
+	  if (status == 0) {
+	    videoList.value[index].isCollect = 1
+	  } else {
+	    videoList.value[index].isCollect = 0
+	  }
+	  pubSub.publish('videoCollect', id)
+	}
+	// 采集
+	const handleAction = async (e) => {
+	  if (e == STOP) {
+	    ACTION = '1'
+	  } else {
+	    ACTION = '0'
+	    command.value = e
+	  }
+	  await postVideoControlApi({
+	    action: ACTION,
+	    command: command.value,
+	    cameraIndexCode: cameraIndexCode.value
+	  })
+	  if (e == STOP) {
+	    command.value = ''
+	  }
+	  ElMessage({
+	    message: '操作成功',
+	    type: 'success'
+	  })
+	}
+	// 返回列表
+	const handleBack = () => {
+	  videoLog.value = 1
+	  hlsRef.destroy()
+	  initVideo()
+	}
+	//清除 hls
+	const clearHlsRefs = () => {
+	  if (hlsRefs.length > 0) {
+	    hlsRefs.map((item) => {
+	      item.destroy()
+	    })
+	    hlsRefs = []
+	  }
+	}
+	// 分页
+	const currentChange = (e) => {
+	  clearHlsRefs()
+	  videoList.value = []
+	  getRegionsList()
+	}
+	//获取酒店视频列表
+	const getRegionsList = async()=>{
+		videoLog.value = 1
+		try {
+		    if (loading.value) return
+			let res = await getRegionsListApi({...params})
+		    if (res.data.length > 0) {
+			   videoList.value = res.data
+			   total.value = res.total
+			   console.log(videoList.value,'酒店视频列表')
+			   nextTick(() => {
+			     videoList.value.forEach(async (x, index) => {
+			       const video = document.getElementById(`monitorVideo${index}`)
+			       const hls = new Hls({
+			         maxBufferLength: 10, // 最大缓冲长度（秒）
+			         maxMaxBufferLength: 15, // 缓冲区长度的上限
+			         maxBufferSize: 30 * 1000 * 1000 // 最大缓冲大小（字节）
+			       })
+			       hls.loadSource(x.hlsUrl)
+			       hls.attachMedia(video)
+			       hls.on(Hls.Events.MANIFEST_PARSED, () => {
+			         video.play()
+			       })
+			       hlsRefs.push(hls)
+			     })
+			   })
+		    } else {
+			  if (timer) clearInterval(timer)
+			}
+			loading.value = false
+	    }catch (error) {
+			loading.value = false
+		}
+		 
+	}
+	const handleItemVideo = (url, type, code) => {
+	  videoLog.value = 2
+	  cameraIndexCode.value = code
+	  setTimeout(() => {
+	    hlsRef = new Hls({
+	      maxBufferLength: 10, // 最大缓冲长度（秒）
+	      maxMaxBufferLength: 15, // 缓冲区长度的上限
+	      maxBufferSize: 30 * 1000 * 1000 // 最大缓冲大小（字节）
+	    })
+	    hlsRef.loadSource(url)
+	    hlsRef.attachMedia(videoRef.value)
+	    hlsRef.on(Hls.Events.MANIFEST_PARSED, () => {
+	      videoRef.value.play()
+	    })
+	    if (type == 100) initVideo()
+	  }, 1000)
+	}
+	const initVideo = () => {
+	  clearHlsRefs()
+	  nextTick(() => {
+	    videoList.value.forEach(async (item, index) => {
+	      const video = document.getElementById(`monitorVideo${index}`)
+	      const hls = new Hls({
+	        maxBufferLength: 10, // 最大缓冲长度（秒）
+	        maxMaxBufferLength: 15, // 缓冲区长度的上限
+	        maxBufferSize: 30 * 1000 * 1000 // 最大缓冲大小（字节）
+	      })
+	      hls.loadSource(item.hlsUrl)
+	      hls.attachMedia(video)
+	      hls.on(Hls.Events.MANIFEST_PARSED, () => {
+	        video.play()
+	      })
+	      hlsRefs.push(hls)
+	    })
+	  })
+	}
+	// 更新视频
+	const postVideoRemain = async () => {
+	  timer = setInterval(() => {
+	    postVideoRemainApi({
+	      cameraIndexCode: videoList.value.map((item) => item.cameraIndexCode)
+	    })
+	  }, 3000)
+	}
+	onMounted(()=>{
+		onMonitorChange()
+	})
+	onUnmounted(() => {
+	  clearHlsRefs()
+	  if (timer) clearInterval(timer)
+	  pubSub.unsubscribe(monitorChange)
+	})
+</script>
 <style></style>
 <style scoped lang="scss">
+	.action {
+	  &-box {
+	    margin-top: vh(16);
+	    gap: vw(20);
+	    display: flex;
+	    align-items: center;
+	    justify-content: center;
+	  }
+	  &-item {
+	    padding: vw(16);
+	    display: flex;
+	    align-items: center;
+	    background: #0a4190;
+	    border-radius: vw(8);
+	    > img {
+	      cursor: pointer;
+	      width: vw(34);
+	      height: auto;
+	    }
+	    > span {
+	      margin: 0 vw(16);
+	      font-weight: 400;
+	      font-size: vw(16);
+	      color: #ffffff;
+	    }
+	    .pause {
+	      margin: 0 vw(10);
+	    }
+	  }
+	}
   .video-box {
     flex: 1;
     height: vh(950);
@@ -65,4 +390,300 @@
       justify-content: flex-end;
     }
   }
+  .video {
+    &-wrapper {
+      position: relative;
+      width: 100%;
+      height: 100%;
+	  margin-top: vh(40);
+	  margin-left: vw(10);
+      // padding: vh(30) vw(20);
+      // box-sizing: border-box;
+      // background-image: url('/src/assets/images/log-v-bg.png');
+      // background-size: 100% 100%;
+      .pagination {
+        padding: vh(10) vw(30);
+        position: absolute;
+        right: vw(30);
+        bottom: vh(20);
+      }
+    }
+    &-list {
+      gap: vw(8);
+      display: flex;
+      flex-wrap: wrap;
+      align-content: flex-start;
+    }
+    &-item {
+      position: relative;
+      width: vw(810);
+      height: vh(380);
+      padding: vh(10) vw(10);
+      background-image: url('/src/assets/images/item-primary.png');
+      background-size: 100% 100%;
+      &:hover {
+        .video-item__follow {
+          display: block !important;
+        }
+      }
+    }
+    &-item__follow {
+      cursor: pointer;
+      display: none;
+      position: absolute;
+      right: vw(8);
+      top: vw(8);
+      z-index: 9999;
+      padding: 0 vw(20);
+      height: vh(24);
+      text-align: center;
+      line-height: vh(24);
+      font-weight: 400;
+      font-size: vw(16);
+      color: #ffffff;
+      background-image: url('@/assets/images/unfollow.png');
+      background-size: 100% 100%;
+    }
+    &-item__unfollow {
+      @extend .video-item__follow;
+      background-image: url('@/assets/images/unfollow.png');
+    }
+  
+    &-item__inner {
+      position: relative;
+    }
+    &-item__title {
+      position: absolute;
+      left: 0;
+      bottom: 0;
+      width: 100%;
+      padding: vh(10) vw(10);
+      color: #fff;
+      font-size: vw(14);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      z-index: 999;
+    }
+    &-item__title--error {
+      @extend .video-item__title;
+      background-color: rgba(226, 27, 27, 0.72);
+    }
+    &-item__title--primary {
+      @extend .video-item__title;
+      background-color: rgba(4, 30, 69, 0.72);
+    }
+    &-item__video {
+      width: 100%;
+      height: vh(366);
+      object-fit: cover;
+    }
+    &-detail {
+      margin-left: vw(10);
+      display: flex;
+      justify-content: space-between;
+    }
+    &-detail__wrapper {
+      position: relative;
+      padding: vh(40) vw(50);
+      width: vw(2060);
+      height: vh(960);
+      // background-image: url('/src/assets/images/one-video-bg.png');
+      // background-size: 100% 100%;
+    }
+    &-detail__title {
+      position: absolute;
+      left: vw(50);
+      right: vw(50);
+      top: 40 (vh);
+      z-index: 9;
+      font-weight: 400;
+      font-size: vw(14);
+      color: #ffffff;
+      padding: vw(20);
+      display: flex;
+      justify-content: space-between;
+      background: rgba(4, 30, 69, 0.5);
+    }
+    &-detail__video {
+      width: 100%;
+      height: vh(780);
+      object-fit: contain;
+      background-color: #000;
+    }
+    &-right {
+      margin-left: vw(8);
+      width: vw(440);
+      height: vh(890);
+      background: #082f5a;
+      .back-box {
+        cursor: pointer;
+        padding-right: vw(20);
+        display: flex;
+        align-items: center;
+        .icon {
+          width: vw(30);
+          height: auto;
+          margin-right: vw(10);
+        }
+        & > span {
+          font-weight: bold;
+          font-size: vw(20);
+          color: #ffffff;
+        }
+      }
+      .list {
+        overflow-y: auto;
+        overflow-x: hidden;
+        height: vh(870);
+        padding: vw(8);
+        /* 滚动条整体样式 */
+        &::-webkit-scrollbar {
+          width: vw(0); /* 滚动条的宽度 */
+        }
+  
+        /* 滚动条轨道 */
+        &::-webkit-scrollbar-track {
+          background: #f1f1f1; /* 轨道的背景色 */
+        }
+  
+        /* 滚动条滑块 */
+        &::-webkit-scrollbar-thumb {
+          background: #888; /* 滑块的背景色 */
+          border-radius: 5px; /* 滑块的圆角 */
+        }
+  
+        /* 当鼠标悬停在滚动条上时滑块的样式 */
+        &::-webkit-scrollbar-thumb:hover {
+          background: #555; /* 滑块的背景色 */
+        }
+      }
+  
+      .item {
+        margin-bottom: vh(10);
+        padding: vw(10);
+        background-image: url('@/assets/images/item-primary.png');
+        background-size: 100% 100%;
+        & > div {
+          position: relative;
+        }
+        &-title {
+          position: absolute;
+          bottom: 0;
+          width: 100%;
+          padding: vw(10);
+          color: #fff;
+          font-size: vw(14);
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          z-index: 999;
+        }
+        &-title--error {
+          @extend .item-title;
+          background-color: rgba(226, 27, 27, 0.72);
+        }
+        &-title--primary {
+          @extend .item-title;
+          background-color: rgba(4, 30, 69, 0.72);
+        }
+        &-img {
+          width: 100%;
+          height: vh(164);
+          display: block;
+          object-fit: cover;
+        }
+      }
+    }
+    .video-live {
+      .video-rt {
+        width: vw(400);
+        height: vh(950);
+        background: radial-gradient(
+          to bottom 70% at 99% 50%,
+          #0a4190 0%,
+          rgba(0, 77, 136, 0.6) 100%
+        );
+        border-radius: 0px 0px 0px 0px;
+        border: 1px solid;
+        opacity: 0.4;
+        border-image: linear-gradient(180deg, rgba(0, 150, 255, 1), rgba(0, 90, 153, 0)) 1 1;
+        margin-left: vw(10);
+        padding: vw(20);
+        .rt-v-box {
+          overflow-y: auto;
+          /* 滚动条整体样式 */
+          &::-webkit-scrollbar {
+            width: vw(4); /* 滚动条的宽度 */
+          }
+          /* 滚动条轨道 */
+          &::-webkit-scrollbar-track {
+            background: 'transparent'; /* 轨道的背景色 */
+          }
+          /* 滚动条滑块 */
+          &::-webkit-scrollbar-thumb {
+            background: rgba(0, 150, 255, 0.63); /* 滑块的背景色 */
+            border-radius: 5px; /* 滑块的圆角 */
+          }
+          height: 100%;
+        }
+        .title {
+          background-image: url('/src/assets/images/nav-l-t-bg.png');
+          background-size: 100% 100%;
+          margin-bottom: vh(10);
+          position: relative;
+          left: vw(-20);
+          span {
+            margin-left: vw(30);
+            font-weight: 800;
+            font-size: vw(15);
+            line-height: vh(26);
+            text-align: center;
+            font-style: normal;
+            text-transform: none;
+  
+            background: linear-gradient(90deg, #ffffff 0%, #5cb5ff 100%);
+            -webkit-background-clip: text;
+            background-clip: text;
+            -webkit-text-fill-color: transparent;
+            color: transparent;
+          }
+        }
+        .rt-video {
+          width: 100%;
+          height: vh(300);
+          background-image: url('/src/assets/images/v-item-bg.png');
+          background-size: 100% 100%;
+          padding: vw(20);
+          box-sizing: border-box;
+          margin-bottom: vh(2);
+          position: relative;
+          .desc {
+            position: absolute;
+            width: 100%;
+            left: 0;
+            bottom: 0;
+            z-index: 9;
+            background: rgba(4, 30, 69, 0.5);
+            border-radius: 0px 0px 0px 0px;
+            text-align: center;
+            font-weight: 400;
+            font-size: vw(14);
+            color: #ffffff;
+            padding: vw(20);
+            text-align: left;
+            font-style: normal;
+            text-transform: none;
+          }
+        }
+        .v-error-bg {
+          background-image: url('/src/assets/images/v-item-bg-1.png');
+          background-size: 100% 100%;
+          .desc {
+            background: rgba(226, 27, 27, 0.5);
+          }
+        }
+      }
+    }
+}
 </style>