youxi-app/pages/index/home.uvue

<script lang="ts" setup>
import { computed, onMounted } from 'vue'
import { dict } from '@/.cool/store'
import { router } from '@/.cool'
import { user } from '@/.cool'

const menuList = computed(() => {
	return [
		...dict.getChildrenList('index_subject_id'),
		{
			label: '兑换',
			code: 'exchange'
		},
		{
			label: '个人中心',
			code: 'user'
		},
	]
})
const icons = {
	physics: "https://oss.xiaoxiongcode.com/static/home/wl.png",
	chinese: "https://oss.xiaoxiongcode.com/static/home/语文.png",
	english: "https://oss.xiaoxiongcode.com/static/home/英语.png",
	mix: "https://oss.xiaoxiongcode.com/static/home/百度百科.png",
	game: "https://oss.xiaoxiongcode.com/static/home/娱乐.png",
	exchange: "https://oss.xiaoxiongcode.com/static/home/图层 5.png",
	user: "https://oss.xiaoxiongcode.com/static/home/个人中心.png",
}
function handlePage(val: any) {
	let params: {
		path: string,
		query: {
			[key: string]: any,
		}
	} = {
		path: "",
		query: {
		}
	}
	switch (val.code) {
		case 'physics':
			params.path = "/pages/catalog/index"
			break;
		case 'chinese':
			params.path = '/pages/chinese/index'
			break;
		case 'english':
			params.path = '/pages/english/select'
			break;
		// case 'mix':
		// 	url = '/pages/index/mix'
		// 	break;
		// case 'game':
		// 	url = '/pages/index/game'
		// 	break;
		// case 'exchange':
		// 	url = '/pages/index/exchange'
		// 	break;
		case 'user':
			params.path = '/pages/user/info'
			break;
		default:
			break;
	}
	router.push(params);
}
onMounted(() => {
	console.log(menuList.value)
})
function handleView(url) {
	router.push({ path: url })
}
const userInfo = computed(() => user.info.value?.userInfo)

</script>
<template>
	<cl-page>
		<img src="https://oss.xiaoxiongcode.com/static/home/11.png" alt="" class="w-full h-full object-cover" />
		<view class="menus ">
			<view v-for="item in menuList" :key="item.code"
				class="flex flex-col items-center justify-center gap-1 active:scale-[.9] transition-all duration-300"
				@tap="handlePage(item)">
				<cl-image :src="icons[item.code]" mode="aspectFill" width="40" height="40"></cl-image>
				<text class="text-[12px]">{{ item.label }}</text>
			</view>
		</view>
		<view class="bottom">
			<view class=" progress">
				<view class="text-[26px] font-bold">学习进度</view>
				<view class=" w-full flex flex-row items-center justify-center gap-2">

					<cl-progress class="flex-1" color="linear-gradient(0deg, #1FA5F5 37%, #A2D8FF 100%)"
						:value="user.info.value?.studyCourseNum" :show-text="false" :strokeWidth="16"
						:pt="{ outer: { className: '!rounded-full' }, inner: { className: '!rounded-full' } }"></cl-progress>

					<view class="text-[12px] w-[100px] rounded-full text-black font-bold text-center check
               to-pink-500 h-[20px] ">
						今日打卡
					</view>

				</view>
			</view>
			<view class="flex-1 flex flex-col items-center justify-between gap-2 bg1 py-3">
				<cl-image src="https://oss.xiaoxiongcode.com/static/home/17.png" mode="widthFix" width="40%" height="auto" />
				<text class="text-[14px]">趣味虚拟实验</text>
			</view>
			<view class="flex-1 flex flex-col items-center justify-between gap-1 bg2 py-3"
				@tap="handleView('/pages/card/index')">
				<cl-image src="https://oss.xiaoxiongcode.com/static/home/19.png" mode="widthFix" width="70%" height="auto" />
				<text class="text-[14px]">我的收货</text>
			</view>
			<view class="flex-1 flex flex-col items-center justify-between gap-1 bg3 py-3">
				<cl-image src="https://oss.xiaoxiongcode.com/static/home/18.png" mode="widthFix" width="35%" height="auto" />
				<text class="text-[14px]">学习报告</text>
			</view>
		</view>
		<view class="content">
			<cl-image src="https://oss.xiaoxiongcode.com/static/home/nh.png" mode="heightFix" height="100%" width="auto" />
			<view class="flex-1 flex flex-col items-center justify-center gap-2 ft">
				<view class="text-[10vh] font-bold">
					推荐课程
				</view>
				<view class="text-[8vh]">
					启蒙物理AI课
				</view>
			</view>
		</view>
	</cl-page>
</template>
<style lang="scss" scoped>
.content {
	@apply absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-white w-[120vh] border-[3px] border-[#fff] border-solid rounded-[30px] px-10 py-4 h-[44vh] flex flex-row items-center justify-between gap-4;
	background: linear-gradient(0deg, #C7F0FE 0%, #30B9FF 100%);

}

.menus {
	@apply absolute top-[5vh] left-1/2 bg-white rounded-[20px] px-10 py-1 flex flex-row items-center justify-between gap-10;
	transform: translateX(-50%);
}

.bottom {
	@apply absolute bottom-[1vh] left-1/2 w-full max-w-[800px] rounded-[20px] px-10 py-1 flex flex-row items-center justify-between gap-5;
	transform: translateX(-50%);

	.progress {
		@apply w-[400px] h-[80px] rounded-[40px] flex justify-center gap-2 px-[30px] gap-3;
		background: linear-gradient(0deg, #AAE3FF 0%, #DFF4FD 100%);
		width: 40%;
	}

	.check {
		background: linear-gradient(0deg, #FBD00E 0%, #FBEC92 100%);
		line-height: 20px;
	}
}

.bg1 {
	background: linear-gradient(0deg, #7597FA 0%, #C1DAFF 100%);
	border-radius: 28px;
	height: 80px;
}

.bg2 {
	background: linear-gradient(0deg, #3CD3DE 0%, #ADFBFF 100%);
	border-radius: 28px;
	height: 80px;
}

.bg3 {
	background: linear-gradient(0deg, #FFCE4A 0%, #FFEC88 100%);
	border-radius: 28px;
	height: 80px;
}

.ft {
	font-family: eryazhaocaimao;
	text-shadow: 0 0 10px rgba(255, 255, 255, 0.8), 0 0 20px rgba(255, 255, 255, 0.6), 0 0 30px rgba(255, 255, 255, 0.4), 0 0 40px rgba(62, 166, 238, 0.8);
}
</style>