fix

index.css

@@ -1,194 +1,205 @@
 body {
-  margin: 0;
-  padding: 0;
-  height: 100vh;
+    margin: 0;
+    padding: 0;
+    height: 100vh;
 }
 
 .user-list-container {
-  background-image: url("./image/frame_sphy.png");
-  background-size: contain;
-  right: calc(58 / 576 * 1rem);
-  top: calc(50% + calc(52 * 2 / 576 * 1rem));
-  transform: translateY(calc(-50% - calc(52 / 576 * 1rem)));
-  position: fixed;
-  width: calc(1090 / 576 * 1rem);
-  height: calc(1580 / 576 * 1rem);
+    background-image: url("./image/frame_sphy@2x.png");
+    background-size: contain;
+    right: calc(58 / 576 * 1rem);
+    top: calc(50% + calc(52 * 2 / 576 * 1rem));
+    transform: translateY(calc(-50% - calc(52 / 576 * 1rem)));
+    position: fixed;
+    width: calc(943 / 576 * 1rem);
+    height: calc(1579 / 576 * 1rem);
 }
+
 .user-list-container .user-action {
-  margin-top: calc(150 / 576 * 1rem);
-  text-align: center;
-}
-.user-list-container .user-action > div {
-  background-image: url("./image/frame_meeting.png");
-  background-size: cover;
-  display: inline-block;
-  /* padding: 0 calc(118 / 576 * 1rem); */
-  width: calc(476 / 576 * 1rem);
-  height: calc(130 / 576 * 1rem);
-  line-height: calc(130 / 576 * 1rem);
-  font-size: calc(40 / 576 * 1rem);
-  color: #39d6fe;
-  cursor: pointer;
+    margin-top: calc(150 / 576 * 1rem);
+    text-align: center;
+}
+
+.user-list-container .user-action>div {
+    background-image: url("./image/frame_meeting.png");
+    background-size: cover;
+    display: inline-block;
+    /* padding: 0 calc(118 / 576 * 1rem); */
+    width: calc(402 / 576 * 1rem);
+    height: calc(130 / 576 * 1rem);
+    line-height: calc(130 / 576 * 1rem);
+    font-size: calc(40 / 576 * 1rem);
+    color: #39d6fe;
+    cursor: pointer;
 }
+
 .user-list-container .user-search {
-  margin-top: calc(60 / 576 * 1rem);
-  display: flex;
+    margin-top: calc(60 / 576 * 1rem);
+    display: flex;
 }
 
 .user-list-container .user-search input {
-  flex: 1;
-  box-sizing: border-box;
-  padding: calc(46 / 576 * 1rem);
-  height: calc(88 / 576 * 1rem);
-  border-radius: 44px;
-  border: 0 none;
-  outline: none;
-  background: #ffffff;
-  margin: 0 calc(58 / 576 * 1rem);
-  font-size: calc(40 / 576 * 1rem);
+    flex: 1;
+    box-sizing: border-box;
+    padding: calc(46 / 576 * 1rem);
+    height: calc(88 / 576 * 1rem);
+    border-radius: 44px;
+    border: 0 none;
+    outline: none;
+    background: #ffffff;
+    margin: 0 calc(58 / 576 * 1rem);
+    font-size: calc(40 / 576 * 1rem);
 }
+
 input::placeholder {
-  color: #c5c5c5;
+    color: #c5c5c5;
 }
+
 .user-list-container .user-list {
-  margin: 0 calc(58 / 576 * 1rem);
-  margin-top: calc(60 / 576 * 1rem);
+    margin: 0 calc(58 / 576 * 1rem);
+    margin-top: calc(60 / 576 * 1rem);
 }
+
 dl,
 dd,
 dt {
-  margin: 0;
-  padding: 0;
+    margin: 0;
+    padding: 0;
 }
+
 .user-list-container .user-list .user-dep {
-  /* font-size: calc(46 / 576 * 1rem); */
-  /* color: #ffffff; */
+    /* font-size: calc(46 / 576 * 1rem); */
+    /* color: #ffffff; */
 }
 
 .user-list-container .user-list .user-dep .dep-title {
-  font-size: calc(46 / 576 * 1rem);
-  color: #ffffff;
-  line-height: calc(96 / 576 * 1rem);
+    font-size: calc(46 / 576 * 1rem);
+    color: #ffffff;
+    line-height: calc(96 / 576 * 1rem);
 }
+
 .user-list-container .user-list .user-dep .dep-user {
-  line-height: calc(96 / 576 * 1rem);
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
+    line-height: calc(96 / 576 * 1rem);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
 }
