个人中心样式改版完成

pages/bill/bill.vue

@@ -157,7 +157,7 @@ export default {
 .bill-list-page {
   background: #f7f8fa;
   min-height: 100vh;
-  padding-top: 175rpx; /* 给导航栏留空间 */
+  padding-top: 120rpx; /* 给导航栏留空间 */
 }
 
 .tab-bar {
@@ -201,16 +201,16 @@ export default {
   flex-direction: column;
 
   .bill-name {
-    font-size: 28rpx;
+    font-size: 30rpx;
-    color: #333;
+    color: #2D2B2C;
-    font-weight: bold;
+    font-weight: 500;
   }
 
   .bill-date,
   .bill-status {
     font-size: 24rpx;
-    color: #666;
+    color: #ADADB1;
-    margin-top: 8rpx;
+    margin-top: 18rpx;
   }
 }
 
@@ -219,8 +219,8 @@ export default {
   align-items: center;
 
   .amount {
-    font-size: 28rpx;
+    font-size: 30rpx;
-    color: #333;
+    color: #F34038;
     margin-right: 10rpx;
   }
 }

pages/center/center.vue

@@ -1,6 +1,16 @@
 <template>
 	<view class="user-center">
-		<u-navbar title="个人中心" :is-back="false" :background="background" title-color="#2D2B2C"></u-navbar>
+		<customNavbar
+		  title="个人中心" 
+		  ref="navbar"
+		  :is-transparent="navbarStyle.isTransparent"
+		  :bg-color="navbarStyle.bgColor"
+		  :text-color="navbarStyle.textColor"
+		  :opacity="navbarStyle.opacity"
+		  :extra-icons="navbarStyle.extraIcons"
+		  :show-home="false"
+		  :show-back="false"
+		/>
 		<!-- 顶部用户信息 -->
 		<view class="user-header">
 			<u-avatar :src="avatar" size="133"></u-avatar>
@@ -22,7 +32,9 @@
 		<view class="contract-view">
 			<!-- 我的合同和我的预约 -->
 		<view class="contract-appointment">
-				<view class="card" @click="clickNav('pages/center/history')">
+			<view class="card" @click="clickNav('pages/center/contract')">
+				<view class="card-title">我的合同</view>
+				<view class="card-main">
 					<view class="card-content">
 						<view class="card-number">5</view>
 						<view class="card-type">份合同</view>
@@ -30,17 +42,19 @@
 					<view class="card-icon">
 						<image src="/static/icon/sign.png" mode="widthFix"></image>
 					</view>
-					<view class="card-title">我的合同</view>
+				</view>
 			</view>
 			<view class="card" @click="clickNav('pages/reserve/reserveRecords')">
+				<view class="card-title">我的预约</view>
+				<view class="card-main">
 					<view class="card-content">
 						<view class="card-number">3</view>
 						<view class="card-type">个预约</view>
 					</view>
 					<view class="card-icon">
-						<image src="/static/icon/预约.png" mode="widthFix"></image>
+						<image src="/static/icon/sign.png" mode="widthFix"></image>
+					</view>
 				</view>
-					<view class="card-title">我的预约</view>
 			</view>
 		</view>
 
@@ -56,7 +70,7 @@
 					</view>
 					<view class="service-item" @click="clickNav('pages/center/myLease')">
 						<view class="service-icon">
-							<image src="/static/icon/住房C.png" mode="widthFix"></image>
+							<image src="/static/icon/租赁资产.png" mode="widthFix"></image>
 						</view>
 						<view class="service-name">租赁资产</view>
 					</view>
@@ -169,9 +183,13 @@
 						url: "pages/wae/waeRecords"
 					}
 				],
-				background: {
+				// 导航栏样式控制
-					// 渐变色
+				navbarStyle: {
-					backgroundImage: 'linear-gradient(-90deg, #F9DED9 0%, #F8DFC0 99%);'
+					isTransparent: true,
+					bgColor: '#ffffff',
+					textColor: '#000000',
+					opacity: 0,
+					extraIcons: [] // 右侧额外图标
 				},
 			}
 		},
