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

<template>
	<view>
		<view class="box-nav">
			<image style="width: 100%;" src="../../static/image/index/index_bg.jpg"></image>
			<view class="center-box flex jc-sb ai-c">
				<view class="box-item flex ai-c jc-c">
					<view class="btn-item flex ai-c jc-c">
						<view class="text-center cor-fff" style="line-height: 40rpx;" @tap="toAnswer('顺序答题')">
							<view class="fs16">顺序练习</view>
							<text class="fs14">0/2344</text>
						</view>
					</view>
				</view>
				<view class="box-item flex ai-c jc-c">
					<view class="btn2-item flex ai-c jc-c">
						<view class="text-center cor-fff" style="line-height: 40rpx;" @tap="toExams">
							<view class="fs16">模拟考试</view>
							<text class="fs14">去考试</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view style="padding: 0 28rpx;margin-top: 60rpx;">
			<view class="tabs-box">
				<view class="wp33 flex ai-c jc-c" @tap="toVip">
					<view class="text-center wp100">
						<image style="width: 72rpx;height: 72rpx;margin: 0 auto"
							src="../../static/image/index/vipicon.png">
						</image>
						<view class="mt5">VIP课程</view>
					</view>
				</view>
				<view class="wp33 flex ai-c jc-c"  @tap="toAnswer('精简500题')">
					<view class="text-center wp100">
						<image style="width: 72rpx;height: 72rpx;margin: 0 auto"
							src="../../static/image/index/500icon.png">
						</image>
						<view class="mt5">精简500题</view>
					</view>
				</view>
				<view class="wp33 flex ai-c jc-c" @tap="toExclusive">
					<view class="text-center wp100">
						<image style="width: 72rpx;height: 72rpx;margin: 0 auto"
							src="../../static/image/index/zxicon.png">
						</image>
						<view class="mt5">专项练习</view>
					</view>
				</view>
				<view class="wp33 flex ai-c jc-c">
					<view class="text-center wp100">
						<image style="width: 72rpx;height: 72rpx;margin: 0 auto;"
							src="../../static/image/index/realicon.png"></image>
						<view class="mt5">真实考场模拟</view>
					</view>
				</view>
				<view class="wp33 flex ai-c jc-c">
					<view class="text-center wp100">
						<image style="width: 72rpx;height: 72rpx;margin: 0 auto"
							src="../../static/image/index/testbeforeicon.png"></image>
						<view class="mt5">考前密卷</view>
					</view>
				</view>
				<view class="wp33 flex ai-c jc-c" @tap="toWrongList">
					<view class="text-center wp100">
						<image style="width: 72rpx;height: 72rpx;margin: 0 auto"
							src="../../static/image/index/worryicon.png"></image>
						<view class="mt5">错题收藏</view>
					</view>
				</view>
			</view>
		</view>
		<view style="padding: 0 28rpx;margin-top: 30rpx;" @tap="toClass">
			<view class="video-box">
				<view class="flex jc-sb ai-c wp100">
					<text style="color: #05C341;font-size: 36rpx;">科一精品视频课</text>
					<text class="cor-666 fs12">全部10节课 ></text>
				</view>
				<view class="flex ai-c mt20">
					<image class="contain-box" src="../../static/image/index/index_bg.jpg"></image>
					<view class="ml15 text-center">
						<u-button :customStyle="{width:'200rpx',height:'66rpx',borderRadius: '33rpx'}" iconColor="#fff"
							text="去看视频" color="linear-gradient(90deg, #11DF20 0%, #00B74F 100%)" icon="play-circle">
						</u-button>
						<view class="cor-333 fs15 fw600 mt10">科一易错试题</view>
					</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {}
		},
		methods: {
			toVip(){
				uni.navigateTo({
					url:"/pages/index/videoVip"
				})
			},
			toClass(){
				uni.navigateTo({
					url:"/pages/questionBank/baseOperate"
				})
			},
			toAnswer(title) {
				uni.navigateTo({
					url:"/pages/questionBank/questionBank?navTitle="+title
				})
			},
			toExams(){
				uni.navigateTo({
					url:"/pages/questionBank/practiceExams"
				})
			},
			toExclusive(){
				uni.navigateTo({
					url:"/pages/questionBank/exclusiveExercise"
				})
			},
			toWrongList(){
				uni.navigateTo({
					url:"/pages/questionBank/wrongQuestion"
				})
			}
		}
	}
</script>

<style scoped>
	.box-nav {
		width: 100%;
		position: relative;
	}

	.center-box {
		position: absolute;
		width: 100%;
		top: 170rpx;
		padding: 0 28rpx;
	}

	.box-item {
		width: 336rpx;
		height: 336rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		z-index: 999;
	}

	.btn-item {
		width: 193rpx;
		height: 193rpx;
		background: linear-gradient(0deg, #11DF20 0%, #00B74F 100%);
		border-radius: 50%;
	}

	.btn2-item {
		width: 193rpx;
		height: 193rpx;
		background: linear-gradient(0deg, #E95A0E 0%, #FF9600 100%);
		border-radius: 50%;
	}

	::v-deep .u-tabs__wrapper__nav__line {
		background: linear-gradient(90deg, #11DF20 0%, #00B74F 100%) !important;
		bottom: 14rpx !important;
	}

	.tabs-box {
		width: 694rpx;
		height: 366rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		flex-wrap: wrap;
	}

	.video-box {
		padding: 20rpx;
		width: 694rpx;
		height: 369rpx;
		background: #DEEFE5;
		border: 2px solid #47DB87;
		border-radius: 16rpx;
	}

	.contain-box {
		width: 406rpx;
		height: 228rpx;
		background: #00B74F;
		border-radius: 16rpx;
	}
</style>