fix: 修改ui

zhengyiming

1 天以前 c0bcba49bef43b880978ff63b2ac00f1ba5c5c6a

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

@@ -1,28 +1,27 @@
<template>
  <PageLayout
    class="phoneBillRecharge-page-wrapper"
    :style="
      current === 'step2' && {
        backgroundImage: `url(${OssAssets.common.PhoneBillRechargePageBg})`,
      }
    "
    :title="current != 'step2' ? title : ''"
  >
  <PageLayoutWithBg class="phoneBillRecharge-page-wrapper" :title="current != 'step2' ? title : ''">
    <template #navigationBar v-if="current === 'step2'">
      <TransparentNavigationBar
        :title="title"
        :is-absolute="false"
        mode="dark"
        navigationArrowWhite
      >
      </TransparentNavigationBar>
      <TranslateNavigationBar :title="title" :rangeValue="rangeValue"> </TranslateNavigationBar>
    </template>
    <InnerPage @currentChange="handleCurrentChange" />
  </PageLayout>
    <template #bg>
      <div
        class="phoneBillRecharge-page-bg"
        :style="
          current === 'step2' && {
            backgroundImage: `url(${OssAssets.common.PhoneBillRechargePageBg})`,
            opacity: 1 - rangeValue,
          }
        "
      ></div>
    </template>
    <ContentScrollView hasPaddingTop style="background-color: transparent" @scroll="scroll">
      <InnerPage @currentChange="handleCurrentChange" />
    </ContentScrollView>
  </PageLayoutWithBg>
</template>

<script setup lang="ts">
import { PageLayout } from '@/components';
import { useScrollRange } from '@/hooks';
import InnerPage from './InnerPage.vue';
import { OssAssets } from '@/constants';

@@ -39,24 +38,25 @@
function handleCurrentChange(val: Current) {
  current.value = val;
}

const { rangeValue, scroll } = useScrollRange();
</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;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 452px;
    object-fit: cover;
    right: 0;
    bottom: 0;
    background-size: 100% 452px;
    background-repeat: no-repeat;
  }
}
</style>