347 lines
8.9 KiB
Python
347 lines
8.9 KiB
Python
<template>
|
||
<el-container>
|
||
<el-header style="height: 80px;padding: 0;">
|
||
<el-row class="biaotou">
|
||
<el-col :span="20" class="redBgTitle">
|
||
培训视频
|
||
</el-col>
|
||
</el-row>
|
||
</el-header>
|
||
<el-main style="padding:20px 0;">
|
||
<el-row class="typesButtons">
|
||
<div style="width: fit-content;">
|
||
<el-col class="typeItemWrap" style="width:100px;margin-top: 6px;">
|
||
<el-link :underline="false" @click="getList">
|
||
<span class="mune">全部</span>
|
||
</el-link>
|
||
</el-col>
|
||
<el-col
|
||
class="typeItemWrap"
|
||
style=""
|
||
v-for="o in typeOptions"
|
||
:key="o.id">
|
||
<el-link :underline="false" @click="getListtype(o)">
|
||
<span class="mune">{{o.name}}</span>
|
||
</el-link>
|
||
</el-col>
|
||
<el-col v-if="hasLowerLevel">
|
||
<el-divider style="margin: 0!important;"></el-divider>
|
||
</el-col>
|
||
<el-col
|
||
v-if="hasLowerLevel"
|
||
class="typeItemWrap"
|
||
style=""
|
||
v-for="p in subTypeOptions"
|
||
:key="p.id">
|
||
<el-link :underline="false" @click="getListSub(p)">
|
||
<span class="mune">{{p.name}}</span>
|
||
</el-link>
|
||
</el-col>
|
||
</div>
|
||
</el-row>
|
||
<!--<el-divider style="margin: 0!important;"></el-divider>-->
|
||
<el-row id="videoListWrap" style="margin-top:50px;" :gutter="10">
|
||
<el-col :xs="12" :sm="8" :lg="6" :xl="4" v-for="o in videoList" :key="o.id" style="margin-bottom: 10px">
|
||
<el-card :body-style="{ padding: '0px' }" shadow="always" class="cardDiv">
|
||
<a @click="clickImg(o)">
|
||
<el-image :src="o.coverurl" style="width:100%;height: 200px;"></el-image>
|
||
<div class="des"><span>{{o.description}}</span></div>
|
||
</a>
|
||
<div style="padding: 14px;">
|
||
<div style="height:50px">
|
||
<span style="font-family: 'Helvetica Neue';color:#af4545;">{{o.name}}</span>
|
||
</div>
|
||
<div class="bottom clearfix">
|
||
<el-row>
|
||
<el-col :span="6">
|
||
<el-button type="warning" style="border: none;float: left;padding: 2px; color:#dcae07;background-color: white;" icon="el-icon-view">{{o.views_n}}
|
||
</el-button>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-button type="warning" style="border: none;float: left;padding: 2px; color:#dcae07;
|
||
background-color: white;" icon="el-icon-s-custom">{{o.viewsp_n}}
|
||
</el-button>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-button type="warning" style="border: none;float: right;padding: 2px; color:#dcae07;
|
||
background-color: white;">{{ o.create_time.substring(0,10) }}
|
||
</el-button>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</div>
|
||
</el-card>
|
||
</el-col>
|
||
</el-row>
|
||
</el-main>
|
||
</el-container>
|
||
</template>
|
||
<script type="text/javascript">
|
||
import {getsignature, createVideo, getVideoList} from "@/api/video";
|
||
import {getDictList, getDictTypeList} from "@/api/dict";
|
||
|
||
|
||
import {genTree} from "@/utils";
|
||
export default {
|
||
components: {},
|
||
data() {
|
||
return {
|
||
type:null,
|
||
videoList: "",
|
||
typeOptions: [],
|
||
hasLowerLevel:false,
|
||
subTypeOptions:[],
|
||
};
|
||
},
|
||
computed: {},
|
||
created() {
|
||
/*this.getList();
|
||
this.getTypeAll();*/
|
||
},
|
||
mounted(){
|
||
let type = sessionStorage.getItem('videoType');
|
||
if(type){
|
||
this.type = type;
|
||
this.getTypeData();
|
||
this.getTypeAll();
|
||
}else{
|
||
this.getList();
|
||
this.getTypeAll();
|
||
}
|
||
let bigHeight = document.getElementsByClassName('app-main')[0].clientHeight;
|
||
let topHeight = document.getElementsByClassName('typesButtons')[0].clientHeight;
|
||
console.log(topHeight);
|
||
debugger;
|
||
let domHeight = bigHeight-200-topHeight;
|
||
document.getElementById('videoListWrap').style.height = domHeight + 'px';
|
||
// document.getElementById('videoListWrap').style.paddingTop = topHeight + 'px';
|
||
},
|
||
methods: {
|
||
//列表加载
|
||
getList() {
|
||
this.type = null;
|
||
this.listLoading = true;
|
||
getVideoList({pageoff: true}).then((response) => {
|
||
if (response.data) {
|
||
this.videoList = response.data;
|
||
}
|
||
this.listLoading = false;
|
||
});
|
||
},
|
||
|
||
getListtype(a) {
|
||
this.type = a.id;
|
||
if(a.children){
|
||
this.hasLowerLevel = true;
|
||
this.subTypeOptions = a.children;
|
||
}else{
|
||
this.hasLowerLevel = false;
|
||
this.subTypeOptions = [];
|
||
}
|
||
getVideoList({category: a.id, pageoff: true}).then((response) => {
|
||
if (response.data) {
|
||
this.videoList = response.data;
|
||
}
|
||
this.listLoading = false;
|
||
});
|
||
},
|
||
getListSub(a){
|
||
getVideoList({category: a.id, pageoff: true}).then((response) => {
|
||
if (response.data) {
|
||
this.videoList = response.data;
|
||
}
|
||
this.listLoading = false;
|
||
});
|
||
},
|
||
getTypeData(){
|
||
getVideoList({category: this.type, pageoff: true}).then((response) => {
|
||
if (response.data) {
|
||
this.videoList = response.data;
|
||
}
|
||
this.listLoading = false;
|
||
});
|
||
},
|
||
//视频类型
|
||
getTypeAll() {
|
||
getDictList({type__code: "data_video",is_used:true}).then((res) => {
|
||
this.typeOptions = genTree(res.data);
|
||
console.log(this.typeOptions);
|
||
});
|
||
},
|
||
|
||
//跳转播放视频界面
|
||
clickImg(a) {
|
||
if(this.type!==null){
|
||
let type = sessionStorage.getItem('videoType');
|
||
if(type){
|
||
sessionStorage.removeItem('videoType');
|
||
sessionStorage.setItem('videoType',this.type);
|
||
}else{
|
||
sessionStorage.setItem('videoType',this.type);
|
||
}
|
||
}else{
|
||
sessionStorage.removeItem('videoType');
|
||
}
|
||
let routeData = this.$router.resolve({
|
||
path: "/test/index",
|
||
query: {
|
||
id: a.id
|
||
}
|
||
});
|
||
|
||
//必要操作，否则不会打开新页面
|
||
window.open(routeData.href, '_blank');
|
||
// this.$router.push({path: "index", query: {fileid: a.fileid, id: a.id}})
|
||
}
|
||
},
|
||
};
|
||
|
||
|
||
</script>
|
||
|
||
|
||
<style lang="scss" scoped>
|
||
.el-divider--horizontal{
|
||
margin: 6px 0 0 0!important;
|
||
}
|
||
.typeItemWrap{
|
||
margin-top: 6px;
|
||
width:fit-content;
|
||
min-width:100px;
|
||
}
|
||
.el-link.el-link--default{
|
||
margin-right: 10px!important;
|
||
margin-bottom: 0!important;
|
||
}
|
||
.typeItemWrap:last-child .el-link.el-link--default{
|
||
margin-bottom: 10px!important;
|
||
}
|
||
#videoListWrap{
|
||
overflow-y: scroll;
|
||
}
|
||
.navbar {
|
||
display: none;
|
||
position: fixed;
|
||
}
|
||
|
||
.el-col-offset-0 {
|
||
margin-left: 50px;
|
||
}
|
||
|
||
.bottom {
|
||
margin-top: 13px;
|
||
line-height: 12px;
|
||
}
|
||
|
||
.button {
|
||
padding: 0;
|
||
float: right;
|
||
}
|
||
|
||
.image {
|
||
width: 100%;
|
||
display: block;
|
||
}
|
||
|
||
.biaotou {
|
||
background: url(../../assets/year-100-bg.png) no-repeat 50%, linear-gradient(90deg, #e95353 50%, #bf2221 0);
|
||
box-shadow: none;
|
||
height: 70px;
|
||
}
|
||
|
||
.clearfix:before,
|
||
.clearfix:after {
|
||
display: table;
|
||
content: "";
|
||
}
|
||
|
||
.clearfix:after {
|
||
clear: both
|
||
}
|
||
|
||
.el-header, .el-footer {
|
||
color: #333;
|
||
text-align: center;
|
||
line-height: 40px;
|
||
position: fixed;
|
||
width: 100%;
|
||
z-index: 1010;
|
||
}
|
||
|
||
.redBgTitle {
|
||
text-align: center;
|
||
color: seashell;
|
||
font-size: 32px;
|
||
line-height: 70px;
|
||
}
|
||
|
||
.el-aside {
|
||
background-color: #D3DCE6;
|
||
color: #333;
|
||
text-align: center;
|
||
line-height: 200px;
|
||
}
|
||
|
||
.el-main {
|
||
background-color: #ffffff;
|
||
color: #333;
|
||
text-align: center;
|
||
margin-top: 130px;
|
||
|
||
}
|
||
|
||
.typesButtons {
|
||
position: fixed;
|
||
/*width: 83%;*/
|
||
z-index: 1000;
|
||
margin-top: -80px;
|
||
background-color: rgb(245, 247, 250);
|
||
}
|
||
|
||
.des {
|
||
height: 100px;
|
||
margin-top: -100px;
|
||
z-index: 9999;
|
||
position: relative;
|
||
background-color: rgba(220, 38, 38, 0.2);
|
||
color: #f5f4f4;
|
||
opacity: 0;
|
||
}
|
||
|
||
.cardDiv:hover .des {
|
||
opacity: 1;
|
||
}
|
||
|
||
body > .el-container {
|
||
margin-bottom: 40px;
|
||
}
|
||
|
||
.mune {
|
||
font-family: PingFang SC, DFPKingGothicGB-Medium, sans-serif;
|
||
font-size: 16px;
|
||
font-weight: 500;
|
||
line-height: 24px;
|
||
max-width: 112px;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.el-link.el-link--default {
|
||
color: seashell;
|
||
background: #fff;
|
||
border: 1px solid rgba(0, 0, 0, .1);
|
||
border-radius: 100px;
|
||
color: rgba(131, 24, 24, 0.9);
|
||
cursor: pointer;
|
||
display: flex;
|
||
justify-content: center;
|
||
min-width: 72px;
|
||
padding: 5px 16px;
|
||
margin-bottom: 12px;
|
||
margin-right: 16px;
|
||
|
||
}
|
||
|
||
</style>
|