youxi-app/pages/index/components/physics.uvue

<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>
    </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]">AI问答</text>
    </view>
  </view>
  <view class="content" @tap="handleView('/pages/catalog/index')">
    <cl-image src="https://oss.xiaoxiongcode.com/static/home/3.gif" 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">
        启蒙物理AI课
      </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-[40vh] flex flex-row items-center justify-between gap-4;
  background: linear-gradient(0deg, #C7F0FE 0%, #30B9FF 100%);

}
</style>