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 +++---
apps/taro/src/components/Layout/PageLayout.vue | 49 +----
apps/taro/src/components/Layout/layout.ts | 25 +++
apps/taro/src/subpackages/recharge/electricBillRecharge/electricBillRecharge.vue | 49 +++--
apps/taro/src/components/NavigationBar/TranslateNavigationBar.vue | 60 +++++++
apps/taro/src/pages/mine/index.vue | 4
apps/taro/src/hooks/page.ts | 20 ++
apps/taro/src/subpackages/recharge/electricBillRecharge/InnerPage.vue | 34 ++--
apps/taro/src/subpackages/recharge/gasBillRecharge/gasBillRecharge.vue | 52 +++--
apps/taro/src/components/Layout/PageLayoutWithBg.vue | 39 ++--
apps/taro/src/subpackages/login/components/LoginPageLayout/LoginPageLayout.vue | 4
apps/taro/src/subpackages/recharge/phoneBillRecharge/InnerPage.vue | 34 ++--
apps/taro/src/subpackages/my/dashboard/dashboard.vue | 5
apps/taro/src/hooks/index.ts | 1
apps/taro/src/pages/home/index.vue | 4
packages/components/src/styles/card.scss | 4
16 files changed, 271 insertions(+), 165 deletions(-)
diff --git a/apps/taro/src/components/Layout/PageLayout.vue b/apps/taro/src/components/Layout/PageLayout.vue
index 84a15dd..d67b575 100644
--- a/apps/taro/src/components/Layout/PageLayout.vue
+++ b/apps/taro/src/components/Layout/PageLayout.vue
@@ -1,18 +1,8 @@
<template>
<Portal.Host>
- <div :class="['page-layout-wrapper', { isWeb: isWeb, hasBgColor }]" v-bind="$attrs">
+ <div :class="['page-layout-wrapper', { isWeb: isWeb, hasBgColor }]">
<slot v-if="_showNavigationBar" name="navigationBar">
<CommonNavigationBar v-bind="_commonNavigationBarProps" />
- </slot>
-
- <slot name="bg">
- <div
- v-if="hasLinearBg"
- class="page-layout-linear-bg"
- :style="{
- height: '100%',
- }"
- ></div>
</slot>
<div class="page-layout-scroll-view-wrapper" :style="{ height: scrollViewHeight }">
@@ -48,35 +38,14 @@
import { isWeb, isInAlipay, isInWeChat } from '@/utils/env';
//@ts-ignore
import { setPageTitle } from '@/utils';
+import { pageLayoutProps } from './layout';
defineOptions({
name: 'PageLayout',
inheritAttrs: false,
});
-const props = defineProps({
- ...commonNavigationBarProps,
- needAuth: {
- type: Boolean,
- default: true,
- },
- useView: {
- type: Boolean,
- default: false,
- },
- hasLinearBg: {
- type: Boolean,
- default: false,
- },
- linearBgHeight: {
- type: Number,
- default: 388,
- },
- hasBgColor: {
- type: Boolean,
- default: false,
- },
-});
+const props = defineProps(pageLayoutProps);
setPageTitle(props.title);
@@ -122,6 +91,18 @@
<style lang="scss">
@import '@/styles/common.scss';
+.page-layout-container {
+ height: 100%;
+ position: relative;
+
+ .page-layout-wrapper {
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ z-index: 100;
+ }
+}
+
.page-layout-wrapper {
/* background-color: $body-background-color; */
diff --git a/apps/taro/src/components/Layout/PageLayoutWithBg.vue b/apps/taro/src/components/Layout/PageLayoutWithBg.vue
index 1c6a9a9..281a879 100644
--- a/apps/taro/src/components/Layout/PageLayoutWithBg.vue
+++ b/apps/taro/src/components/Layout/PageLayoutWithBg.vue
@@ -1,19 +1,23 @@
<template>
- <PageLayout v-bind="props">
- <template #navigationBar>
- <TransparentNavigationBar :title="title" :is-absolute="false">
- <template #left>
- <slot name="left"></slot>
- </template>
- </TransparentNavigationBar>
- </template>
- <template #bg>
+ <div class="page-layout-container">
+ <slot name="bg">
<img :src="OssAssets.common.CommonPageBg" class="common-page-bg" />
- </template>
- <template #default="{ scrollViewHeight }">
- <slot :scrollViewHeight="scrollViewHeight" />
- </template>
- </PageLayout>
+ </slot>
+ <PageLayout v-bind="props">
+ <template #navigationBar>
+ <slot name="navigationBar">
+ <TransparentNavigationBar :title="title" :is-absolute="false">
+ <template #left>
+ <slot name="left"></slot>
+ </template>
+ </TransparentNavigationBar>
+ </slot>
+ </template>
+ <template #default="{ scrollViewHeight }">
+ <slot :scrollViewHeight="scrollViewHeight" />
+ </template>
+ </PageLayout>
+ </div>
</template>
<script setup lang="ts">
@@ -21,16 +25,13 @@
import TransparentNavigationBar from '../NavigationBar/TransparentNavigationBar.vue';
import _ from 'lodash';
import { OssAssets } from '@/constants';
+import { pageLayoutProps } from './layout';
defineOptions({
name: 'PageLayoutWithBg',
});
-type Props = {
- title?: string;
-};
-
-const props = withDefaults(defineProps<Props>(), {});
+const props = defineProps(pageLayoutProps);
</script>
<style lang="scss">
diff --git a/apps/taro/src/components/Layout/layout.ts b/apps/taro/src/components/Layout/layout.ts
index a43fe7f..9062962 100644
--- a/apps/taro/src/components/Layout/layout.ts
+++ b/apps/taro/src/components/Layout/layout.ts
@@ -1,4 +1,5 @@
import { PropType } from 'vue';
+import { commonNavigationBarProps } from '../NavigationBar/commonNavigationBar';
export const loadingLayoutProps = {
loading: {
@@ -17,3 +18,27 @@
type: String,
},
};
+
+export const pageLayoutProps = {
+ ...commonNavigationBarProps,
+ needAuth: {
+ type: Boolean,
+ default: true,
+ },
+ useView: {
+ type: Boolean,
+ default: false,
+ },
+ hasLinearBg: {
+ type: Boolean,
+ default: false,
+ },
+ linearBgHeight: {
+ type: Number,
+ default: 388,
+ },
+ hasBgColor: {
+ type: Boolean,
+ default: false,
+ },
+};
diff --git a/apps/taro/src/components/NavigationBar/TranslateNavigationBar.vue b/apps/taro/src/components/NavigationBar/TranslateNavigationBar.vue
new file mode 100644
index 0000000..f385484
--- /dev/null
+++ b/apps/taro/src/components/NavigationBar/TranslateNavigationBar.vue
@@ -0,0 +1,60 @@
+<template>
+ <div class="translate-navigation-bar" :style="barStyle">
+ <TransparentNavigationBar
+ v-bind="_commonNavigationBarProps"
+ :is-absolute="false"
+ mode="dark"
+ navigationArrowWhite
+ :style="{ opacity: 1 - rangeValue }"
+ >
+ </TransparentNavigationBar>
+ <CommonNavigationBar v-bind="_commonNavigationBarProps" :style="{ opacity: rangeValue }" />
+ </div>
+</template>
+
+<script setup lang="ts">
+import { commonNavigationBarProps } from './commonNavigationBar';
+import { useSystemStore } from '@/stores/modules/system';
+import { CSSProperties } from 'vue';
+import TransparentNavigationBar from './TransparentNavigationBar.vue';
+import CommonNavigationBar from './CommonNavigationBar.vue';
+import { usePickProps } from 'senin-mini/hooks';
+
+defineOptions({
+ name: 'TranslateNavigationBar',
+});
+
+const systemStore = useSystemStore();
+
+const props = defineProps({
+ ...commonNavigationBarProps,
+ rangeValue: {
+ type: Number,
+ default: 0,
+ },
+});
+
+const _commonNavigationBarProps = usePickProps(props, commonNavigationBarProps);
+
+const barStyle = computed(() => {
+ return {
+ height: systemStore.navigationBarHeight + 'px',
+ } as CSSProperties;
+});
+</script>
+
+<style lang="scss">
+@import '@/styles/common.scss';
+
+.translate-navigation-bar {
+ position: relative;
+
+ .navigation-bar-wrapper {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ }
+}
+</style>
diff --git a/apps/taro/src/hooks/index.ts b/apps/taro/src/hooks/index.ts
index 60e03be..1b0148f 100644
--- a/apps/taro/src/hooks/index.ts
+++ b/apps/taro/src/hooks/index.ts
@@ -4,3 +4,4 @@
export * from './login';
export * from './infiniteLoading';
export * from './lifepay';
+export * from './page';
diff --git a/apps/taro/src/hooks/page.ts b/apps/taro/src/hooks/page.ts
new file mode 100644
index 0000000..209c96c
--- /dev/null
+++ b/apps/taro/src/hooks/page.ts
@@ -0,0 +1,20 @@
+import { BaseEventOrig, ScrollViewProps } from '@tarojs/components';
+
+type UseScrollRangeOptions = {
+ maxRange?: number;
+};
+
+export function useScrollRange(options: UseScrollRangeOptions = {}) {
+ const { maxRange = 160 } = options;
+
+ const rangeValue = ref(0);
+
+ function scroll(e: BaseEventOrig<ScrollViewProps.onScrollDetail>) {
+ rangeValue.value = Math.min(maxRange, e.detail.scrollTop) / maxRange;
+ }
+
+ return {
+ scroll,
+ rangeValue,
+ };
+}
diff --git a/apps/taro/src/pages/home/index.vue b/apps/taro/src/pages/home/index.vue
index 69dac0f..45bf44c 100644
--- a/apps/taro/src/pages/home/index.vue
+++ b/apps/taro/src/pages/home/index.vue
@@ -1,5 +1,5 @@
<template>
- <PageLayout class="index-page-wrapper" :need-auth="false">
+ <PageLayoutWithBg class="index-page-wrapper" :need-auth="false">
<template #navigationBar>
<TransparentNavigationBar :title="'鐢熸椿缂磋垂'" :is-absolute="false">
</TransparentNavigationBar>
@@ -34,7 +34,7 @@
@gasBillRecharge="goGasBillRecharge"
/>
</ContentView>
- </PageLayout>
+ </PageLayoutWithBg>
</template>
<script setup lang="ts">
diff --git a/apps/taro/src/pages/mine/index.vue b/apps/taro/src/pages/mine/index.vue
index ef455e0..ca824f6 100644
--- a/apps/taro/src/pages/mine/index.vue
+++ b/apps/taro/src/pages/mine/index.vue
@@ -1,5 +1,5 @@
<template>
- <PageLayout class="mine-page-wrapper" :need-auth="false">
+ <PageLayoutWithBg class="mine-page-wrapper" :need-auth="false">
<template #navigationBar>
<TransparentNavigationBar :title="'涓汉涓績'" :is-absolute="false">
</TransparentNavigationBar>
@@ -42,7 +42,7 @@
></ListItemV2>
</List>
</ContentScrollView>
- </PageLayout>
+ </PageLayoutWithBg>
</template>
<script setup lang="ts">
diff --git a/apps/taro/src/subpackages/login/components/LoginPageLayout/LoginPageLayout.vue b/apps/taro/src/subpackages/login/components/LoginPageLayout/LoginPageLayout.vue
index bdf169d..6cd9d4d 100644
--- a/apps/taro/src/subpackages/login/components/LoginPageLayout/LoginPageLayout.vue
+++ b/apps/taro/src/subpackages/login/components/LoginPageLayout/LoginPageLayout.vue
@@ -1,5 +1,5 @@
<template>
- <PageLayout :needAuth="false" class="login-page-layout">
+ <PageLayoutWithBg :needAuth="false" class="login-page-layout">
<template #navigationBar>
<TransparentNavigationBar :title="title" :is-absolute="false"></TransparentNavigationBar>
</template>
@@ -10,7 +10,7 @@
<div class="authorization-page-title">娆㈣繋浣跨敤鐢熸椿缂磋垂骞冲彴</div>
<slot></slot>
- </PageLayout>
+ </PageLayoutWithBg>
</template>
<script setup lang="ts">
diff --git a/apps/taro/src/subpackages/my/dashboard/dashboard.vue b/apps/taro/src/subpackages/my/dashboard/dashboard.vue
index e413dd9..0625ea3 100644
--- a/apps/taro/src/subpackages/my/dashboard/dashboard.vue
+++ b/apps/taro/src/subpackages/my/dashboard/dashboard.vue
@@ -1,5 +1,5 @@
<template>
- <PageLayout class="dashboard-page-wrapper">
+ <PageLayoutWithBg class="dashboard-page-wrapper">
<template #navigationBar>
<TransparentNavigationBar :title="'鏁版嵁鐪嬫澘'" :is-absolute="false">
</TransparentNavigationBar>
@@ -8,11 +8,10 @@
<img :src="OssAssets.common.DataPageBg" class="dashboard-page-bg" />
</template>
<InnerPage />
- </PageLayout>
+ </PageLayoutWithBg>
</template>
<script setup lang="ts">
-import { PageLayout } from '@/components';
import InnerPage from './InnerPage.vue';
import { OssAssets } from '@/constants';
diff --git a/apps/taro/src/subpackages/recharge/electricBillRecharge/InnerPage.vue b/apps/taro/src/subpackages/recharge/electricBillRecharge/InnerPage.vue
index f18a1bd..b75c22a 100644
--- a/apps/taro/src/subpackages/recharge/electricBillRecharge/InnerPage.vue
+++ b/apps/taro/src/subpackages/recharge/electricBillRecharge/InnerPage.vue
@@ -1,22 +1,20 @@
<template>
- <ContentScrollView hasPaddingTop style="background-color: transparent">
- <electricBillRecharge
- @goPay="goPay"
- :isDev="isDev"
- @paySuccess="handePaySuccess"
- :getOpenId="ensureOpenId"
- :isInWeChat="isInWeChat"
- :isInAlipay="isInAlipay"
- :isH5="isWeb"
- :appId="WXPayAppId"
- :isFocus="isFocus"
- :showAliPay="!isInWeChat"
- :showWeixinPay="isInWeChat"
- @missName="handleMissName"
- @editUserAccount="handleEditUserAccount"
- @currentChange="emit('currentChange', $event)"
- />
- </ContentScrollView>
+ <electricBillRecharge
+ @goPay="goPay"
+ :isDev="isDev"
+ @paySuccess="handePaySuccess"
+ :getOpenId="ensureOpenId"
+ :isInWeChat="isInWeChat"
+ :isInAlipay="isInAlipay"
+ :isH5="isWeb"
+ :appId="WXPayAppId"
+ :isFocus="isFocus"
+ :showAliPay="!isInWeChat"
+ :showWeixinPay="isInWeChat"
+ @missName="handleMissName"
+ @editUserAccount="handleEditUserAccount"
+ @currentChange="emit('currentChange', $event)"
+ />
</template>
<script setup lang="ts">
diff --git a/apps/taro/src/subpackages/recharge/electricBillRecharge/electricBillRecharge.vue b/apps/taro/src/subpackages/recharge/electricBillRecharge/electricBillRecharge.vue
index b698085..b3f7870 100644
--- a/apps/taro/src/subpackages/recharge/electricBillRecharge/electricBillRecharge.vue
+++ b/apps/taro/src/subpackages/recharge/electricBillRecharge/electricBillRecharge.vue
@@ -1,30 +1,32 @@
<template>
- <PageLayout
+ <PageLayoutWithBg
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>
+ <TranslateNavigationBar :title="title" :rangeValue="rangeValue"> </TranslateNavigationBar>
</template>
- <InnerPage @currentChange="handleCurrentChange" />
- </PageLayout>
+ <template #bg>
+ <div
+ class="electricBillRecharge-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 InnerPage from './InnerPage.vue';
import { OssAssets } from '@/constants';
+import { useScrollRange } from '@/hooks';
defineOptions({
name: 'electricBillRecharge',
@@ -39,14 +41,25 @@
function handleCurrentChange(val: Current) {
current.value = val;
}
+
+const { rangeValue, scroll } = useScrollRange();
</script>
<style lang="scss">
@import '@/styles/common.scss';
.electricBillRecharge-page-wrapper {
- background-size: 100% 452px;
background-color: $body-background-color;
- background-repeat: no-repeat;
+
+ .electricBillRecharge-page-bg {
+ position: absolute;
+ z-index: 1;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background-size: 100% 452px;
+ background-repeat: no-repeat;
+ }
}
</style>
diff --git a/apps/taro/src/subpackages/recharge/gasBillRecharge/gasBillRecharge.vue b/apps/taro/src/subpackages/recharge/gasBillRecharge/gasBillRecharge.vue
index 437bc9a..0727a4e 100644
--- a/apps/taro/src/subpackages/recharge/gasBillRecharge/gasBillRecharge.vue
+++ b/apps/taro/src/subpackages/recharge/gasBillRecharge/gasBillRecharge.vue
@@ -1,30 +1,29 @@
<template>
- <PageLayout
- class="gasBillRecharge-page-wrapper"
- :style="
- current === 'step3' && {
- backgroundImage: `url(${OssAssets.common.PhoneBillRechargePageBg})`,
- }
- "
- :title="current != 'step3' ? title : ''"
- >
+ <PageLayoutWithBg class="gasBillRecharge-page-wrapper" :title="current != 'step3' ? title : ''">
<template #navigationBar v-if="current === 'step3'">
- <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="gasBillRecharge-page-bg"
+ :style="
+ current === 'step3' && {
+ 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 InnerPage from './InnerPage.vue';
import { OssAssets } from '@/constants';
+import { useScrollRange } from '@/hooks';
defineOptions({
name: 'gasBillRecharge',
@@ -39,14 +38,25 @@
function handleCurrentChange(val: Current) {
current.value = val;
}
+
+const { rangeValue, scroll } = useScrollRange();
</script>
<style lang="scss">
@import '@/styles/common.scss';
.gasBillRecharge-page-wrapper {
- background-size: 100% 452px;
background-color: $body-background-color;
- background-repeat: no-repeat;
+
+ .gasBillRecharge-page-bg {
+ position: absolute;
+ z-index: 1;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background-size: 100% 452px;
+ background-repeat: no-repeat;
+ }
}
</style>
diff --git a/apps/taro/src/subpackages/recharge/phoneBillRecharge/InnerPage.vue b/apps/taro/src/subpackages/recharge/phoneBillRecharge/InnerPage.vue
index 43d37f9..c9d8bc4 100644
--- a/apps/taro/src/subpackages/recharge/phoneBillRecharge/InnerPage.vue
+++ b/apps/taro/src/subpackages/recharge/phoneBillRecharge/InnerPage.vue
@@ -1,22 +1,20 @@
<template>
- <ContentScrollView hasPaddingTop style="background-color: transparent">
- <PhoneBillRecharge
- @goPay="goPay"
- :isDev="isDev"
- @paySuccess="handePaySuccess"
- :getOpenId="ensureOpenId"
- :isInWeChat="isInWeChat"
- :isInAlipay="isInAlipay"
- :isH5="isWeb"
- :appId="WXPayAppId"
- :isFocus="isFocus"
- :showAliPay="!isInWeChat"
- :showWeixinPay="isInWeChat"
- @missName="handleMissName"
- @editUserAccount="handleEditUserAccount"
- @currentChange="emit('currentChange', $event)"
- />
- </ContentScrollView>
+ <PhoneBillRecharge
+ @goPay="goPay"
+ :isDev="isDev"
+ @paySuccess="handePaySuccess"
+ :getOpenId="ensureOpenId"
+ :isInWeChat="isInWeChat"
+ :isInAlipay="isInAlipay"
+ :isH5="isWeb"
+ :appId="WXPayAppId"
+ :isFocus="isFocus"
+ :showAliPay="!isInWeChat"
+ :showWeixinPay="isInWeChat"
+ @missName="handleMissName"
+ @editUserAccount="handleEditUserAccount"
+ @currentChange="emit('currentChange', $event)"
+ />
</template>
<script setup lang="ts">
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>
diff --git a/packages/components/src/styles/card.scss b/packages/components/src/styles/card.scss
index d56188b..e5a530d 100644
--- a/packages/components/src/styles/card.scss
+++ b/packages/components/src/styles/card.scss
@@ -205,7 +205,7 @@
font-weight: 400;
line-height: 48px;
margin-bottom: 14px;
- color: boleGetCssVar('text-color', 'primary');
+ color: boleGetCssVar('text-color', 'regular');
@include ellipsis;
}
@@ -236,7 +236,7 @@
.user-account-card-action-text {
font-size: 26px;
line-height: 36px;
- color: boleGetCssVar('text-color', 'regular');
+ color: #777;
}
}
--
Gitblit v1.9.1