更新

src/router/index.js

@@ -22,6 +22,14 @@ const live = [
     meta: { title: '测试', subSite: true },
     component: () => import('../views/test2.vue'),
   },
+  {
+    path: '/direct',
+    name: 'live_direct',
+    meta: { title: '直播大厅', subSite: true },
+    component: () => import('../views/direct.vue'),
+  },
+
+  ,
 ];
 
 const routes = [...live];

src/views/direct.vue

@@ -0,0 +1,203 @@
+<template>
+  <div id="hall" style="background-color: #fff">
+    <el-col :span="24">
+      <div class="livetop">
+        <div class="w_1200">
+          <el-col :span="24" class="title">
+            吉林省计算中心对接直播大厅
+          </el-col>
+          <el-col :span="24" class="zhuban">
+            <span>主办方:</span>
+            <span>吉林省计算中心直播大厅</span>
+          </el-col>
+          <el-col :span="24" 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>
+          </el-col>
+        </div>
+      </div>
+      <div class="w_1200">
+        <el-col :span="24" class="livemain">
+          <el-col :span="24" class="livevideo">
+            <el-col :span="24" class="left">
+              <el-col :span="24" class="title">
+                <span style="color: rgb(255, 132, 0);">现场</span>
+                <span>直播</span>
+              </el-col>
+              <el-col :span="24" class="video">
+                直播换面
+              </el-col>
+            </el-col>
+            <el-col :span="24" class="right">
+              <p><span>交易实况</span></p>
+            </el-col>
+          </el-col>
+        </el-col>
+      </div>
+    </el-col>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+
+import _ from 'loadsh';
+export default {
+  name: 'hall',
+  props: {},
+  components: {},
+  data: () => ({}),
+  created() {},
+  methods: {},
+  computed: {
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.w_1200 {
+  margin: 0 auto;
+  width: 80%;
+}
+
+.livetop {
+  width: 100%;
+  height: 487px;
+  overflow: hidden;
+  background-image: url(../assets/live/top_3.png);
+}
+.livetop .title {
+  text-align: center;
+  color: #fff;
+  position: relative;
+  width: 100%;
+  font-size: 45px;
+  top: 65px;
+}
+.livetop .zhuban {
+  text-align: center;
+  color: #fff;
+  position: relative;
+  width: 100%;
+  font-size: 25px;
+  top: 140px;
+}
+.livetop .zhuban span:first-child {
+  font-weight: 700;
+}
+.livetop .num {
+  position: relative;
+  top: 190px;
+  color: #fff;
+}
+.livetop .num p {
+  float: left;
+  width: 15%;
+  background: #fff;
+  margin: 0 14px 0 0 !important;
+  color: #000;
+  height: 50px;
+  line-height: 50px;
+  border-radius: 30px;
+}
+.livetop .num p span:first-child {
+  display: inline-block;
+  width: 56%;
+  text-align: center;
+  height: 50px;
+  line-height: 50px;
+  font-size: 16px;
+  background: red;
+  border-radius: 30px;
+  color: #fff;
+  font-weight: 700;
+}
+.livetop .num p span:last-child {
+  display: inline-block;
+  width: 42%;
+  text-align: center;
+  font-size: 15px;
+  font-weight: 700;
+}
+.livemain {
+  position: relative;
+  top: -55px;
+  z-index: 999;
+}
+.livemain .livevideo {
+  height: 470px;
+  overflow: hidden;
+  margin: 0 0 15px 0;
+}
+.livemain .livevideo .left {
+  float: left;
+  width: 50%;
+  height: 460px;
+  overflow: hidden;
+  border: 5px solid #000;
+  background: #fff;
+  border-radius: 5px;
+}
+.livemain .livevideo .left .title {
+  padding: 0 10px;
+  height: 40px;
+  line-height: 40px;
+  font-size: 20px;
+  font-weight: 700;
+}
+p {
+  margin: 0 !important;
+}
+.livemain .livevideo .left .video {
+  height: 400px;
+  margin: 0 10px 10px 10px;
+  border: 2px solid #ccc;
+  width: 685px;
+}
+.livemain .livevideo .right {
+  width: 50%;
+  height: 460px;
+  overflow: hidden;
+  background-color: #6e042c;
+  border-top-left-radius: 5px;
+  border-bottom-left-radius: 5px;
+  overflow: hidden;
+}
+.livemain .livevideo .right p {
+  color: #fff;
+  width: 100%;
+  float: left;
+  height: 40px;
+  line-height: 40px;
+  padding: 0 10px;
+  background: #fe950e;
+}
+</style>