live-cms/src/layout/live/detailInfo.vue

<template>
  <div id="detailInfo">
    <el-row>
      <el-col :span="24" class="info">
        <el-col :span="14" class="left">
          <el-col :span="24" class="top">
            <el-col :span="4" class="image">
              <el-image :src="roomInfo.filedir"></el-image>
            </el-col>
            <el-col :span="20" class="title">
              <p class="one">
                <span>{{ roomInfo.title }}</span>
                <span>房间号:{{ roomInfo.name }}</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">
            直播画面
          </el-col>
        </el-col>
        <el-col :span="10" class="right">
          <el-col :span="24" class="chat">
            聊天页面
          </el-col>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapState, createNamespacedHelpers } from 'vuex';
export default {
  name: 'detailInfo',
  props: {
    roomInfo: null,
  },
  components: {},
  data: function() {
    return {
      options: [],
      value: '',
    };
  },
  created() {},
  methods: {},
  computed: {
    ...mapState(['user']),
    pageTitle() {
      return `${this.$route.meta.title}`;
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
};
</script>

<style lang="less" scoped>
.info {
  border-style: double;
  border-color: #ff0000 #00ff00 #0000ff rgb(250, 0, 255);
  padding: 20px;
  .left {
    background-color: #f5f5f5;
    min-height: 800px;
    border: 1px solid blueviolet;
    .top {
      position: relative;
      border: 1px solid red;
      padding: 10px;
      .image {
        text-align: center;
        .el-image {
          width: 80px;
          height: 80px;
          border-radius: 90px;
        }
      }
      .title {
        .one {
          padding: 0 0 10px 0;
          span {
            display: inline-block;
            width: 50%;
          }
          span:last-child {
            text-align: right;
          }
        }
        .two {
          position: absolute;
          right: 10px;
          bottom: 10px;
          .select {
            .el-select {
              float: left;
              width: 47%;
              margin: 0 10px 0 0;
            }
          }
          .btn {
            height: 40px;
            line-height: 40px;
            text-align: right;
            span {
              margin: 0 10px 0 0;
            }
            span:last-child {
              margin: 0;
            }
            span:hover {
              cursor: pointer;
            }
          }
        }
      }
    }
  }
  .right {
    width: 40%;
    min-height: 800px;
    border: 1px solid cyan;
    margin: 0 0 0 20px;
  }
}
</style>