fix: 修改首页ui

zhengyiming

3 天以前 80dc90be027ee26869c63860b7d6a0759a03546b

 apps/taro/src/subpackages/recharge/phoneBillRecharge/phoneBillRecharge.vue

@@ -1,14 +1,62 @@
<template>
  <PageLayout title="话费充值" class="phoneBillRecharge-page-wrapper" hasBorder>
    <InnerPage />
  <PageLayout
    class="phoneBillRecharge-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: 'phoneBillRecharge',
});

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

.phoneBillRecharge-page-wrapper {
  background-size: 100% 452px;
  background-color: $body-background-color;
  background-repeat: no-repeat;

  .phoneBillRecharge-page-bg {
    position: fixed;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 452px;
    object-fit: cover;
  }
}
</style>