+
 .user-list-container .user-list .user-dep .dep-user .dep-user-info {
-  display: flex;
-  flex-direction: column;
-  font-size: calc(40 / 576 * 1rem);
-  color: #ffffff;
-}
-.user-list-container
-  .user-list
-  .user-dep
-  .dep-user
-  .dep-user-info
-  > div:last-child {
-  color: #39d6fe;
-}
-
-.user-list-container .user-list .user-dep .dep-user .dep-user-action > img {
-  width: calc(80 / 576 * 1rem);
-  height: calc(80 / 576 * 1rem);
-  margin-left: calc(37 / 576 * 1rem);
-  cursor: pointer;
+    display: flex;
+    flex-direction: column;
+    font-size: calc(40 / 576 * 1rem);
+    color: #ffffff;
+}
+
+.user-list-container .user-list .user-dep .dep-user .dep-user-info>div:last-child {
+    color: #39d6fe;
+}
+
+.user-list-container .user-list .user-dep .dep-user .dep-user-action>img {
+    width: calc(80 / 576 * 1rem);
+    height: calc(80 / 576 * 1rem);
+    margin-left: calc(37 / 576 * 1rem);
+    cursor: pointer;
 }
+
 .video-container {
-  position: fixed;
-  display: flex;
-  left: 50%;
-  top: 50%;
-  transform: translate3d(
-    calc(-2663 / 2 / 576 * 1rem),
-    calc(-1275 / 2 / 576 * 1rem),
-    0
-  );
+    position: fixed;
+    display: flex;
+    left: 50%;
+    top: 50%;
+    transform: translate3d( calc(-2663 / 2 / 576 * 1rem), calc(-1275 / 2 / 576 * 1rem), 0);
 }
+
 .video-container .video-bar {
-  width: calc(2123 / 576 * 1rem);
-  height: calc(80 / 576 * 1rem);
-  background: #06076b;
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
+    width: calc(2123 / 576 * 1rem);
+    height: calc(80 / 576 * 1rem);
+    background: #06076b;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
 }
