手机端项目整体UI调整修改

pages/recharge.vue

@@ -2,7 +2,7 @@
   <view class="recharge">
     <u-navbar
       title=""
-      bgColor="#000"
+      bgColor="transparent"
       :placeholder="true"
       :fixed="true"
       leftIcon=""
@@ -18,7 +18,7 @@
           <u-input
             readonly
             :placeholder="$lang.pleaseChoose"
-            color="#93979b"
+            color="#f7ecd0"
             v-model="type"
             border="none"
           >
@@ -31,7 +31,7 @@
             <u-icon
               slot="suffix"
               name="arrow-down-fill"
-              color="#757272"
+              color="#b9aa84"
               size="16"
             ></u-icon>
           </u-input>
@@ -59,14 +59,13 @@
               readonly
               :placeholder="$lang.walletAddress"
               fontSize="12px"
-              color="#93979b"
+              color="#f7ecd0"
               :value="address"
             >
               <template slot="suffix">
                 <u-button
                   class="btn"
                   :text="$lang.copy"
-                  type="success"
                   @click="copyCode"
                   color="#e5b932"
                 ></u-button>
@@ -99,7 +98,7 @@
           <u-input
             readonly
             :placeholder="$lang.chooseCoin"
-            color="#93979b"
+            color="#f7ecd0"
             v-model="currency.name"
             border="none"
           >
@@ -112,7 +111,7 @@
             <u-icon
               slot="suffix"
               name="arrow-down-fill"
-              color="#757272"
+              color="#b9aa84"
               size="16"
             ></u-icon>
           </u-input>
@@ -125,7 +124,7 @@
           <u-input
             readonly
             :placeholder="$lang.chooseLine"
-            color="#93979b"
+            color="#f7ecd0"
             v-model="coin_type.name"
             border="none"
           >
@@ -138,7 +137,7 @@
             <u-icon
               slot="suffix"
               name="arrow-down-fill"
-              color="#757272"
+              color="#b9aa84"
               size="16"
             ></u-icon>
           </u-input>
@@ -146,7 +145,7 @@
         <view class="picker-view">
           <u-input
             :placeholder="$lang.enterMoney"
-            color="#93979b"
+            color="#f7ecd0"
             v-model="amount"
             border="none"
           >
@@ -206,7 +205,7 @@
         <view class="picker-view">
           <u-input
             :placeholder="payChannel === 'epay' ? 'Nhập số tiền VND (vd: 1,000,000)' : 'Tối thiểu 1,000,000'"
-            color="#93979b"
+            color="#f7ecd0"
             v-model="amount"
             type="number"
             border="none"
