questionbankvue3/pages/exercises/theoryStudy/theoryStudy.vue

<template>
	<view class="content">
		<up-navbar title="理论学习" :leftIconColor="'#333'" :safeAreaInsetTop="true" :autoBack="true" :bgColor="'transparent'">
			<template #right>
				<view class="u-nav-slot flex">
					<view class="txt">小车</view>
					<u-icon name="arrow-down-fill" color="#333" size="12"></u-icon>
				</view>
			</template>
		</up-navbar>
		
		<view class="tabs flex">
			<view class="tab" @click="changeTab(1)" :class="{active: currentTab==1}">科目一</view>
			<view class="tab" @click="changeTab(2)" :class="{active: currentTab==2}">收藏夹</view>
		</view>
		
		<view class="swiperBox">
			<u-swiper :list="list1" @click="swiperClick" :dots-styles="dotsStyles" indicatorMode="dot"></u-swiper>
		</view>
		
		<view class="notice">
			<view class="yellowT">通知/</view>
			<view class="txt">06月11日已更新至最新题库</view>
		</view>
		
		<view class="iconBox">
			<view class="iconComl">
				<view class="item"  v-for="(item,index) in leftItem" :key="index">
					<view class="icon">
						<image :src="item.icon" mode=""></image>
					</view>
					<view class="text">{{item.name}}</view>
				</view>
			</view>
			<view class="centerComl">
				<view class="ctItem">
					<view class="txt">顺序练习</view>
					<view class="txt">0/1700</view>
				</view>
				<view class="ctItem">
					<view class="txt">精选试题</view>
					<view class="txt">0/1700</view>
				</view>
			</view>
			<view class="iconComl">
				<view class="item"  v-for="(item,index) in rightItem" :key="index">
					<view class="icon">
						<image :src="item.icon" mode=""></image>
					</view>
					<view class="text">{{ item.name }}</view>
				</view>
			</view>
		</view>
		
		<view class="simulatedExam flex-b">
			<view class="leftTxt">
				<view class="h8">科一模拟考试</view>
				<view class="text">考试次数：1次</view>
				<view class="text">预测通过率：10%</view>
				<view class="btnBox flex">
					<view class="btnTxt">开始考试</view>
					<view class="btnIcon">
						<image src="@/static/images/theory/sanjx.png" mode=""></image>
					</view>
				</view>
			</view>
			
			<view class="rightImg">
				<image src="@/static/images/theory/computed.png" mode=""></image>
			</view>
		</view>
		
		<view class="ul flex">
			<view class="li" v-for="(item,index) in bottomItem" :key="index">
				<view class="icon">
					<image :src="item.icon" mode=""></image>
				</view>
				<view class="txt">{{ item.name }}</view>
			</view>
		</view>
		
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	const list1 = [
		'https://cdn.uviewui.com/uview/swiper/swiper1.png',
		'https://cdn.uviewui.com/uview/swiper/swiper2.png',
		'https://cdn.uviewui.com/uview/swiper/swiper3.png',
	]
	function swiperClick(val) {
		console.log(val)
	}
	const currentTab = ref(1)
	const dotsStyles = ref({
		backgroundColor: '#E8E9EC',
		border: '1px #E8E9EC solid',
		color: '#fff',
		selectedBackgroundColor: '#1989FA',
		selectedBorder: '1px #1989FA solid'
	})
	
	const leftItem = ref([
		{name: '分类学习', icon: new URL('@/static/images/theory/theoryIcon1.png', import.meta.url).href, url: ''},
		{name: '章节练习', icon: new URL('@/static/images/theory/theoryIcon7.png', import.meta.url).href, url: ''},
		{name: '精选试题', icon: new URL('@/static/images/theory/theoryIcon9.png', import.meta.url).href, url: ''},
		{name: '考前密卷', icon: new URL('@/static/images/theory/theoryIcon11.png', import.meta.url).href, url: ''},
	])
	
	const rightItem = ref([
		{name: '题型练习', icon: new URL('@/static/images/theory/theoryIcon6.png', import.meta.url).href, url: ''},
		{name: '错题收藏', icon: new URL('@/static/images/theory/theoryIcon8.png', import.meta.url).href, url: ''},
		{name: '仿真考试', icon: new URL('@/static/images/theory/theoryIcon10.png', import.meta.url).href, url: ''},
		{name: '我的学习', icon: new URL('@/static/images/theory/theoryIcon12.png', import.meta.url).href, url: ''},
	])
	
	const bottomItem = ref([
		{name: '考试简介', icon: new URL('@/static/images/theory/theoryIcon3.png', import.meta.url).href, url: ''},
		{name: '考试准备', icon: new URL('@/static/images/theory/theoryIcon2.png', import.meta.url).href, url: ''},
		{name: '考试流程', icon: new URL('@/static/images/theory/theoryIcon4.png', import.meta.url).href, url: ''},
		{name: '注意事项', icon: new URL('@/static/images/theory/theoryIcon5.png', import.meta.url).href, url: ''},
	])
