youxi-app/pages/index/home.uvue

<script lang="ts" setup>
import { computed, onMounted, ref } from 'vue'
import { dict } from '@/.cool/store'
import { router } from '@/.cool'
import { user } from '@/.cool'
import Physics from './components/physics.uvue'
import Chinese from './components/chinese.uvue'
import English from './components/english.uvue'
import Mix from './components/mix.uvue'
import Game from './components/game.uvue'
import Exchange from './components/exchange.uvue'

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",
}
const selected = ref<string>('physics')
function handlePage(val: any) {
	selected.value = val.code
	if (val.code === 'user') {
		router.push({ path: '/pages/user/info' })
	}
}
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 p-1 px-4 justify-center gap-1 active:scale-[.9] transition-all duration-300"
				@tap="handlePage(item)" :class="{ 'selected': item.code === selected }">
				<cl-image :src="icons[item.code]" mode="aspectFill" width="40" height="40"></cl-image>
				<text class="text-[12px]">{{ item.label }}</text>
			</view>
		</view>

		<Physics v-if="selected === 'physics'" />
		<Chinese v-else-if="selected === 'chinese'" />
		<English v-else-if="selected === 'english'" />
		<Mix v-else-if="selected === 'mix'" />
		<Game v-else-if="selected === 'game'" />
		<Exchange v-else-if="selected === 'exchange'" />
	</cl-page>
</template>
<style lang="scss" scoped>
.menus {
	@apply absolute top-[5vh] left-1/2 bg-white rounded-[20px] p-2 px-3 flex flex-row items-center justify-center gap-2;
	transform: translateX(-50%);
}

.selected {
	@apply scale-[1.1] bg-[#f0f0f0] rounded-xl;
}
</style>