|
|
@@ -103,12 +103,36 @@
|
|
|
<div class="w_1200">
|
|
|
<el-col :span="24" class="three1">
|
|
|
<el-col :span="12" class="left">
|
|
|
- <video :src="dockInfo.file_path" autoplay="autoplay" controls="controls" v-if="dockInfo.file_path != 'video'" loop="loop">
|
|
|
- 您的浏览器不支持 video 标签。
|
|
|
- </video>
|
|
|
- <div class="videointro" v-else>
|
|
|
- <p>{{ dockInfo.videointro }}</p>
|
|
|
- </div>
|
|
|
+ <el-col :span="24" class="top">
|
|
|
+ <video :src="videoPath" autoplay="autoplay" controls="controls" v-if="dockInfo.videodata != ''" loop="loop">
|
|
|
+ 您的浏览器不支持 video 标签。
|
|
|
+ </video>
|
|
|
+ <div class="videointro" v-else>
|
|
|
+ <p>{{ dockInfo.title }}</p>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="down">
|
|
|
+ <el-carousel :interval="4000" type="card" height="50px" :autoplay="false">
|
|
|
+ <el-carousel-item
|
|
|
+ v-for="(item, index) in videoData"
|
|
|
+ :key="index"
|
|
|
+ :class="menuIndex == index ? 'indexClass' : 'videodata'"
|
|
|
+ @click.native="changeMenu(index, item)"
|
|
|
+ >
|
|
|
+ {{ item.videointro }}
|
|
|
+ </el-carousel-item>
|
|
|
+ </el-carousel>
|
|
|
+ <!-- <el-col
|
|
|
+ :span="6"
|
|
|
+ class=""
|
|
|
+ v-for="(item, index) in dockInfo.videodata"
|
|
|
+ :key="index"
|
|
|
+ @click.native="changeMenu(index, item)"
|
|
|
+ :class="menuIndex == index ? 'indexClass' : 'videodata'"
|
|
|
+ >
|
|
|
+ {{ item.videointro }}
|
|
|
+ </el-col> -->
|
|
|
+ </el-col>
|
|
|
</el-col>
|
|
|
<el-col :span="12" class="right">
|
|
|
<el-tabs v-model="activeName">
|
|
|
@@ -281,6 +305,7 @@ const { mapActions: transaction } = createNamespacedHelpers('transaction');
|
|
|
const { mapActions: market } = createNamespacedHelpers('market');
|
|
|
const { mapActions: flower } = createNamespacedHelpers('flower');
|
|
|
var moment = require('moment');
|
|
|
+var _ = require('loadsh');
|
|
|
export default {
|
|
|
metaInfo() {
|
|
|
return { title: this.$route.meta.title };
|
|
|
@@ -352,10 +377,15 @@ export default {
|
|
|
// 倒计时
|
|
|
djs: '',
|
|
|
countDown: true,
|
|
|
+ // 视频
|
|
|
+ menuIndex: '0',
|
|
|
+ videoData: [],
|
|
|
+ videoPath: '',
|
|
|
};
|
|
|
},
|
|
|
async created() {
|
|
|
await this.searchInfo();
|
|
|
+ await this.seachtVideo();
|
|
|
},
|
|
|
mounted() {
|
|
|
this.channel();
|
|
|
@@ -496,13 +526,29 @@ export default {
|
|
|
liveCenBtn() {
|
|
|
this.$router.push({ path: '/halltwo/liveCenter', query: { dock_id: this.id } });
|
|
|
},
|
|
|
+ // 查找视频
|
|
|
+ async seachtVideo() {
|
|
|
+ let res = await this.dockFetch(this.id);
|
|
|
+ if (this.$checkRes(res)) {
|
|
|
+ this.$set(this, `videoData`, res.data.videodata);
|
|
|
+ this.changeMenu('0', this.videoData[0]);
|
|
|
+ }
|
|
|
+ },
|
|
|
channel() {
|
|
|
this.$stomp({
|
|
|
[`/exchange/dock_video/${this.id}`]: this.onMessage,
|
|
|
});
|
|
|
},
|
|
|
onMessage(message) {
|
|
|
- this.$set(this.dockInfo, `file_path`, message.body);
|
|
|
+ let arr = JSON.parse(message.body);
|
|
|
+ this.$set(this, `videoData`, arr);
|
|
|
+ let num = this.videoData.length - 1;
|
|
|
+ let newarr = _.last(arr);
|
|
|
+ this.changeMenu(num, newarr);
|
|
|
+ },
|
|
|
+ changeMenu(index, item) {
|
|
|
+ this.menuIndex = index;
|
|
|
+ this.$set(this, `videoPath`, item.file_path);
|
|
|
},
|
|
|
},
|
|
|
computed: {
|
|
|
@@ -686,34 +732,66 @@ export default {
|
|
|
height: 440px;
|
|
|
margin: 0 0 50px 0;
|
|
|
.left {
|
|
|
- height: 440px;
|
|
|
- background: url('~@a/dock1.png');
|
|
|
- background-size: 100% 100%;
|
|
|
- background-repeat: no-repeat;
|
|
|
margin: 0 15px 0 0;
|
|
|
- video {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- background-color: #000;
|
|
|
- }
|
|
|
- .videointro {
|
|
|
- background: url(/img/dock1.bb2d84ec.png);
|
|
|
- text-align: center;
|
|
|
- color: #fff;
|
|
|
- font-size: 30px;
|
|
|
+ .top {
|
|
|
+ height: 390px;
|
|
|
+ overflow: hidden;
|
|
|
+ background: url('~@a/dock1.png');
|
|
|
background-size: 100% 100%;
|
|
|
background-repeat: no-repeat;
|
|
|
- height: 440px;
|
|
|
- padding: 0 10px;
|
|
|
- p {
|
|
|
- height: 240px;
|
|
|
- padding: 15% 0;
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- -webkit-line-clamp: 8;
|
|
|
- word-break: break-all;
|
|
|
- display: -webkit-box;
|
|
|
- -webkit-box-orient: vertical;
|
|
|
+ video {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background-color: #000;
|
|
|
+ }
|
|
|
+ .videointro {
|
|
|
+ background: url(/img/dock1.bb2d84ec.png);
|
|
|
+ text-align: center;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 30px;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ height: 440px;
|
|
|
+ padding: 0 10px;
|
|
|
+ p {
|
|
|
+ height: 240px;
|
|
|
+ padding: 15% 0;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ -webkit-line-clamp: 8;
|
|
|
+ word-break: break-all;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .down {
|
|
|
+ height: 50px;
|
|
|
+ overflow: hidden;
|
|
|
+ border: 1px solid #ccc;
|
|
|
+ .videodata {
|
|
|
+ border-radius: 10px;
|
|
|
+ background: #cccccc8f;
|
|
|
+ height: 50px;
|
|
|
+ line-height: 50px;
|
|
|
+ text-align: center;
|
|
|
+ margin: 0 5px;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ .videodata:hover {
|
|
|
+ cursor: pointer;
|
|
|
+ color: #fff;
|
|
|
+ background: #409eff;
|
|
|
+ }
|
|
|
+ .indexClass {
|
|
|
+ border-radius: 10px;
|
|
|
+ height: 50px;
|
|
|
+ line-height: 50px;
|
|
|
+ text-align: center;
|
|
|
+ margin: 0 5px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #fff;
|
|
|
+ background: #409eff;
|
|
|
}
|
|
|
}
|
|
|
}
|
