feat: UI调整;

components/base/navbar.vue

@@ -7,7 +7,7 @@
 			<view class="nav">
 				<image class="nav-bg" src="@/static/image/bg-nav.png" mode="aspectFill"></image>
 				<image class="nav-logo" src="@/static/image/bg-icon.png" mode="heightFix"></image>
-				<image class="nav-icon" src="@/static/image/icon-question.png" mode="widthFix"></image>
+				<!-- <image class="nav-icon" src="@/static/image/icon-question.png" mode="widthFix"></image> -->
 
 				<view class="main">
 					<view class="left">

components/base/tabbar.vue

@@ -120,7 +120,7 @@
 			}
 
 			.tabbar-active {
-				color: $uni-color !important;
+				color: #6A5494 !important;
 			}
 		}
 	}

components/serve/serveModuleCard.vue

@@ -1,6 +1,5 @@
 <template>
   <view class="card">
-    <serveModuleView v-model="isFold" :data="data" @change="onChange"></serveModuleView>
     <view v-if="!isFold" class="content">
       <view class="list">
         <view class="list-item" v-for="item in list" :key="item.id">
@@ -8,6 +7,7 @@
         </view>
       </view>
     </view>
+    <serveModuleView :style="style" v-model="isFold" :data="data" @change="onChange"></serveModuleView>
   </view>
 </template>
 
@@ -34,6 +34,11 @@
         list: [],
       }
     },
