refactor: 顶部改为浅绿色弧形装饰设计

haha-mp/src/pages/orderComplete/orderComplete.vue

@@ -10,11 +10,14 @@
     <view v-else-if="order" class="content">
       <!-- 顶部成功状态 -->
       <view class="success-header">
+        <!-- 弧形装饰背景 -->
+        <view class="header-arc" />
+
         <!-- 微信支付分标识 -->
         <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="none" stroke="#fff" stroke-width="3" />
+              <circle cx="24" cy="24" r="22" fill="#07C160" />
               <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,10 +288,23 @@ $wechat-green-light: #e8f8ee;
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding: 60rpx 0 80rpx;
-  background: linear-gradient(180deg, #07C160 0%, #06AD56 100%);
-  border-radius: 0 0 60rpx 60rpx;
+  padding: 50rpx 0 56rpx;
+  background: #fff;
   position: relative;
+  overflow: hidden;
+}
+
+/* 弧形装饰：一个大椭圆定位在顶部，只露出下半弧 */
+.header-arc {
+  position: absolute;
+  top: -280rpx;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 900rpx;
+  height: 560rpx;
+  border-radius: 50%;
+  background: linear-gradient(180deg, #e8f8ee 0%, #f5fdf8 60%, #fff 100%);
+  z-index: 0;
 }
 
 .payscore-badge {
@@ -296,9 +312,8 @@ $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;
+  position: relative;
+  z-index: 1;
 }
 
 .payscore-badge-icon {
@@ -313,7 +328,7 @@ $wechat-green-light: #e8f8ee;
 
 .payscore-badge-text {
   font-size: 22rpx;
-  color: #fff;
+  color: $wechat-green;
   font-weight: 500;
 }
 
@@ -322,18 +337,20 @@ $wechat-green-light: #e8f8ee;
   height: 120rpx;
   margin-bottom: 24rpx;
   animation: successPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
+  position: relative;
+  z-index: 1;
 }
 
 .success-icon {
   width: 100%;
   height: 100%;
   border-radius: 50%;
-  background: #fff;
+  background: $wechat-green;
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
-  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.15);
+  box-shadow: 0 8rpx 24rpx rgba(7, 193, 96, 0.3);
 }
 
 .check-circle {
@@ -346,8 +363,8 @@ $wechat-green-light: #e8f8ee;
   position: absolute;
   width: 24rpx;
   height: 52rpx;
-  border-right: 6rpx solid $wechat-green;
-  border-bottom: 6rpx solid $wechat-green;
+  border-right: 6rpx solid #fff;
+  border-bottom: 6rpx solid #fff;
   transform: rotate(45deg);
   margin-top: -6rpx;
 }
@@ -361,21 +378,27 @@ $wechat-green-light: #e8f8ee;
 .success-title {
   font-size: 36rpx;
   font-weight: 700;
-  color: #fff;
+  color: #1a1a1a;
   margin-bottom: 8rpx;
+  position: relative;
+  z-index: 1;
 }
 
 .success-amount {
   font-size: 56rpx;
   font-weight: 800;
-  color: #fff;
+  color: #1a1a1a;
   margin-bottom: 12rpx;
   letter-spacing: -1rpx;
+  position: relative;
+  z-index: 1;
 }
 
 .success-subtitle {
   font-size: 24rpx;
-  color: rgba(255, 255, 255, 0.75);
+  color: #999;
+  position: relative;
+  z-index: 1;
 }
 
 /* ========== 通用卡片 ========== */