Explorar el Código

style(workbench): 调整匹配师工作台页面样式

- 在所有工作台页面添加状态栏占位符以适配不同设备
- 更新页面边距和内边距,统一使用30rpx水平间距
- 添加box-sizing:border-box确保布局一致性
- 调整导航栏高度从90rpx到120rpx并优化对齐方式
- 优化返回按钮样式,增加点击效果和视觉反馈
- 统一卡片组件的边距和内边距设置
李思佳 hace 9 horas
padre
commit
eca51f8b04

+ 5 - 4
LiangZhiYUMao/pages/matchmaker-workbench/index.vue

@@ -446,9 +446,10 @@ export default {
 
 .content {
   flex: 1;
-  padding: 20rpx 20rpx 120rpx;
+  padding: 20rpx 30rpx 120rpx;
   display: flex;
   flex-direction: column;
+  box-sizing: border-box;
 }
 
 /* 欢迎卡片 + 统计卡片合并 */
@@ -622,8 +623,8 @@ export default {
   display: flex;
   flex-wrap: nowrap;
   gap: 20rpx;
-  margin: 20rpx 10rpx;
-  padding: 25rpx 15rpx;
+  margin: 20rpx 0;
+  padding: 25rpx;
   background: #fefeff;
   border-radius: 20rpx;
   border: 2rpx solid #f0f0f5;
@@ -739,7 +740,7 @@ export default {
   box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
   display: flex;
   flex-direction: column;
-  margin-bottom: 20rpx;
+  margin: 20rpx 0;
 
   .section-header {
     display: flex;

+ 18 - 4
LiangZhiYUMao/pages/matchmaker-workbench/my-activities.vue

@@ -1,5 +1,6 @@
 <template>
   <view class="my-activities-page">
+    <view class="status-bar-placeholder" :style="{height: statusBarHeight + 'px', backgroundColor: '#FCE4EC'}"></view>
     <!-- 自定义导航栏 -->
     <view class="custom-navbar">
       <view class="navbar-left" @click="goBack">
@@ -53,6 +54,7 @@ import api from '../../utils/api.js'
 export default {
   data() {
     return {
+      statusBarHeight: 0,
       activityList: [],
       pageNum: 1,
       pageSize: 10,
@@ -81,6 +83,9 @@ export default {
   },
 
   onLoad() {
+    // 获取状态栏高度
+    const systemInfo = uni.getSystemInfoSync()
+    this.statusBarHeight = systemInfo.statusBarHeight
     this.loadMyActivityList()
   },
 
@@ -149,7 +154,16 @@ export default {
   .my-activities-page {
     min-height: 100vh;
     background-color: #FFF9F9;
-    padding-top: 90rpx;
+    padding-top: 120rpx;
+  }
+
+  /* 状态栏占位符 */
+  .status-bar-placeholder {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 998;
   }
 
   /* 自定义导航栏 */
@@ -158,11 +172,11 @@ export default {
     top: 0;
     left: 0;
     right: 0;
-    height: 90rpx;
+    height: 120rpx;
     display: flex;
-    align-items: center;
+    align-items: flex-end;
     justify-content: space-between;
-    padding: 0 20rpx;
+    padding: 0 30rpx 25rpx;
     background: linear-gradient(135deg, #FCE4EC 0%, #F8BBD0 100%);
     z-index: 999;
 

+ 18 - 6
LiangZhiYUMao/pages/matchmaker-workbench/points-mall.vue

@@ -1,5 +1,6 @@
 <template>
   <view class="points-mall">
+    <view class="status-bar-placeholder" :style="{height: statusBarHeight + 'px', backgroundColor: '#FFF9F9'}"></view>
     <!-- 顶部导航栏 -->
     <view class="header">
       <view class="back-icon" @click="handleBack"></view>
@@ -85,6 +86,7 @@ export default {
   name: 'points-mall',
   data() {
     return {
+      statusBarHeight: 0,
       userPoints: 0,
       cartCount: 0,
       activeCategory: 0,
@@ -106,6 +108,9 @@ export default {
     }
   },
   onLoad() {
+    // 获取状态栏高度
+    const systemInfo = uni.getSystemInfoSync()
+    this.statusBarHeight = systemInfo.statusBarHeight
     this.initData()
   },
   onShow() {
@@ -252,21 +257,28 @@ export default {
   align-items: center;
   justify-content: space-between;
   padding: 25rpx 30rpx;
-  padding-top: calc(25rpx + env(safe-area-inset-top));
   background: #FFF9F9;
   border-bottom: 1rpx solid #F0F0F0;
 
   .back-icon {
-    width: 44rpx;
-    height: 44rpx;
+    width: 60rpx;
+    height: 60rpx;
     display: flex;
     align-items: center;
     justify-content: center;
-    font-size: 32rpx;
-    color: #333;
+    font-size: 40rpx;
+    color: #9C27B0;
+    background: rgba(156, 39, 176, 0.1);
+    border-radius: 50%;
+    transition: all 0.3s ease;
 
     &::before {
-      content: '‹';
+      content: '←';
+    }
+
+    &:active {
+      transform: scale(0.95);
+      background: rgba(156, 39, 176, 0.2);
     }
   }
 

+ 6 - 2
LiangZhiYUMao/pages/matchmaker-workbench/quality-resources.vue

@@ -1,5 +1,6 @@
 <template>
 	<view class="quality-resources">
+		<view class="status-bar-placeholder" :style="{height: statusBarHeight + 'px', backgroundColor: '#FFF9F9'}"></view>
 		<!-- 顶部导航栏 -->
 		<view class="header">
 			<view class="back-icon" @click="handleBack"></view>
@@ -78,6 +79,7 @@ export default {
 	name: 'quality-resources',
 	data() {
 		return {
+			statusBarHeight: 0,
 			resources: [],
 			searchKeyword: '',
 			pageNum: 1,
@@ -94,9 +96,12 @@ export default {
 			const rawUserId = parseInt(userId)
 			if (!isNaN(rawUserId) && rawUserId > 0) {
 				this.currentUserId = rawUserId
-				
+						
 			}
 		}
+		// 获取状态栏高度
+		const systemInfo = uni.getSystemInfoSync()
+		this.statusBarHeight = systemInfo.statusBarHeight
 		this.loadResources()
 	},
 	methods: {
@@ -640,7 +645,6 @@ export default {
 	align-items: center;
 	justify-content: space-between;
 	padding: 25rpx 30rpx;
-	padding-top: calc(25rpx + env(safe-area-inset-top));
 	background: #FFF9F9;
 	border-bottom: 1rpx solid #F0F0F0;
 

+ 13 - 10
LiangZhiYUMao/pages/matchmaker-workbench/ranking.vue

@@ -462,17 +462,20 @@ export default {
 	}
 
 	.ranking-list {
-		flex: 1;
-		padding: 0 20rpx 120rpx;
+			flex: 1;
+			padding: 0 30rpx 120rpx;
+			box-sizing: border-box;
 
-		.ranking-item {
-			display: flex;
-			align-items: center;
-			background: #FFFFFF;
-			border-radius: 20rpx;
-			padding: 25rpx;
-			margin-bottom: 20rpx;
-			box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
+			.ranking-item {
+				display: flex;
+				align-items: center;
+				background: #FFFFFF;
+				border-radius: 20rpx;
+				padding: 25rpx;
+				margin-bottom: 20rpx;
+				box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
+				box-sizing: border-box;
+				width: 100%;
 
 			.rank-number-normal {
 				width: 50rpx;