| | |
| | | <template> |
| | | <PageLayout title="电费充值" class="electricBillRecharge-page-wrapper" hasBorder> |
| | | <InnerPage /> |
| | | <PageLayout |
| | | class="electricBillRecharge-page-wrapper" |
| | | :style=" |
| | | current === 'step2' && { |
| | | backgroundImage: `url(${OssAssets.common.PhoneBillRechargePageBg})`, |
| | | } |
| | | " |
| | | :title="current != 'step2' ? title : ''" |
| | | > |
| | | <template #navigationBar v-if="current === 'step2'"> |
| | | <TransparentNavigationBar |
| | | :title="title" |
| | | :is-absolute="false" |
| | | mode="dark" |
| | | navigationArrowWhite |
| | | > |
| | | </TransparentNavigationBar> |
| | | </template> |
| | | <InnerPage @currentChange="handleCurrentChange" /> |
| | | </PageLayout> |
| | | </template> |
| | | |
| | | <script setup lang="ts"> |
| | | import { PageLayout } from '@/components'; |
| | | import InnerPage from './InnerPage.vue'; |
| | | import { OssAssets } from '@/constants'; |
| | | |
| | | defineOptions({ |
| | | name: 'electricBillRecharge', |
| | | }); |
| | | |
| | | type Current = 'step1' | 'step2'; |
| | | |
| | | const title = '电费充值'; |
| | | |
| | | const current = ref<Current>(); |
| | | |
| | | function handleCurrentChange(val: Current) { |
| | | current.value = val; |
| | | } |
| | | </script> |
| | | |
| | | <style lang="scss"> |
| | | @import '@/styles/common.scss'; |
| | | |
| | | .electricBillRecharge-page-wrapper { |
| | | background-size: 100% 452px; |
| | | background-color: $body-background-color; |
| | | background-repeat: no-repeat; |
| | | } |
| | | </style> |