fix: ui

zhengyiming

8 天以前 1ba3a11308cf59c513d70fbc3608961f19a02621

fix: ui

 .stylelintrc.js

@@ -88,6 +88,7 @@
    //   ],
    //   { severity: 'warning' },
    // ],
    'block-no-empty': null,
  },
  ignoreFiles: ['**/*.js', '**/*.jsx', '**/*.tsx', '**/*.ts'],
  overrides: [

 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 {

 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/],

 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,

 apps/taro/src/assets/home/icon-banner-item.png

 apps/taro/src/assets/home/icon-banner-logo.png

 apps/taro/src/assets/home/icon-banner.png

 apps/taro/src/assets/home/icon-free-dian.png

 apps/taro/src/assets/home/icon-free-gas.png

 apps/taro/src/assets/home/icon-free-phone.png

 apps/taro/src/assets/home/icon-logo.png

Binary files differ

 apps/taro/src/assets/tabbar/icon-home-active.png

 apps/taro/src/assets/tabbar/icon-home.png

 apps/taro/src/assets/tabbar/icon-mine-active.png

 apps/taro/src/assets/tabbar/icon-mine.png

 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 {

 apps/taro/src/components/NavigationBar/TransparentNavigationBar.vue

@@ -74,7 +74,7 @@
  width: 100%;

  .common-navigation-bar-title {
    height: 36px;
    height: 48px;
  }
}
</style>

 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`,

 apps/taro/src/custom-tab-bar/index.scss

@@ -67,7 +67,7 @@

    &.active {
      .bottom-tab-item-text {
        color: #3a71ff;
        color: #028cff;
      }
    }
  }

 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>

 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;

 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
);

 packages/components/src/assets/icon-free-dian.png

 packages/components/src/assets/icon-free-gas.png

 packages/components/src/assets/icon-free-phone.png

 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>

 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 {

 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 {

 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

 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';

 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({