52 lines
1.6 KiB
Vue
52 lines
1.6 KiB
Vue
<template>
|
||
<!-- 中一 ---- 自巡检视角 -->
|
||
<div class="center-one child-container">
|
||
<div class="view-title">自巡检视角</div>
|
||
<div class="video-container">
|
||
<video controls style="width: 100%; height: 100%; border-radius: 12px" autoplay>
|
||
<source src="@/assets/video/测试.mp4" type="video/mp4" autoplay />
|
||
</video>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup></script>
|
||
|
||
<style lang="scss" scoped>
|
||
.center-one {
|
||
display: flex; /* 新增：启用flex布局 */
|
||
flex-direction: column; /* 新增：垂直排列 */
|
||
height: 100%; /* 新增：确保容器有高度 */
|
||
|
||
> .view-title {
|
||
width: 70%;
|
||
height: 42px;
|
||
margin: 0 auto;
|
||
background: url('@/assets/home-imgs/center-bg.png') no-repeat center center;
|
||
background-size: 100% 100%;
|
||
line-height: 36px;
|
||
text-align: center;
|
||
color: #b9e8fe;
|
||
font-size: 17px;
|
||
font-family: 'SourceHanSansCN-Medium';
|
||
flex-shrink: 0; /* 新增：防止标题被压缩 */
|
||
}
|
||
|
||
> .video-container {
|
||
flex: 1; /* 新增：占据剩余空间 */
|
||
min-height: 0; /* 新增：允许内容压缩 */
|
||
position: relative; /* 新增：为video定位提供基准 */
|
||
margin-top: 12px; /* 调整间距 */
|
||
|
||
video {
|
||
position: absolute; /* 新增：绝对定位填满容器 */
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover; /* 保持视频比例 */
|
||
}
|
||
}
|
||
}
|
||
</style>
|