JiangxiMiniProgram/pages/indexEntry/examines/warningEducation/warningEducation.vue

<template>
	<view class="pageBgImg">
		<topNavbar title="安全警示教育在线视频学习"></topNavbar>
		<view class="pad">
			<view class="searcBox">
				<searchRow placeholder="搜索视频名称"/>
			</view>
			<view class="card">
				<view class="con">
					<view class="tit">第一章</view>
					<view class="li" v-for="(item,index) in 10" :key="index">
						<view class="cover">
							<view class="status">未开始</view>
							<view class="startIcon">
								<image src="@/static/images/index/btn_bofang.png" mode=""></image>
							</view>
							<view class="coverImg">
								<image src="@/static/images/index/avatar.png" mode=""></image>
							</view>
						</view>
						<view class="rightTxt">
							<view class="name">公益短片之“车速决定命运”</view>
							<view class="time">3:22</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {}
		}
	}
</script>

<style lang="scss" scoped>
	.searcBox {
		padding: 0rpx 0 30rpx 0;
	} 
	
	.card {
	  .con {
	    .tit {
			border-bottom: 2rpx solid #E8E9EC;
			line-height: 74rpx;
			padding-left: 16rpx;
	    }
	
	    .li {
			display: flex;
			padding: 30rpx 16rpx;
			border-bottom: 2rpx dashed #E8E9EC;
			&:last-child {
				border: none;
			}
	      .cover {
			  background: #000;
			  width: 302rpx;
			  height: 168rpx;
			  border-radius: 12rpx;
			  overflow: hidden;
			  position: relative;
			  flex-shrink: 0;
	        .status {
				position: absolute;
				left: 0;
				top: 0;
				width: 108rpx;
				height: 40rpx;
				background: #ADADAD;
				border-radius: 12rpx 0px 12rpx 0px;
				line-height: 40rpx;
				color: #fff;
				text-align: center;
				z-index: 8;
	        }
	
	        .startIcon {
				position: absolute;
				left: 50%;
				bottom: 50%;
				// transform: translateX(-50%);
				// transform: translateY(-50%);
				transform: translate(-50%, 50%);
				width: 60rpx;
				height: 60rpx;
				z-index: 9;
	        }
			.coverImg {
				width: 100%;
				height: 100%;
				image {
					opacity: 0.92;
				}
			}
	      }
	
	      .rightTxt {
			  flex: 1;
			  width: 0;
			  padding-left: 28rpx;
			  display: flex;
			  flex-direction: column;
			  justify-content: space-between;
			  font-size: 28rpx;
	        .name {
				
	        }
	
	        .time {
	
	        }
	      }
	    }
	  }
	}
</style>