1

pages/programming/code.uvue

@@ -29,18 +29,22 @@ onMounted(async () => {
     <Loading v-show="isLoading" />
     <cl-page>
         <Back />
+        <image class="absolute top-0 left-0 z-[1] w-full h-full " mode="aspectFill"
+            src="https://oss.xiaoxiongcode.com/static/scratch/2.jpg" />
         <view class="main">
-            <!-- <image class="absolute top-0 left-0 z-[1] w-full h-full "  mode="aspectFill"  src="https://oss.xiaoxiongcode.com/static/home/641.png"   /> -->
 
-            <view class="text-[20px] font-bold text-[#333333] absolute top-6 left-20">
+
+            <view class="text-[20px] font-bold text-[#fff] absolute top-6 left-20">
                 {{ course?.mainTitle }}
             </view>
-            <scroll-view class="courseSummary" :show-scrollbar="false" v-if="type === 2">
-                <view class="text-[20px] font-bold mb-3 text-[#fff]" v-for="(item, index) in courseSummary"
-                    :key="index">
+            <view class="courseSummary" :show-scrollbar="false" v-if="type === 2">
+                <image class="absolute top-0 left-0 z-[1] w-full h-full " mode="aspectFill"
+                    src="https://oss.xiaoxiongcode.com/static/scratch/1.png" />
+                <view class="text-[20px] w-[60vw] font-bold mb-3 text-[#000] relative z-[2]"
+                    v-for="(item, index) in courseSummary" :key="index">
                     {{ index + 1 }}. {{ item }}
                 </view>
-            </scroll-view>
+            </view>
             <scroll-view class="codeImage" v-else :show-scrollbar="false">
                 <cl-row :gutter="12">
                     <cl-col :span="8" v-for="item in codeImage" :key="item">
@@ -56,13 +60,15 @@ onMounted(async () => {
 </template>
 <style lang="scss" scoped>
 .main {
-    background: linear-gradient(0deg, #88C5F0, #D0ECFF);
+    // background: linear-gradient(0deg, #88C5F0, #D0ECFF);
     width: 100vw;
     height: 100vh;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
+    position: relative;
+    z-index: 2;
 
     .progress {
         position: relative;
@@ -75,7 +81,11 @@ onMounted(async () => {
 }
 
 .courseSummary {
-    @apply absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 max-w-[1000px] w-[60vw] max-h-[620px] rounded-[30px] p-[20px] text-white;
+    @apply absolute max-w-[1000px] w-[70vw] rounded-[30px] text-white flex flex-col items-center p-[30px] text-center;
+    aspect-ratio: 585 / 324;
+    top: 60px;
+    left: 50%;
+    transform: translateX(-50%);
 
 }
 

pages/programming/index.uvue

@@ -102,7 +102,7 @@ const userInfo = computed(() => user.info.value?.userInfo)
   <cl-page v-show="!isLoading">
     <Back />
     <!-- 顶部标题栏 -->
-    <image mode="aspectFill" src="https://oss.xiaoxiongcode.com/static/百科/bg.jpg" alt=""
+    <image mode="aspectFill" src="https://oss.xiaoxiongcode.com/static/scratch/3.jpg" alt=""
       class="w-full h-full object-cover" />
     <view class="content">
       <!-- 左侧导航菜单 -->

pages/programming/progress.uvue

@@ -71,14 +71,15 @@ function copyUrl() {
   <Loading v-show="isLoading" />
   <cl-page>
     <Back />
-    <view class="main">
-      <!-- <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-0 left-0 z-[1] w-full h-full " mode="aspectFill"
+      src="https://oss.xiaoxiongcode.com/static/scratch/5.jpg" />
+    <view class="main relative z-[2]">
 
       <view class="text-[20px] font-bold text-[#333333] absolute top-6 left-20">
         {{ course?.mainTitle }}
       </view>
       <view class="progress w-[90vw] h-[45vw] pb-[5vw] flex items-center justify-end ">
-        <image class="w-[80vw]" mode="widthFix" src="https://oss.xiaoxiongcode.com/static/home/形状 1.png" />
+        <image class="w-[80vw]" mode="widthFix" src="https://oss.xiaoxiongcode.com/static/scratch/6.png" />
         <view v-for="item in menuItems" :key="item.id"
           class="w-[10vw] h-[13vw] absolute flex items-center justify-between z-[2]" :style="{
             top: `${item.y}vw`,
@@ -114,7 +115,7 @@ function copyUrl() {
 </template>
 <style lang="scss" scoped>
 .main {
-  background: linear-gradient(0deg, #88C5F0, #D0ECFF);
+  // background: linear-gradient(0deg, #88C5F0, #D0ECFF);
   width: 100vw;
   height: 100vh;
   display: flex;