更新

src/layout/live/detailInfo.vue

@@ -0,0 +1,118 @@
+<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>
+              <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>
+            </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 {};
+  },
+  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;
+          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>

src/views/live/detail.vue

@@ -1,29 +1,69 @@
 <template>
   <div id="detail">
     <el-row>
-      <el-col :span="24">
-        详情
+      <el-col :span="24" class="index">
+        <el-col :span="24" class="top">
+          <topInfo :topTitle="pageTitle"></topInfo>
+        </el-col>
+        <el-col :span="24" class="main">
+          <detailInfo :roomInfo="roomInfo"></detailInfo>
+        </el-col>
       </el-col>
     </el-row>
   </div>
 </template>
 
 <script>
+import topInfo from '@/layout/public/top.vue';
+import detailInfo from '@/layout/live/detailInfo.vue';
 import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: room } = createNamespacedHelpers('room');
 export default {
   name: 'detail',
   props: {},
-  components: {},
+  components: {
+    topInfo,
+    detailInfo,
+  },
   data: function() {
-    return {};
+    return {
+      roomInfo: {},
+    };
+  },
+  created() {
+    console.log(this.id, this.name);
+    this.searchInfo();
+  },
+  methods: {
+    ...room(['query', 'delete', 'update', 'fetch']),
+    async searchInfo() {
+      let res = await this.fetch(this.id);
+      if (this.$checkRes(res)) {
+        this.$set(this, `roomInfo`, res.data);
+      }
+    },
   },
-  created() {},
-  methods: {},
   computed: {
-    ...mapState(['user']),
+    id() {
+      return this.$route.query.id;
+    },
+    name() {
+      return this.$route.query.name;
+    },
     pageTitle() {
       return `${this.$route.meta.title}`;
     },
+    mainTitle() {
+      let meta = this.$route.meta;
+      let main = meta.title || '';
+      let sub = meta.sub || '';
+      return `${main}${sub}`;
+    },
+    keyWord() {
+      let meta = this.$route.meta;
+      let main = meta.title || '';
+      return main;
+    },
   },
   metaInfo() {
     return { title: this.$route.meta.title };