178 lines
3.6 KiB
Vue
178 lines
3.6 KiB
Vue
<template>
|
||
<view>
|
||
<view class="df" style=" justify-content: space-around;flex-wrap: wrap; margin-top: 10rpx;">
|
||
<view style="border-radius:21rpx 21rpx 21rpx 21rpx;width: 33%;text-align: center;margin-top: 20rpx;padding:0 26rpx;"
|
||
class="liststyle" v-for="item in $props.list" :key="item.course_id" @tap="seVideo(item)">
|
||
<image :src="item.titleImg" style="width: 188rpx;height: 247rpx;border-radius:21rpx 21rpx 21rpx 21rpx"
|
||
mode=""></image>
|
||
<view style="font-weight: 400;font-size: 25rpx;color: #333333;text-align: left;">
|
||
{{item.title.slice(0,6)}}
|
||
</view>
|
||
<view style="font-weight: 400;font-size: 21rpx;color: #999999;text-align: left;">
|
||
{{item.courseLabel}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
returnIsSafari
|
||
} from '@/utils/app.js'
|
||
export default {
|
||
props: {
|
||
list: {
|
||
type: Array,
|
||
default: []
|
||
},
|
||
},
|
||
data() {
|
||
return {
|
||
|
||
}
|
||
},
|
||
methods: {
|
||
pageScrollTo(time = 100) {
|
||
uni.pageScrollTo({
|
||
scrollTop: this.scrollTop - 50,
|
||
duration: time,
|
||
complete() {
|
||
|
||
}
|
||
})
|
||
},
|
||
//查看视频
|
||
seVideo(item) {
|
||
console.log(uni.getStorageSync('token'))
|
||
// if(uni.getStorageSync('token')){
|
||
const time = 100;
|
||
// #ifdef H5
|
||
if (returnIsSafari()) {
|
||
this.pageScrollTo(time)
|
||
setTimeout(() => {
|
||
uni.navigateTo({
|
||
url: '/me/detail/detail?id=' + item.courseId + '&courseDetailsId=' + item
|
||
.courseDetailsId +
|
||
'&tt_album_id=' + item.dyCourseId + '&tt_episode_id=' + item
|
||
.dyEpisodeId
|
||
})
|
||
}, time)
|
||
} else {
|
||
uni.navigateTo({
|
||
url: '/me/detail/detail?id=' + item.courseId + '&courseDetailsId=' + item.courseDetailsId +
|
||
'&tt_album_id=' + item.dyCourseId + '&tt_episode_id=' + item
|
||
.dyEpisodeId
|
||
})
|
||
}
|
||
|
||
// #endif
|
||
// #ifndef H5
|
||
uni.navigateTo({
|
||
url: '/me/detail/detail?id=' + item.courseId + '&courseDetailsId=' + item.courseDetailsId +
|
||
'&tt_album_id=' + item.dyCourseId + '&tt_episode_id=' + item
|
||
.dyEpisodeId
|
||
})
|
||
// #endif
|
||
|
||
// }else{
|
||
// uni.navigateTo({
|
||
// url:'/pages/login/login'
|
||
// })
|
||
// }
|
||
},
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.zuijin {
|
||
width: 100%;
|
||
margin-top: 26rpx;
|
||
|
||
.GpkmladwbU {
|
||
width: 700rpx;
|
||
height: 100%;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.kjFVivdwbz {
|
||
width: calc((700rpx - 40rpx) / 3);
|
||
height: 100%;
|
||
margin-bottom: 30rpx;
|
||
margin-right: calc(40rpx / 2);
|
||
}
|
||
|
||
.kjFVivdwbz:nth-of-type(3n) {
|
||
margin-right: 0;
|
||
}
|
||
|
||
.MXdwbIHrMo {
|
||
width: 100%;
|
||
// height: 204rpx;
|
||
height: 204rpx;
|
||
border-radius: 24rpx 24rpx 0 0;
|
||
position: relative;
|
||
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 24rpx 24rpx 0 0;
|
||
}
|
||
|
||
.kpdwbbDLKT {
|
||
position: absolute;
|
||
bottom: 10rpx;
|
||
right: 0;
|
||
max-width: 80%;
|
||
border-radius: 10rpx;
|
||
background-color: rgba(51, 51, 51, 0.7);
|
||
color: #FFFFFF;
|
||
font-size: 22rpx;
|
||
padding: 10rpx;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
|
||
}
|
||
}
|
||
|
||
.gSSSCWdwbD {
|
||
width: 100%;
|
||
height: 100rpx;
|
||
background-color: #ffffff;
|
||
border-radius: 0 0 24rpx 24rpx;
|
||
align-content: center;
|
||
}
|
||
|
||
.dwbkFoLNxI {
|
||
width: 100%;
|
||
padding: 0 20rpx;
|
||
color: #333333;
|
||
font-size: 30rpx;
|
||
font-weight: bold;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
|
||
}
|
||
|
||
.kemrdwbYSM {
|
||
width: 100%;
|
||
padding: 0 20rpx;
|
||
color: #999999;
|
||
font-size: 22rpx;
|
||
}
|
||
}
|
||
|
||
.liststyle:last-child {
|
||
margin-right: auto;
|
||
margin-left: 6rpx;
|
||
}
|
||
|
||
.df {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
</style> |