115 lines
3.0 KiB
Vue
115 lines
3.0 KiB
Vue
|
<template>
|
||
|
|
<!-- 左侧盒子1 -->
|
||
|
|
<div class="left-one child-container">
|
||
|
|
<n-flex justify="space-between" v-if="isShowAllBtns">
|
||
|
|
<div class="btns" @click="onHandleOperationPanel" v-if="!fullScreenVisible">
|
||
|
|
操作面板
|
||
|
|
</div>
|
||
|
|
<div class="btns" @click="onHandleOpenFullScreen" v-if="!fullScreenVisible">
|
||
|
|
全屏控制
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 返回 -->
|
||
|
|
<div class="back-btn" @click="onHandleBackFullScreen" v-if="fullScreenVisible">
|
||
|
|
<img src="@/assets/home-imgs/back-icon.png" />
|
||
|
|
返回
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="back-btn" @click="onHandleChangeView" v-if="fullScreenVisible">
|
||
|
|
视角切换
|
||
|
|
</div>
|
||
|
|
</n-flex>
|
||
|
|
|
||
|
|
<div class="video-container" :style="{ marginTop: isShowAllBtns ? '24px' : '0' }">
|
||
|
|
<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>
|
||
|
|
import { ref } from 'vue'
|
||
|
|
|
||
|
|
const props = defineProps({
|
||
|
|
fullScreenVisible: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false,
|
||
|
|
},
|
||
|
|
isShowAllBtns: {
|
||
|
|
type: Boolean,
|
||
|
|
default: true,
|
||
|
|
},
|
||
|
|
})
|
||
|
|
const emits = defineEmits(['onHandleOperationPanel', 'onHandleFullScreen'])
|
||
|
|
|
||
|
|
// 打开操作面板
|
||
|
|
const onHandleOperationPanel = () => {
|
||
|
|
emits('onHandleOperationPanel', true)
|
||
|
|
}
|
||
|
|
|
||
|
|
// 全屏控制
|
||
|
|
const onHandleOpenFullScreen = () => {
|
||
|
|
emits('onHandleFullScreenToggle', true)
|
||
|
|
}
|
||
|
|
|
||
|
|
// 退出全屏
|
||
|
|
const onHandleBackFullScreen = () => {
|
||
|
|
emits('onHandleFullScreenToggle', false)
|
||
|
|
}
|
||
|
|
|
||
|
|
// 视角切换
|
||
|
|
const onHandleChangeView = () => {}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.left-one {
|
||
|
|
display: flex; /* 新增 */
|
||
|
|
flex-direction: column; /* 新增 */
|
||
|
|
height: 100%; /* 确保容器有高度 */
|
||
|
|
|
||
|
|
.btns {
|
||
|
|
width: 160px;
|
||
|
|
height: 50px;
|
||
|
|
background: url('@/assets/home-imgs/button-bg.png') no-repeat center center;
|
||
|
|
background-size: 100% 100%;
|
||
|
|
line-height: 50px;
|
||
|
|
text-align: center;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
.back-btn {
|
||
|
|
width: 140px;
|
||
|
|
height: 32px;
|
||
|
|
background: url('@/assets/home-imgs/back-btn.png') no-repeat center center;
|
||
|
|
background-size: 100% 100%;
|
||
|
|
line-height: 32px;
|
||
|
|
text-align: center;
|
||
|
|
cursor: pointer;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
gap: 4px;
|
||
|
|
|
||
|
|
img {
|
||
|
|
width: 14px;
|
||
|
|
height: 14px;
|
||
|
|
margin-right: 4px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
> .video-container {
|
||
|
|
flex: 1; /* 占据剩余空间 */
|
||
|
|
min-height: 0; /* 关键：允许内容压缩 */
|
||
|
|
position: relative; /* 新增 */
|
||
|
|
|
||
|
|
video {
|
||
|
|
position: absolute; /* 新增 */
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
object-fit: cover; /* 保持视频比例 */
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|