From 85cdbcb22f064639d08b7bbfa0e212cdc8837af6 Mon Sep 17 00:00:00 2001
From: wupengfei <834520024@qq.com>
Date: 星期四, 05 六月 2025 16:25:00 +0800
Subject: [PATCH] feat: UI
---
apps/taro/src/subpackages/my/promotionQrcode/InnerPage.vue | 42 ++++++++++++++++++++++++------------------
1 files changed, 24 insertions(+), 18 deletions(-)
diff --git a/apps/taro/src/subpackages/my/promotionQrcode/InnerPage.vue b/apps/taro/src/subpackages/my/promotionQrcode/InnerPage.vue
index 183db04..ee5a193 100644
--- a/apps/taro/src/subpackages/my/promotionQrcode/InnerPage.vue
+++ b/apps/taro/src/subpackages/my/promotionQrcode/InnerPage.vue
@@ -1,22 +1,25 @@
<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.PromotionQrcodeCodeBG})` }"
+ >
+ <ShareQrcodeView :channles-num="userChannles[0]?.channlesNum" :size="150" />
<div class="promotion-qrcode-content-qrcode-tips">闀挎寜浜岀淮鐮佸垎浜ソ鍙�</div>
</div>
<div class="promotion-qrcode-content-btn">鐐瑰嚮涓嬭浇浜岀淮鐮�</div>
- </div> -->
- <ResultWithoutBG></ResultWithoutBG>
+ </div>
</ContentView>
</template>
<script setup lang="ts">
import { ShareQrcodeView, ResultWithoutBG } from '@life-payment/components';
import { useLifeRechargeContext } from '@life-payment/core-vue';
-import { isWeb } from '@/utils/env';
+import Taro from '@tarojs/taro';
import { useSystemStore } from '@/stores/modules/system';
-import { CSSProperties } from 'vue';
+import { CSSProperties, useTemplateRef } 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>
@@ -53,10 +56,9 @@
.promotion-qrcode-page-wrapper {
.promotion-qrcode-content {
- margin-top: 306px;
+ margin-top: 400px;
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;
@@ -66,22 +68,25 @@
}
.promotion-qrcode-content-qrcode {
- width: 432px;
- height: 432px;
+ width: 440px;
+ height: 438px;
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;
+ justify-content: center;
+ 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 +104,7 @@
}
.share-qrcode-view {
+ margin-top: -20px;
padding: 0;
}
}
--
Gitblit v1.9.1