|
@@ -2,51 +2,51 @@
|
|
|
<div v-if="videoData.length === 1" class="video-container1 ">
|
|
|
<div class="video-item">
|
|
|
<div class="name">{{ videoData[0].name }}</div>
|
|
|
- <HKVideo :dot_data="videoData[0]" :height="900" />
|
|
|
+ <HKVideo :dot_data="videoData[0]" :height="866" />
|
|
|
</div>
|
|
|
</div>
|
|
|
<div v-else-if="videoData.length >= 2 && videoData.length <= 4" class="video-container2">
|
|
|
<div v-for="(item, index) in videoData" :key="index" class="video-item">
|
|
|
<div class="name">{{ item.name }}</div>
|
|
|
- <HKVideo :dot_data="item" :height="444" />
|
|
|
+ <HKVideo :dot_data="item" :height="410" />
|
|
|
</div>
|
|
|
</div>
|
|
|
<div v-else-if="videoData.length >= 5 && videoData.length <= 6" class="video-container3">
|
|
|
<div class="box1">
|
|
|
<div class="video-item2">
|
|
|
<div class="name">{{ videoData[0].name }}</div>
|
|
|
- <HKVideo :dot_data="videoData[0]" :height="596" />
|
|
|
+ <HKVideo :dot_data="videoData[0]" :height="562" />
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="box2">
|
|
|
<div class="video-item3">
|
|
|
<div class="name">{{ videoData[1].name }}</div>
|
|
|
- <HKVideo :dot_data="videoData[1]" :height="292" />
|
|
|
+ <HKVideo :dot_data="videoData[1]" :height="258" />
|
|
|
</div>
|
|
|
<div class="video-item3">
|
|
|
<div class="name">{{ videoData[2].name }}</div>
|
|
|
- <HKVideo :dot_data="videoData[2]" :height="292" />
|
|
|
+ <HKVideo :dot_data="videoData[2]" :height="258" />
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="box3">
|
|
|
<div class="video-item">
|
|
|
<div class="name">{{ videoData[3].name }}</div>
|
|
|
- <HKVideo :dot_data="videoData[3]" :height="292" />
|
|
|
+ <HKVideo :dot_data="videoData[3]" :height="258" />
|
|
|
</div>
|
|
|
<div class="video-item">
|
|
|
<div class="name">{{ videoData[4].name }}</div>
|
|
|
- <HKVideo :dot_data="videoData[4]" :height="292" />
|
|
|
+ <HKVideo :dot_data="videoData[4]" :height="258" />
|
|
|
</div>
|
|
|
<div class="video-item">
|
|
|
<div class="name">{{ videoData[5].name }}</div>
|
|
|
- <HKVideo :dot_data="videoData[5]" :height="292" />
|
|
|
+ <HKVideo :dot_data="videoData[5]" :height="258" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div v-else-if="videoData.length >= 7" class="video-container4">
|
|
|
<div v-for="(item, index) in videoData" :key="index" class="video-item">
|
|
|
<div class="name">{{ item.name }}</div>
|
|
|
- <HKVideo :dot_data="item" :height="292" />
|
|
|
+ <HKVideo :dot_data="item" :height="258" />
|
|
|
</div>
|
|
|
</div>
|
|
|
<div v-else class="tip">附近没有可用监控视频</div>
|
|
@@ -56,8 +56,7 @@
|
|
|
interface Props {
|
|
|
videoData: any[];
|
|
|
}
|
|
|
-const props = withDefaults(defineProps<Props>(), {
|
|
|
-});
|
|
|
+const props = withDefaults(defineProps<Props>(), {});
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
@@ -150,12 +149,17 @@ const props = withDefaults(defineProps<Props>(), {
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
}
|
|
|
-.video-item, .video-item2, .video-item3 {
|
|
|
+.video-item,
|
|
|
+.video-item2,
|
|
|
+.video-item3 {
|
|
|
position: relative;
|
|
|
+ background: url('@/assets/images/video/videoBg.png');
|
|
|
+ background-size: 100% 100%;
|
|
|
+ padding: 17px;
|
|
|
.name {
|
|
|
position: absolute;
|
|
|
- top: 10px;
|
|
|
- left: 10px;
|
|
|
+ bottom: 17px;
|
|
|
+ right: 17px;
|
|
|
color: #fff;
|
|
|
z-index: 11;
|
|
|
}
|