| | |
| | | <template> |
| | | <PageLayout title="燃气充值" class="gasBillRecharge-page-wrapper" hasBorder> |
| | | <InnerPage /> |
| | | <PageLayout |
| | | class="gasBillRecharge-page-wrapper" |
| | | :style=" |
| | | current === 'step3' && { |
| | | backgroundImage: `url(${OssAssets.common.PhoneBillRechargePageBg})`, |
| | | } |
| | | " |
| | | :title="current != 'step3' ? title : ''" |
| | | > |
| | | <template #navigationBar v-if="current === 'step3'"> |
| | | <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: 'gasBillRecharge', |
| | | }); |
| | | |
| | | type Current = 'step1' | 'step2' | 'step3'; |
| | | |
| | | const title = '燃气充值'; |
| | | |
| | | const current = ref<Current>(); |
| | | |
| | | function handleCurrentChange(val: Current) { |
| | | current.value = val; |
| | | } |
| | | </script> |
| | | |
| | | <style lang="scss"> |
| | | @import '@/styles/common.scss'; |
| | | |
| | | .gasBillRecharge-page-wrapper { |
| | | background-size: 100% 452px; |
| | | background-color: $body-background-color; |
| | | background-repeat: no-repeat; |
| | | } |
| | | </style> |