|
|
@@ -1,6 +1,6 @@
|
|
|
<template>
|
|
|
- <el-card style="border: none;border-radius: 0;" :body-style="{ padding: '0px', background: 'transparent' }">
|
|
|
- <el-row class='mainBox'>
|
|
|
+ <el-card style="border: none;border-radius: 0;height: 100%;background-color: transparent" :body-style="{ padding: '0px', background: 'transparent',textAlign:'-webkit-center' }">
|
|
|
+ <el-row class='mainBox' :style="mainBoxStyle">
|
|
|
<el-col :span='number' v-for='(item, index) in boxList.slice(boxListIndex)' :key='item.boxId'
|
|
|
:id="'childBox_' + item.boxId" class='childBox' :style='{ height: heightActive }'
|
|
|
@click.native='setActiveBox(item)' @dblclick.native="changeToOne(item)"
|
|
|
@@ -32,6 +32,8 @@ export default {
|
|
|
return {
|
|
|
clickBoxId: '',
|
|
|
showRedBorder: true,
|
|
|
+ mainBoxStyle: {}, // 动态样式
|
|
|
+ resizeObserver: null,
|
|
|
}
|
|
|
},
|
|
|
computed: {
|
|
|
@@ -89,8 +91,43 @@ export default {
|
|
|
},
|
|
|
mounted() {
|
|
|
// this.rectZoomInit()
|
|
|
+ this.updateMainBoxSize();
|
|
|
+ // 使用 ResizeObserver 监听容器变化
|
|
|
+ this.resizeObserver = new ResizeObserver(() => this.updateMainBoxSize());
|
|
|
+ this.resizeObserver.observe(this.$el);
|
|
|
+
|
|
|
+ // 监听窗口变化
|
|
|
+ window.addEventListener('resize', this.updateMainBoxSize);
|
|
|
+ },
|
|
|
+ beforeDestroy() {
|
|
|
+ this.resizeObserver?.disconnect();
|
|
|
+ window.removeEventListener('resize', this.updateMainBoxSize);
|
|
|
},
|
|
|
methods: {
|
|
|
+ updateMainBoxSize() {
|
|
|
+ const container = this.$el;
|
|
|
+ const containerWidth = container.clientWidth;
|
|
|
+ const containerHeight = container.clientHeight;
|
|
|
+
|
|
|
+ // 计算基于宽和高的两种情况
|
|
|
+ const heightBasedOnWidth = containerWidth * 9 / 16;
|
|
|
+ const widthBasedOnHeight = containerHeight * 16 / 9;
|
|
|
+
|
|
|
+ // 选择合适的基准,确保容器不会超出父元素
|
|
|
+ if (heightBasedOnWidth <= containerHeight) {
|
|
|
+ // 以宽为基准,高度会有剩余空间
|
|
|
+ this.mainBoxStyle = {
|
|
|
+ width: `${containerWidth}px`,
|
|
|
+ height: `${heightBasedOnWidth}px`,
|
|
|
+ };
|
|
|
+ } else {
|
|
|
+ // 以高为基准,宽度会有剩余空间
|
|
|
+ this.mainBoxStyle = {
|
|
|
+ width: `${widthBasedOnHeight}px`,
|
|
|
+ height: `${containerHeight}px`,
|
|
|
+ };
|
|
|
+ }
|
|
|
+ },
|
|
|
// 双击窗口转换成单画面播放
|
|
|
changeToOne(item) {
|
|
|
console.log(this.boxList)
|
|
|
@@ -166,7 +203,7 @@ export default {
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
.mainBox {
|
|
|
- padding-bottom: 90px;
|
|
|
+ //padding-bottom: 90px;
|
|
|
width: 100%;
|
|
|
aspect-ratio: 16/9;
|
|
|
margin: 0px;
|