Explorar el Código

style: 优化多页面UI布局与资源链接

1. 修正physics组件的图片资源后缀与链接
2. 调整学科页面的课程标题排版,将主标题居中显示并修改尺寸单位
3. 缩短滚动列表项高度并添加相对定位支持
408249787@qq.com hace 1 semana
padre
commit
02d78c8111

+ 5 - 5
pages/chinese/index.uvue

@@ -106,12 +106,12 @@ function debouncedOnScroll(e: any) {
           @tap="handleDetail(course)">
           <cl-image :src="config.baseUrl + course?.fileList?.[0]?.url" mode="heightFix"
             class="!w-full !h-[26vh] mb-[2px] rounded-xl"></cl-image>
-          <text class="text-[16px] font-bold">{{
-            course.mainTitle }}</text>
-          <text class="text-[14px] text-[#666]">{{
+          <view class="text-[4vh] font-bold absolute top-[4vh] left-0 w-full text-center"  >{{
+            course.mainTitle }}</view>
+          <text class="text-[3vh] text-[#666]">{{
             course.assistantTitle }}</text>
           <!-- <view>
-            <Progress :progress="30" />
+            <Progress :progress="30" /> 
           </view> -->
           <Lock v-if="userInfo?.memberLevel === 'default'" :record="course" type="vip"/>
         </view>
@@ -166,7 +166,7 @@ function debouncedOnScroll(e: any) {
 }
 
 .scroll-view-item_H {
-  @apply w-[40vh] h-[50vh] mr-[20px] rounded-2xl border-[5px] border-[#1D4BD9] border-solid border-b-[10px] p-1 flex items-center justify-between pb-[20px];
+  @apply w-[40vh] h-[45vh] mr-[20px] rounded-2xl border-[5px] border-[#1D4BD9] border-solid border-b-[10px] p-1 flex items-center justify-between pb-[20px] relative;
 }
 
 .light-tag {

+ 7 - 7
pages/english/index.uvue

@@ -101,18 +101,18 @@ function debouncedOnScroll(e: any) {
     </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"
+         <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="config.baseUrl + course?.fileList?.[0]?.url" mode="heightFix"
             class="!w-full !h-[26vh] mb-[2px] rounded-xl"></cl-image>
-          <text class="text-[16px] font-bold">{{
-            course.mainTitle }}</text>
-          <text class="text-[14px] text-[#666]">{{
+          <view class="text-[4vh] font-bold absolute top-[4vh] left-0 w-full text-center"  >{{
+            course.mainTitle }}</view>
+          <text class="text-[3vh] text-[#666]">{{
             course.assistantTitle }}</text>
           <!-- <view>
-            <Progress :progress="30" />
+            <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>
@@ -165,7 +165,7 @@ function debouncedOnScroll(e: any) {
 }
 
 .scroll-view-item_H {
-  @apply w-[40vh] h-[50vh] mr-[20px] rounded-2xl border-[5px] border-[#1D4BD9] border-solid border-b-[10px] p-1 flex items-center justify-between pb-[20px];
+  @apply w-[40vh] h-[45vh] mr-[20px] rounded-2xl border-[5px] border-[#1D4BD9] border-solid border-b-[10px] p-1 flex items-center justify-between pb-[20px] relative;
 }
 
 .light-tag {

+ 2 - 2
pages/index/components/physics.uvue

@@ -20,8 +20,8 @@ function openPopup() {
        <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.png"   />
-       <image class="relative mx-auto mt-2 z-[2] h-[14vh] w-[28vw]" mode="aspectFit" src="https://oss.xiaoxiongcode.com/static/home/642.png"  />
+           <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>
   </view>
 </template>

+ 4 - 4
pages/math/index.uvue

@@ -106,9 +106,9 @@ const userInfo = computed(() => user.info.value?.userInfo)
           @tap="handleDetail(course)">
           <cl-image :src="config.baseUrl + course?.fileList?.[0]?.url" mode="heightFix"
             class="!w-full !h-[26vh] mb-[2px] rounded-xl"></cl-image>
-          <text class="text-[16px] font-bold">{{
-            course.mainTitle }}</text>
-          <text class="text-[14px] text-[#666]">{{
+          <view class="text-[4vh] font-bold absolute top-[4vh] left-0 w-full text-center"  >{{
+            course.mainTitle }}</view>
+          <text class="text-[3vh] text-[#666]">{{
             course.assistantTitle }}</text>
           <!-- <view>
             <Progress :progress="30" />
@@ -166,7 +166,7 @@ const userInfo = computed(() => user.info.value?.userInfo)
 }
 
 .scroll-view-item_H {
-  @apply w-[40vh] h-[50vh] mr-[20px] rounded-2xl border-[5px] border-[#1D4BD9] border-solid border-b-[10px] p-1 flex items-center justify-between pb-[20px];
+  @apply w-[40vh] h-[45vh] mr-[20px] rounded-2xl border-[5px] border-[#1D4BD9] border-solid border-b-[10px] p-1 flex items-center justify-between pb-[20px] relative;
 }
 
 .light-tag {

+ 4 - 4
pages/mix/index.uvue

@@ -98,9 +98,9 @@ function handleDetail(item: SubjectCatalogResult) {
           @tap="handleDetail(course)">
           <cl-image :src="config.baseUrl + course?.fileList?.[0]?.url" mode="heightFix"
             class="!w-full !h-[26vh] mb-[2px] rounded-xl"></cl-image>
-          <text class="text-[16px] font-bold">{{
-            course.mainTitle }}</text>
-          <text class="text-[14px] text-[#666]">{{
+          <view class="text-[4vh] font-bold absolute top-[4vh] left-0 w-full text-center"  >{{
+            course.mainTitle }}</view>
+          <text class="text-[3vh] text-[#666]">{{
             course.assistantTitle }}</text>
           <!-- <view>
             <Progress :progress="30" />
@@ -159,7 +159,7 @@ function handleDetail(item: SubjectCatalogResult) {
 }
 
 .scroll-view-item_H {
-  @apply w-[40vh] h-[50vh] mr-[20px] rounded-2xl border-[5px] border-[#1D4BD9] border-solid border-b-[10px] p-1 flex items-center justify-between pb-[20px];
+  @apply w-[40vh] h-[45vh] mr-[20px] rounded-2xl border-[5px] border-[#1D4BD9] border-solid border-b-[10px] p-1 flex items-center justify-between pb-[20px] relative;
 }
 
 .light-tag {