更新

src/layout/live/detailInfo.vue

@@ -12,11 +12,21 @@
                 <span>{{ roomInfo.title }}</span>
                 <span>房间号:{{ roomInfo.name }}</span>
               </p>
-              <p class="two">
-                <span><i class="iconfont iconfenxiang"></i>分享</span>
-                <span><i class="iconfont iconshexiangtou"></i>摄像头</span>
-                <span><i class="iconfont iconmaikefeng"></i>麦克风</span>
-              </p>
+              <div class="two">
+                <el-col :span="16" class="select">
+                  <el-select v-model="value" filterable placeholder="请选择摄像头">
+                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
+                  </el-select>
+                  <el-select v-model="value" filterable placeholder="请选择麦克风">
+                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
+                  </el-select>
+                </el-col>
+                <el-col :span="8" class="btn">
+                  <span><i class="iconfont iconfenxiang"></i>分享</span>
+                  <span><i class="iconfont iconshexiangtou"></i>摄像头</span>
+                  <span><i class="iconfont iconmaikefeng"></i>麦克风</span>
+                </el-col>
+              </div>
             </el-col>
           </el-col>
           <el-col :span="24" class="video">
@@ -42,7 +52,10 @@ export default {
   },
   components: {},
   data: function() {
-    return {};
+    return {
+      options: [],
+      value: '',
+    };
   },
   created() {},
   methods: {},
@@ -94,15 +107,26 @@ export default {
           position: absolute;
           right: 10px;
           bottom: 10px;
-          text-align: right;
-          span {
-            margin: 0 10px 0 0;
+          .select {
+            .el-select {
+              float: left;
+              width: 47%;
+              margin: 0 10px 0 0;
+            }
           }
-          span:last-child {
-            margin: 0;
-          }
-          span:hover {
-            cursor: pointer;
+          .btn {
+            height: 40px;
+            line-height: 40px;
+            text-align: right;
+            span {
+              margin: 0 10px 0 0;
+            }
+            span:last-child {
+              margin: 0;
+            }
+            span:hover {
+              cursor: pointer;
+            }
           }
         }
       }