Commit 4c129346 authored by 黄奎's avatar 黄奎

翻译调整

parent 51b1213f
<template> <template>
<div class="Educationvideo" ref="divSrcoll"> <div class="Educationvideo" ref="divSrcoll">
<div class="left"> <div class="left">
<ul class="lineUl" style="margin-top:64px"> <ul class="lineUl" style="margin-top:64px">
<li @click="SelectLineId(-1)" :class="msg.LineId ==-1 ? 'Active' : ''"> <li @click="SelectLineId(-1)" :class="msg.LineId ==-1 ? 'Active' : ''">
不限 不限
</li> </li>
<li @click="SelectLineId(item.LineID)" :class="msg.LineId == item.LineID ? 'Active' : ''" v-for="(item,index) in LineList" :key="index"> <li @click="SelectLineId(item.LineID)" :class="msg.LineId == item.LineID ? 'Active' : ''"
{{item.LineName}} v-for="(item,index) in LineList" :key="index">
</li> {{item.LineName}}
</ul> </li>
</ul>
</div> </div>
<div class="right"> <div class="right">
<div class="search"> <div class="search">
<el-input size="small" style="width:600px" :placeholder="$t('fnc.qsrneirong')" v-model="msg.Name" class="input-with-select"> <el-input size="small" style="width:600px" :placeholder="$t('fnc.qsrneirong')" v-model="msg.Name"
<el-button @click="Search" slot="append" icon="el-icon-search"></el-button> class="input-with-select">
</el-input> <el-button @click="Search" slot="append" icon="el-icon-search"></el-button>
<el-button style="margin-left:20px" size="small" type="danger" @click.prevent="goUrl1('EducationvideoList',$event)" round>发布视频</el-button> </el-input>
<el-button style="margin-left:20px" size="small" type="danger"
@click.prevent="goUrl1('EducationvideoList',$event)" round>发布视频</el-button>
</div> </div>
<div v-loading="loading" class="Content"> <div v-loading="loading" class="Content">
<ul class="videoUl"> <ul class="videoUl">
<li v-for="(item,index) in dataList" :key="index"> <li v-for="(item,index) in dataList" :key="index">
<div :style="{backgroundImage: 'url(' + item.background + ')', backgroundSize:'cover'}" @click.prevent="goUrl('EducationvideoSee',item)" class="imgDiv"> <div :style="{backgroundImage: 'url(' + item.background + ')', backgroundSize:'cover'}"
<!-- <img v-if="item.Cover && item.Cover!=''" :onerror="defaultImg" style="min-height:199px;width:100%" :src="item.Cover" alt=""> @click.prevent="goUrl('EducationvideoSee',item)" class="imgDiv">
<img v-else style="height:199px;width:100%" src="../assets/img/hotel/biefu.png" alt=""> --> <div class="backDiv">
<div class="backDiv"> <span class="iconfont icon-ico_bofang"></span>
<span class="iconfont icon-ico_bofang"></span> </div>
<!-- <div @click.prevent="goUrl1('EducationvideoList',$event)" class="icon"> </div>
<span class="iconfont icon-weihu"></span> <div class="contentDiv">
</div> --> <img v-if="item.EmPhoto && item.EmPhoto!=''" :src="item.EmPhoto" alt="">
</div> <img v-else src="../assets/img/default.png" alt="">
<div class="DesDiv">
</div> <el-tooltip class="item" effect="dark" :content="item.Name" placement="top-start">
<div class="contentDiv"> <p style="font-size:14px" class="bold text1">{{item.Name}}</p>
<img v-if="item.EmPhoto && item.EmPhoto!=''" :src="item.EmPhoto" alt=""> </el-tooltip>
<img v-else src="../assets/img/default.png" alt=""> <p class="wryh" style="color:#aaaaaa">{{item.EmName}}</p>
<div class="DesDiv"> <p class="wryh" style="color:#aaaaaa">{{item.WatchNum}}次观看
<el-tooltip class="item" effect="dark" :content="item.Name" placement="top-start"> <span style="margin-left:5pxy"></span>
<p style="font-size:14px" class="bold text1">{{item.Name}}</p> <span>{{item.UpdateDate}}</span>
</el-tooltip> </p>
<!-- <p>生成二维码</p> -->
<p class="wryh" style="color:#aaaaaa">{{item.EmName}}</p> </div>
<p class="wryh" style="color:#aaaaaa">{{item.WatchNum}}次观看
<span style="margin-left:5pxy"></span>
<span>{{item.UpdateDate}}</span>
</p>
</div>
</div>
</li>
</ul>
<div v-if="dataList.length==0" style="text-align:center;padding-top:40px">
<span style="font-size:60px;color:#ccc" class="iconfont icon-wushuju"></span>
</div> </div>
<div v-show="nodata && msg.pageIndex>1" class="wryh" style="text-align:center;padding:15px 0;font-size:12px;color:#aaaaaa">无更多数据</div> </li>
<!-- <el-pagination background @current-change="handleCurrentChange" </ul>
layout="total,prev, pager, next, jumper" :page-size="msg.pageSize" :total='total'> <div v-if="dataList.length==0" style="text-align:center;padding-top:40px">
</el-pagination> --> <span style="font-size:60px;color:#ccc" class="iconfont icon-wushuju"></span>
</div> </div>
<div style="opacity: 0;" ref="bottomDiv">1111</div> <div v-show="nodata && msg.pageIndex>1" class="wryh"
style="text-align:center;padding:15px 0;font-size:12px;color:#aaaaaa">无更多数据</div>
</div>
<div style="opacity: 0;" ref="bottomDiv">1111</div>
</div> </div>
<div class="videoDiv" v-show="videoDivState"> <div class="videoDiv" v-show="videoDivState">
<div style="text-align:right;padding-right:15px;cursor:pointer"><span @click="Setvideo" style="font-size:30px;color:#fff" class="iconfont icon-bumenguanli-shanchu"></span></div> <div style="text-align:right;padding-right:15px;cursor:pointer"><span @click="Setvideo"
<video ref="myVideo" autoplay="autoplay" width="100%" height="90%" :src="thisVideoAddress" controls="controls"> style="font-size:30px;color:#fff" class="iconfont icon-bumenguanli-shanchu"></span></div>
<video ref="myVideo" autoplay="autoplay" width="100%" height="90%" :src="thisVideoAddress" controls="controls">
<source :src="thisVideoAddress" type="video/mp4"> <source :src="thisVideoAddress" type="video/mp4">
<source :src="thisVideoAddress" type="video/ogg"> <source :src="thisVideoAddress" type="video/ogg">
</video> </video>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
name: 'Educationvideo', name: 'Educationvideo',
created() {},
created() { data() {
}, return {
data () { videoDivState: false,
return { thisVideoAddress: "",
videoDivState:false, defaultImg: 'this.src="' + require("../assets/img/bg_z1@2x.png") + '"',
thisVideoAddress:"", val: '',
defaultImg: 'this.src="' + require("../assets/img/bg_z1@2x.png") + '"', LineList: [],
val:'', msg: {
LineList:[], pageIndex: 1,
msg:{ pageSize: 20,
pageIndex:1, Name: '',
pageSize:20, UserType: 1,
Name:'', VideoStatus: 1,
UserType:1, CreateBy: '',
VideoStatus:1, LineId: -1,
CreateBy:'', },
LineId:-1, dataList: [],
total: 0,
loading: false,
windowHeight: 0,
nodata: false,
}
},
mounted() {
this.getLineList();
this.getList();
this.$nextTick(() => {
window.addEventListener('scroll', this.ScrollTop)
})
let h = document.documentElement.clientHeight || document.body.clientHeight;
this.windowHeight = h;
},
destroyed() {
window.removeEventListener('scroll', this.ScrollTop)
},
methods: {
//生成小程序码
createVideoQrCode(item) {
var postMsg = {
Id: item.Id
}
this.apipost(
"Video_get_GetLvXiaoYouVideoCodeShare", postMsg,
res => {
console.log("res", res);
if (res.data.resultCode == 1) {
}
}
);
}, },
dataList:[], Search() {
total:0, this.msg.pageIndex = 1;
loading:false, this.nodata = false;
windowHeight:0, this.dataList = [];
nodata:false,
}
},
mounted() {
this.getLineList();
this.getList();
this.$nextTick(()=>{
window.addEventListener('scroll',this.ScrollTop)
})
let h = document.documentElement.clientHeight || document.body.clientHeight;
this.windowHeight=h;
},
destroyed(){
window.removeEventListener('scroll',this.ScrollTop)
},
methods: {
Search(){
this.msg.pageIndex=1;
this.nodata=false;
this.dataList=[];
this.getList(); this.getList();
}, },
Setvideo(){ Setvideo() {
this.videoDivState=false; this.videoDivState = false;
let myVideo=this.$refs.myVideo; let myVideo = this.$refs.myVideo;
myVideo.pause(); myVideo.pause();
}, },
ScrollTop(){ ScrollTop() {
var that = this; var that = this;
// that.scroll = (document.documentElement.scrollTop || document.body.scrollTop)+70; if (that.$refs.bottomDiv.getBoundingClientRect()) {
// var divSrcoll = this.$refs.divSrcoll.scrollTop;
if(that.$refs.bottomDiv.getBoundingClientRect()){
var bottomDiv = that.$refs.bottomDiv.getBoundingClientRect().top; var bottomDiv = that.$refs.bottomDiv.getBoundingClientRect().top;
if(this.windowHeight-50 < bottomDiv){ if (this.windowHeight - 50 < bottomDiv) {
this.handleCurrentChange(); this.handleCurrentChange();
} }
} }
}, },
SelectLineId(id){ SelectLineId(id) {
this.dataList=[]; this.dataList = [];
this.nodata=false; this.nodata = false;
this.msg.pageIndex=1; this.msg.pageIndex = 1;
this.msg.LineId=id; this.msg.LineId = id;
this.getList(); this.getList();
}, },
handleCurrentChange() { handleCurrentChange() {
this.msg.pageIndex = this.msg.pageIndex+1; this.msg.pageIndex = this.msg.pageIndex + 1;
this.getList(); this.getList();
}, },
//获取列表 //获取列表
getList() { getList() {
if(this.nodata){ if (this.nodata) {
return; return;
} }
this.loading=true; this.loading = true;
this.apipost( this.apipost(
"Video_get_GetPCVideoPageList",this.msg, "Video_get_GetPCVideoPageList", this.msg,
res => { res => {
this.loading=false; this.loading = false;
if (res.data.resultCode == 1) { if (res.data.resultCode == 1) {
let data= res.data.data.pageData; let data = res.data.data.pageData;
if(data.length==0 && this.msg.pageIndex>1){ if (data.length == 0 && this.msg.pageIndex > 1) {
this.nodata=true; this.nodata = true;
} } else {
else{ data.forEach(item => {
data.forEach(item=>{ let lastUrl = "?x-oss-process=video/snapshot,t_9,f_jpg,w_299,h_0,m_fast";
let lastUrl="?x-oss-process=video/snapshot,t_9,f_jpg,w_299,h_0,m_fast"; item.background = item.VideoAddress + lastUrl;
item.background=item.VideoAddress+lastUrl;
}) })
this.dataList = this.dataList.concat(data) this.dataList = this.dataList.concat(data)
} }
this.total = res.data.data.count; this.total = res.data.data.count;
} }
} }
); );
}, },
goUrl1(path,e){ goUrl1(path, e) {
e.stopPropagation() e.stopPropagation()
this.$router.push({ this.$router.push({
name:path, name: path,
// query: { });
// blank: "y"
// }
});
}, },
AddList(id) { AddList(id) {
this.apipost( this.apipost(
"Video_post_SetVideoWatch",{VideoId:id}, "Video_post_SetVideoWatch", {
VideoId: id
},
res => { res => {
if (res.data.resultCode == 1) { if (res.data.resultCode == 1) {
} }
} }
); );
}, },
goUrl(path,item){ goUrl(path, item) {
let that=this; let that = this;
this.videoDivState=true; this.videoDivState = true;
this.thisVideoAddress = item.VideoAddress;
this.thisVideoAddress=item.VideoAddress;
this.AddList(item.Id) this.AddList(item.Id)
let myVideo=this.$refs.myVideo; let myVideo = this.$refs.myVideo;
myVideo.play(); myVideo.play();
if(!item.VideoWH || item.VideoWH==''){ if (!item.VideoWH || item.VideoWH == '') {
myVideo.addEventListener('canplay', function () { myVideo.addEventListener('canplay', function () {
let VideoWH=this.videoWidth+','+this.videoHeight; let VideoWH = this.videoWidth + ',' + this.videoHeight;
that.AddWidthHeight(VideoWH,item.Id) that.AddWidthHeight(VideoWH, item.Id)
});
}); }
},
AddWidthHeight(VideoWH, id) {
let msg = {
Id: id,
VideoWH: VideoWH
}
this.apipost(
"Video_set_SetPCVideoWHInfo", msg,
res => {
if (res.data.resultCode == 1) {}
} }
);
}, },
AddWidthHeight(VideoWH,id) { //获取线路列表
let msg={
Id:id,
VideoWH:VideoWH
}
this.apipost(
"Video_set_SetPCVideoWHInfo",msg,
res => {
if (res.data.resultCode == 1) {
}
}
);
},
//获取线路列表
getLineList() { getLineList() {
this.apipost( this.apipost(
"Video_get_GetPCVideoLineList", {}, "Video_get_GetPCVideoLineList", {},
res => { res => {
if (res.data.resultCode == 1) { if (res.data.resultCode == 1) {
this.LineList = res.data.data; this.LineList = res.data.data;
} }
} }
); );
}, },
}, },
}
}
</script> </script>
<style> <style>
.text1{ .text1 {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 1; -webkit-line-clamp: 1;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
height:20px; height: 20px;
} }
.wryh{
font-family: '微软雅黑' .wryh {
} font-family: '微软雅黑'
.Educationvideo .right .Content .videoUl li .backDiv{ }
display: flex;
align-items: center; .Educationvideo .right .Content .videoUl li .backDiv {
justify-content: center; display: flex;
position: absolute; align-items: center;
width: 100%; justify-content: center;
height: 100%; position: absolute;
background: rgba(0,0,0,0.3); width: 100%;
top: 0; height: 100%;
} background: rgba(0, 0, 0, 0.3);
top: 0;
.Educationvideo .right .Content .videoUl li .imgDiv .icon-ico_bofang{ }
position: absolute;
font-size: 36px; .Educationvideo .right .Content .videoUl li .imgDiv .icon-ico_bofang {
color:#fff; position: absolute;
} font-size: 36px;
color: #fff;
.videoDiv{ }
position: fixed;
top: 0; .videoDiv {
width: 100%; position: fixed;
height: 100%; top: 0;
z-index: 999999999; width: 100%;
background: #000; height: 100%;
} z-index: 999999999;
.Educationvideo .contentDiv img{ background: #000;
width:35px;height:35px;border-radius:50%; }
position: absolute;
.Educationvideo .contentDiv img {
width: 35px;
} height: 35px;
.Educationvideo .contentDiv .DesDiv{ border-radius: 50%;
padding-left: 45px; position: absolute;
box-sizing: border-box;
width: 100%;
} }
.Educationvideo .contentDiv{
position: relative; .Educationvideo .contentDiv .DesDiv {
margin-top:5px; padding-left: 45px;
} box-sizing: border-box;
.Educationvideo .bold{ width: 100%;
font-family: "pingfangR" }
}
.Educationvideo .el-pagination.is-background .el-pager li:not(.disabled).active{ .Educationvideo .contentDiv {
background-color: #f56c6c!important; position: relative;
} margin-top: 5px;
.Educationvideo .right .Content .circle{ }
.Educationvideo .bold {
font-family: "pingfangR"
}
.Educationvideo .el-pagination.is-background .el-pager li:not(.disabled).active {
background-color: #f56c6c !important;
}
.Educationvideo .right .Content .circle {
display: inline-block; display: inline-block;
width: 3px; width: 3px;
height:3px; height: 3px;
background: #666666; background: #666666;
border-radius: 50%; border-radius: 50%;
} }
.Educationvideo .right .Content .videoUl li .imgDiv:hover .icon{
.Educationvideo .right .Content .videoUl li .imgDiv:hover .icon {
display: block; display: block;
} }
.Educationvideo .right .Content .videoUl li .imgDiv .icon{
.Educationvideo .right .Content .videoUl li .imgDiv .icon {
position: absolute; position: absolute;
right: 3px; right: 3px;
top: 3px; top: 3px;
padding: 2px 6px; padding: 2px 6px;
background: #000; background: #000;
display: none; display: none;
} }
.Educationvideo .right .Content .videoUl li .imgDiv .icon .iconfont{
color:#fff; .Educationvideo .right .Content .videoUl li .imgDiv .icon .iconfont {
} color: #fff;
.Educationvideo .right .Content .videoUl li .imgDiv{ }
.Educationvideo .right .Content .videoUl li .imgDiv {
position: relative; position: relative;
cursor: pointer; cursor: pointer;
height:199px; height: 199px;
overflow:hidden; overflow: hidden;
} }
.Educationvideo .right .Content .videoUl li p{
.Educationvideo .right .Content .videoUl li p {
font-size: 12px; font-size: 12px;
padding-left:6px; padding-left: 6px;
box-sizing: border-box; box-sizing: border-box;
} }
.Educationvideo .right .Content .videoUl li{
.Educationvideo .right .Content .videoUl li {
display: inline-block; display: inline-block;
width: 300px; width: 300px;
padding: 5px; padding: 5px;
box-sizing: border-box; box-sizing: border-box;
margin-right: 10px; margin-right: 10px;
margin-bottom:15px; margin-bottom: 15px;
} }
.Educationvideo .right .Content{
padding:15px 15px 10px 15px; .Educationvideo .right .Content {
box-sizing: border-box; padding: 15px 15px 10px 15px;
box-sizing: border-box;
} }
*{
margin:0; * {
margin: 0;
padding: 0; padding: 0;
} }
.Educationvideo .left .lineUl .Active{
color:#fff; .Educationvideo .left .lineUl .Active {
color: #fff;
background: #f56c6c; background: #f56c6c;
font-family: "pingfangR"; font-family: "pingfangR";
} }
.Educationvideo .left .lineUl li:hover{
background: #f56c6c; .Educationvideo .left .lineUl li:hover {
color:#fff; background: #f56c6c;
} color: #fff;
.Educationvideo .left .lineUl li{ }
padding:10px 35px;
.Educationvideo .left .lineUl li {
padding: 10px 35px;
box-sizing: border-box; box-sizing: border-box;
font-size: 12px; font-size: 12px;
cursor: pointer; cursor: pointer;
} }
li{
li {
list-style: none; list-style: none;
} }
.Educationvideo .right .search{
padding: 15px 0; .Educationvideo .right .search {
padding-left: 50px; padding: 15px 0;
box-sizing: border-box; padding-left: 50px;
/* position: fixed; box-sizing: border-box;
/* position: fixed;
top: 50px; top: 50px;
width: calc(100% - 200px); */ width: calc(100% - 200px); */
background: #fff; background: #fff;
/* left: 200px; */ /* left: 200px; */
} }
.Educationvideo{
position: relative; .Educationvideo {
min-height: 100%; position: relative;
background: #f5f5f5; min-height: 100%;
} background: #f5f5f5;
.Educationvideo .left{ }
position: absolute;
min-height: 100%; .Educationvideo .left {
width: 200px; position: absolute;
z-index: 100; min-height: 100%;
background: #fff; width: 200px;
} z-index: 100;
.Educationvideo .right{ background: #fff;
background: #f5f5f5; }
padding-left: 200px;
box-sizing: border-box; .Educationvideo .right {
min-height: 100%; background: #f5f5f5;
padding-left: 200px;
box-sizing: border-box;
min-height: 100%;
} }
</style> </style>
...@@ -132,7 +132,7 @@ ...@@ -132,7 +132,7 @@
<span class="tit_name T1"> <span class="tit_name T1">
{{item.CurrencyName==''?'':item.CurrencyName}}<span {{item.CurrencyName==''?'':item.CurrencyName}}<span
v-if="item.CurrencyCode">({{item.CurrencyCode}})</span></span><span v-if="item.CurrencyCode">({{item.CurrencyCode}})</span></span><span
class='tit_name T2'>{{item.LPrice}}/{$t('hotel.hotel_people')}}</span> class='tit_name T2'>{{item.LPrice}}/{{$t('hotel.hotel_people')}}</span>
</p> </p>
<p class="Ldata">{{item.LDate}}</p> <p class="Ldata">{{item.LDate}}</p>
</td> </td>
...@@ -141,7 +141,7 @@ ...@@ -141,7 +141,7 @@
<span class="tit_name T1"> <span class="tit_name T1">
{{item.CurrencyName==''?'':item.CurrencyName}}<span {{item.CurrencyName==''?'':item.CurrencyName}}<span
v-if="item.CurrencyCode">({{item.CurrencyCode}})</span></span><span v-if="item.CurrencyCode">({{item.CurrencyCode}})</span></span><span
class='tit_name HP'>{{item.HPrice}}/{$t('hotel.hotel_people')}}</span> class='tit_name HP'>{{item.HPrice}}/{{$t('hotel.hotel_people')}}</span>
</p> </p>
<p class="Ldata">{{item.HDate}}</p> <p class="Ldata">{{item.HDate}}</p>
</td> </td>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment