From 1ba3a11308cf59c513d70fbc3608961f19a02621 Mon Sep 17 00:00:00 2001
From: zhengyiming <540361168@qq.com>
Date: 星期三, 14 五月 2025 17:41:50 +0800
Subject: [PATCH] fix: ui

---
 apps/taro/src/assets/tabbar/icon-home-active.png                    |    0 
 apps/taro/src/components/NavigationBar/TransparentNavigationBar.vue |    2 
 .stylelintrc.js                                                     |    1 
 apps/taro/src/app.config.ts                                         |    6 
 apps/taro/src/assets/home/icon-banner.png                           |    0 
 apps/taro/src/assets/home/icon-free-phone.png                       |    0 
 apps/taro/src/styles/var.scss                                       |   16 +-
 apps/taro/src/assets/home/icon-free-gas.png                         |    0 
 apps/h5/src/components/Table/TransactionTableTitle.vue              |    2 
 apps/taro/src/constants/img.ts                                      |    1 
 packages/components/src/views/userAccount/UserAccountListView.vue   |    2 
 packages/components/src/styles/rechargeGrid.scss                    |   35 +++++--
 packages/components/src/views/RechargeGrid/RechargeGrid.vue         |   34 +++++-
 apps/taro/src/styles/custom_theme.scss                              |    4 
 apps/taro/src/custom-tab-bar/index.scss                             |    2 
 apps/taro/src/assets/tabbar/icon-mine.png                           |    0 
 apps/taro/src/assets/tabbar/icon-home.png                           |    0 
 packages/components/src/styles/layout.scss                          |   33 ++++--
 apps/taro/src/assets/home/icon-banner-item.png                      |    0 
 packages/components/src/styles/var.scss                             |   20 ++--
 packages/components/src/assets/icon-free-gas.png                    |    0 
 packages/components/src/components/Layout/MainCell.vue              |    5 
 /dev/null                                                           |    0 
 apps/taro/src/assets/tabbar/icon-mine-active.png                    |    0 
 apps/taro/src/assets/home/icon-banner-logo.png                      |    0 
 apps/taro/src/pages/home/index.vue                                  |  118 +++++++++++++++--------
 apps/taro/src/assets/home/icon-free-dian.png                        |    0 
 apps/taro/config/index.js                                           |    4 
 packages/components/src/assets/icon-free-phone.png                  |    0 
 apps/taro/src/components/NavigationBar/CommonNavigationBar.vue      |    9 +
 packages/components/src/assets/icon-free-dian.png                   |    0 
 31 files changed, 194 insertions(+), 100 deletions(-)

diff --git a/.stylelintrc.js b/.stylelintrc.js
index d3ce60e..e72ab6a 100644
--- a/.stylelintrc.js
+++ b/.stylelintrc.js
@@ -88,6 +88,7 @@
     //   ],
     //   { severity: 'warning' },
     // ],
+    'block-no-empty': null,
   },
   ignoreFiles: ['**/*.js', '**/*.jsx', '**/*.tsx', '**/*.ts'],
   overrides: [
diff --git a/apps/h5/src/components/Table/TransactionTableTitle.vue b/apps/h5/src/components/Table/TransactionTableTitle.vue
index 9472dc2..898de8b 100644
--- a/apps/h5/src/components/Table/TransactionTableTitle.vue
+++ b/apps/h5/src/components/Table/TransactionTableTitle.vue
@@ -31,7 +31,7 @@
   display: grid;
   padding: 16px 0;
   border-radius: 4px 4px 0 0;
-  background-color: #3a71ff;
+  background-color: #028cff;
   grid-template-columns: 2fr 2fr 1fr 1fr;
 
   .transaction-table-title-wrapper-item {
diff --git a/apps/taro/config/index.js b/apps/taro/config/index.js
index 3ddf2cc..0efa602 100644
--- a/apps/taro/config/index.js
+++ b/apps/taro/config/index.js
@@ -251,6 +251,10 @@
         })
       );
 
+      chain.toConfig().module.rules.forEach((rule) => {
+        console.log('rule', JSON.stringify(rule));
+      });
+
       chain.plugin('unplugin-vue-components').use(
         ComponentsPlugin({
           include: [/\.[tj]sx?$/, /\.vue$/, /\.vue\?vue/],
diff --git a/apps/taro/src/app.config.ts b/apps/taro/src/app.config.ts
index e1768bf..70b6f04 100644
--- a/apps/taro/src/app.config.ts
+++ b/apps/taro/src/app.config.ts
@@ -20,7 +20,7 @@
             },
           ],
           color: '#333',
-          selectedColor: '#3a71ff',
+          selectedColor: '#028CFF',
           backgroundColor: '#fff',
           borderStyle: 'black',
           custom: true,
@@ -61,8 +61,8 @@
         text: '鎴戠殑',
       },
     ],
-    color: '#333',
-    selectedColor: '#3a71ff',
+    color: '#2F303D',
+    selectedColor: '#028CFF',
     backgroundColor: '#fff',
     borderStyle: 'black',
     custom: true,
diff --git a/apps/taro/src/assets/home/icon-banner-item.png b/apps/taro/src/assets/home/icon-banner-item.png
new file mode 100644
index 0000000..4a4c4bc
--- /dev/null
+++ b/apps/taro/src/assets/home/icon-banner-item.png
Binary files differ
diff --git a/apps/taro/src/assets/home/icon-banner-logo.png b/apps/taro/src/assets/home/icon-banner-logo.png
new file mode 100644
index 0000000..1bbff34
--- /dev/null
+++ b/apps/taro/src/assets/home/icon-banner-logo.png
Binary files differ
diff --git a/apps/taro/src/assets/home/icon-banner.png b/apps/taro/src/assets/home/icon-banner.png
new file mode 100644
index 0000000..9043dae
--- /dev/null
+++ b/apps/taro/src/assets/home/icon-banner.png
Binary files differ
diff --git a/apps/taro/src/assets/home/icon-free-dian.png b/apps/taro/src/assets/home/icon-free-dian.png
new file mode 100644
index 0000000..685a108
--- /dev/null
+++ b/apps/taro/src/assets/home/icon-free-dian.png
Binary files differ
diff --git a/apps/taro/src/assets/home/icon-free-gas.png b/apps/taro/src/assets/home/icon-free-gas.png
new file mode 100644
index 0000000..4fe4743
--- /dev/null
+++ b/apps/taro/src/assets/home/icon-free-gas.png
Binary files differ
diff --git a/apps/taro/src/assets/home/icon-free-phone.png b/apps/taro/src/assets/home/icon-free-phone.png
new file mode 100644
index 0000000..540adba
--- /dev/null
+++ b/apps/taro/src/assets/home/icon-free-phone.png
Binary files differ
diff --git a/apps/taro/src/assets/home/icon-logo.png b/apps/taro/src/assets/home/icon-logo.png
deleted file mode 100644
index 084a4b0..0000000
--- a/apps/taro/src/assets/home/icon-logo.png
+++ /dev/null
Binary files differ
diff --git a/apps/taro/src/assets/tabbar/icon-home-active.png b/apps/taro/src/assets/tabbar/icon-home-active.png
index 6ac80b1..8b0331e 100644
--- a/apps/taro/src/assets/tabbar/icon-home-active.png
+++ b/apps/taro/src/assets/tabbar/icon-home-active.png
Binary files differ
diff --git a/apps/taro/src/assets/tabbar/icon-home.png b/apps/taro/src/assets/tabbar/icon-home.png
index 76ad785..25b997b 100644
--- a/apps/taro/src/assets/tabbar/icon-home.png
+++ b/apps/taro/src/assets/tabbar/icon-home.png
Binary files differ
diff --git a/apps/taro/src/assets/tabbar/icon-mine-active.png b/apps/taro/src/assets/tabbar/icon-mine-active.png
index 8e174e6..a54f4df 100644
--- a/apps/taro/src/assets/tabbar/icon-mine-active.png
+++ b/apps/taro/src/assets/tabbar/icon-mine-active.png
Binary files differ
diff --git a/apps/taro/src/assets/tabbar/icon-mine.png b/apps/taro/src/assets/tabbar/icon-mine.png
index d399adb..9413109 100644
--- a/apps/taro/src/assets/tabbar/icon-mine.png
+++ b/apps/taro/src/assets/tabbar/icon-mine.png
Binary files differ
diff --git a/apps/taro/src/components/NavigationBar/CommonNavigationBar.vue b/apps/taro/src/components/NavigationBar/CommonNavigationBar.vue
index e83ac7c..357afa6 100644
--- a/apps/taro/src/components/NavigationBar/CommonNavigationBar.vue
+++ b/apps/taro/src/components/NavigationBar/CommonNavigationBar.vue
@@ -70,9 +70,9 @@
 
 .common-navigation-bar-wrapper {
   width: 100%;
-  line-height: 1;
-  font-size: 32px;
-  color: boleGetCssVar('color', 'title-color');
+  line-height: 48px;
+  font-size: 34px;
+  color: boleGetCssVar('text-color', 'primary');
   min-width: 0;
   position: relative;
   align-items: center;
@@ -81,7 +81,8 @@
 
   .common-navigation-bar-title {
     @include ellipsis;
-    font-weight: 600;
+    font-weight: 500;
+    line-height: 48px;
   }
 
   &.dark {
diff --git a/apps/taro/src/components/NavigationBar/TransparentNavigationBar.vue b/apps/taro/src/components/NavigationBar/TransparentNavigationBar.vue
index bf5f382..ed91b01 100644
--- a/apps/taro/src/components/NavigationBar/TransparentNavigationBar.vue
+++ b/apps/taro/src/components/NavigationBar/TransparentNavigationBar.vue
@@ -74,7 +74,7 @@
   width: 100%;
 
   .common-navigation-bar-title {
-    height: 36px;
+    height: 48px;
   }
 }
 </style>
diff --git a/apps/taro/src/constants/img.ts b/apps/taro/src/constants/img.ts
index d4f66e0..0694927 100644
--- a/apps/taro/src/constants/img.ts
+++ b/apps/taro/src/constants/img.ts
@@ -3,6 +3,7 @@
 export const OssAssets = {
   common: {
     CommonPageBg: `${OssBasePath}/matchMakingMini/assets/common/icon-common-page-bg.png`,
+    HomePageBg: `${OssBasePath}/lifePayment/assets/common/icon-home-page-bg.png`,
   },
   mine: {
     Bg: `${OssBasePath}/matchMakingMini/assets/mine/icon-bg.png`,
diff --git a/apps/taro/src/custom-tab-bar/index.scss b/apps/taro/src/custom-tab-bar/index.scss
index d084602..de17eec 100644
--- a/apps/taro/src/custom-tab-bar/index.scss
+++ b/apps/taro/src/custom-tab-bar/index.scss
@@ -67,7 +67,7 @@
 
     &.active {
       .bottom-tab-item-text {
-        color: #3a71ff;
+        color: #028cff;
       }
     }
   }
diff --git a/apps/taro/src/pages/home/index.vue b/apps/taro/src/pages/home/index.vue
index 2c96fe7..69dac0f 100644
--- a/apps/taro/src/pages/home/index.vue
+++ b/apps/taro/src/pages/home/index.vue
@@ -1,13 +1,40 @@
 <template>
-  <PageLayoutWithBg class="index-page-wrapper" :title="'鐢熸椿缂磋垂'" :need-auth="false">
+  <PageLayout class="index-page-wrapper" :need-auth="false">
+    <template #navigationBar>
+      <TransparentNavigationBar :title="'鐢熸椿缂磋垂'" :is-absolute="false">
+      </TransparentNavigationBar>
+    </template>
+    <template #bg>
+      <img :src="OssAssets.common.HomePageBg" class="home-page-bg" />
+    </template>
     <ContentView>
+      <div class="home-page-banner-wrapper">
+        <div class="home-page-banner-left">
+          <img :src="IconBannerLogo" class="home-page-banner-logo" />
+          <div class="home-page-banner-list">
+            <div class="home-page-banner-list-item">
+              <img :src="IconBannerItem" class="home-page-banner-list-item-icon" />
+              <div class="home-page-banner-list-item-text">鏋侀�熷埌璐�</div>
+            </div>
+            <div class="home-page-banner-list-item">
+              <img :src="IconBannerItem" class="home-page-banner-list-item-icon" />
+              <div class="home-page-banner-list-item-text">鍒拌处閫氱煡</div>
+            </div>
+            <div class="home-page-banner-list-item">
+              <img :src="IconBannerItem" class="home-page-banner-list-item-icon" />
+              <div class="home-page-banner-list-item-text">闅忔椂鍙即</div>
+            </div>
+          </div>
+        </div>
+        <img :src="IconBanner" class="home-page-banner" />
+      </div>
       <RechargeGrid
         @phoneBillRecharge="goPhoneBillRecharge"
         @electricityBillRecharge="goElectricityBillRecharge"
         @gasBillRecharge="goGasBillRecharge"
       />
     </ContentView>
-  </PageLayoutWithBg>
+  </PageLayout>
 </template>
 
 <script setup lang="ts">
@@ -17,6 +44,10 @@
 import { OrderInputType } from '@life-payment/constants';
 import { RechargeGrid } from '@life-payment/components';
 import CustomTabBar from '../../custom-tab-bar/index';
+import { OssAssets } from '@/constants';
+import IconBanner from '@/assets/home/icon-banner.png';
+import IconBannerLogo from '@/assets/home/icon-banner-logo.png';
+import IconBannerItem from '@/assets/home/icon-banner-item.png';
 
 const userStore = useUserStore();
 
@@ -43,58 +74,63 @@
 @import '@/styles/common.scss';
 
 .index-page-wrapper {
-  .menu-logo {
-    padding: 0;
-
-    .logo {
-      width: 96px;
-      height: 64px;
-    }
+  .home-page-bg {
+    position: fixed;
+    z-index: -1;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
   }
 
-  .home-searchbar-wrapper {
-    padding: 32px 0;
+  .home-page-banner-wrapper {
     display: flex;
+    position: relative;
+    margin-bottom: -18px;
 
-    .searchbar-container {
+    .home-page-banner-left {
       flex: 1;
+      padding-top: 32px;
       min-width: 0;
-    }
 
-    .city-btn {
-      display: flex;
-      align-items: center;
-      padding-left: 36px;
-      color: boleGetCssVar('text-color', 'primary');
-
-      .city-btn-icon {
-        width: 40px;
-        height: 40px;
+      .home-page-banner-logo {
+        width: 240px;
+        height: 56px;
+        margin-bottom: 32px;
       }
 
-      .city-btn-text {
-        max-width: 200px;
-        @include ellipsis;
-        margin-left: 12px;
-        font-size: 30px;
+      .home-page-banner-list {
+        display: flex;
+
+        .home-page-banner-list-item {
+          display: flex;
+          align-items: center;
+
+          & + .home-page-banner-list-item {
+            margin-left: 24px;
+          }
+
+          .home-page-banner-list-item-icon {
+            width: 32px;
+            height: 32px;
+            margin-right: 4px;
+          }
+
+          .home-page-banner-list-item-text {
+            font-weight: 400;
+            font-size: 22px;
+            color: #645551;
+          }
+        }
       }
     }
-  }
 
-  .home-banner-wrapper {
-    .banner-img {
-      width: 100%;
-      height: 260px;
-      object-fit: cover;
+    .home-page-banner {
+      width: 256px;
+      height: 256px;
+      margin-top: -16px;
     }
   }
-
-  .home-header {
-    padding: 0 boleGetCssVar('size', 'body-padding-h');
-  }
-}
-
-.home-list {
-  @include infiniteLoadingInTabBarPage;
 }
 </style>
diff --git a/apps/taro/src/styles/custom_theme.scss b/apps/taro/src/styles/custom_theme.scss
index b2641aa..6853d21 100644
--- a/apps/taro/src/styles/custom_theme.scss
+++ b/apps/taro/src/styles/custom_theme.scss
@@ -1,4 +1,4 @@
-$primary-color: #3a71ff;
+$primary-color: #028cff;
 $primary-color-end: #496af2;
 
 $form-item-error-line-color: #fa2c19;
@@ -8,4 +8,4 @@
 $button-border-width: 0;
 
 $button-primary-background-color: $primary-color;
-$body-background-color: #f9f9fb;
+$body-background-color: #f7f8fa;
diff --git a/apps/taro/src/styles/var.scss b/apps/taro/src/styles/var.scss
index 400367a..3b8fcfd 100644
--- a/apps/taro/src/styles/var.scss
+++ b/apps/taro/src/styles/var.scss
@@ -9,25 +9,25 @@
     'body-background-color': $body-background-color,
     'title-color': #444444,
     'shadow-color': rgba(0, 0, 0, 0.15),
-    'warning': #ff7d00,
-    'danger': #fe3333,
-    'success': #31b573,
+    'warning': #ff9e25,
+    'danger': #f5222d,
+    'success': #07c160,
     'info': #e9e8e8,
   ),
   $bole-colors
 );
 
 $bole-text-color: (
-  'primary': #1d2129,
-  'regular': #4e5969,
-  'secondary': #9fa4ac,
-  'placeholder': #cbcbcb,
+  'primary': #2f303d,
+  'regular': #575b6c,
+  'secondary': #9fa2af,
+  'placeholder': #dfe1e3,
 );
 
 $bole-size: () !default;
 $bole-size: map.deep-merge(
   (
-    'body-padding-h': 28px,
+    'body-padding-h': 32px,
   ),
   $bole-size
 );
diff --git a/packages/components/src/assets/icon-free-dian.png b/packages/components/src/assets/icon-free-dian.png
index a8f48ec..685a108 100644
--- a/packages/components/src/assets/icon-free-dian.png
+++ b/packages/components/src/assets/icon-free-dian.png
Binary files differ
diff --git a/packages/components/src/assets/icon-free-gas.png b/packages/components/src/assets/icon-free-gas.png
index 8f2beed..4fe4743 100644
--- a/packages/components/src/assets/icon-free-gas.png
+++ b/packages/components/src/assets/icon-free-gas.png
Binary files differ
diff --git a/packages/components/src/assets/icon-free-phone.png b/packages/components/src/assets/icon-free-phone.png
index 4b262e2..540adba 100644
--- a/packages/components/src/assets/icon-free-phone.png
+++ b/packages/components/src/assets/icon-free-phone.png
Binary files differ
diff --git a/packages/components/src/components/Layout/MainCell.vue b/packages/components/src/components/Layout/MainCell.vue
index 03385b5..9a4b2b6 100644
--- a/packages/components/src/components/Layout/MainCell.vue
+++ b/packages/components/src/components/Layout/MainCell.vue
@@ -1,7 +1,10 @@
 <template>
   <div class="main-cell-container">
     <div class="main-cell-wrapper">
-      <div class="main-cell-title">{{ title }}</div>
+      <div class="main-cell-title-wrapper">
+        <div class="main-cell-title-line"></div>
+        <div class="main-cell-title">{{ title }}</div>
+      </div>
       <div class="main-cell-icon" v-if="$slots.icon">
         <slot name="icon" />
       </div>
diff --git a/packages/components/src/styles/layout.scss b/packages/components/src/styles/layout.scss
index a547f29..00c0689 100644
--- a/packages/components/src/styles/layout.scss
+++ b/packages/components/src/styles/layout.scss
@@ -1,20 +1,31 @@
 @use './common.scss' as *;
 
 .main-cell-container {
-  padding-top: 184px;
   .main-cell-wrapper {
-    padding: boleGetCssVar('size', 'body-padding-h');
-    padding-top: 48px;
-    border-radius: 30px;
+    padding: 18px 20px 60px;
+    border-radius: 32px;
     background: #ffffff;
-    box-shadow: 0px 8px 40px 0px rgba(0, 0, 0, 0.05);
 
-    .main-cell-title {
-      font-size: 40px;
-      font-weight: 600;
-      text-align: center;
-      color: #000000;
-      line-height: 56px;
+    .main-cell-title-wrapper {
+      margin-left: 12px;
+      display: flex;
+      align-items: center;
+      height: 88px;
+
+      .main-cell-title-line {
+        width: 8px;
+        height: 36px;
+        background: boleGetCssVar('color', 'primary');
+        border-radius: 4px;
+        margin-right: 16px;
+      }
+
+      .main-cell-title {
+        font-size: 34px;
+        font-weight: 400;
+        color: boleGetCssVar('text-color', 'primary');
+        line-height: 44px;
+      }
     }
 
     .main-cell-icon {
diff --git a/packages/components/src/styles/rechargeGrid.scss b/packages/components/src/styles/rechargeGrid.scss
index ef1c3ad..9de07be 100644
--- a/packages/components/src/styles/rechargeGrid.scss
+++ b/packages/components/src/styles/rechargeGrid.scss
@@ -1,19 +1,34 @@
 @use './common.scss' as *;
 
-.recharge-grid-wrapper {
-  padding-left: 0 !important;
-  margin-top: 40px;
+.recharge-list-wrapper {
+  margin-top: 28px;
 
-  .recharge-grid-item {
+  .recharge-list-item {
     position: relative;
-    .nut-grid-item__text {
-      font-size: 36rpx;
-      color: boleGetCssVar('text-color', 'primary');
+    height: 160px;
+    background: #f3f8ff;
+    border-radius: 16px;
+    margin-bottom: 26px;
+    display: flex;
+    align-items: center;
+    padding: 0 32px;
+
+    &:last-child {
+      margin-bottom: 0;
     }
 
-    .recharge-grid-item-icon {
-      width: 64px;
-      height: 64px;
+    .recharge-list-item-icon {
+      width: 68px;
+      height: 68px;
+      margin-right: 24px;
+    }
+
+    .recharge-list-item-text {
+      font-weight: 400;
+      font-size: 34px;
+      color: boleGetCssVar('text-color', 'primary');
+      flex: 1;
+      min-width: 0;
     }
 
     .discountTag {
diff --git a/packages/components/src/styles/var.scss b/packages/components/src/styles/var.scss
index 779af8d..2e82ce1 100644
--- a/packages/components/src/styles/var.scss
+++ b/packages/components/src/styles/var.scss
@@ -4,29 +4,29 @@
 $bole-colors: () !default;
 $bole-colors: map.deep-merge(
   (
-    'primary': #3a71ff,
-    'body-background-color': #f9f9fb,
+    'primary': #028cff,
+    'body-background-color': #f7f8fa,
     'title-color': #444444,
     'shadow-color': rgba(0, 0, 0, 0.15),
-    'warning': #ff7d00,
-    'danger': #fe3333,
-    'success': #31b573,
+    'warning': #ff9e25,
+    'danger': #f5222d,
+    'success': #07c160,
     'info': #e9e8e8,
   ),
   $bole-colors
 );
 
 $bole-text-color: (
-  'primary': #333333,
-  'regular': #666666,
-  'secondary': #999999,
-  'placeholder': #cbcbcb,
+  'primary': #2f303d,
+  'regular': #575b6c,
+  'secondary': #9fa2af,
+  'placeholder': #dfe1e3,
 );
 
 $bole-size: () !default;
 $bole-size: map.deep-merge(
   (
-    'body-padding-h': 28px,
+    'body-padding-h': 32px,
     'body-padding-h2': 14px,
   ),
   $bole-size
diff --git a/packages/components/src/views/RechargeGrid/RechargeGrid.vue b/packages/components/src/views/RechargeGrid/RechargeGrid.vue
index 7f9b4f1..c99dbee 100644
--- a/packages/components/src/views/RechargeGrid/RechargeGrid.vue
+++ b/packages/components/src/views/RechargeGrid/RechargeGrid.vue
@@ -1,6 +1,6 @@
 <template>
-  <MainCell title="鐢熸椿缂磋垂">
-    <Grid square :gutter="20" :column-num="2" class="recharge-grid-wrapper">
+  <MainCell title="蹇�熺即璐�">
+    <!-- <Grid square :gutter="20" :column-num="2" class="recharge-grid-wrapper">
       <GridItem class="recharge-grid-item" text="璇濊垂" @click="emit('phoneBillRecharge')">
         <img :src="IconFreePhone" class="recharge-grid-item-icon" />
         <div class="discountTag" v-if="lifePayPhoneRate > 0">{{ lifePayPhoneRate }}鎶�</div>
@@ -9,18 +9,40 @@
         <img :src="IconFreeDian" class="recharge-grid-item-icon" />
         <div class="discountTag" v-if="lifePayElectricRate > 0">{{ lifePayElectricRate }}鎶�</div>
       </GridItem>
-      <!-- <GridItem class="recharge-grid-item" text="鐕冩皵" @click="emit('gasBillRecharge')">
+      <GridItem class="recharge-grid-item" text="鐕冩皵" @click="emit('gasBillRecharge')">
         <img :src="IconFreeGas" class="recharge-grid-item-icon" />
         <div class="discountTag" v-if="lifePayGasRate > 0">{{ lifePayGasRate }}鎶�</div>
-      </GridItem> -->
-    </Grid>
+      </GridItem>
+    </Grid> -->
+    <div class="recharge-list-wrapper">
+      <div class="recharge-list-item">
+        <img :src="IconFreePhone" class="recharge-list-item-icon" />
+        <div class="recharge-list-item-text">璇濊垂</div>
+        <NutButton type="primary" class="recharge-list-item-button">绔嬪嵆缂磋垂</NutButton>
+      </div>
+      <div class="recharge-list-item">
+        <img :src="IconFreeDian" class="recharge-list-item-icon" />
+        <div class="recharge-list-item-text">鐢佃垂</div>
+        <NutButton type="primary" class="recharge-list-item-button">绔嬪嵆缂磋垂</NutButton>
+      </div>
+      <div class="recharge-list-item">
+        <img :src="IconFreeGas" class="recharge-list-item-icon" />
+        <div class="recharge-list-item-text">鐕冩皵璐�</div>
+        <NutButton type="primary" class="recharge-list-item-button">绔嬪嵆缂磋垂</NutButton>
+      </div>
+    </div>
   </MainCell>
 </template>
 
 <script setup lang="ts">
 import MainCell from '../../components/Layout/MainCell.vue';
-import { Grid, GridItem } from '@nutui/nutui-taro';
+import { Button as NutButton } from '@nutui/nutui-taro';
 import IconFreePhone from '../../assets/icon-free-phone.png';
+console.log(
+  'IconFreePhone: ',
+  IconFreePhone,
+  new URL('../../assets/icon-free-phone.png', import.meta.url)
+);
 import IconFreeDian from '../../assets/icon-free-dian.png';
 import IconFreeGas from '../../assets/icon-free-gas.png';
 import { useGetRate } from '../../hooks';
diff --git a/packages/components/src/views/userAccount/UserAccountListView.vue b/packages/components/src/views/userAccount/UserAccountListView.vue
index ed2b857..2c33b1b 100644
--- a/packages/components/src/views/userAccount/UserAccountListView.vue
+++ b/packages/components/src/views/userAccount/UserAccountListView.vue
@@ -85,7 +85,7 @@
     const res = await Taro.showModal({
       title: '鎻愮ず',
       content: '纭畾瑕佸垹闄よ鏁版嵁鍚�?',
-      confirmColor: '#3a71ff',
+      confirmColor: '#028CFF',
     });
     if (res.confirm) {
       await blLifeRecharge.services.deleteUserAccount({

--
Gitblit v1.9.1