我的权益

pages/my/VIP/benefits.vue

@@ -56,7 +56,7 @@
           </view>
           <view class="header-cell vip">VIP版</view>
           <view class="header-cell flagship recommended">
-            <!-- <view class="plan-tag">推荐</view> -->
+            <view class="plan-tag">推荐</view>
             <view class="plan-name">旗舰版</view>
           </view>
         </view>
@@ -417,9 +417,10 @@ export default {
     display: grid;
     grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
     background: #f8f9fa;
+    border-bottom: 4rpx solid #FFFFFF;
     
     .header-cell {
-      padding: 24rpx 12rpx;
+      padding: 12rpx;
       color: rgba(23, 23, 37, 1);
       font-family: DM Sans;
       font-size: 24rpx;
@@ -428,14 +429,19 @@ export default {
       letter-spacing: 0.5%;
       text-align: center;
       position: relative;
-      border-right: 1rpx solid #e9ecef;
+      border-right: 4rpx solid #FFFFFF;
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
       
+      &:first-child {
+        border-top-left-radius: 16rpx;
+      }
+      
       &:last-child {
         border-right: none;
+        border-top-right-radius: 16rpx;
       }
       
       &.benefit-type {
@@ -446,35 +452,59 @@ export default {
         line-height: 26rpx;
         letter-spacing: 0.5%;
         text-align: center;
+        background: rgba(219, 216, 216, 1);
       }
       
       &.basic {
-        background: rgba(246, 246, 246, 1);
+        background: rgba(219, 216, 216, 1);
       }
       
       &.active {
-        background: rgba(246, 246, 246, 1);
-        color: #1976d2;
+        background: linear-gradient(135.00deg, rgba(255, 187, 141, 0.4),rgba(255, 102, 0, 0.4) 100%);
+        color: rgba(224, 90, 0, 1);
       }
       
       &.vip {
-        background: rgba(255, 235, 235, 1);
+        background: linear-gradient(135.00deg, rgba(255, 180, 180, 0.6),rgba(255, 89, 89, 0.6) 100%);
+        color: rgba(255, 62, 62, 1);
       }
       
       &.recommended {
-        background: rgba(254, 238, 209, 1);
-        color: #f57c00;
+        background: linear-gradient(133.74deg, rgba(251, 231, 185, 1),rgba(240, 176, 72, 1) 100%);
+        color: rgba(212, 131, 0, 1);
       }
       
       .plan-tag {
         position: absolute;
-        top: 8rpx;
-        right: 8rpx;
-        background: #ff4444;
-        color: #fff;
-        font-size: 20rpx;
-        padding: 4rpx 8rpx;
-        border-radius: 8rpx;
+        top: 0rpx;
+        right: 0rpx;
+        background: var(--线性渐变, linear-gradient(132.53deg, rgba(106.94185638427734, 84.63434600830078, 214.0178680419922, 0.96),rgba(144.87640380859375, 87.8011474609375, 191.25, 1) 95%));
+        color: rgba(255, 255, 255, 1);
+        font-family: DM Sans;
+        font-size: 12rpx;
+        font-weight: 400;
+        line-height: 14rpx;
+        letter-spacing: 0px;
+        text-align: left;
+        padding: 4rpx 12rpx;
+        border-radius: 0rpx 16rpx 0rpx 16rpx;
+        transform-origin: center;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        overflow: hidden;
+        
+        &::before {
+          content: '';
+          position: absolute;
+          top: 0;
+          left: 0;
+          right: 0;
+          bottom: 0;
+          background: inherit;
+          transform: rotate(-45deg);
+          z-index: -1;
+        }
       }
       
       .plan-name {
@@ -485,7 +515,7 @@ export default {
       
       .plan-expire {
         font-size: 16rpx;
-        color: #666;
+        color: rgba(224, 90, 0, 1);
       }
     }
   }
@@ -493,10 +523,18 @@ export default {
   .table-row {
     display: grid;
     grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
-    border-bottom: 1rpx solid #e9ecef;
+    border-bottom: 4rpx solid #FFFFFF;
     
     &:last-child {
       border-bottom: none;
+      
+      .row-cell:first-child {
+        border-bottom-left-radius: 16rpx;
+      }
+      
+      .row-cell:last-child {
+        border-bottom-right-radius: 16rpx;
+      }
     }
     
     &.price-row {
@@ -508,7 +546,7 @@ export default {
       padding: 24rpx 12rpx;
       font-size: 16rpx;
       text-align: center;
-      border-right: 1rpx solid #e9ecef;
+      border-right: 4rpx solid #FFFFFF;
       display: flex;
       align-items: center;
       justify-content: center;
@@ -532,13 +570,13 @@ export default {
       }
       
       &.regular {
-        color: #1976d2;
+        color: rgba(224, 90, 0, 1);
         font-weight: 600;
-        background: rgba(246, 246, 246, 1);
+        background: rgba(254, 240, 229, 1);
       }
       
       &.vip {
-        color: #7b1fa2;
+        color: rgba(255, 62, 62, 1);
         font-weight: 600;
         background: rgba(255, 235, 235, 1);
       }