zhibo he bug

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,11 +504,13 @@
     <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="guanbibutton">
-           <button type="button" class="btn btn-primary ">确认</button>
-           <button type="button" class="btn btn-secondary">取消</button>
-           </div>
+            <div class="title">
+                您确定要关闭直播吗？
+            </div>
+            <div class="buttons">
+                <div data-dismiss="modal">取消</div>
+                <div data-dismiss="modal" class="back" id="logout-btn">确定</div>
+            </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>