bug

src/project/beta/AppBroadcast1/LiveBroadcast.vue

@@ -1,6 +1,24 @@
 <template>
   <div class="LiveBroadcast">
-
+    <div class="top">
+      <h2>请选择设备</h2>
+      <image src="./img/right.png" />
+    </div>
+    <div class="middle">
+      <div class="tips">
+        <image src="./img/body.png" />
+        <p>请先选择设备再按住下方按钮开始喊话~</p>
+      </div>
+    </div>
+    <div class="bottom">
+      <image src="./img/microphone.png" />
+      <p>按住说话</p>
+    </div>
+    <div class="voice">
+      <h2>00:00:13</h2>
+      <div class="voice-wrapper">
+      </div>
+    </div>
   </div>
 </template>
 
@@ -28,6 +46,74 @@
 
 <style lang="scss" scoped>
   .LiveBroadcast {
+    height: 100vh;
+    overflow: hidden;
+    background: #F6F8FC;
 
+    .top {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      height: 128px;
+      padding: 0 32px;
+
+      h2 {
+        color: #333333;
+        font-size: 32px;
+        font-weight: 600;
+      }
+
+      image {
+        width: 32px;
+        height: 32px;
+      }
+    }
+
+    .middle {
+      height: calc(100% - 378px);
+      background: #fff;
+
+      .tips {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        height: 100%;
+
+        image {
+          width: 406px;
+          height: 306px;
+          margin-bottom: 40px;
+        }
+
+        p {
+          width: 346px;
+          font-size: 30px;
+          font-weight: 400;
+          color: #999999;
+          line-height: 42px;
+          text-align: center;
+        }
+      }
+    }
+
+    .bottom {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-direction: column;
+      height: 250px;
+
+      image {
+        width: 128px;
+        height: 128px;
+        margin-bottom: 16px;
+      }
+
+      p {
+        color: #333333;
+        font-size: 30px;
+      }
+    }
   }
 </style>