zhgdyunapp_vue3/pages/personLocation/exam/study/study.vue

<template>
	<view>
		<view class="study">
			<view class="study-box">
				<view class="study-box1">
					<view v-for="item in typeList" :key="item.id" :class="{'active':item.id == type}"
						@click="type = item.id">{{item.text}}</view>
				</view>
				<view class="study-box2">
					<radio-group class="uni-radio-group">
						<label class="radio">
							<radio :value="'0'" checked="true" />进行中
						</label>
						<label class="radio">
							<radio :value="'1'" />未学习
						</label>
						<label class="radio">
							<radio :value="'2'" />已完成
						</label>
					</radio-group>
				</view>
			</view>
			<view class="study-box3">
				<view v-for="item in typeList2" :key="item.id" :class="{'study-box3_active':item.id == type2}"
					@click="type2 = item.id">{{item.text}}</view>
			</view>

			<view class="">
				<view class="index-boxs">
					<view class="index-box" @click="goHiidden('/personLocation/exam/studydetails/studydetails')">
						<image src="/static/logo.png"></image>
						<text class="position-absolute">学习中</text>
						<view class="text-boxs">
							<text class="text">入场安全教育</text>
							<view class="text-flex">
								<text class="text1">剩余天数: <text class="color-51">36</text>天</text>
								<text class="text1">课程类型: 视频</text>
							</view>
							<view class="text-flex">
								<text class="text1">学习期限: <text class="color-51">2024-3-12至2024-3-19</text></text>
								<text class="text1">学习频次: <text class="color-51">1</text>/5 次/周</text>
							</view>
						</view>
					</view>
					<view class="index-box" @click="goHiidden('/personLocation/exam/studydetails/studydetails')">
						<image src="/static/logo.png"></image>
						<text class="position-absolute">学习中</text>
						<view class="text-boxs">
							<text class="text">入场安全教育</text>
							<view class="text-flex">
								<text class="text1">剩余天数: <text class="color-51">36</text>天</text>
								<text class="text1">课程类型: 视频</text>
							</view>
							<view class="text-flex">
								<text class="text1">学习期限: <text class="color-51">2024-3-12至2024-3-19</text></text>
								<text class="text1">学习频次: <text class="color-51">1</text>/5 次/周</text>
							</view>
						</view>
					</view>
					<view class="index-box" @click="goHiidden('/personLocation/exam/studydetails/studydetails')">
						<image src="/static/logo.png"></image>
						<text class="position-absolute">学习中</text>
						<view class="text-boxs">
							<text class="text">入场安全教育</text>
							<view class="text-flex">
								<text class="text1">剩余天数: <text class="color-51">36</text>天</text>
								<text class="text1">课程类型: 视频</text>
							</view>
							<view class="text-flex">
								<text class="text1">学习期限: <text class="color-51">2024-3-12至2024-3-19</text></text>
								<text class="text1">学习频次: <text class="color-51">1</text>/5 次/周</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<footers :activeTab="'study'"></footers>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: 1,
				typeList: [{
					id: 1,
					text: "必修",
				}, {
					id: 2,
					text: "选修",
				}],
				type2: 1,
				typeList2: [{
					id: 1,
					text: "安全培训",
				}, {
					id: 2,
					text: "消防安全",
				}]
			}
		},
		created() {

		},
		methods: {
			goHiidden(url) {
				uni.navigateTo({
					url: `/pages${url}`
				});
			},
		}
	}
</script>

<style>
	.study-box {
		padding: 44.23rpx 26.92rpx 28.85rpx 51.92rpx;
		display: flex;
	}

	.study-box1 {
		width: 188rpx;
		height: 47rpx;
		border-radius: 52rpx 52rpx 52rpx 52rpx;
		display: flex;
		border: 2rpx solid #4EA973;
	}

	.study-box1 view {
		width: 98rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #4EA973;
		font-size: 24rpx;
	}

	.study-box1 view:first-child {
		border-radius: 52rpx 0 0 52rpx;
	}

	.study-box1 view:last-child {
		border-radius: 0 52rpx 52rpx 0;
	}

	.active {
		color: white !important;
		background-color: #4CA872;
	}

	.study-box2 {
		flex: 1;
	}

	.uni-radio-group {
		display: flex;
		justify-content: space-evenly;
	}

	:deep( .uni-radio-input ){
		width: 36.38rpx;
		height: 36.38rpx;
	}

	:deep( .uni-radio-input-checked ){
		width: 40.38rpx;
		height: 40.38rpx;
		background-color: #5181F6 !important;
		border-color: #5181F6 !important;
		background-clip: content-box !important;
		padding: 7rpx !important;
		box-sizing: border-box;
	}

	:deep( .uni-radio-input-checked::before ){
		display: none;
	}

	.study-box3 {
		background-color: #F7F8FA;
		color: #A2A4AF;
		font-size: 26.92rpx;
		display: flex;
	}

	.study-box3>view {
		width: 376.8rpx;
		height: 67rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.study-box3_active {
		background-color: #5181F6;
		color: white;
	}

	.index-boxs {
		padding: 0 35rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between
	}

	.index-box {
		width: 332.5rpx;
		background-color: white;
		box-shadow: 4rpx 4rpx 8rpx 2rpx rgba(81, 129, 246, 0.12);
		border-radius: 10rpx;
		margin-top: 21rpx;
		position: relative;
	}

	.index-box>image {
		width: 100%;
		height: 187.62rpx;
	}

	.text-boxs {
		display: flex;
		flex-direction: column;
		padding: 0 10rpx 10rpx;
	}

	.text {
		font-size: 29rpx;
		color: #000000;
	}

	.text1 {
		font-size: 13.46rpx;
		line-height: 30rpx;
	}

	.color-51 {
		color: #5181F6;
	}

	.position-absolute {
		width: 110rpx;
		height: 40rpx;
		text-align: center;
		font-size: 24rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: white;
		background: #5181F6;
		border-radius: 40rpx;
		position: absolute;
		right: 11.54rpx;
		top: 10rpx;
	}

	.text-flex {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
</style>