侧边视频

pages/index.vue

@@ -55,8 +55,10 @@ export default {
             }
             const { id } = data
             if (id) {
+              if (this.$router.name !== 'index-game-id') {
                 this.$router.replace(`/game/${id}`)
               }
+            }
           })
         },
       }

pages/index/game/_id.vue

 <template>
   <div>
     <Background/>
+    <div class="player">
       <div class="live-play">
         <div class="asset-number">EGM:{{ device ? device.assetNumber : '' }}</div>
         <img src="@/assets/images/temp/game/video-play.png" alt="" class="bg">
@@ -9,6 +10,10 @@
           <WebRTCPlayer ref="webrtc" :video-src="player" @click="(data) => click().player(data)"/>
         </div>
       </div>
+      <div v-if="device" class="right-player">
+        <RightPlayer :device="device"/>
+      </div>
+    </div>
     <div class="option-block">
       <div class="left-option">
         <img v-audio src="@/assets/images/temp/game/CREDIT-IN.gif" alt="" class="credit-in btn" @click="creditInShow = true">
@@ -78,6 +83,7 @@
 import Background from '@/components/common/bg/index'
 import { mapActions, mapState, mapMutations, } from 'vuex'
 import WebRTCPlayer from './components/WebRTCPlayer'
+import RightPlayer from './components/right-player'
 export default {
   filters: {
     autoTimeFilter(value) {
@@ -92,8 +98,9 @@ export default {
     },
   },
   components: {
-    WebRTCPlayer,
+    WebRTCPlayer, // 直播视频
     Background,
+    RightPlayer, // 右侧的直播板块
   },
   data() {
     return {
@@ -360,14 +367,17 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.live-play {
+.player {
+  display: flex;
+  left: 200px;
+  top: 10px;
+  position: relative;
+  .live-play {
     width: 560px;
     height: 368px;
     padding: 15px 15px 10px;
     position: relative;
     box-sizing: border-box;
-  left: 200px;
-  top: 16px;
     background: black;
     .asset-number {
       position: absolute;
@@ -409,7 +419,12 @@ export default {
       height: 100%;
       width: 100%;
     }
+  }
+  .right-player {
+    margin-left: 30px;
+  }
 }
+
 .option-block {
   position: absolute;
   bottom: 0;

pages/index/game/components/right-player.vue

+<template>
+  <div class="box">
+    <div :class="showPlayer1 ? 'show' : ''" class="btn camera" @click="showPlayer1 = !showPlayer1">
+      <div class="left-icon">
+        <img src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/photo-camera-interface-symbol-for-button.png" alt="">
+      </div>
+      <div class="text">上方屏幕</div>
+      <div class="right-icon">
+        <img src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/mobileKeyboard/arrowIcon.png" alt="">
+      </div>
+    </div>
+    <div v-show="showPlayer1" class="player1">
+      <div class="player-box">
+        <WebRTCPlayer ref="player1" class="player"/>
+      </div>
+    </div>
+    <div :class="showPlayer2 ? 'show' : ''" class="btn camera camera2" @click="showPlayer2 = !showPlayer2">
+      <div class="left-icon">
+        <img src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/photo-camera-interface-symbol-for-button.png" alt="">
+      </div>
+      <div class="text">实时视图</div>
+      <div class="right-icon">
+        <img src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/mobileKeyboard/arrowIcon.png" alt="">
+      </div>
+    </div>
+    <div v-show="showPlayer2" :class="showPlayer1 ? '' : 'big'" class="player2">
+      <div class="player-box">
+        <WebRTCPlayer ref="player2" class="player"/>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import WebRTCPlayer from './WebRTCPlayer'
+export default {
+  components: {
+    WebRTCPlayer,
+  },
+  props: {
+    device: {
+      type: Object,
+      default: () => {
+        return {}
+      },
+    },
+  },
+  data() {
+    return {
+      showPlayer1: false,
+      showPlayer2: false,
+    }
+  },
+  watch: {
+    device() {
+      this.play2()
+    },
+  },
+  mounted() {
+    if (this.device) {
+      this.play2()
+    }
+  },
+  methods: {
+    play1() {
+      const url = this.device.videoMainNumber
+      const webrtc = `webrtc://eslotstreaming.com${url}`
+      this.$refs.player1.initVideo(webrtc)
+    },
+    play2() {
+      const url = this.device.videoCamNumber
+      const webrtc = `webrtc://eslotstreaming.com${url}`
+      this.$refs.player2.initVideo(webrtc)
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.box {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  min-width: 220px;
+  .btn {
+    &.camera {
+      text-align: center;
+      display: flex;
+      height: 34px;
+      width: 160px;
+      line-height: 34px;
+      background-image: url(https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/Rectangle%208%20copy.png);
+      background-size: 100% 100%;
+      padding: 0 4px;
+      box-sizing: border-box;
+      color: #37e5f0;
+      font-size: 12px;
+      &.show {
+        .right-icon {
+          transform: rotate(180deg);
+        }
+      }
+      &.camera2 {
+        margin-top: -6px;
+      }
+      .left-icon {
+        width: 30px;
+        box-sizing: border-box;
+        padding: 8px;
+        img {
+          height: 100%;
+          display: block;
+        }
+      }
+      .right-icon {
+        width: 30px;
+        box-sizing: border-box;
+        padding: 8px 0;
+        img {
+          height: 16px;
+          margin: auto;
+          display: block;
+        }
+      }
+      .text {
+        flex: 1;
+      }
+    }
+  }
+  .player1, .player2 {
+    background-size: 100% 100%;
+    margin-top: -8px;
+    position: relative;
+    .player-box {
+      background: black;
+      margin: 5px;
+      box-sizing: border-box;
+      border-radius: 4px;
+      position: absolute;
+      left: 0px;
+      right: 0px;
+      top: 0px;
+      bottom: -2px;
+      overflow: hidden;
+    }
+  }
+  .player1 {
+    width: 220px;
+    height: 124px;
+    background-image: url(@/assets/images/temp/game/player1.png);
+  }
+  .player2 {
+    width: 160px;
+    height: 210px;
+    background-image: url(@/assets/images/temp/game/player2.png);
+    &.big {
+      width: 220px;
+      height: 290px;
+      .player-box {
+        border-radius: 6px;
+        left: 1px;
+        right: 1px;
+        top: 1px;
+        bottom: -1px;
+      }
+    }
+  }
+}
+</style>