计算边距

pages/index/game/index.vue

@@ -2,7 +2,7 @@
   <div>
     <Background/>
     <div :class="{is_mobile: is_mobile, 'hide-header': hideHeader, }" class="player">
-      <div class="live-play">
+      <div ref="livePlay" :style="playStyle" class="live-play">
         <div class="asset-number">EGM:{{ device ? device.assetNumber : '' }}</div>
         <img src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/pic_02.png" alt="" class="bg">
         <img src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/ic_object.png" alt="" class="top-icon">
@@ -45,6 +45,7 @@ export default {
       player: '',
       isPlay: false, // 直播是否在播放
       deviceButtonPanel: {},
+      playStyle: {},
     }
   },
   computed: {
@@ -84,6 +85,16 @@ export default {
       console.log('watch device', { ...this.device })
       this.init().play()
     },
+    is_mobile() {
+      this.$nextTick(() => {
+        this.init().playStyle()
+      })
+    },
+    hideHeader() {
+      this.$nextTick(() => {
+        this.init().playStyle()
+      })
+    },
   },
   mounted() {
     this.network().getData()
@@ -92,6 +103,7 @@ export default {
     if (this.device) {
       this.init().play()
     }
+    this.init().playStyle()
   },
   methods: {
     ...mapMutations([
@@ -108,6 +120,32 @@ export default {
           this.$refs.webrtc.initVideo(webrtc)
           this.isPlay = true
         },
+        // 计算屏幕内边距
+        playStyle: () => {
+          const { is_mobile, hideHeader } = this
+          const imgWidth = 560 // 图片原本宽度
+          const pt = 28
+          const pb = 12
+          const px = 14
+          const width = this.$refs?.livePlay?.offsetWidth || 0
+          console.log('width', width)
+          let spt = pt
+          let spb = pb
+          let spx = px
+          let padding = '30px 18px 13px'
+          if (is_mobile || hideHeader) {
+            spt = pt * width / imgWidth
+            spb = pb * width / imgWidth
+            spx = px * width / imgWidth
+          }
+
+          padding = `${spt}px ${spx}px ${spb}px`
+          console.log('padding', padding)
+          const style = {
+            padding,
+          }
+          this.playStyle = style
+        },
       }
     },
     network() {
@@ -272,9 +310,6 @@ export default {
       margin-left: 0;
       margin-top: 20px;
     }
-    .live-play {
-      padding: 32px 18px 16px;
-    }
   }
 
   &.hide-header {
@@ -286,9 +321,6 @@ export default {
     .right-player {
       display: none;
     }
-    .live-play {
-      padding: 34px 24px 18px;
-    }
   }
 }