121 lines
2.5 KiB
Vue
121 lines
2.5 KiB
Vue
|
<template>
|
||
|
|
<view>
|
||
|
|
<u-navbar :is-back="true" title='视频教程' :background="bgc" title-color="#000" :border-bottom="false" id="navbar">
|
||
|
|
</u-navbar>
|
||
|
|
<view class="video">
|
||
|
|
<video src="https://api.ccttiot.com/smartmeter/img/static/ubSSfeAihTk6WgtvSbLL"></video>
|
||
|
|
</view>
|
||
|
|
<view class="list">
|
||
|
|
<view class="list_item" v-for="(item,index) in list" :key="index" @click="btnxq(item)">
|
||
|
|
<view class="top">
|
||
|
|
<image :src="item.coverUrl" class="bj" mode="aspectFill"></image>
|
||
|
|
<view class="topwz">
|
||
|
|
{{item.title.length > 8 ? item.title.slice(0,8) + '...' : item.title}}
|
||
|
|
</view>
|
||
|
|
<u-icon style="margin-top: 20rpx;" name="play-circle" color="#fff" size="48"></u-icon>
|
||
|
|
</view>
|
||
|
|
<view class="bot">
|
||
|
|
<view class="botwz">
|
||
|
|
{{item.title.length > 8 ? item.title.slice(0,8) + '...' : item.title}}
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
bgc: {
|
||
|
|
backgroundColor: " #fff",
|
||
|
|
},
|
||
|
|
list:[]
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onLoad() {
|
||
|
|
this.getlist()
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
// 请求视频列表
|
||
|
|
getlist(){
|
||
|
|
this.$u.get(`/app/help/list`).then(res => {
|
||
|
|
if (res.code == 200) {
|
||
|
|
this.list = res.rows
|
||
|
|
}
|
||
|
|
})
|
||
|
|
},
|
||
|
|
// 点击跳转到视频详情
|
||
|
|
btnxq(item){
|
||
|
|
uni.navigateTo({
|
||
|
|
url:'/page_geren/shipin/shipinxq?id=' + item.id
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<style lang="less">
|
||
|
|
.list{
|
||
|
|
width: 680rpx;
|
||
|
|
padding-bottom: 50rpx;
|
||
|
|
box-sizing: border-box;
|
||
|
|
margin: auto;
|
||
|
|
margin-top: 30rpx;
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
.list_item{
|
||
|
|
width: 320rpx;
|
||
|
|
height: 270rpx;
|
||
|
|
margin-top: 30rpx;
|
||
|
|
border-radius: 10rpx;
|
||
|
|
overflow: hidden;
|
||
|
|
box-shadow: 0px 1px 5px -2px;
|
||
|
|
.top{
|
||
|
|
width: 100%;
|
||
|
|
height: 190rpx;
|
||
|
|
position: relative;
|
||
|
|
color: #000;
|
||
|
|
font-weight: 600;
|
||
|
|
text-align: center;
|
||
|
|
padding-top: 20rpx;
|
||
|
|
box-sizing: border-box;
|
||
|
|
.icon{
|
||
|
|
width: 40rpx;
|
||
|
|
height: 40rpx;
|
||
|
|
margin-top: 20rpx;
|
||
|
|
}
|
||
|
|
.bj{
|
||
|
|
width: 100%;
|
||
|
|
height: 190rpx;
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
z-index: -1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.bot{
|
||
|
|
width: 100%;
|
||
|
|
height: 80rpx;
|
||
|
|
background-color: #efefef;
|
||
|
|
.botwz{
|
||
|
|
padding-top: 15rpx;
|
||
|
|
padding-left: 10rpx;
|
||
|
|
box-sizing: border-box;
|
||
|
|
color: #000;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.video{
|
||
|
|
width: 694rpx;
|
||
|
|
height: 390rpx;
|
||
|
|
margin: auto;
|
||
|
|
border-radius: 20rpx;
|
||
|
|
overflow: hidden;
|
||
|
|
video{
|
||
|
|
width: 694rpx;
|
||
|
|
height: 390rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|