|
|
@@ -0,0 +1,99 @@
|
|
|
+<script setup lang='ts'>
|
|
|
+import { ref } from 'vue'
|
|
|
+import { router } from '@/.cool'
|
|
|
+import { user } from '@/.cool'
|
|
|
+
|
|
|
+function handleView(url) {
|
|
|
+ router.push({ path: url })
|
|
|
+}
|
|
|
+</script>
|
|
|
+<template>
|
|
|
+ <!-- <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" @tap="handleView('/pages/chinese/index')">
|
|
|
+ <cl-image src="https://oss.xiaoxiongcode.com/static/home/play.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="h-[15vh]">
|
|
|
+ <cl-image src="https://oss.xiaoxiongcode.com/static/home/play.png" mode="heightFix" height="100%"
|
|
|
+ width="auto" />
|
|
|
+ </view> -->
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.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);
|
|
|
+}
|
|
|
+
|
|
|
+.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%);
|
|
|
+
|
|
|
+}
|
|
|
+</style>
|