+    computed: {
+      style() {
+        return this.isFold ? '' : 'position: absolute; top: 0; left: 0; width: 100%;'
+      }
+    },
     methods: {
       async getData() {
         try {
@@ -74,11 +79,13 @@
   }
 
   .list {
-    padding: 0 12rpx;
+    padding: 90rpx 20rpx 0 12rpx;
     box-sizing: border-box;
 
     &-item {
-      margin-top: 26rpx;
+      & + & {
+        margin-top: 26rpx;
+      }
     }
   }
 </style>

components/serve/serveModuleView.vue

@@ -1,11 +1,20 @@
 <template>
-  <view class="module" @click="onClick">
-    <image class="module-bg" :src="data.image" mode="scaleToFill"></image>
-    <view class="flex module-fg">
-      <button class="flex btn">
-        <view>更多</view>
-        <uv-icon name="arrow-down-fill" color="#808080" size="10rpx"></uv-icon>
-      </button>
+  <view :style="style" @click="onClick">
+    <view class="module">
+      <image class="module-bg" :src="configList.page_serve_module_bg" mode="widthFix"></image>
+      <image class="module-bg absolute" :src="configList.page_serve_module_bg_0" mode="widthFix"></image>
+      <image class="module-bg absolute" :src="configList.page_serve_module_bg_1" mode="widthFix"></image>
+      <image class="module-bg absolute" :src="configList.page_serve_module_bg_2" mode="widthFix"></image>
+      <view class="flex module-fg">
+        <view class="flex module-info">
+          <view class="title">{{ data.title }}</view>
+          <image class="icon" src="@/static/image/serve-icon.png" mode="widthFix"></image>
+        </view>
+        <button class="flex btn">
+          <view>更多</view>
+          <uv-icon name="arrow-down-fill" color="#808080" size="10rpx"></uv-icon>
+        </button>
+      </view>
     </view>
   </view>
 </template>
@@ -50,35 +59,46 @@ export default {
 
 <style scoped lang="scss">
 
-  $w: calc(100vw - 38rpx*2);
-
   .module {
     font-size: 0;
-    width: $w;
+    width: 100%;
     height: auto;
     position: relative;
-    font-size: 0;
-    border-radius: 25rpx;
-    overflow: hidden;
-    box-shadow: 0rpx 3rpx 6rpx 0rpx rgba(0,0,0,0.16);
-
     &-bg {
-      width: $w;
-      height: calc(#{$w} * 179 / 714);
+      width: 100%;
+      height: auto;
     }
 
     &-fg {
       position: absolute;
       top: 0;
       left: 0;
-      align-items: center;
-      justify-content: flex-end;
+      justify-content: space-between;
       width: 100%;
-      height: 100%;
-      padding: 0 22rpx;
+      padding: 30rpx 30rpx 0 22rpx;
       box-sizing: border-box;
     }
 
+    &-info {
+      column-gap: 16rpx;
+
+      .title {
+        font-size: 32rpx;
+        font-weight: 700;
+        line-height: 1;
+        font-family: PingFang SC;
+        color: transparent;
+        background-image: linear-gradient(to right, #6851A7, #AA87F0);
+        background-clip: text;
+        display: inline-block;
+      }
+
+      .icon {
+        width: 30rpx;
+        height: auto;
+      }
+    }
+
     .btn {
       column-gap: 10rpx;
       font-size: 22rpx;
@@ -86,4 +106,9 @@ export default {
     }
   }
 
+  .absolute {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
 </style>

pages/index/case.vue

@@ -27,7 +27,8 @@
 
       <!-- 轮播图 -->
       <view class="section swiper">
-        <uv-swiper :list="bannerList" keyName="image" indicator indicatorMode="dot" indicatorActiveColor="#FFFFFF" indicatorInactiveColor="#6851A7" height="240rpx"></uv-swiper>
+        <image class="img" :src="configList.page_case_image" mode="widthFix"></image>
+        <!-- <uv-swiper :list="bannerList" keyName="image" indicator indicatorMode="dot" indicatorActiveColor="#FFFFFF" indicatorInactiveColor="#6851A7" height="240rpx"></uv-swiper> -->
       </view>
 
       <view class="flex filter">
@@ -157,7 +158,7 @@
 
   .header {
     margin-bottom: 32rpx;
-    padding-top: calc(var(--status-bar-height) + 60rpx);
+    padding-top: 186rpx;
     justify-content: space-between;
 
     .title {
@@ -252,8 +253,13 @@
 	}
 
   .swiper {
-    border-radius: 10rpx;
-    overflow: hidden;
+    // border-radius: 10rpx;
+    // overflow: hidden;
+
+    .img {
+      width: 100%;
+      height: auto;
+    }
     
     /deep/ .uv-swiper-indicator__wrapper__dot {
       width: 25rpx;

pages/index/center.vue

@@ -7,7 +7,7 @@
 
     <view class="main">
 
-      <view class="flex section header">
+      <view class="flex header">
         <view>
           <view class="title">{{ configList.page_center_title }}</view>
           <view class="desc">{{ configList.page_center_desc }}</view>
@@ -65,7 +65,8 @@
   }
 
   .header {
-    padding-top: calc(var(--status-bar-height) + 60rpx);
+    margin: 0 38rpx 22rpx 38rpx;
+    padding-top: 186rpx;
     justify-content: space-between;
 
     .title {
@@ -123,10 +124,6 @@
     box-sizing: border-box;
   }
 
-  .section {
-    margin: 0 38rpx 24rpx 38rpx;
-  }
-
   .swiper {
     border-radius: 10rpx;
     overflow: hidden;
@@ -144,7 +141,7 @@
   }
 
   .list {
-    margin-top: 60rpx;
+    // margin-top: 60rpx;
     padding: 0 38rpx;
 
     &-item {

pages/index/index.vue

@@ -148,7 +148,7 @@
   }
 
   .header {
-    padding-top: calc(var(--status-bar-height) + 60rpx);
+    padding-top: 186rpx;
     justify-content: space-between;
 
     .title {
@@ -295,7 +295,7 @@
       align-items: center;
       justify-content: flex-start;
       column-gap: 50rpx;
-      padding: 14rpx 28rpx;
+      padding: 26rpx 28rpx;
       box-sizing: border-box;
       background: linear-gradient(to right, rgba($color: #E2DDFF, $alpha: 0.26), rgba($color: #C8C3FD, $alpha: 0.26));
       // background: rgba($color: #E2DDFF, $alpha: 0.26);
@@ -320,7 +320,7 @@
 
     &-row {
       justify-content: space-between;
-      padding: 14rpx 30rpx 14rpx 42rpx;
+      padding: 26rpx 30rpx 26rpx 42rpx;
 
       & + & {
         margin-top: 28rpx;
@@ -332,7 +332,9 @@
 
       .btn {
         column-gap: 12rpx;
-        padding: 8rpx 24rpx 8rpx 26rpx;
+        // padding: 8rpx 24rpx 8rpx 26rpx;
+        padding: 10rpx 24rpx 10rpx 26rpx;
+        line-height: 1;
         font-size: 20rpx;
         font-weight: 600;
         color: #6851A7;

pages/index/serve.vue

@@ -84,7 +84,7 @@
 
   .header {
     margin-bottom: 32rpx;
-    padding-top: calc(var(--status-bar-height) + 60rpx);
+    padding-top: 186rpx;
     justify-content: space-between;
 
     .title {

pages_order/thesis/index.vue

@@ -16,8 +16,11 @@
 
     <!-- 发表全流程辅导 -->
     <view class="process" v-if="details.process || (details.educationProcessList && details.educationProcessList.length)">
-      <view class="process-custom" v-if="details.process">
-        <uv-parse :content="details.process"></uv-parse>
+      <view class="flex process-custom" v-if="difficulty">
+        <view class="process-custom-title">难度</view>
+        <view class="flex star">
+          <uv-icon v-for="(item, index) in new Array(difficulty).fill(1)" :key="index" name="star-fill" color="#3378EA" size="30rpx"></uv-icon>
+        </view>
       </view>
       <view class="process-item" v-for="item in details.educationProcessList" :key="item.id">
         <view class="process-item-title">{{ item.title }}</view>
@@ -191,6 +194,11 @@
       }
     },
     computed: {
+      difficulty() {
+        const num = parseInt(this.details?.process)
+
+        return isNaN(num) ? 0 : num
+      },
       posterData() {
         const { id, title, image, paperDesc, paperImage } = this.details || {}
 
@@ -307,10 +315,22 @@
     box-sizing: border-box;
 
     &-custom {
+      display: inline-flex;
+      column-gap: 8rpx;
       padding: 6rpx 18rpx;
       background: #E6EEFD;
       border-top-right-radius: 32rpx;
       border-bottom-right-radius: 32rpx;
+
+      &-title {
+        font-size: 30rpx;
+        font-weight: 600;
+        color: #3378EA;
+      }
+
+      .star {
+        column-gap: 6rpx;
+      }
     }
 
     &-item {

pages_order/thesis/thesisCard.vue

@@ -64,7 +64,7 @@
     }
 
     .main {
-      align-items: flex-start;
+      // align-items: flex-start;
       width: 100%;
     }
 

pages_order/thesis/thesisInfoView.vue

@@ -1,8 +1,11 @@
 <template>
   <view class="info">
     <view class="title" v-if="data.title">{{ data.title }}</view>
-    <view class="process" v-if="data.process">
-      <uv-parse :content="data.process"></uv-parse>
+    <view class="flex process" v-if="difficulty">
+      <view>难度</view>
+      <view class="flex star">
+        <uv-icon v-for="(item, index) in new Array(difficulty).fill(1)" :key="index" name="star-fill" color="#FFFFFF" size="14rpx"></uv-icon>
+      </view>
     </view>
     <view class="content" v-if="data.shortTitle">
       {{ data.shortTitle || '' }}
@@ -29,6 +32,11 @@
       }
     },
     computed: {
+      difficulty() {
+        const num = parseInt(this.data?.process)
+
+        return isNaN(num) ? 0 : num
+      },
       tags() {
         return this.data?.tag?.split?.('、') || []
       }
@@ -39,6 +47,8 @@
 <style scoped lang="scss">
   .info {
     padding: 30rpx 24rpx 24rpx 24rpx;
+    font-size: 0;
+
     .title {
       font-size: 32rpx;
       font-weight: 700;
@@ -47,17 +57,23 @@
 
     .process {
       margin-top: 7rpx;
-      display: inline-block;
-      font-size: 0;
-      color: #FFFFFF;
+      column-gap: 8rpx;
+      display: inline-flex;
       padding: 3rpx 16rpx;
+      font-size: 16rpx;
+      font-weight: 600;
+      color: #FFFFFF;
       background: #6851A7;
       border-radius: 13rpx;
+
+      .star {
+        column-gap: 6rpx;
+      }
     }
 
     .content {
       margin-top: 24rpx;
-      font-size: 18rpx;
+      font-size: 20rpx;
       font-weight: 500;
       color: #3E3A39;
     }