dist/js/common.js

@@ -157,9 +157,9 @@ function setBtnClickFuc() {
   $('#logout-btn').on('click', () => {
     // window.location.hash='edit'
     // console.log(window.location.hash)
-    var x;
+    // var x;
-    var r=confirm("您确认关闭吗？");
+    // var r=confirm("您确认关闭吗？");
-    if (r==true){
+    // if (r==true){
        leave();
         $('#room-root').hide();
         $('#login-root').show();
@@ -188,6 +188,9 @@ function setBtnClickFuc() {
             },
             success(){
               res(1)
+            },
+            error(){
+              res(2)
             }
           })
         })
@@ -204,10 +207,10 @@ function setBtnClickFuc() {
           window.parent.location.href="/regime/livedetail?id=" + window.liveid;
         })
        
-    }
+    // }
-    else{
+    // else{
-      x="你按下了\"取消\"按钮!";
+    //   x="你按下了\"取消\"按钮!";
-    }
+    // }
     // leave();
     // $('#room-root').hide();
     // $('#login-root').show();
@@ -333,11 +336,14 @@ function addMemberView(id) {
     const src = $(el.target).attr("src") == "img/camera-on.png" ? 1 : 0
     console.log("video" + id);
     sendsx(id,src)
+  window.message(src == 1 ? "关闭摄像头成功" : "解禁摄像头成功")
+
   })
   memberElm.find("#mic-btn").click((el)=>{
     const src = $(el.target).attr("src") == "img/mic-on.png" ? 1 : 0
     console.log("mic" + id);
     sendjinyan(id,src)
+    window.message(src == 1 ? "关闭麦克风成功" : "解禁麦克风成功")
   })
   memberElm.find("#video-btn").removeAttr("id")
   memberElm.find("#mic-btn").removeAttr("id")
@@ -345,6 +351,7 @@ function addMemberView(id) {
  console.log("移除")
  getname(id).then((res)=>{
   $("#" + id).find('div.member-id').html(res);
+
   // console.log(.length)
  })
  memberElm.appendTo($('#member-list'));

dist/js/iminit.js

@@ -29,10 +29,10 @@ function getgrouplist(){
     promise.then(function(imResponse) {
       console.log(imResponse.data.memberCount);
       if(imResponse.data.memberCount < 3){
-        $("#main-video").css("grid-area","1/1/3/5")
+        $(".video-box").eq(0).css("grid-area","1/1/3/5")
         $(".liaotian").css("grid-area","3/1/4/5")
       }else{
-        $("#main-video").css("grid-area","1/1/3/4")
+        $(".video-box").eq(0).css("grid-area","1/1/3/4")
         $(".liaotian").css("grid-area","3/1/4/4")
       }
     }).catch(function(imError) {

dist/zhibo.html

@@ -8,6 +8,10 @@
     <link rel="stylesheet" href="./css/bootstrap-material-design.min.css">
     <link rel="stylesheet" href="./css/index.css">
     <link rel="stylesheet" href="./css/room.css">
+    <!-- 引入样式 -->
+    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
+    <!-- 引入组件库 -->
+    
     <script>
         (function (designWidth, maxWidth) {
             var doc = document,
@@ -60,6 +64,9 @@
         })(1366, 1024);
     </script>
     <style>
+        video{
+            position: unset !important; 
+        }
         #member-list > div{
             padding: 13rem;
             border-bottom: 1rem solid #EEEEEE;
@@ -136,6 +143,38 @@
             width: 40rem;
             height: 10rem;
         }
+        .modal-content{
+            border-radius: 3rem;
+            padding: 14rem;
+            margin-top: 15rem;
+        }
+        .modal-content .title{
+            width: 100%;
+            font-size: 10rem;
+            color: #595959;
+
+        }
+        .modal-content .buttons{
+            width: 100%;
+            font-size: 8rem;
+            color: #595959;
+            display: flex;
+            align-items: center;
+            justify-content: flex-end;
+            margin-top: 8rem;
+        }
+        .modal-content .buttons > div{
+            border: 1px solid #D9D9D9;
+            padding: 4rem 14rem;
+            margin-left: 11rem;
+            color: #595959;
+            border-radius: 3rem;
+            cursor:pointer;
+        }
+        .modal-content .buttons .back{
+            background-color: #1890FF;
+            color: #fff;
+        }
     </style>
 </head>
 
@@ -390,7 +429,7 @@
                     <div style="width: 20rem"></div>
                     <!-- id="logout-btn" -->
                     <!-- data-toggle="modal" data-target="#exampleModal" -->
-                    <img id="logout-btn" style="width: 45rem; height: 45rem" src="./img/logout.png" alt="">
+                    <img data-toggle="modal" data-target="#exampleModal"  style="width: 45rem; height: 45rem" src="./img/logout.png" alt="">
                 </div>
                 
                 
@@ -465,10 +504,12 @@
     <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
         <div class="modal-dialog">
           <div class="modal-content">
-           您确认要关闭吗？
+            <div class="title">
-           <div class="guanbibutton">
+                您确定要关闭直播吗？
-           <button type="button" class="btn btn-primary ">确认</button>
+            </div>
-           <button type="button" class="btn btn-secondary">取消</button>
+            <div class="buttons">
+                <div data-dismiss="modal">取消</div>
+                <div data-dismiss="modal" class="back" id="logout-btn">确定</div>
             </div>
           </div>
         </div>
@@ -535,6 +576,31 @@
             }
         })
     },5000)
+    </script>
+      <!-- import Vue before Element -->
+  <script src="https://unpkg.com/vue/dist/vue.js"></script>
+  <!-- import JavaScript -->
+  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
+    <script>
+    new Vue({
+      el: '#app',
+      data: function() {
+        return { visible: false }
+      },
+      methods:{
+        open(text){
+               this.$message({
+                    message: text,
+                    type: 'success'
+                    });
+          },
+      },
+      mounted(){
+          window.message = this.open
+      }
+    })
+
+
     </script>
 </body>
 

src/components/LivePlay.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="video">
-    <video v-if="isvideo" :id=" 'a' + time" style="width:100%;height:100%"></video>
+    <video v-if="isvideo" :id=" 'a' + time" style="width:100%;height:calc(100% - 0.58rem)"></video>
-    <img v-else :src="info.img" style="width:100%;height:100%" alt="">
+    <img v-else :src="info.img" style="width:100%;height:calc(100% - 0.58rem)" alt="">
     <div class="title fenxiang" @click="show"> <img src="@/static/images/fenxiang.png" alt=""> {{lan.$t('lijifenxiang')}}</div>
     <div class="liveinfo">