From 80dc90be027ee26869c63860b7d6a0759a03546b Mon Sep 17 00:00:00 2001
From: zhengyiming <540361168@qq.com>
Date: 星期二, 20 五月 2025 17:33:53 +0800
Subject: [PATCH] fix: 修改首页ui

---
 packages/components/src/styles/rechargeGrid.scss |  139 +++++++++++++++++++++++++++++++++++-----------
 1 files changed, 105 insertions(+), 34 deletions(-)

diff --git a/packages/components/src/styles/rechargeGrid.scss b/packages/components/src/styles/rechargeGrid.scss
index e06c9b3..d10c55f 100644
--- a/packages/components/src/styles/rechargeGrid.scss
+++ b/packages/components/src/styles/rechargeGrid.scss
@@ -53,41 +53,44 @@
 }
 
 .common-content {
-  padding: 0 boleGetCssVar('size', 'body-padding-h');
+  // padding: 0 boleGetCssVar('size', 'body-padding-h');
 }
 
 .parValue-radio-group {
   width: 100%;
   display: grid !important;
   grid-template-columns: repeat(3, 1fr);
-  grid-gap: 20px;
+  // grid-gap: 20px;
+  grid-column-gap: 20px;
+  grid-row-gap: 48px;
+  padding-top: 18px;
 
   .parValue-item {
     margin-right: 0;
 
     .nut-radio__button {
       width: 100%;
-      padding: 16rpx 0;
+      padding: 30rpx 0 28px;
       background-color: transparent;
       border: 1rpx solid #e2e5eb;
       text-align: center;
-      border-radius: 4px;
+      border-radius: 10px;
       position: relative;
     }
 
     .nut-radio__button--active {
-      color: #fb5100;
-      border-color: #fb5100;
-      overflow: hidden;
+      color: boleGetCssVar('color', 'primary');
+      border-color: boleGetCssVar('color', 'primary');
 
       &::after {
         border-radius: 8rpx;
-        background-color: rgba(251, 81, 0, 0.08);
-        opacity: 1;
+        background-color: boleGetCssVar('color', 'primary');
+        opacity: 0.05;
       }
 
       .parValue-item-inner {
-        .discountTag {
+        .discountTag,
+        .discount-icon {
           display: block;
         }
       }
@@ -102,51 +105,54 @@
       .amount-wrapper {
         display: flex;
         align-items: flex-end;
-        margin-bottom: 4px;
+        margin-bottom: 8px;
 
         .amount {
           font-size: 40px;
           font-weight: 400;
-          line-height: 44px;
+          line-height: 56px;
         }
         .unit {
-          font-size: 24px;
+          font-size: 40px;
           font-weight: 400;
-          line-height: 32px;
+          line-height: 56px;
         }
       }
 
       .price-wrapper {
         display: flex;
-        color: #858d98;
-        font-size: 24px;
+        color: boleGetCssVar('color', 'primary');
+        font-size: 22px;
         font-weight: 400;
-        line-height: 32px;
+        line-height: 30px;
 
-        .price {
-          color: #fb5100;
-          margin-left: 6px;
-        }
+        // .price {
+        //   color: #fb5100;
+        //   margin-left: 6px;
+        // }
       }
 
       .discountTag {
         display: none;
         position: absolute;
-        padding: 2px 8px;
-        border-radius: 0px 0 20px 0;
-        border: 1px solid #fb5100;
-        background: linear-gradient(
-          186deg,
-          rgba(255, 129, 45, 0.08) 14.82%,
-          rgba(238, 67, 67, 0.08) 91.5%
-        );
-        color: #fb5100;
+        padding: 4px 16px;
+        border-radius: 20px 0 20px 0;
+        background: linear-gradient(90deg, #1aaafe 0%, #0481ff 100%);
+        color: #fff;
         font-size: 22px;
-        font-weight: 700;
-        line-height: 28px;
+        line-height: 30px;
         position: absolute;
-        top: -2px;
+        top: -18px;
         left: -2px;
+      }
+
+      .discount-icon {
+        display: none;
+        position: absolute;
+        width: 48px;
+        height: 48px;
+        bottom: -1px;
+        right: -1px;
       }
     }
   }
@@ -162,10 +168,17 @@
   }
   .recharge-button {
     width: 100%;
-    margin: 40px 0;
+    margin: 40px 0 64px;
+    height: 88px;
+
+    &.recharge-button-linear {
+      background: linear-gradient(90deg, #40a3ff 0%, #198bfe 100%);
+      box-shadow: 0px 8px 20px 0px rgba(11, 169, 255, 0.34);
+    }
 
     .recharge-button-inner {
       display: flex;
+      font-size: 32px;
       .recharge-button-text {
         margin-left: 20px;
       }
@@ -183,4 +196,62 @@
       }
     }
   }
+
+  .lp-chunk-wrapper .lp-chunk-content {
+    .bole-form-item.user-account-form-item {
+      padding-bottom: 32px;
+    }
+  }
+}
+
+:root {
+  .nut-form {
+    &.chunk-form {
+      background-color: #fff;
+      border-radius: 16px;
+
+      // .nut-cell-group__wrap {
+      //   padding: 0 32px;
+      // }
+
+      .nut-cell {
+        &.bole-form-item {
+          padding: 26px 32px 0;
+
+          &:last-child {
+            border-bottom: none;
+            .nut-form-item__body__slots {
+              border-bottom: none;
+            }
+          }
+
+          .nut-form-item__body__slots {
+            padding-bottom: 26px;
+            border-bottom: 2px solid #edebe4;
+          }
+
+          .nut-form-item__label {
+            font-size: 28px;
+            color: boleGetCssVar('text-color', 'regular');
+          }
+
+          --nut-radio-label-font-size: 30px;
+
+          .nut-textarea {
+            border-radius: 6px;
+            border: 2px solid #dcdcdc;
+            padding: 10px 16px !important;
+          }
+        }
+      }
+    }
+  }
+}
+
+.chunk-form-actions {
+  .recharge-button {
+    width: 100%;
+    margin: 20px 0;
+    height: 88px;
+  }
 }

--
Gitblit v1.9.1