jwl-applet/src/pages/index/components/Subject2.vue

<template>
  <view>
    <view class="box-nav">
      <image style="width: 100%;" src="../../static/image/index/index_bg.png"></image>
			<view style="width: 100%;position: absolute;top: 80px;left: 0;" class="flex jc-c">
				<image style="width: 694rpx;" mode="widthFix" src="../../../static/image/index/vipAds.png"></image>
			</view>
    </view>
		<view class="p14lr" style="margin-top: -20px;">
			<view class="video_box">
				<view class="flex ai-c jc-sb">
					<text class="fs18 cor-000">科二考试项目讲解</text>
					<view class="flex ai-c" style="height: 34rpx;line-height: 34rpx;">
						<text style="color:#05C341;font-size: 16px;">自动挡</text>
						<u-icon name="list" color="#05C341" size="18"></u-icon>
					</view>
				</view>
				<view class="flex ai-c jc-sb mt15">
					<view class="tab_iem" :class="videoIndex===item.value?'checked_tab':''" v-for="(item,index) of operateList" :key="index" @tap="checkVideo(item.value)">{{item.label}}</view>
				</view>
				<view class="mt15">
					<video style="width: 100%;height: 362rpx;border-radius: 16rpx;" id="myVideo" src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4"></video>
				</view>
			</view>
			<view class="video_box">
				<view class="flex ai-c jc-sb">
					<text class="fs18 fw600 cor-000">合肥科三真实考场</text>
					<view>
						<text class="fs14 cor-666">全部8个考场</text>
						<u-icon color="#666" name="arrow-right" size="16"></u-icon>
					</view>
				</view>
			</view>
		</view>
  </view>
</template>

<script>
export default {
  name: "Subject2",
	data(){
		return{
			videoIndex:0,
			operateList:[{
				label:"侧方停车",
				value:0,
			},{
				label:"倒车入库",
				value:1
			},{
				label:"曲线行驶",
				value:2
			},{
				label:"直角转弯",
				value:3
			}]
		}
	},
	methods:{
		checkVideo(val){
			this.videoIndex=val
		}
	}
}
</script>

<style scoped>
.box-nav{
  width: 100%;
  position: relative;
}
.center-box{
  position: absolute;
  width: 100%;
  top: 170rpx;
  padding: 0 28rpx;
}
.video_box{
	width: 100%;
	background: #FFFFFF;
	border-radius: 16rpx;
	padding: 14px;
}
.tab_iem{
	width: 145rpx;
	height: 56rpx;
	line-height: 56rpx;
	text-align: center;
	background: #F5F5F5;
	border-radius: 10rpx;
	color:#333
	}
.checked_tab{
	background: linear-gradient(90deg, #11DF20 0%, #01B74F 100%);
	color:#fff
}
</style>