youxi-app/pages/index/components/chinese.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="flex flex-row items-center justify-center w-full " style="height: calc(97vh - 85px);">
    <view class="content" @tap="handleView('/pages/chinese/index')">
      <image mode="aspectFill" src="https://oss.xiaoxiongcode.com/static/语文/图层 4.png" alt="" lazy-load
        class="w-full h-full object-cover absolute top-0 left-0" />
      <view class=" flex items-center justify-center  ft">
        <view class="text-[10vh] font-bold">
          语文启蒙
        </view>
      </view>
      <view class="flex  items-center  justify-center  h-[60vh]">
        <cl-image src="https://oss.xiaoxiongcode.com/static/home/play.png" mode="heightFix" lazy-load height="60%"
          width="auto" class="ml-10" />
      </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:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;
}

.content {
  @apply relative mx-auto text-white w-[90vw] border-[3px] border-[#fff] border-solid rounded-[30px] flex flex-row items-center justify-around gap-4 h-[60vh];

}
</style>