|
@@ -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>
|