@@ -774,235 +773,434 @@ export default {
 <style lang="scss" scoped>
 .pay-tabs {
   display: flex;
-  padding: 20rpx 30rpx 0;
-  gap: 15rpx;
+  gap: 12rpx;
+  margin-bottom: 16px;
 }
+
 .pay-tab {
   flex: 1;
+  min-height: 44px;
+  padding: 0 10rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   text-align: center;
-  padding: 18rpx 0;
-  color: #93979b;
-  background: rgba(255, 255, 255, 0.04);
-  border: 1rpx solid #2a3448;
-  border-radius: 8rpx;
-  font-size: 26rpx;
+  color: #b9aa84;
+  background: linear-gradient(
+    180deg,
+    rgba(21, 18, 15, 0.96) 0%,
+    rgba(13, 11, 9, 0.96) 100%
+  );
+  border: 1rpx solid rgba(223, 189, 120, 0.14);
+  border-radius: 16px;
+  font-size: 24rpx;
+  line-height: 1.3;
   transition: all 0.2s;
+
   &.active {
-    background: linear-gradient(to right, #e5b932, #c5971e);
-    color: #0b1520;
-    font-weight: bold;
-    border-color: #e5b932;
+    color: #231705;
+    font-weight: 700;
+    background: linear-gradient(180deg, #f2dfb6 0%, #dfbd78 52%, #bd8d39 100%);
+    border-color: rgba(242, 223, 182, 0.5);
+    box-shadow: 0 12px 24px rgba(125, 84, 22, 0.18),
+      inset 0 1px 0 rgba(255, 255, 255, 0.36);
   }
 }
+
 .recharge {
-  background: #0b1520;
   width: 100%;
   min-height: 100vh;
-  .navbar-lab {
-    color: #fff;
-    font-weight: 500;
-    font-size: 18px;
+  background: linear-gradient(180deg, #060505 0%, #0d0b09 100%);
+  color: #f7ecd0;
+
+  ::v-deep .u-navbar {
+    background: rgba(0, 0, 0, 0.72) !important;
   }
+
+  ::v-deep .u-navbar__content {
+    background: transparent !important;
+  }
+
+  ::v-deep .u-picker__view__column__item {
+    color: #f3e3b8 !important;
+  }
+
+  ::v-deep .u-toolbar {
+    background: #15120f !important;
+    border-bottom-color: rgba(223, 189, 120, 0.12) !important;
+  }
+
+  ::v-deep .u-toolbar__title {
+    color: #f4dfae !important;
+  }
+
+  .navbar-lab {
+    color: #fbf2de;
+    font-weight: 700;
+    font-size: 19px;
+    letter-spacing: 0.3px;
+  }
+
   .content {
-    margin: 5px 5px;
-    border: 2px solid #947b2b;
-    background: #222222;
+    width: calc(100% - 24px);
+    max-width: 760px;
+    margin: 10px auto 0;
+    padding: 18px 16px 22px;
     box-sizing: border-box;
-    padding: 15px;
+    border-radius: 24px;
+    background: linear-gradient(
+      180deg,
+      rgba(16, 13, 11, 0.96) 0%,
+      rgba(10, 8, 7, 0.96) 100%
+    );
+    border: 1px solid rgba(223, 189, 120, 0.18);
+    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.24),
+      inset 0 1px 0 rgba(255, 245, 223, 0.03);
+
     .picker-view {
-      border: 2px solid #947b2b;
-      padding: 8px;
-      border-radius: 5px;
-      margin-bottom: 20px;
-      &.input {
-        border: 1px solid #dadbde;
+      min-height: 56px;
+      margin-bottom: 14px;
+      padding: 0 14px;
+      display: flex;
+      align-items: center;
+      background: linear-gradient(
+        180deg,
+        rgba(25, 21, 18, 0.96) 0%,
+        rgba(17, 14, 12, 0.96) 100%
+      );
+      border: 1px solid rgba(223, 189, 120, 0.14);
+      border-radius: 16px;
+      box-shadow: inset 0 1px 0 rgba(255, 244, 220, 0.03),
+        inset 0 -1px 0 rgba(0, 0, 0, 0.12);
+
+      ::v-deep .u-input {
+        flex: 1;
+      }
+
+      ::v-deep .u-input__content {
+        min-height: 54px;
+        padding: 0;
+      }
+
+      ::v-deep .u-input__content__field-wrapper {
+        width: 100%;
+      }
+
+      ::v-deep input {
+        color: #f7ecd0 !important;
+        font-size: 15px !important;
+        letter-spacing: 0.2px;
+      }
+
+      ::v-deep input::placeholder {
+        color: rgba(245, 228, 184, 0.4) !important;
+      }
+
+      ::v-deep .u-text__value {
+        color: #baa67f !important;
+        font-size: 13px !important;
       }
     }
+
     .list {
+      margin-bottom: 14px;
+      padding: 14px;
+      border-radius: 16px;
+      background: linear-gradient(
+        180deg,
+        rgba(23, 19, 16, 0.92) 0%,
+        rgba(14, 12, 10, 0.92) 100%
+      );
+      border: 1px solid rgba(223, 189, 120, 0.1);
       font-size: 14px;
       text-align: center;
+
       &.qrcode {
         display: flex;
         width: 100%;
         align-items: center;
         justify-content: center;
-        margin: 25px 0;
+        padding: 20px 14px;
+
+        ::v-deep .u-image {
+          border-radius: 18px !important;
+          overflow: hidden;
+          border: 1px solid rgba(223, 189, 120, 0.12);
+          background: #fff;
+          box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
+        }
       }
+
       .lab {
-        color: #757272;
-        margin: 10px 0;
+        color: #b9aa84;
+        margin: 0 0 10px;
+        text-align: left;
+        font-size: 13px;
       }
+
+      .box {
+        ::v-deep .u-input {
+          min-height: 48px;
+          padding: 0 12px;
+          background: rgba(255, 255, 255, 0.02);
+          border: 1px solid rgba(223, 189, 120, 0.12);
+          border-radius: 14px;
+        }
+
+        ::v-deep .u-input__content {
+          min-height: 48px;
+        }
+
+        ::v-deep input {
+          color: #f7ecd0 !important;
+        }
+      }
+
       .btn {
-        height: 30px;
-        font-weight: 600;
-        color: #0b1520 !important;
+        min-width: 76px;
+        height: 34px;
+        font-weight: 700;
+        border: none !important;
+        border-radius: 12px !important;
+        color: #231705 !important;
+        box-shadow: 0 8px 18px rgba(125, 84, 22, 0.18),
+          inset 0 1px 0 rgba(255, 255, 255, 0.28);
       }
+
       .type {
-        width: 70px;
-        height: 35px;
-        background: #e5b932;
-        border-radius: 40px;
+        min-width: 86px;
+        height: 36px;
+        padding: 0 16px;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        background: linear-gradient(180deg, #f2dfb6 0%, #dfbd78 52%, #bd8d39 100%);
+        border-radius: 999px;
         text-align: center;
-        line-height: 35px;
-        font-weight: 600;
-        margin: 10px auto;
+        line-height: 36px;
+        font-weight: 700;
+        color: #231705;
+        box-shadow: 0 8px 18px rgba(125, 84, 22, 0.16),
+          inset 0 1px 0 rgba(255, 255, 255, 0.28);
+        margin: 0 auto;
       }
+
       .button {
-        line-height: 45px;
-        height: 45px;
-        color: #0b1520 !important;
-        font-weight: bold;
-        margin-top: 30px;
-        margin-bottom: 10px;
+        height: 50px !important;
+        margin-top: 8px;
+        margin-bottom: 2px;
+        border: none !important;
+        border-radius: 16px !important;
+        color: #231705 !important;
+        font-weight: 700;
+        letter-spacing: 0.3px;
+        box-shadow: 0 12px 24px rgba(125, 84, 22, 0.18),
+          inset 0 1px 0 rgba(255, 255, 255, 0.36);
       }
+
       .tip {
-        color: #cc4c0e;
+        color: #bca47a;
         font-size: 13px;
         text-align: justify;
+        line-height: 1.6;
       }
     }
+
+    .mb60 {
+      margin-bottom: 0 !important;
+    }
   }
 }
 
-/* ============ 内嵌 USDT 二维码弹窗 ============ */
+/* ============ 内嵌 USDT / 银行二维码弹窗 ============ */
 .epay-qr-box {
-  width: 600rpx;
-  padding: 30rpx 34rpx 24rpx;
-  background: #1a1206;
-  border: 1rpx solid #907545;
-  border-radius: 10px;
-  color: #e5b932;
+  width: 620rpx;
+  padding: 34rpx 34rpx 28rpx;
+  background: linear-gradient(
+    180deg,
+    rgba(20, 16, 12, 0.98) 0%,
+    rgba(11, 9, 7, 0.98) 100%
+  );
+  border: 1rpx solid rgba(223, 189, 120, 0.18);
+  border-radius: 20rpx;
+  color: #f0dbab;
   box-sizing: border-box;
   position: relative;
+  box-shadow: 0 24rpx 60rpx rgba(0, 0, 0, 0.3);
 }
+
 .epay-qr-close {
   position: absolute;
-  top: 8rpx;
-  right: 18rpx;
-  color: #aaa;
-  font-size: 40rpx;
+  top: 12rpx;
+  right: 16rpx;
+  color: #b7a37d;
+  font-size: 38rpx;
   line-height: 1;
   padding: 10rpx 16rpx;
 }
+
 .epay-qr-title {
   text-align: center;
   font-size: 30rpx;
-  font-weight: bold;
-  margin-bottom: 8rpx;
+  font-weight: 700;
+  margin-bottom: 10rpx;
+  color: #f7e6bd;
 }
+
 .epay-qr-status {
+  width: fit-content;
+  min-width: 180rpx;
+  margin: 0 auto 20rpx;
+  padding: 8rpx 18rpx;
   text-align: center;
-  font-size: 24rpx;
-  margin-bottom: 16rpx;
-  &.waiting { color: #e5b932; }
-  &.success { color: #7cd992; }
-  &.expired { color: #e74c3c; }
+  font-size: 22rpx;
+  border-radius: 999rpx;
+  background: rgba(255, 255, 255, 0.03);
+
+  &.waiting {
+    color: #e5b932;
+  }
+
+  &.success {
+    color: #7cd992;
+  }
+
+  &.expired {
+    color: #e67e72;
+  }
 }
+
 .epay-qr-img-wrap {
   width: 340rpx;
   height: 340rpx;
   margin: 0 auto 24rpx;
   background: #fff;
-  padding: 14rpx;
-  border-radius: 8rpx;
+  padding: 16rpx;
+  border-radius: 20rpx;
   box-sizing: content-box;
   display: flex;
   align-items: center;
   justify-content: center;
+  box-shadow: 0 10rpx 26rpx rgba(0, 0, 0, 0.18);
 }
+
 .epay-qr-field {
   margin-bottom: 16rpx;
 }
+
 .epay-qr-label {
-  color: #bbb;
+  color: #ab9770;
   font-size: 22rpx;
-  margin-bottom: 6rpx;
+  margin-bottom: 8rpx;
 }
+
 .epay-qr-value {
   display: flex;
   align-items: center;
   gap: 12rpx;
-  background: rgba(0, 0, 0, 0.35);
-  border: 1rpx solid #5a4323;
-  border-radius: 6rpx;
-  padding: 12rpx 14rpx;
+  background: rgba(255, 255, 255, 0.03);
+  border: 1rpx solid rgba(223, 189, 120, 0.12);
+  border-radius: 14rpx;
+  padding: 14rpx 16rpx;
   font-size: 24rpx;
   word-break: break-all;
+
   &.amount {
-    color: #fff;
-    font-weight: bold;
+    color: #fff8e6;
+    font-weight: 700;
     font-size: 28rpx;
   }
+
   &.addr {
-    color: #e5b932;
-    font-family: 'Courier New', monospace;
+    color: #f0dbab;
+    font-family: "Courier New", monospace;
     font-size: 20rpx;
   }
+
   text {
     flex: 1;
   }
 }
+
 .epay-qr-btn {
   flex-shrink: 0;
-  background: #c5971e;
-  color: #161107;
+  min-width: 90rpx;
+  text-align: center;
+  background: linear-gradient(180deg, #f2dfb6 0%, #dfbd78 52%, #bd8d39 100%);
+  color: #231705;
   font-size: 22rpx;
-  padding: 6rpx 18rpx;
-  border-radius: 4rpx;
-  font-weight: bold;
+  padding: 8rpx 18rpx;
+  border-radius: 10rpx;
+  font-weight: 700;
 }
+
 .epay-qr-meta {
   display: flex;
   justify-content: space-between;
-  color: #bbb;
+  color: #b7a37d;
   font-size: 24rpx;
   margin: 20rpx 0 12rpx;
 }
+
 .epay-qr-countdown {
   color: #e5b932;
-  font-weight: bold;
+  font-weight: 700;
 }
+
 .epay-qr-tip {
-  color: #e74c3c;
+  color: #d58c65;
   font-size: 22rpx;
   text-align: center;
-  line-height: 1.5;
+  line-height: 1.6;
   margin-top: 14rpx;
-  opacity: 0.85;
+  opacity: 0.92;
 }
+
 .alin-overlay {
   position: fixed;
-  top: 0; left: 0; right: 0; bottom: 0;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
   z-index: 9999;
-  background: rgba(0,0,0,0.6);
+  background: rgba(0, 0, 0, 0.68);
   display: flex;
   align-items: center;
   justify-content: center;
+  backdrop-filter: blur(4px);
 }
+
 .alin-pay-box {
   width: 92vw;
   height: 85vh;
-  background: #fff;
-  border-radius: 10px;
+  background: linear-gradient(180deg, #17130f 0%, #0d0b09 100%);
+  border: 1px solid rgba(223, 189, 120, 0.16);
+  border-radius: 20px;
   overflow: hidden;
   display: flex;
   flex-direction: column;
+  box-shadow: 0 20px 46px rgba(0, 0, 0, 0.26);
 }
+
 .alin-pay-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 10px 15px;
-  background: #1a1a2e;
+  padding: 12px 16px;
+  background: rgba(20, 17, 14, 0.96);
+  border-bottom: 1px solid rgba(223, 189, 120, 0.12);
 }
+
 .alin-pay-title {
-  color: #f4c46f;
+  color: #f4dca3;
   font-size: 16px;
-  font-weight: bold;
+  font-weight: 700;
 }
+
 .alin-iframe {
   flex: 1;
   width: 100%;
   border: none;
+  background: #fff;
 }
 </style>