|
|
|
|
@ -1,12 +1,11 @@ |
|
|
|
|
<template> |
|
|
|
|
<view> |
|
|
|
|
<sunny-video style="width: 100%" videoHeight="422rpx" ref="sunny-video" |
|
|
|
|
:src="videoList[currentIndex].videoUrl" /> |
|
|
|
|
<sunny-video style="width: 100%" videoHeight="422rpx" ref="sunny-video" :src="videoList[currentIndex].videoUrl" /> |
|
|
|
|
<view class="p14tb bc-fff"> |
|
|
|
|
<view class="skill-sequence-panel-content-wrapper pr14" v-if="videoType=='test'"> |
|
|
|
|
<scroll-view class="skill-sequence-panel-content" scroll-x> |
|
|
|
|
<view class="skill-sequence-skill-wrapper tab_iem" :class="videoIndex===item.value?'checked_tab':''" v-for="(item,index) of testList" |
|
|
|
|
:key="index" @tap="checkTest(item.value)">{{item.label}}</view> |
|
|
|
|
<view class="skill-sequence-skill-wrapper tab_iem" :class="videoIndex===item.value?'checked_tab':''" |
|
|
|
|
v-for="(item,index) of testList" :key="index" @tap="checkTest(item.value)">{{item.label}}</view> |
|
|
|
|
</scroll-view> |
|
|
|
|
</view> |
|
|
|
|
<view class="flex ai-c jc-sb mt10 wp100 p14"> |
|
|
|
|
@ -22,19 +21,22 @@ |
|
|
|
|
</view> |
|
|
|
|
<view class="bc-fff pl14 pb10"> |
|
|
|
|
<view class="skill-sequence-panel-content-wrapper"> |
|
|
|
|
<scroll-view class="skill-sequence-panel-content" scroll-x :scroll-left="164*currentIndex"> |
|
|
|
|
<scroll-view class="skill-sequence-panel-content" scroll-x :scroll-left="getScrollLeft"> |
|
|
|
|
<view class="skill-sequence-skill-wrapper" v-for="(item, index) in videoList" :key="index" |
|
|
|
|
@tap="checkVideo(item.projectId)"> |
|
|
|
|
<view> |
|
|
|
|
<view class="mb10 relative"> |
|
|
|
|
<view class="contain-box" style="overflow: hidden;"> |
|
|
|
|
<image class="contain-box" mode="widthFix" :src="item.videoUrl+'?x-oss-process=video/snapshot,t_0,f_jpg'"></image> |
|
|
|
|
<image class="contain-box" mode="widthFix" |
|
|
|
|
:src="item.videoUrl+'?x-oss-process=video/snapshot,t_0,f_jpg'"></image> |
|
|
|
|
</view> |
|
|
|
|
<view v-if="projectId==item.projectId" class="playLogo">播放中</view> |
|
|
|
|
<image class="play_btn" src="../../static/image/index/play.png" /> |
|
|
|
|
<text style="position: absolute;right: 8rpx;bottom: 8rpx;color:#fff">{{item.videoTime}}</text> |
|
|
|
|
</view> |
|
|
|
|
<text :style="{color:projectId==item.projectId?'#FF6E02':'#333'}">{{item.description}}</text> |
|
|
|
|
<view class="topic_cont_text" :style="{color:projectId==item.projectId?'#FF6E02':'#333'}"> |
|
|
|
|
{{item.description}} |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</scroll-view> |
|
|
|
|
@ -55,7 +57,7 @@ |
|
|
|
|
</view> |
|
|
|
|
<view class="ml10"> |
|
|
|
|
<text class="fs16 cor-000 fw600">{{item.description}}</text> |
|
|
|
|
<view class="fs14 mt5 cor-666">上车、下车的方法</view> |
|
|
|
|
<view class="fs14 mt5 cor-666">{{item.subDesc}}</view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
@ -71,8 +73,8 @@ |
|
|
|
|
export default { |
|
|
|
|
data() { |
|
|
|
|
return { |
|
|
|
|
title:'', |
|
|
|
|
currentIndex:0, |
|
|
|
|
title: '', |
|
|
|
|
currentIndex: 0, |
|
|
|
|
videoIndex: 0, |
|
|
|
|
testList: [{ |
|
|
|
|
label: "八一考场", |
|
|
|
|
@ -123,35 +125,41 @@ |
|
|
|
|
time: '13:14', |
|
|
|
|
id: 5 |
|
|
|
|
}], |
|
|
|
|
projectId:undefined, |
|
|
|
|
param:{} |
|
|
|
|
projectId: undefined, |
|
|
|
|
param: {} |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
onLoad(op) { |
|
|
|
|
if (op.type) { |
|
|
|
|
this.videoType = op.type |
|
|
|
|
} |
|
|
|
|
if(op.projectId){ |
|
|
|
|
this.projectId=op.projectId |
|
|
|
|
if (op.projectId) { |
|
|
|
|
this.projectId = op.projectId |
|
|
|
|
} |
|
|
|
|
if (op.subject) { |
|
|
|
|
this.param.subject = op.subject |
|
|
|
|
} |
|
|
|
|
if(op.subject){ |
|
|
|
|
this.param.subject=op.subject |
|
|
|
|
if (op.type) { |
|
|
|
|
this.param.type = op.type |
|
|
|
|
} |
|
|
|
|
if(op.type){ |
|
|
|
|
this.param.type=op.type |
|
|
|
|
if (op.type == '1') { |
|
|
|
|
if (this.param.subject == '2') { |
|
|
|
|
this.title = '科二基础项目讲解' |
|
|
|
|
} else { |
|
|
|
|
this.title = '科三基础项目讲解' |
|
|
|
|
} |
|
|
|
|
if(op.type=='1'){ |
|
|
|
|
if(this.param.subject=='2'){ |
|
|
|
|
this.title='科二基础项目讲解' |
|
|
|
|
}else{ |
|
|
|
|
this.title='科三基础项目讲解' |
|
|
|
|
} else { |
|
|
|
|
this.title = '基础操作讲解' |
|
|
|
|
} |
|
|
|
|
}else{ |
|
|
|
|
this.title='基础操作讲解' |
|
|
|
|
if (op.videoList) { |
|
|
|
|
this.videoList = JSON.parse(op.videoList) |
|
|
|
|
this.currentIndex = this.videoList.findIndex(item => item.projectId == this.projectId) |
|
|
|
|
} |
|
|
|
|
if(op.videoList){ |
|
|
|
|
this.videoList=JSON.parse(op.videoList) |
|
|
|
|
this.currentIndex=this.videoList.findIndex(item=>item.projectId==this.projectId) |
|
|
|
|
}, |
|
|
|
|
computed: { |
|
|
|
|
getScrollLeft() { |
|
|
|
|
const index = this.currentIndex - 1 < 0 ? 0 : this.currentIndex - 1 |
|
|
|
|
return 164 * index |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
methods: { |
|
|
|
|
@ -159,9 +167,9 @@ |
|
|
|
|
this.videoIndex = val |
|
|
|
|
}, |
|
|
|
|
checkVideo(val) { |
|
|
|
|
this.popupShow=false |
|
|
|
|
this.popupShow = false |
|
|
|
|
this.projectId = val |
|
|
|
|
this.currentIndex=this.videoList.findIndex(item=>item.projectId==this.projectId) |
|
|
|
|
this.currentIndex = this.videoList.findIndex(item => item.projectId == this.projectId) |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
@ -175,6 +183,21 @@ |
|
|
|
|
border-radius: 8rpx; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.topic_cont_text { |
|
|
|
|
width: 260rpx; |
|
|
|
|
height:45rpx; |
|
|
|
|
overflow: hidden; |
|
|
|
|
word-break: break-all; |
|
|
|
|
/* break-all(允许在单词内换行。) */ |
|
|
|
|
text-overflow: ellipsis; |
|
|
|
|
/* 超出部分省略号 */ |
|
|
|
|
/* display: -webkit-box; */ |
|
|
|
|
white-space: nowrap; |
|
|
|
|
-webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/ |
|
|
|
|
-webkit-line-clamp:1; /** 显示的行数 **/ |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.playLogo { |
|
|
|
|
width: 90rpx; |
|
|
|
|
height: 40rpx; |
|
|
|
|
@ -226,17 +249,20 @@ |
|
|
|
|
background: linear-gradient(90deg, #11DF20 0%, #01B74F 100%); |
|
|
|
|
color: #fff |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/*scroll-view外层*/ |
|
|
|
|
.skill-sequence-panel-content-wrapper{ |
|
|
|
|
.skill-sequence-panel-content-wrapper { |
|
|
|
|
position: relative; |
|
|
|
|
white-space:nowrap; |
|
|
|
|
white-space: nowrap; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/*scroll-view本身*/ |
|
|
|
|
.skill-sequence-panel-content{ |
|
|
|
|
min-width:100%; |
|
|
|
|
.skill-sequence-panel-content { |
|
|
|
|
min-width: 100%; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/*scroll-view内层*/ |
|
|
|
|
.skill-sequence-skill-wrapper{ |
|
|
|
|
.skill-sequence-skill-wrapper { |
|
|
|
|
display: inline-block; |
|
|
|
|
margin-right: 15px; |
|
|
|
|
} |
|
|
|
|
|
