更新

src/router/index.js

@@ -66,6 +66,12 @@ const live = [
     name: 'live_hall',
     component: () => import('../views/live/hall/hall.vue'),
   },
+  {
+    path: '/live/liveList',
+    meta: { title: '直播中心', subSite: true },
+    name: 'live_list',
+    component: () => import('../views/live/hall/liveList.vue'),
+  },
 ];
 
 const routes = [

src/views/live/hall/hall.vue

@@ -246,6 +246,9 @@
         </div>
       </div>
     </div>
+    <div class="suspenInfo">
+      <el-link :underline="false" @click="clickBtn()" target="_blank">直播中心</el-link>
+    </div>
   </div>
 </template>
 
@@ -421,6 +424,10 @@ export default {
         this.$set(this, `serviceList`, res.data);
       }
     },
+    clickBtn() {
+      // console.log('你好');
+      this.$router.push({ path: '/live/liveList' });
+    },
   },
   filters: {
     getDate(meta) {
@@ -681,4 +688,25 @@ export default {
   color: #666;
   padding: 5px 0 0 0;
 }
+.suspenInfo {
+  position: fixed;
+  background: #0279d5;
+  width: 100px;
+  height: 100px;
+  z-index: 999;
+  left: 13%;
+  top: 60%;
+  border-radius: 20px;
+  box-shadow: 2px 2px 2px #055c9f;
+  text-align: center;
+  line-height: 100px;
+}
+/deep/.suspenInfo .el-link {
+  font-size: 20px;
+  color: #fff;
+  font-weight: bold;
+}
+.suspenInfo:hover {
+  background: #f60;
+}
 </style>

src/views/live/hall/liveList.vue

@@ -0,0 +1,247 @@
+<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-row class="liveList">
+            <el-col class="liveListInfo">
+              <el-col :span="24" class="liveLisTop">
+                <span>吉林省计算机中心对接直播中心</span>
+                <span>实况直播</span>
+              </el-col>
+              <el-col :span="24" class="liveLisMain">
+                <ul>
+                  <li v-for="(item, index) in liveList" :key="index">
+                    <span>[{{ item.date }}]</span>
+                    <span class="textOver">{{ item.company1 }}</span>
+                    <span>与</span>
+                    <span class="textOver">{{ item.company2 }}</span>
+                    <span>实现对接</span>
+                  </li>
+                </ul>
+              </el-col>
+              <el-col :span="24" class="liveLisDown">
+                <p><span>主办单位:</span><span>吉林省计算机中心对接直播中心</span></p>
+                <p><span>指导单位:</span><span>吉林省计算机中心对接直播中心</span></p>
+                <p><span>技术支持:</span><span>长春福瑞科技有限公司</span></p>
+              </el-col>
+            </el-col>
+          </el-row>
+        </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>
+export default {
+  name: 'liveList',
+  props: {},
+  components: {},
+  data: () => ({
+    liveList: [
+      {
+        date: '10:10:10',
+        company1: '长春市福瑞科技有限',
+        company2: '长春市福瑞科技有限',
+      },
+      {
+        date: '10:10:10',
+        company1: '长春市福瑞科技有限',
+        company2: '长春市福瑞科技有限',
+      },
+      {
+        date: '10:10:10',
+        company1: '长春市福瑞科技有限',
+        company2: '长春市福瑞科技有限',
+      },
+      {
+        date: '10:10:10',
+        company1: '长春市福瑞科技有限',
+        company2: '长春市福瑞科技有限',
+      },
+      {
+        date: '10:10:10',
+        company1: '长春市福瑞科技有限',
+        company2: '长春市福瑞科技有限',
+      },
+      {
+        date: '10:10:10',
+        company1: '长春市福瑞科技有限',
+        company2: '长春市福瑞科技有限',
+      },
+      {
+        date: '10:10:10',
+        company1: '长春市福瑞科技有限',
+        company2: '长春市福瑞科技有限',
+      },
+      {
+        date: '10:10:10',
+        company1: '长春市福瑞科技有限',
+        company2: '长春市福瑞科技有限',
+      },
+      {
+        date: '10:10:10',
+        company1: '长春市福瑞科技有限',
+        company2: '长春市福瑞科技有限',
+      },
+      {
+        date: '10:10:10',
+        company1: '长春市福瑞科技有限',
+        company2: '长春市福瑞科技有限',
+      },
+    ],
+  }),
+  created() {},
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+@import '~@/style/style.css';
+// 直播中心
+.liveList {
+  min-height: 800px;
+  background: #8e2321;
+  float: left;
+  width: 100%;
+  margin: 0 0 20px 0;
+  position: relative;
+  top: -50px;
+}
+.liveList .liveListInfo {
+  position: absolute;
+  top: 50px;
+}
+.liveListInfo .liveLisTop {
+  width: 100%;
+  text-align: center;
+  padding: 34px 0;
+  font-size: 40px;
+  color: #fff;
+}
+.liveListInfo .liveLisTop span:first-child {
+  font-size: 40px;
+  font-weight: bold;
+}
+.liveListInfo .liveLisTop span:last-child {
+  padding: 0 0 0 15px;
+  color: yellow;
+  font-family: monospace;
+  font-weight: bold;
+}
+.liveLisMain {
+  float: left;
+  width: 100%;
+  height: 470px;
+  overflow: hidden;
+}
+.liveLisMain ul li {
+  float: left;
+  border-bottom: 1px dashed #ccc;
+  width: 98%;
+  font-size: 20px;
+  padding: 10px 0;
+  margin: 0 10px;
+  color: #fff;
+}
+.liveLisMain ul li span:first-child {
+  color: #ffff00;
+  padding: 0 15px 0 0;
+  display: inline-block;
+}
+.liveLisMain ul li span:nth-child(2) {
+  display: inline-block;
+  width: 420px;
+}
+.liveLisMain ul li span:nth-child(3) {
+  display: inline-block;
+  width: 100px;
+}
+.liveLisMain ul li span:nth-child(4) {
+  display: inline-block;
+  width: 420px;
+}
+.liveLisDown {
+  float: left;
+  width: 100%;
+  height: 160px;
+  font-size: 16px;
+  padding: 25px 0 0 0;
+}
+.liveLisDown p {
+  padding: 10px 0 5px 10px;
+}
+.liveLisDown p span:first-child {
+  color: #fc3;
+  letter-spacing: 15px;
+}
+.liveLisDown p span:last-child {
+  color: #fff;
+}
+</style>