fix: 修改ui

zhengyiming

1 天以前 c0bcba49bef43b880978ff63b2ac00f1ba5c5c6a

fix: 修改ui

 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; */


 apps/taro/src/components/Layout/PageLayoutWithBg.vue

@@ -1,19 +1,23 @@
<template>
  <div class="page-layout-container">
    <slot name="bg">
      <img :src="OssAssets.common.CommonPageBg" class="common-page-bg" />
    </slot>
  <PageLayout v-bind="props">
    <template #navigationBar>
        <slot name="navigationBar">
      <TransparentNavigationBar :title="title" :is-absolute="false">
        <template #left>
          <slot name="left"></slot>
        </template>
      </TransparentNavigationBar>
    </template>
    <template #bg>
      <img :src="OssAssets.common.CommonPageBg" class="common-page-bg" />
        </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">

 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,
  },
};

 apps/taro/src/components/NavigationBar/TranslateNavigationBar.vue

New file
@@ -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>

 apps/taro/src/hooks/index.ts

@@ -4,3 +4,4 @@
export * from './login';
export * from './infiniteLoading';
export * from './lifepay';
export * from './page';

 apps/taro/src/hooks/page.ts

New file
@@ -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,
  };
}

 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">

 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">

 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">

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


 apps/taro/src/subpackages/recharge/electricBillRecharge/InnerPage.vue

@@ -1,5 +1,4 @@
<template>
  <ContentScrollView hasPaddingTop style="background-color: transparent">
    <electricBillRecharge
      @goPay="goPay"
      :isDev="isDev"
@@ -16,7 +15,6 @@
      @editUserAccount="handleEditUserAccount"
      @currentChange="emit('currentChange', $event)"
    />
  </ContentScrollView>
</template>

<script setup lang="ts">

 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>
    <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" />
  </PageLayout>
    </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;

  .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>

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

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

  .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>

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

@@ -1,5 +1,4 @@
<template>
  <ContentScrollView hasPaddingTop style="background-color: transparent">
    <PhoneBillRecharge
      @goPay="goPay"
      :isDev="isDev"
@@ -16,7 +15,6 @@
      @editUserAccount="handleEditUserAccount"
      @currentChange="emit('currentChange', $event)"
    />
  </ContentScrollView>
</template>

<script setup lang="ts">

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

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

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