|
@@ -3,7 +3,7 @@
|
|
|
<el-card
|
|
<el-card
|
|
|
id="devicePosition"
|
|
id="devicePosition"
|
|
|
shadow="never"
|
|
shadow="never"
|
|
|
- style="height: calc(100%); border: 0; width: 100vw"
|
|
|
|
|
|
|
+ style="height: calc(100%); border: 0"
|
|
|
:body-style="{ padding: '0px' }"
|
|
:body-style="{ padding: '0px' }"
|
|
|
class="border-none"
|
|
class="border-none"
|
|
|
>
|
|
>
|
|
@@ -143,14 +143,38 @@ const setPlayerRef = (el, index) => {
|
|
|
|
|
|
|
|
// 计算属性 - 直播样式
|
|
// 计算属性 - 直播样式
|
|
|
const liveStyle = computed(() => {
|
|
const liveStyle = computed(() => {
|
|
|
- let style = { width: '81%', height: '99%' }
|
|
|
|
|
- switch (spilt.value) {
|
|
|
|
|
- case 4:
|
|
|
|
|
- style = { width: '40%', height: '49%' }
|
|
|
|
|
- break
|
|
|
|
|
- case 9:
|
|
|
|
|
- style = { width: '27%', height: '32%' }
|
|
|
|
|
- break
|
|
|
|
|
|
|
+ let style = {}
|
|
|
|
|
+ // switch (spilt.value) {
|
|
|
|
|
+ // case 4:
|
|
|
|
|
+ // style = { width: '40%', height: '49%' }
|
|
|
|
|
+ // break
|
|
|
|
|
+ // case 9:
|
|
|
|
|
+ // style = { width: '27%', height: '32%' }
|
|
|
|
|
+ // break
|
|
|
|
|
+ // }
|
|
|
|
|
+
|
|
|
|
|
+ if (spilt.value === 1) {
|
|
|
|
|
+ if (isFullscreen.value) {
|
|
|
|
|
+ style = { width: '100%', height: '100%' }
|
|
|
|
|
+ } else {
|
|
|
|
|
+ style = { width: '81%', height: '99%', 'margin-right': '5px' }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ if (spilt.value === 4) {
|
|
|
|
|
+ if (isFullscreen.value) {
|
|
|
|
|
+ style = { width: '50%', height: '50%' }
|
|
|
|
|
+ } else {
|
|
|
|
|
+ style = { width: '40%', height: '49%', 'margin-right': '5px' }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ if (spilt.value === 9) {
|
|
|
|
|
+ if (isFullscreen.value) {
|
|
|
|
|
+ style = { width: '33.3%', height: '33.3%' }
|
|
|
|
|
+ } else {
|
|
|
|
|
+ style = { width: '27%', height: '32%', 'margin-right': '5px' }
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
nextTick(() => {
|
|
nextTick(() => {
|
|
@@ -609,7 +633,7 @@ const clear = (idx) => {
|
|
|
display: flex;
|
|
display: flex;
|
|
|
align-items: center;
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
justify-content: center;
|
|
|
- margin-right: 10px;
|
|
|
|
|
|
|
+ /* margin-right: 10px; */
|
|
|
position: relative;
|
|
position: relative;
|
|
|
/* border-radius: 5px; */
|
|
/* border-radius: 5px; */
|
|
|
}
|
|
}
|
|
@@ -658,14 +682,15 @@ const clear = (idx) => {
|
|
|
|
|
|
|
|
.fullscreen-layout {
|
|
.fullscreen-layout {
|
|
|
height: 100vh !important;
|
|
height: 100vh !important;
|
|
|
- width: 100% !important;
|
|
|
|
|
|
|
+ width: 100vw !important;
|
|
|
margin: 0 !important;
|
|
margin: 0 !important;
|
|
|
padding: 0 !important;
|
|
padding: 0 !important;
|
|
|
position: fixed !important;
|
|
position: fixed !important;
|
|
|
top: 0 !important;
|
|
top: 0 !important;
|
|
|
left: 0 !important;
|
|
left: 0 !important;
|
|
|
|
|
+ right: 0 !important;
|
|
|
overflow: hidden !important;
|
|
overflow: hidden !important;
|
|
|
- max-width: 100% !important;
|
|
|
|
|
- max-height: 105vh !important;
|
|
|
|
|
|
|
+ max-width: 100vw !important;
|
|
|
|
|
+ max-height: 100vh !important;
|
|
|
}
|
|
}
|
|
|
</style>
|
|
</style>
|