更新

src/views/hall/directBefore.vue

@@ -2,7 +2,27 @@
   <div id="directBefore">
     <el-row>
       <el-col :span="24" class="style">
-        你信
+        <el-col :span="24" class="top">
+          <el-col :span="24" class="left">
+            中科在线
+          </el-col>
+          <el-col :span="24" class="right">
+            直播大厅
+          </el-col>
+        </el-col>
+        <el-col :span="24" class="main">
+          <div class="w_1200">
+            <el-col :span="24" class="title">{{ dockInfo.title }}</el-col>
+            <el-col :span="24" class="txt">主办方：{{ dockInfo.sponsor }}</el-col>
+            <el-col :span="24" class="txt">承办方：{{ dockInfo.organizer }}</el-col>
+            <el-col :span="24" class="txt">技术支持：长春市福瑞科技有限公司</el-col>
+            <el-col :span="24" class="btn">
+              <el-button @click="$router.push({ path: '/hall/direct', query: { id: dockInfo.id, title: dockInfo.title } })"
+                >进入活动现场<i class="iconfont icon-bofang"></i
+              ></el-button>
+            </el-col>
+          </div>
+        </el-col>
       </el-col>
     </el-row>
   </div>
@@ -10,17 +30,33 @@
 
 <script>
 import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: dock } = createNamespacedHelpers('dock');
 export default {
   name: 'directBefore',
   props: {},
   components: {},
   data: function() {
-    return {};
+    return {
+      dockInfo: {},
+    };
+  },
+  created() {
+    this.search();
+  },
+  methods: {
+    ...dock({ dockQuery: 'query', dockFetch: 'fetch', goodsquery: 'goodsquery' }),
+    async search() {
+      let res = await this.dockFetch(this.id);
+      if (this.$checkRes(res)) {
+        this.$set(this, `dockInfo`, res.data);
+      }
+    },
   },
-  created() {},
-  methods: {},
   computed: {
     ...mapState(['user']),
+    id() {
+      return this.$route.query.id;
+    },
     pageTitle() {
       return `${this.$route.meta.title}`;
     },
@@ -32,10 +68,57 @@ export default {
 </script>
 
 <style lang="less" scoped>
+.w_1200 {
+  width: 1200px;
+  margin: 0 auto;
+}
 .style {
   background-image: url('~@/assets/directBack.png');
   height: 100vh;
   background-size: 100% 100%;
   background-repeat: no-repeat;
+  .top {
+    .left {
+      height: 40px;
+      line-height: 40px;
+      padding: 0 15px;
+      font-size: 20px;
+      color: #fffa93;
+    }
+    .right {
+      text-align: center;
+      color: #fffa93;
+      font-size: 50px;
+      text-shadow: 2px 2px 5px #000;
+    }
+  }
+  .main {
+    text-align: center;
+    margin: 100px 0 0 0;
+    .title {
+      font-size: 40px;
+      color: #fffa93;
+      font-weight: bold;
+      font-family: monospace;
+      padding: 0 0 20px 0;
+      height: 100px;
+    }
+    .txt {
+      font-size: 25px;
+      color: #fffa93;
+      padding: 0 0 10px 0;
+    }
+    /deep/.btn {
+      margin: 50px 0 0 0;
+      .el-button {
+        background: linear-gradient(to bottom, #ffbd00 0%, #fd5a00 100%);
+        color: #fff;
+        border: none;
+        border-radius: 25px;
+        padding: 15px 40px;
+        font-size: 20px;
+      }
+    }
+  }
 }
 </style>