更新

src/router/index.js

@@ -78,6 +78,12 @@ const live = [
     name: 'live_list',
     component: () => import('../views/live/hall/liveList.vue'),
   },
+  {
+    path: '/live/hallDetail',
+    meta: { title: '直播详情', subSite: true },
+    name: 'live_hallDetail',
+    component: () => import('../views/live/hall/hallDetail.vue'),
+  },
   {
     path: '/live/home',
     meta: { title: '直播首页', subSite: true },

src/views/live/hall/hall.vue

@@ -47,7 +47,7 @@
           <div class="livemain">
             <div class="livevideo">
               <div class="left">
-                <p class="title"><span style="color:#FF8400">现场</span><span>直播</span></p>
+                <p class="title" @click="hallDetail()"><span style="color:#FF8400">现场</span><span>直播</span></p>
                 <div class="video">
                   直播换面
                 </div>
@@ -412,6 +412,10 @@ export default {
     apply(id) {
       this.$router.push({ path: '/live/liveApply', query: { id: id } });
     },
+    // 图文直播详情
+    hallDetail() {
+      this.$router.push({ path: '/live/hallDetail' });
+    },
   },
   filters: {
     getDate(meta) {

src/views/live/hall/hallDetail.vue

@@ -0,0 +1,154 @@
+<template>
+  <div id="liveList">
+    <div class="pz_top">
+      <div class="w_0100">
+        <div class="livetop">
+          <div class="w_1200">
+            <div class="title">
+              吉林省计算机中心对接直播中心
+            </div>
+            <div class="zhuban">
+              <span>主办方:</span>
+              <span>吉林省计算机中心直播大厅</span>
+            </div>
+            <div class="num">
+              <p>
+                <span>同时在线</span>
+                <span>1人</span>
+              </p>
+              <p>
+                <span>特邀嘉宾</span>
+                <span>1人</span>
+              </p>
+              <p>
+                <span>洽谈合作</span>
+                <span>1人</span>
+              </p>
+              <p>
+                <span>达成意愿</span>
+                <span>1人</span>
+              </p>
+              <p>
+                <span>展示成果</span>
+                <span>1人</span>
+              </p>
+              <p>
+                <span>发布需求</span>
+                <span>1人</span>
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="pz_main">
+      <div class="w_0100">
+        <div class="w_1200">
+          <el-col :span="24" class="hallDetail">
+            <el-col :span="12" class="left">
+              <el-col :span="24" class="top">
+                图文直播
+              </el-col>
+              <el-col :span="24" class="info">
+                直播画面
+              </el-col>
+            </el-col>
+            <el-col :span="12" class="right">
+              <el-col :span="24" class="top">
+                聊天记录
+              </el-col>
+              <el-col :span="24" class="info">
+                聊天记录列表
+              </el-col>
+            </el-col>
+            <el-col :span="24" class="hallDetailInput">
+              <el-input placeholder="请输入内容"></el-input>
+              <el-button type="primary">发送</el-button>
+            </el-col>
+          </el-col>
+        </div>
+      </div>
+    </div>
+    <div class="pz_down">
+      <div class="w_0100">
+        <div class="superdown">
+          <div class="w_1200">
+            <p>版权所有：吉林省技术算中心</p>
+            <p>
+              <span>技术支持：长春福瑞科技有限公司</span>
+              &nbsp;&nbsp;&nbsp;&nbsp;
+              <span>邮编：130000</span>
+              &nbsp;&nbsp;&nbsp;&nbsp;
+              <span>传真：239823982</span>
+            </p>
+            <p>
+              <span>地址：吉林省长春市朝阳区前进大街1244号</span>
+              &nbsp;&nbsp;&nbsp;&nbsp;
+              <span>电话：0134-1234567</span>
+              &nbsp;&nbsp;&nbsp;&nbsp;
+              <span>邮箱：123456@163.com</span>
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'hallDetail',
+  props: {},
+  components: {},
+  data: () => ({}),
+  created() {},
+  methods: {},
+  computed: {
+    ...mapState(['user']),
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less">
+@import '~@/style/style.css';
+.hallDetail {
+  height: 710px;
+  border: 1px solid red;
+  margin: 0 0 20px 0;
+}
+.hallDetail .left {
+  height: 600px;
+  border: 1px solid #cccccc;
+}
+.hallDetail .left .top {
+  height: 40px;
+  line-height: 40px;
+  padding: 0px 15px;
+  font-size: 18px;
+  border-bottom: 1px dashed #ccc;
+}
+.hallDetail .right {
+  border: 1px solid #ccc;
+  height: 600px;
+}
+.hallDetail .right .top {
+  height: 40px;
+  line-height: 40px;
+  padding: 0px 15px;
+  font-size: 18px;
+  border-bottom: 1px dashed #ccc;
+}
+.hallDetailInput {
+  padding: 31px 0 0 215px;
+}
+.hallDetailInput .el-input {
+  width: 70%;
+}
+</style>