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