feat: UI

wupengfei

7 天以前 14368e8a09c4b5793d0975f85e36a4c1d410ca36

 apps/taro/src/pages/home/index.vue

@@ -1,34 +1,71 @@
<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">
import { useUser, useAccessLogin, useTabRouteEnhance } from '@/hooks';
import { useAccessLogin } from '@/hooks';
import { useUserStore } from '@/stores/modules/user';
import Taro from '@tarojs/taro';
import IconLogo from '@/assets/home/icon-logo.png';
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();

const router = Taro.useRouter();

const goPhoneBillRecharge = useAccessLogin(() => {
  Taro.navigateTo({
  RouteHelper.navigateTo({
    url: `${RouterPath.phoneBillRecharge}`,
  });
});
const goElectricityBillRecharge = useAccessLogin(() => {
  Taro.navigateTo({
  RouteHelper.navigateTo({
    url: `${RouterPath.electricBillRecharge}`,
  });
});
const goGasBillRecharge = useAccessLogin(() => {
  RouteHelper.navigateTo({
    url: `${RouterPath.gasBillRecharge}`,
  });
});
</script>
@@ -37,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>