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) {
	if (val.code === 'user') {
		router.push({ path: '/pages/user/info' })
		return
	}
	selected.value = val.code

}
onMounted(() => {
	console.log(menuList.value)
})
function handleView(url) {
	router.push({ path: url })
}
const userInfo = computed(() => user.info.value?.userInfo)
const visible = ref(false)

</script>
<template>
	<cl-page :backTop="false">
		<img src="https://oss.xiaoxiongcode.com/static/home/111.png" alt=""
			class="w-full h-full object-cover absolute top-0 left-0" />
		<view class="menus w-[90vw]">
			<image src="https://oss.xiaoxiongcode.com/static/home/643.png"
				class="w-[90vw] h-[24vh] absolute top-0 left-0 z-[1]"></image>
			<view class="w-[87vw] relative z-[2] p-1 px-3 flex flex-row items-center justify-between gap-1 mx-auto ">
				<view v-for="item in menuList" :key="item.code"
					class="flex flex-col items-center p-1 px-4 justify-center gap-1  transition-all duration-300"
					@tap="handlePage(item)" :class="{ 'selected': item.code === selected }">
					<image :src="icons[item.code]" mode="aspectFill"  class="w-[4vw] h-[4vw]"></image>
					<text  class="text-[1.5vw] text-[#1E1E1E]">{{ item.label }}</text>
				</view>
				<view class="flex flex-col items-center p-1 px-4 justify-center gap-1  transition-all duration-300"
					@tap="visible = true">
					<view class="bg-[#09ba07] p-[1vw] rounded-[2vw] w-[4vw] h-[4vw] flex items-center justify-center" @tap="visible = true">
						<image src="https://oss.xiaoxiongcode.com/static/个人中心/微信.png" class="w-full h-full"></image>
					</view>
					<text  class="text-[1.5vw] text-[#1E1E1E]">添加老师</text>
				</view>
			</view>
		</view>
		<!-- <view class="flex flex-col items-center justify-center fixed bottom-[3vh] right-[3vh]  ">
			 <view class="bg-[#09ba07] p-2 rounded-full border-[2px] border-[#FFF] border-solid " @tap="visible = true">
				<image src="https://oss.xiaoxiongcode.com/static/个人中心/微信.png" class="w-5 h-5"></image>
			</view>
			<text class="text-[14px] text-white font-bold text-stroke">添加老师</text>
		</view> -->
		<cl-popup v-model="visible" :size="400" :show-header="false" direction="center">
			<view class="flex flex-col items-center justify-center gap-4 py-7 bg-slate-50">
				<cl-text class="text-center " color="#09ba07" :size="30"> ——专属服务内容—— </cl-text>
				<image src="https://oss.xiaoxiongcode.com/static/home/qr.png" show-menu-by-longpress
					class="w-32 h-32" />
				<view class="text-center "> <cl-text class="text-center" color="#999" :size="14"> 长按识别二维码 </cl-text>
					<cl-text class="text-center" color="#999" :size="14"> 添加微信，享专业老师服务 </cl-text>
				</view>
			</view>
		</cl-popup>
		<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 mt-[3vh] mx-auto rounded-[20px];
}

.selected {
	@apply scale-[1.1] bg-[#efefef99] rounded-xl;
	font-weight: bold;
}

.text-stroke {
	text-shadow:
		-1px -1px 0 #000,
		1px -1px 0 #000,
		-1px 1px 0 #000,
		1px 1px 0 #000;
}
</style>