questionbankvue3/pages/exercises/examIntroduction/examIntroduction.vue

<template>
	<view class="content">
		<up-navbar leftText=" " :leftIconColor="'#fff'" :safeAreaInsetTop="true" :autoBack="true" :fixed="false"
			:bgColor="'transparent'" title="考试" :titleStyle="{color: '#fff'}"></up-navbar>
		<view class="padding">

			<view class="tabs flex-b">
				<view class="btn" @click="changeNav(item)" :class="{active: currentNav==item.name}"
					v-for="(item,index) in tabData" :key="index">{{ item.name }}</view>
			</view>

			<view class="card">
				<view class="title">
					<view class="titlebg">{{ currentNav }}</view>
				</view>
				<tab1 v-if="currentNav=='考试简介'"/>
				<tab2 v-if="currentNav=='考试流程'"/>
				<tab3 v-if="currentNav=='考试准备'"/>
				<tab4 v-if="currentNav=='注意事项'"/>
				
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onLoad,
	} from '@dcloudio/uni-app'

	import tab1 from './comp/tab1.vue'
	import tab2 from './comp/tab2.vue'
	import tab3 from './comp/tab3.vue'
	import tab4 from './comp/tab4.vue'
	const value = ref(false)
	const currentNav = ref('考试简介')

	function changeNav(val) {
		currentNav.value = val.name
	}
	onLoad((option) => {
		if (option.tab) currentNav.value = option.tab
	})
	const tabData = ref([{
			name: '考试简介',
			id: 1
		},
		{
			name: '考试准备',
			id: 3
		},
		{
			name: '考试流程',
			id: 2
		},
		{
			name: '注意事项',
			id: 4
		},
	])
	
</script>

<style lang="scss" scoped>
	.tabs {
		display: flex;
		padding: 20rpx 0 10rpx 0;

		.btn {
			color: #fff;
			position: relative;

			// padding: 0 20rpx;
			&.active {
				&::before {
					content: '';
					position: absolute;
					left: 50%;
					bottom: -20rpx;
					width: 40rpx;
					height: 6rpx;
					background: #F6F7F8;
					border-radius: 3rpx;
					transform: translateX(-50%);
				}
			}
		}
	}

	.content {
		width: 100%;
		// background-color: #F6F7FA;
		min-height: 100vh;
		// padding: 0rpx 30rpx 30rpx 30rpx;
		padding-bottom: 30rpx;
		background: url('../../../static/images/bigImg/exambg.png') #F6F7FA no-repeat;
		background-size: 100% 800rpx;

		.card {
			background: #FFFFFF;
			border-radius: 20rpx;
			padding: 0 30rpx 30rpx 30rpx;
			margin-top: 50rpx;

			.title {
				height: 116rpx;
				display: flex;
				justify-content: center;

				.titlebg {
					width: 260rpx;
					height: 70rpx;
					font-weight: bold;
					font-size: 36rpx;
					background: url('../../../static/images/greetab.png') no-repeat;
					background-size: 100% 100%;
					text-align: center;
					line-height: 70rpx;
					color: #fff;
				}
			}
		}
	}
</style>