Merge pull request 'feat: UI调整;' (#10) from fox into master

Reviewed-on: http://175.178.51.79:3000/Augcl/education-front/pulls/10

components/base/arrow.vue

@@ -16,7 +16,7 @@ export default {
     position: relative;
     width: 28rpx;
     height: 32rpx;
-    background-image: linear-gradient(to right, #A3BCEF, #4883F9);
+    background-image: linear-gradient(to right, #E2DDFF, #C8C3FD);
 
     &-blank {
 

components/base/suspendDropdown.vue

@@ -125,7 +125,7 @@
     text-align: center;
 
     &.is-active {
-      color: #4883F9;
+      color: $uni-color;
     }
 
     & + & {

components/serve/serveSecondModuleCard copy.vue

@@ -0,0 +1,71 @@
+<template>
+  <view class="flex card" @click="jumpToList(data.id, data.title)">
+    <image class="card-icon" :src="data.icon" mode="aspectFit"></image>
+    <view class="flex card-title">
+      <view>{{ data.title }}</view>
+      <image class="card-title-icon" src="@/static/image/serve-second-icon.png" mode="widthFix"></image>
+    </view>
+
+    <image class="card-bg" src="@/static/image/card-bg-icon.png" mode="widthFix"></image>
+  </view>
+</template>
+
+<script>
+  export default {
+    props: {
+      data: {
+        type: Object,
+        default() {
+          return {}
+        }
+      }
+    },
+    methods: {
+      jumpToList(categoryId, title) {
+        uni.navigateTo({
+					url: `/pages_order/serve/search?categoryId=${categoryId}&title=${title}`
+				})
+      },
+    },
+  }
+</script>
+
+<style scoped lang="scss">
+  .card {
+    justify-content: flex-start;
+    column-gap: 78rpx;
+    position: relative;
+    width: 100%;
+    height: 200rpx;
+    padding: 0 28rpx;
+    box-sizing: border-box;
+    background: linear-gradient(to right, rgba($color: #C8C3FD, $alpha: 0.22), #FFFFFF);
+    border-radius: 10rpx;
+    box-shadow: 4rpx 4rpx 6rpx 0rpx rgba(0,0,0,0.15);
+
+    &-icon {
+      width: 180rpx;
+      height: 230rpx;
+    }
+
+    &-title {
+      column-gap: 14rpx;
+      font-size: 32rpx;
+      font-weight: 600;
+      color: #9082D8;
+
+      &-icon {
+        width: 24rpx;
+        height: auto;
+      }   
+    }
+
+    &-bg {
+      width: 142rpx;
+      height: auto;
+      position: absolute;
+      bottom: 0;
+      right: 8rpx;
+    }
+  }
+</style>

components/user/productList.vue

@@ -1,112 +0,0 @@
-<template>
-	<view class="list">
-		<view class="item"
-		v-for="(item, index) in 10"
-		@click="$utils.navigateTo('/pages_order/product/productDetail?id=123')"
-		:key="index">
-			<image 
-			class="image"
-			src="https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg" mode=""></image>
-			<view class="info">
-				<view class="title">
-					桌布租赁
-				</view>
-				<view class="price">
-					<text>￥58</text>元/起
-				</view>
-				<view class="favorable">
-					<view class="t">
-						限时优惠
-					</view>
-					<view class="p">
-						￥48
-					</view>
-				</view>
-				<view class="num">
-					已售卖5000+件
-				</view>
-			</view>
-			<view class="btn">
-				<uv-icon name="shopping-cart"
-				color="#fff"></uv-icon>
-			</view>
-		</view>
-	</view>
-</template>
-
-<script>
-	export default {
-		name:"productList",
-		data() {
-			return {
-				
-			};
-		},
-		methods : {
-			
-		},
-	}
-</script>
-
-<style scoped lang="scss">
-.list{
-	display: flex;
-	flex-wrap: wrap;
-	.item{
-		position: relative;
-		width: 300rpx;
-		padding: 20rpx;
-		background-color: #fff;
-		border-radius: 20rpx;
-		margin-top: 20rpx;
-		&:nth-child(odd){
-			margin-right: 20rpx;
-		}
-		.image{
-			width: 300rpx;
-			height: 250rpx;
-			border-radius: 20rpx;
-		}
-		.info{
-			font-size: 26rpx;
-			.title{
-				font-size: 30rpx;
-			}
-			.price{
-				color: #D03F25;
-				margin-top: 6rpx;
-				text{
-					font-size: 34rpx;
-					font-weight: 900;
-				}
-			}
-			.favorable{
-				display: flex;
-				background-image: url(/static/image/product/favorable.png);
-				background-size: 100% 100%;
-				width: fit-content;
-				padding: 5rpx 10rpx;
-				font-size: 18rpx;
-				margin-top: 6rpx;
-				.p{
-					color: #fff;
-					margin-left: 10rpx;
-				}
-			}
-			.num{
-				margin-top: 6rpx;
-				font-size: 22rpx;
-				color: #888;
-			}
-		}
-		.btn{
-			position: absolute;
-			right: 20rpx;
-			bottom: 20rpx;
-			padding: 10rpx;
-			border-radius: 50%;
-			background-color: $uni-color;
-		}
-	}
-}
-</style>

components/userShop/userShopCommission.vue

@@ -1,130 +0,0 @@
-<template>
-	<view class="commission">
-		<image src="/static/image/center/10.png" mode=""></image>
-		<view class="price">
-			<view class="title">
-				总佣金（元）
-			</view>
-			<view class="num">
-				7890.34元
-			</view>
-		</view>
-		
-		<view class="font-menu"
-		v-if="purse">
-			<view @click="toRunningWater(index)"
-			v-for="(item, index) in list"
-			:key="index">{{ item.name }}</view>
-		</view>
-		
-		<view class="btn"
-		v-if="!purse"
-		@click="toPurse">
-			提现
-		</view>
-	</view>
-</template>
-
-<script>
-	export default {
-		name: "userShopCommission",
-		props : {
-			purse : {
-				default : false,
-			},
-		},
-		data() {
-			return {
-				list : [
-					{
-						name : '余额记录',
-					},
-					{
-						name : '提现记录',
-					},
-					{
-						name : '佣金记录',
-					},
-				],
-			};
-		},
-		methods : {
-			// 跳转到钱包提现
-			toPurse(){
-				uni.navigateTo({
-					url:'/pages_order/mine/purse'
-				})
-			},
-			// 跳转到记录页面
-			toRunningWater(index){
-				uni.navigateTo({
-					url:'/pages_order/mine/runningWater?status=' + index
-				})
-			},
-		}
-	}
-</script>
-
-<style scoped lang="scss">
-	.commission {
-		width: 700rpx;
-		height: 300rpx;
-		position: relative;
-		margin: 20rpx auto;
-		color: #fff;
-
-		image {
-			width: 700rpx;
-			height: 300rpx;
-			position: absolute;
-			border-radius: 20rpx;
-		}
-
-		.price {
-			position: absolute;
-			left: 50rpx;
-			top: 80rpx;
-			font-weight: 900;
-
-			.title {
-				font-size: 32rpx;
-			}
-
-			.num {
-				font-size: 44rpx;
-				margin-top: 20rpx;
-			}
-		}
-		
-		.font-menu {
-			font-size: 24rpx;
-			font-family: PingFang SC, PingFang SC-Regular;
-			font-weight: 500;
-			text-align: center;
-			color: #ffffff;
-			line-height: 24rpx;
-			width: 710rpx;
-		
-			position: absolute;
-			left: 0;
-			bottom: 25rpx;
-			display: flex;
-			view{
-				width: 160rpx;
-			}
-		}
-
-		.btn {
-			position: absolute;
-			right: 50rpx;
-			bottom: 50rpx;
-			background-color: #FDC440;
-			width: 160rpx;
-			height: 60rpx;
-			display: flex;
-			justify-content: center;
-			align-items: center;
-			border-radius: 30rpx;
-		}
-	}
-</style>

pages/index/case.vue

@@ -7,7 +7,7 @@
 
     <view class="main">
 
-      <view class="flex section header">
+      <view class="flex section header" :style="style">
         <view>
           <view class="title">{{ configList.page_case_title }}</view>
           <view class="desc">{{ configList.page_case_desc }}</view>
@@ -62,6 +62,7 @@
 </template>
 
 <script>
+  import utils from '@/utils/utils'
 	import mixinsList from '@/mixins/list.js'
 
 	import tabber from '@/components/base/tabbar.vue'
@@ -90,13 +91,11 @@
           categoryPeriodId: '',
 				},
         mixinsListApi: 'queryAriticleList',
-        swiperHeight: '239rpx',
+        style: '',
       }
     },
     onLoad() {
-      
-      const windowWidth = uni.getSystemInfoSync().windowWidth
-      this.swiperHeight = `${(windowWidth - 18) * 239 / 714}px`
+      this.style = `padding-top: calc(${utils.getNavHeight()}px - 16rpx)`
 
       this.fetchBanner()
       this.fetchOptions()
@@ -157,9 +156,9 @@
   }
 
   .header {
-    margin-bottom: 32rpx;
-    padding-top: 186rpx;
+    padding-top: calc(var(--status-bar-height) + 120rpx);
     justify-content: space-between;
+    align-items: flex-start;
 
     .title {
       font-size: 44rpx;
@@ -174,12 +173,13 @@
     }
 
     .icon {
-      // margin-top: 16rpx;
+      margin-top: 16rpx;
       width: 62rpx;
       height: 62rpx;
       border: 2rpx solid #A3A2C5;
       border-radius: 50%;
       overflow: hidden;
+      box-sizing: border-box;
       
       .img {
         width: 50rpx;

pages/index/center.vue

@@ -7,7 +7,7 @@
 
     <view class="main">
 
-      <view class="flex header">
+      <view class="flex section header" :style="style">
         <view>
           <view class="title">{{ configList.page_center_title }}</view>
           <view class="desc">{{ configList.page_center_desc }}</view>
@@ -34,6 +34,7 @@
 </template>
 
 <script>
+  import utils from '@/utils/utils'
 	import tabber from '@/components/base/tabbar.vue'
 
   export default {
@@ -42,9 +43,11 @@
     },
     data() {
       return {
+        style: '',
       }
     },
     onLoad() {
+      this.style = `padding-top: calc(${utils.getNavHeight()}px - 16rpx)`
     },
     methods: {
       jumpToDetail(paramCode) {
@@ -65,9 +68,11 @@
   }
 
   .header {
-    margin: 0 38rpx 22rpx 38rpx;
-    padding-top: 186rpx;
+    padding-top: calc(var(--status-bar-height) + 120rpx);
     justify-content: space-between;
+    align-items: flex-start;
+    min-height: calc(342rpx / 621 * 542);
+    box-sizing: border-box;
 
     .title {
       font-size: 44rpx;
@@ -82,12 +87,13 @@
     }
 
     .icon {
-      // margin-top: 16rpx;
+      margin-top: 16rpx;
       width: 62rpx;
       height: 62rpx;
       border: 2rpx solid #A3A2C5;
       border-radius: 50%;
       overflow: hidden;
+      box-sizing: border-box;
       
       .img {
         width: 50rpx;
@@ -96,6 +102,10 @@
     }
   }
 
+  .section {
+    margin: 0 38rpx;
+  }
+
   .bg {
     width: 100vw;
     height: auto;

pages/index/index.vue

@@ -7,7 +7,7 @@
 
     <view class="main">
 
-      <view class="flex section header">
+      <view class="flex section header" :style="style">
         <view>
           <view class="title">{{ configList.page_index_title }}</view>
           <view class="desc">{{ configList.page_index_desc }}</view>
@@ -78,6 +78,8 @@
 </template>
 
 <script>
+  import utils from '@/utils/utils'
+
 	import tabber from '@/components/base/tabbar.vue'
 
   export default {
@@ -90,9 +92,12 @@
         bannerList: [],
         list: [],
         list2: [],
+        style: '',
       }
     },
     onLoad() {
+      this.style = `padding-top: calc(${utils.getNavHeight()}px - 16rpx)`
+
       this.fetchBanner()
       this.getData()
     },
@@ -148,8 +153,9 @@
   }
 
   .header {
-    padding-top: 186rpx;
+    padding-top: calc(var(--status-bar-height) + 120rpx);
     justify-content: space-between;
+    align-items: flex-start;
 
     .title {
       font-size: 44rpx;
@@ -164,12 +170,13 @@
     }
 
     .icon {
-      // margin-top: 16rpx;
+      margin-top: 16rpx;
       width: 62rpx;
       height: 62rpx;
       border: 2rpx solid #A3A2C5;
       border-radius: 50%;
       overflow: hidden;
+      box-sizing: border-box;
       
       .img {
         width: 50rpx;

pages/index/serve.vue

@@ -7,7 +7,7 @@
 
     <view class="main">
 
-      <view class="flex section header">
+      <view class="flex section header" :style="style">
         <view>
           <view class="title">{{ configList.page_serve_title }}</view>
           <view class="desc">{{ configList.page_serve_desc }}</view>
@@ -37,6 +37,7 @@
 </template>
 
 <script>
+  import utils from '@/utils/utils'
 	import mixinsList from '@/mixins/list.js'
 
 	import tabber from '@/components/base/tabbar.vue'
@@ -58,9 +59,12 @@
 				},
         mixinsListApi: 'queryCategoryServiceModuleList',
         firstCategoryList: [],
+        style: '',
       }
     },
     onLoad() {
+      this.style = `padding-top: calc(${utils.getNavHeight()}px - 16rpx)`
+
       this.getData()
     },
     methods: {
@@ -83,9 +87,9 @@
   }
 
   .header {
-    margin-bottom: 32rpx;
-    padding-top: 186rpx;
+    padding-top: calc(var(--status-bar-height) + 120rpx);
     justify-content: space-between;
+    align-items: flex-start;
 
     .title {
       font-size: 44rpx;
@@ -100,12 +104,13 @@
     }
 
     .icon {
-      // margin-top: 16rpx;
+      margin-top: 16rpx;
       width: 62rpx;
       height: 62rpx;
       border: 2rpx solid #A3A2C5;
       border-radius: 50%;
       overflow: hidden;
+      box-sizing: border-box;
       
       .img {
         width: 50rpx;

pages_order/case/index.vue

@@ -190,7 +190,7 @@
       white-space: pre-line;
       font-size: 28rpx;
       color: #000000;
-      background: #F8F8F8;
+      background: linear-gradient(to right, rgba($color: #E2DDFF, $alpha: 0.14), rgba($color: #C8C3FD, $alpha: 0.14));
       border-radius: 15rpx;
     }
   }
@@ -200,7 +200,7 @@
     left: 0;
     bottom: 0;
     width: 100vw;
-    height: 110rpx;
+    height: 94rpx;
 		padding-bottom: env(safe-area-inset-bottom);
     background: #FFFFFF;
     box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16); 
@@ -210,14 +210,16 @@
     }
 
     .btn {
-      padding: 20rpx 90rpx;
-      font-size: 28rpx;
+      padding: 12rpx 70rpx;
+      font-size: 32rpx;
+      font-weight: 600;
+      line-height: 1.2;
       color: #FFFFFF;
-      background: #4883F9;
-      border-radius: 42rpx;
+      background: $uni-color;
+      border-radius: 30rpx;
 
       &-share {
-        background: #FFD019;
+        background: #9E96CC;
       }
 
     }

pages_order/case/poster.vue

@@ -199,7 +199,7 @@
       padding: 20rpx 77rpx;
       font-size: 28rpx;
       color: #FFFFFF;
-      background: #4883F9;
+      background: $uni-color;
       border-radius: 14rpx;
     }
   }

pages_order/thesis/index.vue

@@ -19,7 +19,7 @@
       <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>
+          <uv-icon v-for="(item, index) in new Array(difficulty).fill(1)" :key="index" name="star-fill" color="#FFFFFF" size="20rpx"></uv-icon>
         </view>
       </view>
       <view class="process-item" v-for="item in details.educationProcessList" :key="item.id">
@@ -35,7 +35,7 @@
         <view>{{ details.targetTitle || '可发表方向' }}</view>
       </view>
       <view class="section-content direction">
-        <uv-read-more show-height="300rpx" :toggle="true" textIndent="0" closeText="展开" :shadowStyle="{ backgroundImage: 'linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, #fff 80%)', paddingTop: '100rpx', marginTop: '-100rpx' }">
+        <uv-read-more show-height="300rpx" :toggle="true" textIndent="0" :shadowStyle="{ backgroundImage: 'linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, #fff 80%)', paddingTop: '100rpx', marginTop: '-100rpx' }">
           <view class="table">
             <view class="table-row" v-for="row in details.educationTargetList" :key="row.id">
               <view class="table-cell">{{ row.title }}</view>
@@ -58,19 +58,17 @@
             <view class="pic">
               <image class="img" :src="item.image" mode="aspectFill" ></image>
             </view>
-            <view class="title">
+            <view class="flex flex-column title">
               <view class="name">{{ item.title }}</view>
-              <view class="label" v-if="item.career">
-                <view class="label-text">{{ item.career }}</view>
-                <view class="label-line"></view>
-                <view class="label-text display">{{ item.career }}</view>
-              </view>
+              <view class="label" v-if="item.career">{{ item.career }}</view>
             </view>
-            <view class="tag">
+            <view class="flex tag">
               <image class="tag-icon" src="@/static/image/icon-degree.png" mode="widthFix"></image>
               <view>{{ item.qualification }}</view>
             </view>
-            <view class="desc desc-top">专业经历：</view>
+            <view class="desc desc-top">
+              <view class="desc-title">专业经历</view>
+            </view>
             <view class="desc desc-bottom">{{ item.experience }}</view>
           </view>
         </view>
@@ -295,60 +293,72 @@
   }
 
   .page-title {
-    padding: 0 36rpx;
+    padding: 0 26rpx;
     font-size: 60rpx;
     font-weight: 700;
-    color: #4783F9;
+    color: $uni-color;
     
     &-line {
       margin: 12rpx 0 24rpx 0;
       width: 120rpx;
       height: 8rpx;
-      background: #4783F9;
+      background: $uni-color;
     }
   }
 
   .process {
     position: relative;
     width: 100%;
-    padding: 0 36rpx;
+    padding: 0 26rpx;
     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;
+      padding: 4rpx 16rpx;
+      background: #9787C2;
+      border-top-right-radius: 18rpx;
+      border-bottom-right-radius: 18rpx;
 
       &-title {
-        font-size: 30rpx;
+        font-size: 24rpx;
         font-weight: 600;
-        color: #3378EA;
+        line-height: 1.2;
+        color: #FFFFFF;
       }
 
       .star {
-        column-gap: 6rpx;
+        column-gap: 10rpx;
       }
     }
 
     &-item {
-      margin-top: 24rpx;
-      padding: 10rpx 18rpx;
-      background: #E6EEFD;
-      border-radius: 25rpx;
+      margin-top: 22rpx;
+      font-size: 0;
 
       &-title {
+        display: inline-block;
+        padding: 4rpx 36rpx 4rpx 20rpx;
+        box-sizing: border-box;
         font-size: 30rpx;
         font-weight: 600;
-        color: #3378EA;
+        line-height: 1.2;
+        color: #FFFFFF;
+        background: #9787C2;
+        border-top-right-radius: 21rpx;
+        border-bottom-right-radius: 21rpx;
       }
 
       &-content {
-        font-size: 28rpx;
+        padding: 28rpx 34rpx;
+        box-sizing: border-box;
+        font-size: 24rpx;
+        line-height: 1.6;
         white-space: pre-wrap;
-        color: #000000;
+        color: #595757;
+        background: #EDEAFF;
+        border-radius: 15rpx;
+        border-top-left-radius: 0;
       }
 
     }
@@ -357,7 +367,7 @@
   .section {
     margin-top: 40rpx;
     width: 100%;
-    padding: 0 18rpx;
+    padding: 0 26rpx;
     box-sizing: border-box;
 
     // & + & {
@@ -369,16 +379,15 @@
       align-items: center;
       justify-content: flex-start;
       column-gap: 15rpx;
-      padding-left: 18rpx;
-      font-size: 32rpx;
+      font-size: 40rpx;
       font-weight: 700;
-      color: #000000;
+      color: $uni-color;
 
       &-line {
-        width: 11rpx;
-        height: 45rpx;
-        border-radius: 6rpx;
-        background-image: linear-gradient(#FFFFFF, #4883F9);
+        width: 18rpx;
+        height: 52rpx;
+        border-radius: 9rpx;
+        background-image: linear-gradient(#E2DDFF, #6851A7);
       }
     }
 
@@ -387,27 +396,27 @@
 
       .paragraph {
         width: 100%;
-        padding: 22rpx;
+        padding: 30rpx;
         box-sizing: border-box;
         white-space: pre-line;
-        font-size: 28rpx;
-        color: #000000;
-        background: #F8F8F8;
+        font-size: 24rpx;
+        color: #595757;
+        background: linear-gradient(to right, rgba($color: #E2DDFF, $alpha: 0.54), rgba($color: #C8C3FD, $alpha: 0.54));
         border-radius: 15rpx;
       }
 
       .table {
         width: 100%;
-        border-radius: 15rpx;
+        border-radius: 10rpx;
         overflow: hidden;
 
         &-row {
           display: grid;
           grid-template-columns: 218rpx auto;
-          background: #EEEEEE;
+          background: rgba($color: #C8C3FD, $alpha: 0.63);
 
           &:nth-child(2n) {
-            background: #DEDEDE;
+            background: rgba($color: #C8C3FD, $alpha: 0.26);
           }
         }
 
@@ -420,11 +429,19 @@
           box-sizing: border-box;
           font-family: PingFang SC;
           font-weight: 400;
-          font-size: 28rpx;
+          line-height: 1.5;
+          // font-size: 28rpx;
           white-space: pre-wrap;
-          color: #080808;
+          // color: #080808;
+          font-size: 18rpx;
+          color: #595757;
 
           &:first-child {
+            align-items: center;
+            text-align: center;
+            font-size: 22rpx;
+            line-height: 1.4;
+            font-weight: 600;
             border-right: 1rpx solid #E5E5E5;
           }
         }
@@ -433,11 +450,13 @@
 
       &.direction {
         /deep/ .uv-read-more__toggle {
-          justify-content: flex-end;
+          // justify-content: flex-end;
+          padding: 10rpx 0;
+          background: linear-gradient(to right, rgba($color: #E2DDFF, $alpha: 0.67), rgba($color: #C8C3FD, $alpha: 0.67), rgba($color: #E1DCFF, $alpha: 0.67));
         }
         /deep/ .uv-read-more__toggle__text .uv-text__value {
-          color: $uni-color !important;
-          font-size: 22rpx !important;
+          color: #9D9DF9 !important;
+          font-size: 20rpx !important;
         }
       }
 
@@ -446,104 +465,100 @@
         .card {
           display: flex;
           align-items: center;
-          column-gap: 12rpx;
-          background: #ffffff;
+          // column-gap: 12rpx;
+          background: linear-gradient(to right, rgba($color: #E2DDFF, $alpha: 0.14), rgba($color: #C8C3FD, $alpha: 0.14));
           border-radius: 15rpx;
           box-shadow: 0rpx 3rpx 6rpx 0rpx rgba(0,0,0,0.16); 
 
           .info {
             flex: 1;
-            padding: 19rpx 17rpx 28rpx 17rpx;
+            padding: 30rpx 30rpx 0 30rpx;
+            font-size: 0;
 
             .title {
-              display: flex;
-              align-items: center;
-              padding-left: 11rpx;
+              align-items: flex-start;
               color: #000000;
+              transform: translateX(-30rpx);
 
               .name {
-                font-size: 32rpx;
+                margin-bottom: 20rpx;
+                display: inline-block;
+                padding: 4rpx 60rpx 4rpx 28rpx;
+                font-size: 30rpx;
                 font-weight: 700;
+                line-height: 1.2;
+                color: #FFFFFF;
+                background: rgba($color: #6851A7, $alpha: 0.69);
+                border-top-right-radius: 21rpx;
+                border-bottom-right-radius: 21rpx;
               }
 
               .label {
-                margin-left: 12rpx;
-                position: relative;
-                // height: 30rpx;
-
-                &-line {
-                  position: absolute;
-                  left: 0;
-                  bottom: 0;
-                  transform: translate(30rpx, -2rpx);
-                  // margin: 24rpx 0 0 25rpx;
-                  // width: 195rpx;
-                  width: calc(100% - 20rpx);
-                  height: 4rpx;
-                  background-image: linear-gradient(#4883F9, #FFFFFF);
-                  border-radius: 2rpx;
-                }
-
-                &-text {
-                  font-size: 22rpx;
-                  font-weight: 400;
-                  opacity: 0;
-
-                  &.display {
-                    opacity: 1;
-                    position: absolute;
-                    left: 0;
-                    top: 0;
-                  }
-                }
+                margin-bottom: 14rpx;
+                padding: 0 4rpx 4rpx 30rpx;
+                box-sizing: border-box;
+                font-size: 22rpx;
+                font-weight: 500;
+                color: rgba($color: #6851A7, $alpha: 0.68);
+                border-bottom: 4rpx solid rgba($color: #6851A7, $alpha: 0.69);
               }
             }
 
             .tag {
-              margin: 5rpx 0 18rpx 0;
-              display: inline-flex;
-              align-items: center;
-              padding: 5rpx 43rpx 5rpx 16rpx;
-              column-gap: 16rpx;
+              justify-content: flex-start;
+              margin-bottom: 12rpx;
+              column-gap: 12rpx;
+              padding-left: 4rpx;
               font-size: 28rpx;
-              color: #FFFFFF;
-              background: rgba(72,131,249,0.58);
-              border-radius: 30rpx 0rpx 30rpx 0rpx;
+              font-weight: 600;
+              color: #6851A7;
 
               &-icon {
-                width: 38rpx;
+                width: 42rpx;
                 height: auto;
               }
             }
 
             .desc {
-              // padding: 12rpx 15rpx;
-              font-size: 28rpx;
+              font-size: 18rpx;
               font-weight: 500;
               white-space: pre-wrap;
               color: #000000;
-              background: #f8f8f8;
+              background: #ECEAFF;
               // border-radius: 16rpx;
 
+              &-title {
+                display: inline-block;
+                padding: 4rpx 30rpx 4rpx 12rpx;
+                font-size: 20rpx;
+                font-weight: 600;
+                color: #FFFFFF;
+                background: #B7ACDC;
+                border-top-right-radius: 15rpx;
+                border-bottom-right-radius: 15rpx;
+              }
+
               &-top {
-                padding: 12rpx 15rpx 0 15rpx;
-                border-top-left-radius: 16rpx;
-                border-top-right-radius: 16rpx;
+                padding: 32rpx 24rpx 0 0;
+                border-top-left-radius: 10rpx;
+                border-top-right-radius: 10rpx;
               }
               &-bottom {
-                padding: 0 15rpx 12rpx 15rpx;
-                border-bottom-left-radius: 16rpx;
-                border-bottom-right-radius: 16rpx;
+                margin-bottom: 30rpx;
+                padding: 20rpx 24rpx 32rpx 24rpx;
+                border-bottom-left-radius: 10rpx;
+                border-bottom-right-radius: 10rpx;
               }
             }
           }
 
           .pic {
             // margin: 48rpx 9rpx 48rpx 0;
-            margin: 44rpx 0 0 14rpx;
-            width: 253rpx;
-            height: 345rpx;
-            border-radius: 127rpx;
+            margin: 0 0 30rpx 52rpx;
+            width: 291rpx;
+            height: 454rpx;
+            // border-radius: 127rpx;
+            border-radius: 10rpx;
             overflow: hidden;
             float: right;
 
@@ -557,12 +572,48 @@
             flex-direction: row-reverse;
 
             .info {
-              padding: 19rpx 17rpx 28rpx 17rpx;
+              
+              .title {
+                align-items: flex-end;
+                transform: translateX(30rpx);
+
+                .name {
+                  padding: 4rpx 28rpx 4rpx 60rpx;
+                  border-top-right-radius: 0;
+                  border-bottom-right-radius: 0;
+                  border-top-left-radius: 21rpx;
+                  border-bottom-left-radius: 21rpx;
+                }
+
+                .label {
+                  padding: 0 30rpx 4rpx 4rpx;
+                }
+              }
+
+              .tag {
+                justify-content: flex-end;
+                padding-right: 24rpx;
+              }
+
+              .desc {
+                &-title {
+                  padding: 4rpx 15rpx 4rpx 26rpx;
+                  border-top-right-radius: 0;
+                  border-bottom-right-radius: 0;
+                  border-top-left-radius: 15rpx;
+                  border-bottom-left-radius: 15rpx;
+                }
+
+                &-top {
+                  padding: 32rpx 0 0 24rpx;
+                  text-align: right;
+                }
+              }
             }
 
             .pic {
-              // margin: 48rpx 0 48rpx 9rpx;
-              margin: 44rpx 14rpx 0 0;
+              // margin: 44rpx 14rpx 0 0;
+              margin: 0 52rpx 30rpx 0;
               float: left;
             }
           }
@@ -576,48 +627,58 @@
       &.journal {
         
         .box {
-          padding-top: 73rpx;
+          padding-top: 68rpx;
 
           .card {
-            padding: 29rpx 12rpx 19rpx 12rpx;
-            background: #f6f6f6;
+            padding: 32rpx 26rpx 22rpx 26rpx;
+            background: linear-gradient(to right, rgba($color: #E2DDFF, $alpha: 0.14), rgba($color: #C8C3FD, $alpha: 0.14));
             border-radius: 15rpx;
-            box-shadow: 0rpx 3rpx 6rpx 0rpx rgba(0,0,0,0.16); 
+            box-shadow: 4rpx 4rpx 6rpx 0rpx rgba(0,0,0,0.105); 
 
             .top {
               position: relative;
+              min-height: 265rpx;
 
               .pic {
                 position: absolute;
-                left: 42rpx;
+                left: 10rpx;
                 bottom: 0;
-                width: 213rpx;
-                height: 285rpx;
+                width: 236rpx;
+                height: 356rpx;
+                background: linear-gradient(rgba($color: #E2DDFF, $alpha: 0.54), rgba($color: #C8C3FD, $alpha: 0.54));
+                border-radius: 6rpx;
 
                 .img {
                   width: 100%;
                   height: 100%;
+                  border-radius: 6rpx;
+                  transform: translate(-10rpx, -10rpx);
                 }
               }
 
               .info {
                 min-height: 181rpx;
-                padding: 0 14rpx 0 266rpx;
+                padding: 0 0 0 278rpx;
 
                 .name {
                   padding-left: 6rpx;
                   font-size: 32rpx;
                   font-weight: 700;
-                  color: #000000;
+                  color: $uni-color;
                 }
 
                 .desc {
                   margin-top: 24rpx;
+                  padding: 16rpx 20rpx;
+                  box-sizing: border-box;
                   // font-size: 28rpx;
                   font-size: 24rpx;
+                  line-height: 1.5;
                   white-space: pre-wrap;
                   font-weight: 700;
-                  color: #707070;
+                  color: #595757;
+                  background: rgba($color: #C8C3FD, $alpha: 0.26);
+                  border-radius: 6rpx;
                   // overflow: hidden;
                   // text-overflow: ellipsis;
                   // display:-webkit-box; //作为弹性伸缩盒子模型显示。
@@ -630,28 +691,30 @@
 
             .main {
               margin-top: 18rpx;
-              padding: 14rpx;
-              font-size: 28rpx;
+              padding: 20rpx;
+              font-size: 18rpx;
+              line-height: 1.5;
               white-space: pre-wrap;
-              color: #000000;
-              background: #ebebeb;
-              border-radius: 30rpx 0rpx 30rpx 0rpx;
+              color: #595757;
+              background: rgba($color: #C8C3FD, $alpha: 0.26);
+              // border-radius: 30rpx 0rpx 30rpx 0rpx;
+              border-radius: 6rpx;
             }
 
           }
           
-          &:nth-child(2n) {
+          &:nth-child(2n + 1) {
 
             .card {
 
               .top {
                 .info {
-                  padding: 0 258rpx 0 14rpx;
+                  padding: 0 278rpx 0 0;
                 }
 
                 .pic {
                   left: unset;
-                  right: 29rpx;
+                  right: 0;
                 }
               }
 
@@ -660,7 +723,7 @@
         }
 
         .box + .box {
-          margin-top: 28rpx;
+          margin-top: 33rpx;
         }
       }
 
@@ -702,7 +765,7 @@
             padding: 7rpx 30rpx;
             font-size: 28rpx;
             color: #FFFFFF;
-            background: #4883f9;
+            background: $uni-color;
             border-radius: 27rpx;
           }
         }
@@ -721,7 +784,7 @@
     left: 0;
     bottom: 0;
     width: 100vw;
-    height: 110rpx;
+    height: 94rpx;
 		padding-bottom: env(safe-area-inset-bottom);
     background: #FFFFFF;
     box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16); 
@@ -731,14 +794,16 @@
     }
 
     .btn {
-      padding: 20rpx 90rpx;
-      font-size: 28rpx;
+      padding: 12rpx 70rpx;
+      font-size: 32rpx;
+      font-weight: 600;
+      line-height: 1.2;
       color: #FFFFFF;
-      background: #4883F9;
-      border-radius: 42rpx;
+      background: $uni-color;
+      border-radius: 30rpx;
 
       &-share {
-        background: #FFD019;
+        background: #9E96CC;
       }
 
     }

pages_order/thesis/indexTwo.vue

@@ -15,6 +15,7 @@
 
     <view class="section" v-if="details.cotentModuleOne">
       <view class="section-header">
+        <view class="section-header-line"></view>
         <view>{{ details.titleModuleOne }}</view>
       </view>
       <view class="section-content">
@@ -25,6 +26,7 @@
     </view>
     <view class="section" v-if="details.cotentModuleTwo">
       <view class="section-header">
+        <view class="section-header-line"></view>
         <view>{{ details.titleModuleTwo }}</view>
       </view>
       <view class="section-content">
@@ -35,6 +37,7 @@
     </view>
     <view class="section" v-if="details.cotentModuleThree">
       <view class="section-header">
+        <view class="section-header-line"></view>
         <view>{{ details.titleModuleThree }}</view>
       </view>
       <view class="section-content">
@@ -45,6 +48,7 @@
     </view>
     <view class="section" v-if="details.educationExcelOneList && details.educationExcelOneList.length">
       <view class="section-header">
+        <view class="section-header-line"></view>
         <view>{{ details.titleExcelOne }}</view>
       </view>
       <view class="section-content">
@@ -60,6 +64,7 @@
     </view>
     <view class="section" v-if="details.cotentModuleFour">
       <view class="section-header">
+        <view class="section-header-line"></view>
         <view>{{ details.titleModuleFour }}</view>
       </view>
       <view class="section-content">
@@ -70,6 +75,7 @@
     </view>
     <view class="section" v-if="details.cotentModuleFive">
       <view class="section-header">
+        <view class="section-header-line"></view>
         <view>{{ details.titleModuleFive }}</view>
       </view>
       <view class="section-content">
@@ -80,6 +86,7 @@
     </view>
     <view class="section" v-if="details.educationExcelTwoList && details.educationExcelTwoList.length">
       <view class="section-header">
+        <view class="section-header-line"></view>
         <view>{{ details.titleExcelTwo }}</view>
       </view>
       <view class="section-content">
@@ -95,6 +102,7 @@
     </view>
     <view class="section" v-if="details.cotentModuleSix">
       <view class="section-header">
+        <view class="section-header-line"></view>
         <view>{{ details.titleModuleSix }}</view>
       </view>
       <view class="section-content">
@@ -105,6 +113,7 @@
     </view>
     <view class="section" v-if="details.cotentModuleSeven">
       <view class="section-header">
+        <view class="section-header-line"></view>
         <view>{{ details.titleModuleSeven }}</view>
       </view>
       <view class="section-content">
@@ -271,22 +280,22 @@
   }
 
   .page-title {
-    padding: 0 36rpx;
+    padding: 0 26rpx;
     font-size: 60rpx;
     font-weight: 700;
-    color: #4783F9;
+    color: $uni-color;
     
     &-line {
       margin: 12rpx 0 24rpx 0;
       width: 120rpx;
       height: 8rpx;
-      background: #4783F9;
+      background: $uni-color;
     }
   }
 
   .section {
     width: 100%;
-    padding: 0 18rpx;
+    padding: 0 26rpx;
     box-sizing: border-box;
 
     & + & {
@@ -298,16 +307,15 @@
       align-items: center;
       justify-content: flex-start;
       column-gap: 15rpx;
-      padding-left: 18rpx;
       font-size: 32rpx;
       font-weight: 700;
-      color: #000000;
+      color: $uni-color;
 
       &-line {
-        width: 11rpx;
-        height: 45rpx;
-        border-radius: 6rpx;
-        background-image: linear-gradient(#FFFFFF, #4883F9);
+        width: 18rpx;
+        height: 52rpx;
+        border-radius: 9rpx;
+        background-image: linear-gradient(#E2DDFF, #6851A7);
       }
     }
 
@@ -316,27 +324,27 @@
 
       .paragraph {
         width: 100%;
-        padding: 22rpx;
+        padding: 30rpx;
         box-sizing: border-box;
         white-space: pre-line;
-        font-size: 28rpx;
-        color: #000000;
-        background: #F8F8F8;
+        font-size: 24rpx;
+        color: #595757;
+        background: linear-gradient(to right, rgba($color: #E2DDFF, $alpha: 0.54), rgba($color: #C8C3FD, $alpha: 0.54));
         border-radius: 15rpx;
       }
 
       .table {
         width: 100%;
-        border-radius: 15rpx;
+        border-radius: 10rpx;
         overflow: hidden;
 
         &-row {
           display: grid;
           grid-template-columns: 218rpx auto;
-          background: #EEEEEE;
+          background: rgba($color: #C8C3FD, $alpha: 0.63);
 
           &:nth-child(2n) {
-            background: #DEDEDE;
+            background: rgba($color: #C8C3FD, $alpha: 0.26);
           }
         }
 
@@ -349,11 +357,19 @@
           box-sizing: border-box;
           font-family: PingFang SC;
           font-weight: 400;
-          font-size: 28rpx;
+          // font-size: 28rpx;
           white-space: pre-wrap;
-          color: #080808;
+          // color: #080808;
+          font-size: 18rpx;
+          line-height: 1.5;
+          color: #595757;
 
           &:first-child {
+            align-items: center;
+            text-align: center;
+            font-size: 22rpx;
+            line-height: 1.4;
+            font-weight: 600;
             border-right: 1rpx solid #E5E5E5;
           }
         }
@@ -361,11 +377,13 @@
       }
       
       /deep/ .uv-read-more__toggle {
-        justify-content: flex-end;
+        // justify-content: flex-end;
+        padding: 10rpx 0;
+        background: linear-gradient(to right, rgba($color: #E2DDFF, $alpha: 0.67), rgba($color: #C8C3FD, $alpha: 0.67), rgba($color: #E1DCFF, $alpha: 0.67));
       }
       /deep/ .uv-read-more__toggle__text .uv-text__value {
-        color: $uni-color !important;
-        font-size: 22rpx !important;
+        color: #9D9DF9 !important;
+        font-size: 20rpx !important;
       }
 
       &.attachment {
@@ -406,7 +424,7 @@
             padding: 7rpx 30rpx;
             font-size: 28rpx;
             color: #FFFFFF;
-            background: #4883f9;
+            background: $uni-color;
             border-radius: 27rpx;
           }
         }
@@ -424,7 +442,7 @@
     left: 0;
     bottom: 0;
     width: 100vw;
-    height: 110rpx;
+    height: 94rpx;
 		padding-bottom: env(safe-area-inset-bottom);
     background: #FFFFFF;
     box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16); 
@@ -434,14 +452,16 @@
     }
 
     .btn {
-      padding: 20rpx 90rpx;
-      font-size: 28rpx;
+      padding: 12rpx 70rpx;
+      font-size: 32rpx;
+      font-weight: 600;
+      line-height: 1.2;
       color: #FFFFFF;
-      background: #4883F9;
-      border-radius: 42rpx;
+      background: $uni-color;
+      border-radius: 30rpx;
 
       &-share {
-        background: #FFD019;
+        background: #9E96CC;
       }
 
     }

pages_order/thesis/poster.vue

@@ -180,7 +180,7 @@
       padding: 20rpx 77rpx;
       font-size: 28rpx;
       color: #FFFFFF;
-      background: #4883F9;
+      background: $uni-color;
       border-radius: 14rpx;
     }
   }

uni.scss

@@ -12,7 +12,7 @@
  * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
  */
 /* 颜色变量 */
-$uni-color: #4883F9;
+$uni-color: #6851A7;
 
 /* 行为相关颜色 */
 $uni-color-primary: #007aff;

utils/utils.js

@@ -209,6 +209,28 @@ export function redirectTo(...args){
 	uni.redirectTo(params(...args))
 }
 
+
+export function getNavHeight() {
+	// 状态栏高度
+	const statusBarHeight = uni.getSystemInfoSync().statusBarHeight
+
+	// 获取微信胶囊的位置信息 width,height,top,right,left,bottom
+	const custom = wx.getMenuButtonBoundingClientRect()
+	// console.log(custom)
+
+	// 导航栏高度(标题栏高度) = 胶囊高度 + (顶部距离 - 状态栏高度) * 2
+	const navigationBarHeight = custom.height + (custom.top - statusBarHeight) * 2
+	// console.log("导航栏高度："+this.globalData.navigationBarHeight)
+
+	// 总体高度 = 状态栏高度 + 导航栏高度
+	// const navHeight = navigationBarHeight + statusBarHeight
+	const navHeight = custom.top +  custom.height
+
+	console.log('navHeight', navHeight)
+
+	return navHeight
+}
+
 export default {
 	toArray,
 	generateUUID,
@@ -223,4 +245,5 @@ export default {
 	redirectTo,
 	copyText,
 	stringFormatHtml,
+	getNavHeight,
 }