refactor: 优化页面图片加载与布局样式

1. 为所有页面图片添加懒加载属性
2. 整理代码缩进与格式一致性
3. 调整首页组件布局与样式
4. 修复参数空格与标签闭合问题

pages/catalog/index.uvue

@@ -107,17 +107,18 @@ function handleClose(val: boolean) {
   <Loading v-show="isLoading" />
   <cl-page v-show="!isLoading">
     <Back />
-    <image mode="aspectFill" src="https://oss.xiaoxiongcode.com/static/home/2.png" alt=""
+    <image mode="aspectFill" lazy-load src="https://oss.xiaoxiongcode.com/static/home/2.png" alt=""
       class="w-full h-full object-cover" />
     <!-- 精灵图动画 -->
-    <cl-image src="https://oss.xiaoxiongcode.com/static/home/3.gif" mode="heightFix"
+    <cl-image lazy-load src="https://oss.xiaoxiongcode.com/static/home/3.gif" mode="heightFix"
       class="!absolute bottom-0 left-0 !w-[44vh] !h-[55vh] z-[1]" />
     <view>
 
     </view>
     <!-- 顶部右侧光标签 -->
     <view class="light-tag" @tap="visible = true">
-      <image class="light-icon" v-if="catalog?.fileList?.[0]?.url" :src="config.baseUrl + catalog?.fileList?.[0]?.url">
+      <image class="light-icon" lazy-load v-if="catalog?.fileList?.[0]?.url"
+        :src="config.baseUrl + catalog?.fileList?.[0]?.url">
       </image>
       <text class="light-text">{{ catalog?.name }}</text>
       <cl-icon name="arrow-left-right-line" color="primary"></cl-icon>
@@ -126,13 +127,13 @@ function handleClose(val: boolean) {
       <scroll-view class="scroll-view_H" direction="horizontal" :show-scrollbar="false" ref="cardsScrollView"
         @scroll="debouncedOnScroll">
         <view class="scroll-view-item_H bg-[white]" v-for="course in courseList || []"
-          :class="`category-${course.catalogId}`" :key="course.id" @tap="handleDetail(course)" >
-          <cl-image :src="config.baseUrl + course?.fileList?.[0]?.url" mode="scaleToFill"
+          :class="`category-${course.catalogId}`" :key="course.id" @tap="handleDetail(course)">
+          <cl-image lazy-load :src="config.baseUrl + course?.fileList?.[0]?.url" mode="scaleToFill"
             class="!w-full !h-[28vh] mb-[5px] rounded-xl"></cl-image>
-           <cl-text ellipsis :pt="{
+          <cl-text ellipsis :pt="{
             className: '!text-[4vh] !font-bold'
           }">{{
-                    course.sortNum }}、{{
+            course.sortNum }}、{{
               course.mainTitle }}</cl-text>
           <text class="text-[3vh] text-[#666]">{{
             course.assistantTitle }}</text>

pages/english/index.uvue

@@ -19,7 +19,7 @@ const record = ref<any>()
 const userInfo = computed(() => user.info.value?.userInfo)
 const courseList = ref<SubjectCourseResult[]>()
 async function getDataList() {
-  const res = await fetchSubjectAppInfo({ id: router.query().id,delFlag: false })
+  const res = await fetchSubjectAppInfo({ id: router.query().id, delFlag: false })
   record.value = res
   dataList.value = res.catalogList || []
   catalog.value = res?.catalogList?.[0]
@@ -84,7 +84,8 @@ function debouncedOnScroll(e: any) {
   <Loading v-show="isLoading" />
   <cl-page v-show="!isLoading">
     <Back />
-    <image mode="aspectFill" src="https://oss.xiaoxiongcode.com/static/英语/图层 6.png" alt="" class="w-full h-full object-cover" />
+    <image mode="aspectFill" src="https://oss.xiaoxiongcode.com/static/英语/图层 6.png" alt=""
+      class="w-full h-full object-cover" />
 
     <!-- 精灵图动画 -->
     <!-- <cl-image src="https://oss.xiaoxiongcode.com/static/home/3.gif" mode="heightFix"
@@ -100,22 +101,25 @@ function debouncedOnScroll(e: any) {
       <cl-icon name="arrow-left-right-line" color="primary"></cl-icon>
     </view>
     <view class="boxs">
-      <scroll-view class="scroll-view_H" direction="horizontal" ref="cardsScrollView" :show-scrollbar="false" @scroll="debouncedOnScroll">
-         <view class="scroll-view-item_H bg-[white]"  :class="`category-${course.catalogId}`" v-for="course in courseList || []" :key="course.id"
-          @tap="handleDetail(course)">
-        <cl-image :src="course?.ossIconPath" mode="heightFix"
+      <scroll-view class="scroll-view_H" direction="horizontal" ref="cardsScrollView" :show-scrollbar="false"
+        @scroll="debouncedOnScroll">
+        <view class="scroll-view-item_H bg-[white]" :class="`category-${course.catalogId}`"
+          v-for="course in courseList || []" :key="course.id" @tap="handleDetail(course)">
+          <cl-image :src="course?.ossIconPath" mode="heightFix"
             class="!w-full !h-[26vh] mb-[2px] rounded-xl"></cl-image>
-             <cl-text ellipsis :pt="{
+          <cl-text ellipsis :pt="{
             className: '!text-[4vh] !font-bold'
           }">{{
-                    course.sortNum }}、{{
+            course.sortNum }}、{{
               course.mainTitle }}</cl-text>
