|
|
@@ -3,6 +3,9 @@
|
|
|
<el-col :span="24">
|
|
|
<div class="livetop">
|
|
|
<div class="w_1200">
|
|
|
+ <!-- <el-col v-if="">
|
|
|
+ <el-col v-else-if="">
|
|
|
+ <el-col else> -->
|
|
|
<el-col :span="24" class="title">
|
|
|
吉林省计算中心对接直播大厅
|
|
|
</el-col>
|
|
|
@@ -51,9 +54,44 @@
|
|
|
</el-col>
|
|
|
</el-col>
|
|
|
<el-col :span="24" class="right">
|
|
|
- <p><span>交易实况</span></p>
|
|
|
+ <el-col :span="24">
|
|
|
+ <p>
|
|
|
+ <span>交易实况</span>
|
|
|
+ </p>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24">
|
|
|
+ <ul>
|
|
|
+ <li v-for="(item, index) in directlist" :key="index">
|
|
|
+ <span>[{{ item.time }}]</span> <span>{{ item.name1 }}</span> <span>与</span><span>{{ item.name2 }}</span
|
|
|
+ ><span>实现对接</span>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </el-col>
|
|
|
</el-col>
|
|
|
</el-col>
|
|
|
+ <el-col :span="24" class="newimage">
|
|
|
+ <el-image :src="superOne" style="width:100%;height:100px;position:relative;"> </el-image>
|
|
|
+ <span>使用手册</span>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="context">
|
|
|
+ <el-tabs type="border-card">
|
|
|
+ <el-tab-pane label="找技术">
|
|
|
+ <ul>
|
|
|
+ <li v-for="(item, index) in jishulist" :key="index">
|
|
|
+ <el-col :span="24" class="lileft">
|
|
|
+ <p>
|
|
|
+ <span>{{ item.title }}</span> <span><el-button class="background:bule">123</el-button></span>
|
|
|
+ </p></el-col
|
|
|
+ >
|
|
|
+ <el-col :span="24" class="liright"></el-col>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane label="找产品">配置管理</el-tab-pane>
|
|
|
+ <el-tab-pane label="找服务">角色管理</el-tab-pane>
|
|
|
+ <el-tab-pane label="找专家">定时任务补偿</el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+ </el-col>
|
|
|
</el-col>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
@@ -68,7 +106,22 @@ export default {
|
|
|
name: 'hall',
|
|
|
props: {},
|
|
|
components: {},
|
|
|
- data: () => ({}),
|
|
|
+ data: () => ({
|
|
|
+ directlist: [
|
|
|
+ {
|
|
|
+ time: '2019-03-05',
|
|
|
+ name1: '中科院宁波先进制造所',
|
|
|
+ name2: '深圳市华尔威体育用品',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ time: '2019-03-05',
|
|
|
+ name1: '10条数据',
|
|
|
+ name2: '10条数据',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ jishulist: [{ title: '测试产品1' }],
|
|
|
+ superOne: require('@/assets/live/main1.png'),
|
|
|
+ }),
|
|
|
created() {},
|
|
|
methods: {},
|
|
|
computed: {
|
|
|
@@ -155,7 +208,6 @@ export default {
|
|
|
.livemain .livevideo {
|
|
|
height: 470px;
|
|
|
overflow: hidden;
|
|
|
- margin: 0 0 15px 0;
|
|
|
}
|
|
|
.livemain .livevideo .left {
|
|
|
float: left;
|
|
|
@@ -200,4 +252,101 @@ p {
|
|
|
padding: 0 10px;
|
|
|
background: #fe950e;
|
|
|
}
|
|
|
+.right ul {
|
|
|
+ padding: 0;
|
|
|
+ margin: 0;
|
|
|
+}
|
|
|
+.right ul li {
|
|
|
+ height: 43px;
|
|
|
+ line-height: 40px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #fff;
|
|
|
+ border-bottom: 1px solid #ff8500;
|
|
|
+ padding: 0 0 0 10px;
|
|
|
+ margin: 0 20px;
|
|
|
+ overflow: hidden;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+}
|
|
|
+
|
|
|
+.right ul li span:first-child {
|
|
|
+ color: #ff8500;
|
|
|
+}
|
|
|
+
|
|
|
+.right ul li span {
|
|
|
+ margin: 0 20px 0 0;
|
|
|
+}
|
|
|
+
|
|
|
+.newimage {
|
|
|
+ background-size: 100% * 80px;
|
|
|
+ background-size: cover;
|
|
|
+ height: 100px;
|
|
|
+ width: 100%;
|
|
|
+ margin-bottom: 5px;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+.newimage span {
|
|
|
+ position: absolute;
|
|
|
+ top: 30px;
|
|
|
+ left: 650px;
|
|
|
+ color: #ffffff;
|
|
|
+ font-size: 36px;
|
|
|
+ // position: relative;
|
|
|
+ // top: 30px;
|
|
|
+ z-index: 999;
|
|
|
+}
|
|
|
+/deep/.el-tabs--border-card {
|
|
|
+ background: #fff;
|
|
|
+ border: 1px solid #c20808;
|
|
|
+ box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
|
|
|
+}
|
|
|
+
|
|
|
+/deep/.el-tabs--border-card > .el-tabs__header {
|
|
|
+ background-color: #f5f7fa;
|
|
|
+ border-bottom: 1px solid #c20808;
|
|
|
+ border-right: 1px solid #c20808;
|
|
|
+ border-left: 1px solid #c20808;
|
|
|
+ margin: 0;
|
|
|
+}
|
|
|
+
|
|
|
+/deep/.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
|
|
|
+ background-color: #fff;
|
|
|
+ border-right-color: #c20808;
|
|
|
+ border-left-color: #c20808;
|
|
|
+ color: #ff8500;
|
|
|
+}
|
|
|
+.context ul {
|
|
|
+ padding: 0;
|
|
|
+ margin: 0;
|
|
|
+ margin-block-start: 0;
|
|
|
+ margin-block-end: 0;
|
|
|
+ margin-inline-start: 0;
|
|
|
+ margin-inline-end: 0;
|
|
|
+ padding-inline-start: 0;
|
|
|
+}
|
|
|
+.context ul li {
|
|
|
+ margin: 0 20px;
|
|
|
+ overflow: hidden;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+}
|
|
|
+
|
|
|
+/deep/.el-tabs--border-card > .el-tabs__content {
|
|
|
+ padding: 15px 15px 15px 0;
|
|
|
+}
|
|
|
+.context ul li p span:first-child {
|
|
|
+ display: inline-block;
|
|
|
+ width: 85%;
|
|
|
+}
|
|
|
+.context ul li p span:first-child:hover {
|
|
|
+ color: #ff8500;
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+.lileft {
|
|
|
+ float: left;
|
|
|
+ width: 50%;
|
|
|
+}
|
|
|
+.liright {
|
|
|
+ width: 50%;
|
|
|
+}
|
|
|
</style>
|