+
 .video-container .video-action {
-  width: calc(192 / 576 * 1rem);
-  height: calc(60 / 576 * 1rem);
-  line-height: calc(60 / 576 * 1rem);
-  text-align: center;
-  background: linear-gradient(0deg, #f74447 0%, #ff6665 100%);
-  color: #ffffff;
-  font-size: calc(32 / 576 * 1rem);
-  margin-right: calc(28 / 576 * 1rem);
-  cursor: pointer;
+    width: calc(192 / 576 * 1rem);
+    height: calc(60 / 576 * 1rem);
+    line-height: calc(60 / 576 * 1rem);
+    text-align: center;
+    background: linear-gradient(0deg, #f74447 0%, #ff6665 100%);
+    color: #ffffff;
+    font-size: calc(32 / 576 * 1rem);
+    margin-right: calc(28 / 576 * 1rem);
+    cursor: pointer;
 }
+
 .video-container #vPlayArea {
-  width: calc(2123 / 576 * 1rem);
-  height: calc(1195 / 576 * 1rem);
-  background: #06076b;
+    width: calc(2123 / 576 * 1rem);
+    height: calc(1195 / 576 * 1rem);
+    background: #06076b;
 }
+
 .video-container .video-user-content {
-  width: calc(540 / 576 * 1rem);
-  background: #000157;
-  display: flex;
-  flex-direction: column;
+    width: calc(540 / 576 * 1rem);
+    background: #000157;
+    display: flex;
+    flex-direction: column;
 }
+
 .video-container .video-user-title {
-  border-bottom: 2px solid #191a7d;
-  height: calc(98 / 576 * 1rem);
-  line-height: calc(98 / 576 * 1rem);
-  padding-left: calc(30 / 576 * 1rem);
-  color: #ffffff;
-  font-size: calc(30 / 576 * 1rem);
+    border-bottom: 2px solid #191a7d;
+    height: calc(98 / 576 * 1rem);
+    line-height: calc(98 / 576 * 1rem);
+    padding-left: calc(30 / 576 * 1rem);
+    color: #ffffff;
+    font-size: calc(30 / 576 * 1rem);
 }
 
 .video-container .video-user-list {
-  border-bottom: 2px solid #191a7d;
-  padding-left: calc(32 / 576 * 1rem);
-  color: #ffffff;
-  font-size: calc(30 / 576 * 1rem);
-  flex: 1;
+    border-bottom: 2px solid #191a7d;
+    padding-left: calc(32 / 576 * 1rem);
+    color: #ffffff;
+    font-size: calc(30 / 576 * 1rem);
+    flex: 1;
 }
 
 .video-container .video-user-action {
-  height: calc(80 / 576 * 1rem);
-  padding: 0 calc(32 / 576 * 1rem);
-  color: #ffffff;
-  font-size: calc(32 / 576 * 1rem);
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-.video-container .video-user-action > div {
-  height: calc(60 / 576 * 1rem);
-  line-height: calc(60 / 576 * 1rem);
-  border: 2px solid #39d6fe;
-  padding: 0 calc(30 / 576 * 1rem);
-  color: #39d6fe;
-  cursor: pointer;
-}
-.video-container .video-user-action > div:last-child {
-  border-color: #fff;
-  color: #fff;
+    height: calc(80 / 576 * 1rem);
+    padding: 0 calc(32 / 576 * 1rem);
+    color: #ffffff;
+    font-size: calc(32 / 576 * 1rem);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.video-container .video-user-action>div {
+    height: calc(60 / 576 * 1rem);
+    line-height: calc(60 / 576 * 1rem);
+    border: 2px solid #39d6fe;
+    padding: 0 calc(30 / 576 * 1rem);
+    color: #39d6fe;
+    cursor: pointer;
+}
+
+.video-container .video-user-action>div:last-child {
+    border-color: #fff;
+    color: #fff;
 }
 
 .video-container.only-video .video-user-content {
-  display: none;
+    display: none;
 }
 
 ::-webkit-scrollbar {
-  width: 5px;
-  height: 5px;
+    width: 5px;
+    height: 5px;
 }
+
 ::-webkit-scrollbar-track {
-  background: transparent;
+    background: transparent;
 }
+
 ::-webkit-scrollbar-thumb {
-  background: #39d6fe;
-  border-radius: 3px;
-}
+    background: #39d6fe;
+    border-radius: 3px;
+}

index.html

@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html lang="zh-CN">
-  <head>
+
+<head>
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -16,63 +17,67 @@
     <!-- <script src="./url.js"></script> -->
     <script src="./login.js"></script>
     <script src="./meeting.js"></script>
-    <script src="./action.js"> </script>
+    <script src="./action.js">
+    </script>
     <script src="./main.js"></script>
 
-  </head>
-  <body>
-    <div class="user-list-container" style="visibility: hidden;">
+</head>
+
+<body>
+    <!-- <div class="user-list-container" style="visibility: hidden;"> -->
+    <div class="user-list-container">
         <div class="user-action">
-          <div id="createMeAction">创建会议</div>
-          <div id="closeMeAction">关闭</div>
+            <div id="createMeAction">创建会议</div>
+            <div id="closeMeAction">关闭</div>
         </div>
         <div class="user-search">
-          <input type="text" placeholder="请输入您要拨打的号码" >
+            <input type="text" placeholder="请输入您要拨打的号码">
         </div>
         <div class="user-list">
-          <dl class="user-dep">
-            <dt class="dep-title">部门1</dt>
-            <dd class="dep-user">
-              <div class="dep-user-info">
-                <div>华设2</div>
-                <div> - </div>
-              </div>
-              <div class="dep-user-action">
-                <img  data-code="5269853761765376" class="videoAction" src="./image/icon_vedio.png" alt="">
-                <img src="./image/icon_voice.png" alt="">
-                <img src="./image/icon_phone.png" alt="">
-              </div>
-            </dd>
-            <dd class="dep-user">
-              <div class="dep-user-info">
-                <div>华设3</div>
-                <div> - </div>
-              </div>
-              <div class="dep-user-action">
-                <img data-code="5269856264912896" class="videoAction" src="./image/icon_vedio.png" alt="">
-                <img src="./image/icon_voice.png" alt="">
-                <img src="./image/icon_phone.png" alt="">
-              </div>
-            </dd>
-          </dl>
+            <dl class="user-dep">
+                <dt class="dep-title">部门1</dt>
+                <dd class="dep-user">
+                    <div class="dep-user-info">
+                        <div>华设2</div>
+                        <div> - </div>
+                    </div>
+                    <div class="dep-user-action">
+                        <img data-code="5269853761765376" class="videoAction" src="./image/icon_vedio.png" alt="">
+                        <img src="./image/icon_voice.png" alt="">
+                        <img src="./image/icon_phone.png" alt="">
+                    </div>
+                </dd>
+                <dd class="dep-user">
+                    <div class="dep-user-info">
+                        <div>华设3</div>
+                        <div> - </div>
+                    </div>
+                    <div class="dep-user-action">
+                        <img data-code="5269856264912896" class="videoAction" src="./image/icon_vedio.png" alt="">
+                        <img src="./image/icon_voice.png" alt="">
+                        <img src="./image/icon_phone.png" alt="">
+                    </div>
+                </dd>
+            </dl>
         </div>
     </div>
     <div class="video-container only-video" style="visibility: hidden;">
-      <div class="video-content">
-        <div id="vPlayArea"></div>
-        <div class="video-bar">
-          <div class="video-action">结束视频</div>
+        <div class="video-content">
+            <div id="vPlayArea"></div>
+            <div class="video-bar">
+                <div class="video-action">结束视频</div>
+            </div>
         </div>
-      </div>
-      <div class="video-user-content">
-        <div class="video-user-title">参会成员</div>
-        <div class="video-user-list"></div>
-        <div class="video-user-action">
-          <div>全部静音</div>
-          <div>解除全部静音</div>
+        <div class="video-user-content">
+            <div class="video-user-title">参会成员</div>
+            <div class="video-user-list"></div>
+            <div class="video-user-action">
+                <div>全部静音</div>
+                <div>解除全部静音</div>
+            </div>
         </div>
-      </div>
     </div>
 
-  </body>
-</html>
+</body>
+
+</html>