<template>
|
<PageLayoutWithBg 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>
|
</template>
|
|
<script setup lang="ts">
|
import { useAccessLogin } from '@/hooks';
|
import { useUserStore } from '@/stores/modules/user';
|
import Taro from '@tarojs/taro';
|
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(() => {
|
RouteHelper.navigateTo({
|
url: `${RouterPath.phoneBillRecharge}`,
|
});
|
});
|
const goElectricityBillRecharge = useAccessLogin(() => {
|
RouteHelper.navigateTo({
|
url: `${RouterPath.electricBillRecharge}`,
|
});
|
});
|
const goGasBillRecharge = useAccessLogin(() => {
|
RouteHelper.navigateTo({
|
url: `${RouterPath.gasBillRecharge}`,
|
});
|
});
|
</script>
|
|
<style lang="scss">
|
@import '@/styles/common.scss';
|
|
.index-page-wrapper {
|
.home-page-bg {
|
position: fixed;
|
z-index: -1;
|
top: 0;
|
left: 0;
|
width: 100%;
|
height: 100%;
|
object-fit: cover;
|
}
|
|
.home-page-banner-wrapper {
|
display: flex;
|
position: relative;
|
margin-bottom: -18px;
|
|
.home-page-banner-left {
|
flex: 1;
|
padding-top: 32px;
|
min-width: 0;
|
|
.home-page-banner-logo {
|
width: 240px;
|
height: 56px;
|
margin-bottom: 32px;
|
}
|
|
.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-page-banner {
|
width: 256px;
|
height: 256px;
|
margin-top: -16px;
|
}
|
}
|
}
|
</style>
|
