Ver Fonte

feat: 结算页顶部改为绿色弧顶设计

skyline há 1 semana atrás
pai
commit
579747d3fc
1 ficheiros alterados com 19 adições e 14 exclusões
  1. 19 14
      haha-mp/src/pages/orderComplete/orderComplete.vue

+ 19 - 14
haha-mp/src/pages/orderComplete/orderComplete.vue

@@ -14,7 +14,7 @@
         <view class="payscore-badge">
           <view class="payscore-badge-icon">
             <svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
-              <circle cx="24" cy="24" r="22" fill="#07C160" />
+              <circle cx="24" cy="24" r="22" fill="none" stroke="#fff" stroke-width="3" />
               <path d="M14 24 L20 30 L34 18" stroke="#fff" stroke-width="3.5" fill="none" stroke-linecap="round" stroke-linejoin="round" />
             </svg>
           </view>
@@ -285,8 +285,10 @@ $wechat-green-light: #e8f8ee;
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding: 60rpx 0 40rpx;
-  background: linear-gradient(180deg, #fff 0%, #f9fdfa 100%);
+  padding: 60rpx 0 80rpx;
+  background: linear-gradient(180deg, #07C160 0%, #06AD56 100%);
+  border-radius: 0 0 60rpx 60rpx;
+  position: relative;
 }
 
 .payscore-badge {
@@ -294,11 +296,14 @@ $wechat-green-light: #e8f8ee;
   align-items: center;
   gap: 8rpx;
   margin-bottom: 12rpx;
+  background: rgba(255, 255, 255, 0.2);
+  padding: 6rpx 20rpx;
+  border-radius: 40rpx;
 }
 
 .payscore-badge-icon {
-  width: 36rpx;
-  height: 36rpx;
+  width: 32rpx;
+  height: 32rpx;
 
   svg {
     width: 100%;
@@ -307,8 +312,8 @@ $wechat-green-light: #e8f8ee;
 }
 
 .payscore-badge-text {
-  font-size: 24rpx;
-  color: $wechat-green;
+  font-size: 22rpx;
+  color: #fff;
   font-weight: 500;
 }
 
@@ -323,12 +328,12 @@ $wechat-green-light: #e8f8ee;
   width: 100%;
   height: 100%;
   border-radius: 50%;
-  background: $wechat-green;
+  background: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
-  box-shadow: 0 8rpx 24rpx rgba(7, 193, 96, 0.3);
+  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.15);
 }
 
 .check-circle {
@@ -341,8 +346,8 @@ $wechat-green-light: #e8f8ee;
   position: absolute;
   width: 24rpx;
   height: 52rpx;
-  border-right: 6rpx solid #fff;
-  border-bottom: 6rpx solid #fff;
+  border-right: 6rpx solid $wechat-green;
+  border-bottom: 6rpx solid $wechat-green;
   transform: rotate(45deg);
   margin-top: -6rpx;
 }
@@ -356,21 +361,21 @@ $wechat-green-light: #e8f8ee;
 .success-title {
   font-size: 36rpx;
   font-weight: 700;
-  color: #1a1a1a;
+  color: #fff;
   margin-bottom: 8rpx;
 }
 
 .success-amount {
   font-size: 56rpx;
   font-weight: 800;
-  color: #1a1a1a;
+  color: #fff;
   margin-bottom: 12rpx;
   letter-spacing: -1rpx;
 }
 
 .success-subtitle {
   font-size: 24rpx;
-  color: #999;
+  color: rgba(255, 255, 255, 0.75);
 }
 
 /* ========== 通用卡片 ========== */