V1

pages/index/index.vue

@@ -14,7 +14,7 @@
 				<!-- 左侧环状进度 -->
 				<view class="progress-circle">
 					<view class="circle-wrapper" :style="{
-						background: `conic-gradient(#FF4B4B 0% ${currentData.overview.submitRate}%, #F5F5F5 ${currentData.overview.submitRate}% 100%)`
+						background: `conic-gradient(#FF4D4F 0% ${currentData.overview.submitRate}%, #F5F5F5 ${currentData.overview.submitRate}% 100%)`
 					}">
 						<view class="circle-text">
 							<text class="percentage">{{currentData.overview.submitRate}}</text>
@@ -28,22 +28,30 @@
 				<view class="statistics">
 					<view class="stat-row">
 						<view class="stat-item">
+							<view class="stat-block light-green">
 								<text class="number">{{currentData.overview.stats.projectCount}}</text>
 								<text class="rate">项目</text>
 							</view>
+						</view>
 						<view class="stat-item">
+							<view class="stat-block light-orange">
 								<text class="number">{{currentData.overview.stats.orderCount}}</text>
 								<text class="rate">单量</text>
 							</view>
 						</view>
+					</view>
 					<view class="stat-row">
 						<view class="stat-item">
+							<view class="stat-block green">
 								<text class="number">{{currentData.overview.stats.volumeCount}}</text>
-							<text class="rate">方量</text>
+								<text class="rate">方量m³</text>
+							</view>
 						</view>
 						<view class="stat-item">
+							<view class="stat-block orange">
 								<text class="number">{{currentData.overview.stats.weightCount}}</text>
-							<text class="rate">重量</text>
+								<text class="rate">重量t</text>
+							</view>
 						</view>
 					</view>
 				</view>
@@ -79,14 +87,15 @@
 							</view>
 						</view>
 						<view class="progress-bar">
-							<view class="progress-bar" style="position: relative; height: 4px; background: #f0f0f0; border-radius: 2px; overflow: hidden;">
+							<view class="progress-bar" style="position: relative; height: 4px;width: 100%; background: #52C41A; border-radius: 2px; overflow: hidden;">
 								<view class="progress" :style="{ 
-									backgroundColor: '#52C41A',
-									width: currentData.finance.receivable.profitRate + '%',
+									backgroundColor: '#FF4D4F',
+									opacity:0.9,
+									width: 100-currentData.finance.receivable.profitRate + '%',
 									position: 'absolute',
 									height: '100%',
 									left: 0,
-									top: 0
+									top: '1px'
 								}"></view>
 							</view>
 						</view>
@@ -321,13 +330,13 @@ import { uniIcons } from '@dcloudio/uni-ui'
 					finance: {
 						receivable: {
 							total: 488950,
-							profit: 557580,
-							profitRate: 87.69
+							profit: 58674,
+							profitRate: 12.2
 						},
 						payable: {
-							total: 4710,
-							cash: 2305,
-							monthly: 2405
+							total: 430276,
+							cash: 130276,
+							monthly: 300000
 						}
 					},
 					chart: {
@@ -554,7 +563,6 @@ import { uniIcons } from '@dcloudio/uni-ui'
 		
 		width: 100%;
 		box-sizing: border-box;
-		padding: 15px;
 		background-color: #F5F7FA;
 		min-height: 100vh;
 		
@@ -616,6 +624,7 @@ import { uniIcons } from '@dcloudio/uni-ui'
 			.overview-content {
 			
 				display: flex;
+				width: 100%;
 				align-items: center;
 				padding: 0;
 				
@@ -636,10 +645,10 @@ import { uniIcons } from '@dcloudio/uni-ui'
 						&::after {
 							content: '';
 							position: absolute;
-							top: 8px;
-							left: 8px;
-							right: 8px;
-							bottom: 8px;
+							top: 10px;
+							left: 10px;
+							right: 10px;
+							bottom: 10px;
 							background: #fff;
 							border-radius: 50%;
 							z-index: 1;
@@ -647,13 +656,17 @@ import { uniIcons } from '@dcloudio/uni-ui'
 					}
 					
 					.circle-text {
+						display: flex;
+						flex-direction: column;
 						position: relative;
 						z-index: 2;
 						text-align: center;
+						align-items: center;
 						
 						.percentage {
 							font-size: 28px;
 							color: #333;
+							line-height: 1;
 							margin-bottom: 4px;
 							&::after {
 								content: '%';
@@ -664,10 +677,12 @@ import { uniIcons } from '@dcloudio/uni-ui'
 						
 						.label {
 							color: #666;
-							margin-bottom: 4px;
+							font-size: 12px;
+							margin: 4px 0;
 						}
 						
 						.count {
+							font-size: 12px;
 							color: #666;
 						}
 					}
@@ -678,22 +693,31 @@ import { uniIcons } from '@dcloudio/uni-ui'
 					
 					.stat-row {
 						display: flex;
-						justify-content: space-around;
-						margin-bottom: 20px;
+						gap: 12px;
+						margin-bottom: 15px;
 						
 						.stat-item {
+							flex: 1;
+							
+							.stat-block {
+								background-color: #f6ffed;
+								border-radius: 4px;
+								padding: 8px 12px;
+								display: block;
 								text-align: center;
 								
+								&.light-green { background-color: rgba(82, 196, 26, 0.1); }
+								&.light-orange { background-color: rgba(255, 169, 64, 0.1); }
+								&.green { background-color: rgba(0, 200, 180, 0.1); }
+								&.orange { background-color: rgba(255, 148, 64, 0.1); }
+							}
+							
 							.number {
 								display: block;
-								font-size: 24px;
+								font-size: 20px;
 								font-weight: bold;
-								color: #19c1b4 !important;
+								color: #333;
 								margin-bottom: 4px;
-								
-								&:nth-child(2n) {
-									color: #19c1b4 !important;
-								}
 							}
 							
 							.rate {
@@ -771,8 +795,11 @@ import { uniIcons } from '@dcloudio/uni-ui'
 						}
 						
 						.extra-info {
+							display: flex;
+							flex-direction: column;
 							text-align: right;
 							
+							
 							.info-row {
 								margin-bottom: 4px;