@@ -312,7 +330,11 @@
 
 <style lang="scss" scoped>
 	.user-center {
-		background: linear-gradient(-90deg, #F9DED9 0%, #F8DFC0 99%);
+		padding-top: 120rpx;
+    background-image: url(https://eyidu.ydszw.cn/static/img/test/my-bg.png);
+    background-color: #fff;
+    background-repeat: space;
+    background-size: 750rpx 731rpx;
     min-height: 100vh;
 	}
 
@@ -332,24 +354,24 @@
 	.user-name {
 		display: flex;
 		align-items: center;
-		margin-bottom: 20rpx;
+		margin-bottom: 10rpx;
 	}
 
 	.name-text {
-		font-size: 48rpx;
+		font-size: 38rpx;
 		font-weight: 500;
 		color: #2D2B2C;
 		margin-right: 16rpx;
 	}
 
 	.auth-tag {
-		font-size: 30rpx;
+		font-size: 26rpx;
 		color: #86868C;
 		padding: 4rpx 12rpx;
 	}
 
 	.user-type {
-		font-size: 30rpx;
+		font-size: 26rpx;
 		color: #86868C;
 	}
 
@@ -361,7 +383,8 @@
 	.contract-view{
 		width: 96%;
 		margin: 0 auto;
-		background: linear-gradient(0deg, #FCFAF5 0%, #FAECCE 100%);
+		background-image: url("https://eyidu.ydszw.cn/static/img/test/my-bg2.png");//只支持网络图片，请自行上传至图片服务器
+		background-repeat: round;
 		border-radius: 10rpx;
 	}
 
@@ -375,45 +398,50 @@
 	.card {
 		flex: 1;
 		background-color: #fff;
-		border-radius: 12rpx;
+		border-radius: 10rpx;
-		padding: 30rpx 20rpx;
+		padding: 24rpx;
-		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
 		display: flex;
 		flex-direction: column;
-		align-items: center;
-		position: relative;
-	}
-
-	.card-content {
-		text-align: center;
-		margin-bottom: 20rpx;
-	}
-
-	.card-number {
-		font-size: 48rpx;
-		font-weight: 600;
-		color: #FF6B35;
-	}
-
-	.card-type {
-		font-size: 28rpx;
-		color: #666;
-		margin-top: 8rpx;
-	}
-
-	.card-icon {
-		margin-bottom: 16rpx;
-	}
-
-	.card-icon image {
-		width: 80rpx;
-		height: 80rpx;
 	}
 
 	.card-title {
 		font-size: 30rpx;
 		font-weight: 500;
-		color: #333;
+		color: #222222;
+	}
+
+	.card-main {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		position: relative;
+	}
+
+	.card-content {
+		flex: 1;
+	}
+
+	.card-number {
+		font-size: 48rpx;
+		font-weight: 600;
+		color: #EC712E;
+		margin-bottom: 8rpx;
+	}
+
+	.card-type {
+		font-size: 26rpx;
+		color: #86868C;
+	}
+
+	.card-icon {
+		position: absolute;
+		right: 0;
+		bottom: -20rpx;
+	}
+
+	.card-icon image {
+		width: 120rpx;
+		height: 111rpx;
 	}
 
 	/* 我的服务 */
@@ -442,7 +470,7 @@
 	}
 
 	.service-icon {
-		margin-bottom: 16rpx;
+		// margin-bottom: 16rpx;
 	}
 
 	.service-icon image {
@@ -459,8 +487,6 @@
 	.common-tools {
 		width: 96%;
 		margin: 0 auto;
-		background-color: #fff;
-		border-radius: 10rpx;
 		padding: 30rpx 40rpx;
 	}
 
@@ -472,14 +498,15 @@
 	}
 
 	.tools-list {
-		margin-top: 20rpx;
+		margin-top: 50rpx;
+		margin-left: -20rpx;
 		display: flex;
 		flex-flow: row wrap;
 	}
 
 	.tool-item {
 		width: 25%;
-		margin-bottom: 20rpx;
+		margin-bottom: 40rpx;
 		display: flex;
 		flex-direction: column;
 		align-items: center;