<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>