-          <text class="text-[3vh] text-[#666]">{{
-            course.assistantTitle }}</text>
+          <cl-text ellipsis color="#666" :pt="{
+            className: '!text-[3vh]'
+          }">{{
+            course.assistantTitle }}</cl-text>
           <!-- <view>
             <Progress :progress="30" /> 
           </view> -->
-          <Lock v-if="userInfo?.memberLevel === 'default'" :record="course" type="vip"/>
+          <Lock v-if="userInfo?.memberLevel === 'default'" :record="course" type="vip" />
         </view>
       </scroll-view>
     </view>

pages/index/components/chinese.uvue

@@ -8,48 +8,22 @@ function handleView(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 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>
-    <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 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 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 {
@@ -88,12 +62,15 @@ function handleView(url) {
 
 .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);
+  text-shadow:
+    -1px -1px 0 #000,
+    1px -1px 0 #000,
+    -1px 1px 0 #000,
+    1px 1px 0 #000;
 }
 
 .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%);
+  @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>

pages/index/components/math.uvue

@@ -8,48 +8,22 @@ function handleView(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 class="flex flex-row items-center justify-center w-full " style="height: calc(97vh - 85px);">
+    <view class="content" @tap="handleView('/pages/math/index')">
+      <image mode="aspectFill" src="https://oss.xiaoxiongcode.com/static/home/math-bg.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>
-    <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/math/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 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 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 {
@@ -88,12 +62,15 @@ function handleView(url) {
 
 .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);
+  text-shadow:
+    -1px -1px 0 #000,
+    1px -1px 0 #000,
+    -1px 1px 0 #000,
+    1px 1px 0 #000;
 }
 
 .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%);
+  @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>

pages/index/components/physics.uvue

