huxiaofeng666/jwl-applet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

提交

Browse Source
This commit is contained in:
脆皮鸭
2023-08-18 01:41:17 +08:00
parent d8332a326b 7e166ad8d5
commit ea9137eb0c
31 changed files with 2540 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

117
src/pages/questionBank/videoDetail.vue
View File

@@ -1,20 +1,51 @@
<template>
<view>
<video style="width: 100%;height: 422rpx;" id="myVideo" src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4"></video>
<sunny-video style="width: 100%" videoHeight="422rpx" ref="sunny-video" title="测试视频" src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4" @timeupdate="timeupdate" />
<view class="p14 bc-fff">
<view class="flex ai-c jc-sb mt10">
<view class="flex ai-c jc-sb mt10 wp100">
<text class="fs18 fw600 cor-000">C1捷达-基础操作视频讲解</text>
<view class="flex">
<view class="flex" @tap="popupShow=true">
<text class="fs14 cor-666">更多</text>
<u-icon color="#666" name="arrow-right" size="18"></u-icon>
</view>
<swiper class="swiper mt20" :current="swiperIndex" :duration="duration" :autoplay="false" :disable-programmatic-animation="true" @change="onChange" @animationfinish="onAnimationfinish" @touchend="touchEnd" >
</swiper>
</view>
<view>
</view>
</view>
<view class="pl14 bc-fff">
<u-scroll-list :indicator="false" class="mr15">
<view v-for="(item, index) in videoList" :key="index" class="mr15" @click="checkVideo(item.id)">
<view>
<view class="mb10 relative">
<image class="contain-box" src="../../static/image/index/index_bg.png"></image>
<view v-if="nowVideo===item.id" class="playLogo">播放中</view>
<image class="play_btn" src="../../static/image/index/play.png" />
<text style="position: absolute;right: 8rpx;bottom: 8rpx;color:#fff">13:14</text>
</view>
<text :style="{color:nowVideo===item.id?'#FF6E02':'#333'}">正确的驾驶姿势</text>
</view>
</view>
</u-scroll-list>
</view>
<u-popup :show="popupShow" mode="bottom" :closeOnClickOverlay="true" @close="popupShow=false">
<view class="p14 flex ai-c jc-sb">
<text class="fs16 fw600 cor-000">课程目录</text>
<text class="fs16 cor-666" @tap="popupShow=false">收起</text>
</view>
<view style="max-height: 800rpx;overflow-y: scroll;" class="p14lr">
<view class="flex bc-fff mt10" style="border-radius: 16rpx;" v-for="(item,index) of videoList" :key="index" @tap="toDetail">
<view class="pic relative">
<image class="pic" src="../../static/image/index/index_bg.png"></image>
<image class="play_btn_2" src="../../static/image/index/play.png" />
<text style="position: absolute;right: 8rpx;bottom: 8rpx;color:#fff">13:14</text>
</view>
<view class="ml10">
<text class="fs16 cor-000 fw600">上车、下车的方法</text>
<view class="fs14 mt5 cor-666">上车、下车的方法</view>
</view>
</view>
</view>
</u-popup>
</view>
</template>
@@ -22,11 +53,81 @@
export default{
data(){
return{
popupShow:false,
nowVideo:0,
videoList:[{
title:'正确的驾驶姿势',
time:'13:14',
id:0
},{
title:'正确的驾驶姿势',
time:'13:14',
id:1
},{
title:'正确的驾驶姿势',
time:'13:14',
id:2
},{
title:'正确的驾驶姿势',
time:'13:14',
id:3
},{
title:'正确的驾驶姿势',
time:'13:14',
id:4
},{
title:'正确的驾驶姿势',
time:'13:14',
id:5
}]
}
},
methods:{
checkVideo(val){
this.nowVideo=val
}
}
}
</script>
<style>
<style scoped>
.contain-box {
width: 260rpx;
height: 146rpx;
background: #00B74F;
border-radius: 8rpx;
}
.playLogo{
width: 90rpx;
height: 40rpx;
background: #FF6E02;
border-radius: 8rpx 0rpx 8rpx 0rpx;
line-height: 40rpx;
text-align: center;
color: #fff;
font-size: 12px;
position: absolute;
left: 0;
top:0
}
.play_btn{
width: 65rpx;
height: 65rpx;
position: absolute;
left: 97.5rpx;
top:39.5rpx
}
.play_btn_2{
width: 65rpx;
height: 65rpx;
position: absolute;
left: 117.5rpx;
top:52rpx
}
.pic{
width: 300rpx;
height: 169rpx;
background: #00B74F;
border-radius: 8rpx;
}
</style>