|
|
@@ -1,69 +1,177 @@
|
|
|
<script lang="ts" setup>
|
|
|
-function handlePage(url) {
|
|
|
- uni.navigateTo({
|
|
|
- url
|
|
|
- })
|
|
|
+import { computed, onMounted } from 'vue'
|
|
|
+import { dict } from '@/.cool/store'
|
|
|
+import { router } 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.query.id = val.value
|
|
|
+ params.path = "/pages/catalog/index"
|
|
|
+ break;
|
|
|
+ // case 'chinese':
|
|
|
+ // url = '/pages/index/chinese'
|
|
|
+ // break;
|
|
|
+ // case 'english':
|
|
|
+ // url = '/pages/index/english'
|
|
|
+ // break;
|
|
|
+ // case 'mix':
|
|
|
+ // url = '/pages/index/mix'
|
|
|
+ // break;
|
|
|
+ // case 'game':
|
|
|
+ // url = '/pages/index/game'
|
|
|
+ // break;
|
|
|
+ // case 'exchange':
|
|
|
+ // url = '/pages/index/exchange'
|
|
|
+ // break;
|
|
|
+ // case 'user':
|
|
|
+ // url = '/pages/index/user'
|
|
|
+ // break;
|
|
|
+ default:
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ router.push(params);
|
|
|
+}
|
|
|
+onMounted(() => {
|
|
|
+ console.log(menuList.value)
|
|
|
+})
|
|
|
+function handleView(url) {
|
|
|
+ router.push({ path: url })
|
|
|
+}
|
|
|
+
|
|
|
</script>
|
|
|
<template>
|
|
|
<cl-page>
|
|
|
<img src="https://oss.xiaoxiongcode.com/static/home/11.png" alt="" class="w-full h-full object-cover" />
|
|
|
- <view class="content">
|
|
|
- <view class="relative w-[25vw] " @tap="handlePage('/pages/catalog/index')">
|
|
|
- <img src="https://oss.xiaoxiongcode.com/static/home/13.png" alt="" class="w-full object-cover" />
|
|
|
- <view class="absolute top-0 left-0 w-full h-full flex flex-col items-center justify-center text-white pb-3">
|
|
|
- <view class="text-2xl font-bold">全部课程</view>
|
|
|
- <view class="text-[11px] px-2 py-1 rounded-full bg-[#55B58A] text-white font-bold mt-2">点击这里查看上过课程</view>
|
|
|
+ <view class="menus ">
|
|
|
+ <view v-for="item in menuList" :key="item.code" class="flex flex-col items-center justify-center gap-1"
|
|
|
+ @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-[30px] 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="50"
|
|
|
+ :show-text="false" :strokeWidth="20"
|
|
|
+ :pt="{ outer: { className: '!rounded-full' }, inner: { className: '!rounded-full' } }"></cl-progress>
|
|
|
+
|
|
|
+ <view class="text-[14px] w-[100px] rounded-full text-black font-bold text-center check
|
|
|
+ to-pink-500 h-[30px] ">
|
|
|
+ 今日打卡
|
|
|
+ </view>
|
|
|
+
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view class="relative w-[50vw] ">
|
|
|
- <cl-row>
|
|
|
- <cl-col :span="12" :pt="{ className: '!p-3' }">
|
|
|
- <view class="relative w-full ">
|
|
|
- <cl-image src="https://oss.xiaoxiongcode.com/static/home/14.png" mode="widthFix" width="100%"
|
|
|
- height="auto" />
|
|
|
- <view class="absolute top-4 left-5">
|
|
|
- <view class="text-2xl font-bold">虚拟实验</view>
|
|
|
- </view>
|
|
|
- <view class="absolute bottom-5 right-3 w-[16vw]">
|
|
|
- <cl-image src="https://oss.xiaoxiongcode.com/static/home/17.png" mode="widthFix" width="100%"
|
|
|
- height="auto" />
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </cl-col>
|
|
|
- <cl-col :span="12" :pt="{ className: '!p-3' }">
|
|
|
- <view class="relative w-full ">
|
|
|
- <cl-image src="https://oss.xiaoxiongcode.com/static/home/15.png" mode="widthFix" width="100%"
|
|
|
- height="auto" />
|
|
|
- <view class="absolute top-4 left-5">
|
|
|
- <view class="text-2xl font-bold">学习报告</view>
|
|
|
- </view>
|
|
|
- <view class="absolute bottom-1 right-3 w-[15vw]">
|
|
|
- <cl-image src="https://oss.xiaoxiongcode.com/static/home/18.png" mode="widthFix" width="100%"
|
|
|
- height="auto" />
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </cl-col>
|
|
|
- <cl-col :span="12" :pt="{ className: '!p-3' }" @tap="handlePage('/pages/card/index')">
|
|
|
- <view class="relative w-full ">
|
|
|
- <cl-image src="https://oss.xiaoxiongcode.com/static/home/16.png" mode="widthFix" width="100%"
|
|
|
- height="auto" />
|
|
|
- <view class="absolute top-4 left-5">
|
|
|
- <view class="text-2xl font-bold">我的收获</view>
|
|
|
- </view>
|
|
|
- <view class="absolute bottom-2 right-2 w-[20vw]">
|
|
|
- <cl-image src="https://oss.xiaoxiongcode.com/static/home/19.png" mode="widthFix" width="100%"
|
|
|
- height="auto" />
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </cl-col>
|
|
|
- </cl-row>
|
|
|
+ <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="50%" 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="80%" 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="45%" 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-[80vw] flex flex-row items-center justify-between gap-4;
|
|
|
+ @apply absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-white w-[100vh] 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-[900px] rounded-[20px] px-10 py-1 flex flex-row items-center justify-between gap-5;
|
|
|
+ transform: translateX(-50%);
|
|
|
+
|
|
|
+ .progress {
|
|
|
+ @apply w-[400px] h-[100px] rounded-[50px] 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: 30px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.bg1 {
|
|
|
+ background: linear-gradient(0deg, #7597FA 0%, #C1DAFF 100%);
|
|
|
+ border-radius: 28px;
|
|
|
+ height: 100px;
|
|
|
+}
|
|
|
+
|
|
|
+.bg2 {
|
|
|
+ background: linear-gradient(0deg, #3CD3DE 0%, #ADFBFF 100%);
|
|
|
+ border-radius: 28px;
|
|
|
+ height: 100px;
|
|
|
+}
|
|
|
+
|
|
|
+.bg3 {
|
|
|
+ background: linear-gradient(0deg, #FFCE4A 0%, #FFEC88 100%);
|
|
|
+ border-radius: 28px;
|
|
|
+ height: 100px;
|
|
|
+}
|
|
|
+
|
|
|
+.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>
|