@@ -13,29 +13,33 @@ function openPopup() {
 </script>
 <template>
   <view class="content">
-    <view @tap="handleView('/pages/catalog/index')" class="w-[57vw] box">
-      <image class="absolute top-0 left-0 z-[1] w-full h-full "  mode="aspectFill"  src="https://oss.xiaoxiongcode.com/static/home/641.png"   />
-             <image class="absolute top-2 right-2 z-[2] h-[14vh]" mode="heightFix" src="https://oss.xiaoxiongcode.com/static/home/645.png"  />
-       <image class="absolute bottom-5 left-5 z-[2] h-[40vh]" mode="heightFix" src="https://oss.xiaoxiongcode.com/static/home/3.gif"  />
-       <image class="absolute bottom-[14vh] right-[12vw] z-[2] h-[20vh]" mode="heightFix" src="https://oss.xiaoxiongcode.com/static/home/play.png"  />
+    <view @tap="handleView('/pages/catalog/index')" class=" box">
+      <image class=" w-full h-full " mode="heightFix" src="https://oss.xiaoxiongcode.com/static/home/681.png"
+        lazy-load />
+      <!-- <image class="absolute top-2 right-2 z-[2] h-[14vh]" mode="heightFix"
+        src="https://oss.xiaoxiongcode.com/static/home/682.png" /> -->
+      <!-- <image class="absolute bottom-5 left-5 z-[2] h-[40vh]" mode="heightFix" src="https://oss.xiaoxiongcode.com/static/home/3.gif"  />
+       <image class="absolute bottom-[14vh] right-[12vw] z-[2] h-[20vh]" mode="heightFix" src="https://oss.xiaoxiongcode.com/static/home/play.png"  /> -->
     </view>
-    <view @tap="handleView('/pages/test/index')" class="w-[30vw] box">
-           <image class="absolute top-0 left-0 z-[1] w-full h-full " mode="aspectFill" src="https://oss.xiaoxiongcode.com/static/home/644.jpg"   />
-       <image class="relative mx-auto mt-2 z-[2] h-[14vh] w-[28vw]" mode="aspectFit" src="https://oss.xiaoxiongcode.com/static/home/6421.png"  />
+    <view @tap="handleView('/pages/test/index')" class=" box">
+      <image class=" w-full h-full " mode="heightFix" src="https://oss.xiaoxiongcode.com/static/home/682.png"
+        lazy-load />
+      <!-- <image class="relative mx-auto mt-2 z-[2] h-[14vh] w-[28vw]" mode="aspectFit" src="https://oss.xiaoxiongcode.com/static/home/6421.png"  /> -->
     </view>
   </view>
 </template>
 <style lang="scss" scoped>
 .content {
-  @apply w-[90vw]   mx-auto flex flex-row items-center justify-between gap-4 ;
+  @apply w-[90vw] mx-auto flex flex-row items-center justify-between;
   height: calc(97vh - 85px);
-.box{
-  @apply h-[70vh]  relative max-h-[40vw];
-  overflow: hidden;
-  border-radius: 30px;
-  border: 1vh solid #fff;
 
-}
+  .box {
+    @apply h-[32vw] relative;
+    overflow: visible;
+    // border-radius: 30px;
+    // border: 1vh solid #fff;
+
+  }
 
 }
 </style>

pages/math/index.uvue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { user } from '@/.cool'
-import { ref, onMounted, computed } from 'vue' 
+import { ref, onMounted, computed } from 'vue'
 import { fetchSubjectAppInfo } from '@/services/subject/info'
 import type { SubjectCatalogResult } from '@/services/subject/catalog'
 import type { SubjectCourseResult } from '@/services/subject/course'
@@ -20,7 +20,7 @@ const record = ref<any>()
 const courseList = ref<SubjectCourseResult[]>()
 async function getDataList() {
   const id = dict.getValueByLabelMapByType('index_subject_id')['数学']
-  const res = await fetchSubjectAppInfo({ id,delFlag: false, })
+  const res = await fetchSubjectAppInfo({ id, delFlag: false, })
   record.value = res
   dataList.value = res.catalogList || []
   catalog.value = res?.catalogList?.[0]
@@ -86,7 +86,8 @@ const userInfo = computed(() => user.info.value?.userInfo)
   <Loading v-show="isLoading" />
   <cl-page v-show="!isLoading">
     <Back />
-    <image mode="aspectFill" src="https://oss.xiaoxiongcode.com/static/home/math-bg.png" alt="" class="w-full h-full object-cover" />
+    <image mode="aspectFill" src="https://oss.xiaoxiongcode.com/static/home/math-bg.png" alt=""
+      class="w-full h-full object-cover" />
     <!-- 精灵图动画 -->
     <cl-image src="https://oss.xiaoxiongcode.com/static/home/3.gif" mode="heightFix"
       class="!absolute bottom-0 left-0 !w-[44vh] !h-[55vh] z-[1]" />
@@ -101,22 +102,25 @@ const userInfo = computed(() => user.info.value?.userInfo)
       <cl-icon name="arrow-left-right-line" color="primary"></cl-icon>
     </view>
     <view class="boxs">
-      <scroll-view class="scroll-view_H" direction="horizontal" :show-scrollbar="false" ref="cardsScrollView" @scroll="debouncedOnScroll">
-        <view class="scroll-view-item_H bg-[white]" v-for="course in courseList || []" :class="`category-${course.catalogId}`" :key="course.id"
-          @tap="handleDetail(course)">
-         <cl-image :src="course?.ossIconPath" mode="heightFix"
+      <scroll-view class="scroll-view_H" direction="horizontal" :show-scrollbar="false" ref="cardsScrollView"
+        @scroll="debouncedOnScroll">
+        <view class="scroll-view-item_H bg-[white]" v-for="course in courseList || []"
+          :class="`category-${course.catalogId}`" :key="course.id" @tap="handleDetail(course)">
+          <cl-image :src="course?.ossIconPath" mode="heightFix"
             class="!w-full !h-[26vh] mb-[2px] rounded-xl"></cl-image>
-              <cl-text ellipsis :pt="{
+          <cl-text ellipsis :pt="{
             className: '!text-[4vh] !font-bold'
           }">{{
-                    course.sortNum }}、{{
+            course.sortNum }}、{{
               course.mainTitle }}</cl-text>
-          <text class="text-[3vh] text-[#666]">{{
-            course.assistantTitle }}</text>
+          <cl-text ellipsis color="#666" :pt="{
+            className: '!text-[3vh]'
+          }">{{
+            course.assistantTitle }}</cl-text>
           <!-- <view>
             <Progress :progress="30" />
           </view> -->
-          <Lock v-if="userInfo?.memberLevel === 'default'" :record="course" type="vip"/>
+          <Lock v-if="userInfo?.memberLevel === 'default'" :record="course" type="vip" />
         </view>
       </scroll-view>
     </view>