feat: UI

wupengfei

13 小时以前 2500843dbffc841eeab2e0a91d735c56cb6ea357

 apps/taro/src/subpackages/my/promotionQrcode/InnerPage.vue

@@ -1,13 +1,15 @@
<template>
  <ContentView>
    <!-- <div class="promotion-qrcode-content" :style="barStyle">
      <div class="promotion-qrcode-content-qrcode">
        <ShareQrcodeView :channles-num="userChannles[0]?.channlesNum" />
    <div class="promotion-qrcode-content" :style="barStyle">
      <div
        class="promotion-qrcode-content-qrcode"
        :style="{ backgroundImage: `url(${OssAssets.common.PromotionQrcodeContentBG})` }"
      >
        <ShareQrcodeView :channles-num="userChannles[0]?.channlesNum" :size="148" />
        <div class="promotion-qrcode-content-qrcode-tips">长按二维码分享好友</div>
      </div>
      <div class="promotion-qrcode-content-btn">点击下载二维码</div>
    </div> -->
    <ResultWithoutBG></ResultWithoutBG>
    </div>
  </ContentView>
</template>

@@ -17,6 +19,7 @@
import { isWeb } from '@/utils/env';
import { useSystemStore } from '@/stores/modules/system';
import { CSSProperties } from 'vue';
import { OssAssets } from '@/constants';

defineOptions({
  name: 'InnerPage',
@@ -43,7 +46,7 @@
  () =>
    ({
      paddingTop: systemStore.info.statusBarHeight + 'px',
      // height: systemStore.navigationBarHeight + 'px',
      backgroundImage: `url(${OssAssets.common.PromotionQrcodeContentBG})`,
    } as CSSProperties)
);
</script>
@@ -56,7 +59,6 @@
    margin-top: 306px;
    width: 100%;
    height: 788px;
    background-image: url('https://renliyuan.oss-cn-hangzhou.aliyuncs.com/12333/lifePayment/assets/common/icon-promotion-qrcode-content-bg.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    display: flex;
@@ -71,17 +73,19 @@
    display: flex;
    flex-direction: column;
    align-items: center;
    background: linear-gradient(180deg, #d4effe 0%, rgba(227, 251, 255, 0) 100%);
    border-radius: 44px 44px 44px 44px;
    border: 5px solid;
    border-image: linear-gradient(180deg, rgba(76, 198, 255, 1), rgba(241, 252, 255, 0)) 5 5;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: relative;
  }

  .promotion-qrcode-content-qrcode-tips {
    margin-bottom: -22px;
    font-size: 32px;
    font-weight: bold;
    background: linear-gradient(0deg, #63654c 0%, #101f23 39%, #101f23 55%, #0082d3 100%);
    position: absolute;
    bottom: -22px;
    background: linear-gradient(0.25turn, #63654c 0%, #101f23 39%, #101f23 55%, #0082d3 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .promotion-qrcode-content-btn {
@@ -99,6 +103,7 @@
  }

  .share-qrcode-view {
    margin-top: 60px;
    padding: 0;
  }
}