From c0bcba49bef43b880978ff63b2ac00f1ba5c5c6a Mon Sep 17 00:00:00 2001
From: zhengyiming <540361168@qq.com>
Date: 星期三, 21 五月 2025 16:13:59 +0800
Subject: [PATCH] fix: 修改ui
---
apps/taro/src/subpackages/recharge/phoneBillRecharge/phoneBillRecharge.vue | 52 ++++++++++++++++++++++++++--------------------------
1 files changed, 26 insertions(+), 26 deletions(-)
diff --git a/apps/taro/src/subpackages/recharge/phoneBillRecharge/phoneBillRecharge.vue b/apps/taro/src/subpackages/recharge/phoneBillRecharge/phoneBillRecharge.vue
index 7b96c66..f3cdb5a 100644
--- a/apps/taro/src/subpackages/recharge/phoneBillRecharge/phoneBillRecharge.vue
+++ b/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>
--
Gitblit v1.9.1