</script>

<style lang="scss" scoped>
	image {
		display: block;
		width: 100%;
		height: 100%;
	}
	.tabs {
		display: flex;
		height: 100rpx;
		width: 100%;
		justify-content: center;
		.tab {
			color: #333;
			position: relative;
			padding: 0 40rpx;
			font-weight: 400;
			flex: 1;
			text-align: center;
			&.active {
				width: 100%;
				&::before {
					content: '';
					position: absolute;
					left: 50%;
					bottom: -20rpx;
					width: 30rpx;
					height: 4rpx;
					background: #333;
					font-weight: 700;
					border-radius: 2rpx;
					transform: translateX(-50%);
				}
			}
		}
	}
	
	.content {
		padding: 100rpx 30rpx 30rpx 30rpx;
	  .u-nav-slot {
		  .txt {
			  font-size: 28rpx;
			  margin-right: 10rpx;
		  }
	  }
	
	  .swiperBox {
	    padding-top: 20rpx;
	  }
	
	  .notice {
		padding: 18rpx;
		background: #FEF9ED;
		border-radius: 8rpx;
		margin-top: 20rpx;
		font-size: 28rpx;
	    .yellowT {
			font-weight: 800;
			color: #F1AD40;
			font-style: italic;
			display: inline-block;
			margin-right: 10rpx;
	    }
	
	    .txt {
			display: inline-block;
	    }
	  }
	
	  .iconBox {
		  display: flex;
		  justify-content: space-between;
		  padding: 60rpx 30rpx;
	    .iconComl {
			display: flex;
			flex-direction: column;
	      .item {
			  text-align: center;
			  margin-bottom: 40rpx;
			  display: flex;
			  flex-direction: column;
			  justify-content: center;
			  align-items: center;
	        .icon {
	          width: 72rpx;
	          height: 72rpx;
			  
	        }
	
	        .text {
				font-size: 28rpx;
				margin-top: 10rpx;
	        }
	      }
	    }
	
	    .centerComl {
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			padding-bottom: 30rpx;
	      .ctItem {
			  width: 230rpx;
			  height: 230rpx;
			  background: linear-gradient(0deg, #4FACFE 0%, #00F2FE 100%);
			  border-radius: 50%;
			  // border: 10px solid;
			  // opacity: 0.1;
			  // border-image: linear-gradient(0deg, #4FACFE, #00F2FE) 10 10;
			  display: flex;
			  align-items: center;
			  justify-content: center;
			  flex-direction: column;
			  &:last-child {
				  background: linear-gradient(45deg, #0FE25C 0%, #1FF2CA 100%);
				}
	        .txt {
				font-size: 32rpx;
				color: #fff;
				padding: 6rpx 0;
	        }
	      }
	    }
	  }

	  .simulatedExam {
		  background: #DFF6FF;
		  border-radius: 20rpx;
		  padding: 30rpx;
		  // margin-top: 40rpx;
	    .leftTxt {
			flex: 1;
			width: 0;
	      .h8 {
			font-weight: bold;
			font-size: 44rpx;
	      }
	
	      .text {
			font-size: 28rpx;
			margin-top: 12rpx;
	      }
	
	      .btnBox {
			  width: 188rpx;
			  height: 66rpx;
			  background: #3776FF;
			  border-radius: 33rpx;
			  display: flex;
			  justify-content: center;
			  margin-top: 30rpx;
	        .btnTxt {
				font-size: 30rpx;
				color: #FFFFFF;
	        }
	
	        .btnIcon {
	          width: 10rpx;
			  height: 12rpx;
			  margin-left: 12rpx;
	        }
	      }
	    }
	
	    .rightImg {
			width: 256rpx;
			height: 256rpx;
	      img {
	
	      }
	    }
	  }
	
	  .ul {
		  padding: 20rpx 0 0 0;
		  justify-content: space-between;
	    .li {
			width: 23%;
			height: 174rpx;
			background: linear-gradient(0deg, #FFFFFF 0%, #E5F7FF 100%);
			box-shadow: 0px 2px 2px 0px #E5F7FF;
			border-radius: 10px;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
	      .icon {
			  width: 58rpx;
			  height: 60rpx;
			  margin: 0 auto;
	      }
	
	      .txt {
			font-weight: 500;
			font-size: 28rpx;
			margin-top: 24rpx;
			text-align: center;
	      }
	    }
	  }
	}
</style>