|
|
@@ -0,0 +1,246 @@
|
|
|
+<template>
|
|
|
+ <div id="index">
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="24" class="main">
|
|
|
+ <div class="w_1200">
|
|
|
+ <el-col :span="24" class="top"> 宣传培训-{{ column_name }} </el-col>
|
|
|
+ <el-col :span="24" class="info">
|
|
|
+ <el-col :span="24" class="one">
|
|
|
+ <el-button type="primary" size="mini" @click="$router.push({ path: '/train/index' })">返回</el-button>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="two">
|
|
|
+ <el-col :span="24" class="title">
|
|
|
+ {{ info.title }}
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="twoVideo">
|
|
|
+ <el-col :span="18" class="left">
|
|
|
+ <video :src="video_url" controls="" controlsList="nodownload">您的浏览器不支持 video 标签。</video>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6" class="right">
|
|
|
+ <h1>视频列表</h1>
|
|
|
+ <el-col :span="24" class="list">
|
|
|
+ <el-col :span="24" class="videoList" v-for="(item, index) in videoList" :key="index" @click.native="show(item, index)">
|
|
|
+ <el-col :span="12" class="file">
|
|
|
+ <video :src="item.url" controlsList="nodownload" :poster="posterUrl">您的浏览器不支持 video 标签。</video>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12" class="videoInfo">
|
|
|
+ <p :style="`color:${menuIndex == index ? menuColor : ''}`">{{ item.name }}</p>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="thr">
|
|
|
+ <el-tabs type="border-card">
|
|
|
+ <el-tab-pane label="视频简介">
|
|
|
+ <p class="textOver"><span>举办方：</span>{{ info.organizers || '暂无' }}</p>
|
|
|
+ <p class="textOver"><span>举办城市：</span>{{ info.province || '暂无' }}-{{ info.city || '暂无' }}</p>
|
|
|
+ <p class="textOver"><span>培训时间：</span>{{ info.start_time || '暂无' }}-{{ info.end_time || '暂无' }}</p>
|
|
|
+ <p><span>视频简介：</span>{{ info.brief || '暂无' }}</p>
|
|
|
+ </el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { mapState, createNamespacedHelpers } from 'vuex';
|
|
|
+const { mapActions: online } = createNamespacedHelpers('online');
|
|
|
+const { mapActions: code } = createNamespacedHelpers('code');
|
|
|
+var moment = require('moment');
|
|
|
+export default {
|
|
|
+ metaInfo() {
|
|
|
+ return { title: this.$route.meta.title };
|
|
|
+ },
|
|
|
+ name: 'index',
|
|
|
+ props: {},
|
|
|
+ components: {},
|
|
|
+ data: function () {
|
|
|
+ return {
|
|
|
+ info: {},
|
|
|
+ // 视频
|
|
|
+ video_url: '',
|
|
|
+ videoList: [],
|
|
|
+ menuIndex: '',
|
|
|
+ menuColor: 'rgb(64,158,255)',
|
|
|
+ posterUrl: require('@a/train.png'),
|
|
|
+ };
|
|
|
+ },
|
|
|
+ async created() {
|
|
|
+ await this.search();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ ...online(['fetch']),
|
|
|
+ ...code(['xzqh']),
|
|
|
+ async search() {
|
|
|
+ let res = await this.fetch(this.id);
|
|
|
+ if (this.$checkRes(res)) {
|
|
|
+ this.$set(this, `videoList`, res.data.video);
|
|
|
+ this.$set(this, `info`, res.data);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 查询省市
|
|
|
+ async searchXzqh(data) {
|
|
|
+ if (data.province) {
|
|
|
+ const res = await this.xzqh();
|
|
|
+ if (this.$checkRes(res)) {
|
|
|
+ data.province = res.data.find((i) => i.code == data.province).name;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (data.city) {
|
|
|
+ const res = await this.xzqh({ code: data.city });
|
|
|
+ if (this.$checkRes(res)) {
|
|
|
+ data.city = res.data.find((i) => i.code == data.city).name;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ show(data, index) {
|
|
|
+ if (data) {
|
|
|
+ this.menuIndex = index;
|
|
|
+ this.$set(this, `video_url`, data.url);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ searchvideo() {
|
|
|
+ this.show(this.videoList[0], '0');
|
|
|
+ },
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapState(['user']),
|
|
|
+ id() {
|
|
|
+ return this.$route.query.id;
|
|
|
+ },
|
|
|
+ column_name() {
|
|
|
+ return this.$route.query.column_name;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ videoList: {
|
|
|
+ immediate: true,
|
|
|
+ deep: true,
|
|
|
+ handler(val) {
|
|
|
+ if (val) {
|
|
|
+ this.searchvideo();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+.main {
|
|
|
+ background: url('~@a/kjpd.png');
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ height: 100%;
|
|
|
+ .top {
|
|
|
+ font-size: 50px;
|
|
|
+ color: #ffffff;
|
|
|
+ font-family: '楷体';
|
|
|
+ height: 130px;
|
|
|
+ line-height: 130px;
|
|
|
+ }
|
|
|
+ .info {
|
|
|
+ min-height: 800px;
|
|
|
+ background: #ffffff5f;
|
|
|
+ border-radius: 10px;
|
|
|
+ padding: 20px;
|
|
|
+ .one {
|
|
|
+ text-align: right;
|
|
|
+ margin: 0 0 10px 0;
|
|
|
+ }
|
|
|
+ .two {
|
|
|
+ margin: 0 0 10px 0;
|
|
|
+ .title {
|
|
|
+ font-size: 35px;
|
|
|
+ font-weight: bold;
|
|
|
+ text-align: center;
|
|
|
+ font-family: cursive;
|
|
|
+ margin: 0 0 10px 0;
|
|
|
+ }
|
|
|
+ .twoVideo {
|
|
|
+ height: 430px;
|
|
|
+ background: #000;
|
|
|
+ .left {
|
|
|
+ video {
|
|
|
+ width: 100%;
|
|
|
+ height: 430px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .right {
|
|
|
+ height: 430px;
|
|
|
+ background: #000;
|
|
|
+ h1 {
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
+ text-align: center;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 16px;
|
|
|
+ background: #409eff;
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+ .list {
|
|
|
+ height: 390px;
|
|
|
+ overflow: auto;
|
|
|
+ padding: 0px 10px;
|
|
|
+ .videoList {
|
|
|
+ border-radius: 10px;
|
|
|
+ border: 1px solid #fff;
|
|
|
+ color: #fff;
|
|
|
+ margin: 10px 0 0 0;
|
|
|
+ height: 120px;
|
|
|
+ .file {
|
|
|
+ video {
|
|
|
+ width: 100%;
|
|
|
+ height: 117px;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .videoInfo {
|
|
|
+ padding: 10px 5px;
|
|
|
+ p {
|
|
|
+ font-size: 12px;
|
|
|
+ margin: 0 0 5px 0;
|
|
|
+ }
|
|
|
+ p:nth-child(1) {
|
|
|
+ font-size: 16px;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
+ word-break: break-all;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .videoList:hover {
|
|
|
+ cursor: pointer;
|
|
|
+ .videoInfo {
|
|
|
+ p:nth-child(1) {
|
|
|
+ color: #409eff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .thr {
|
|
|
+ /deep/.el-tabs--border-card {
|
|
|
+ background: transparent;
|
|
|
+ }
|
|
|
+ p {
|
|
|
+ border-bottom: 1px dashed #ccc;
|
|
|
+ color: #000000;
|
|
|
+ font-weight: bold;
|
|
|
+ padding: 10px 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
