优化问题

2024-05-30 09:12:02 +08:00
parent 66e15baaee
commit cb7d853707
8 changed files with 296 additions and 146 deletions
--- a/pages/member/components/card.vue
+++ b/pages/member/components/card.vue
@@ -0,0 +1,163 @@
+<template>
+	<view class="towcontentitem">
+		<view class="towcontentitemone flex-start">
+			<image class="towcontentitemoneimage" :src="userInfo.logo" mode="aspectFill"></image>
+			<view class="towcontentitemonetext flex-colum-start">
+				<text class="towcontentitemonetextone">{{userInfo.chainName || '暂无昵称'}}</text>
+			</view>
+		</view>
+		<view class="towcontentitemthere flex-start">
+			余额：<text class="towcontentitemtheretext">{{userInfo.amount || '0.00'}}</text>
+
+		</view>
+		<view class="towcontentitemtow flex-between">
+			<text class="towcontentitemtowetext">VIP{{userInfo.code || '无'}}</text>
+		</view>
+		<view class="towcontentitevip">
+			VIP{{userInfo.is_vip}}
+		</view>
+		<image src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/drder/erweima.png" class="imgStyle" mode=""
+			@click="clickEvent"></image>
+	</view>
+</template>
+
+<script>
+	export default {
+		props: ['userInfo'],
+		data() {
+			return {}
+		},
+		methods: {
+			clickEvent() {
+				uni.navigateTo({
+					url: '/pages/pay_code/pay_code?shopInfo='+JSON.stringify(this.userInfo)
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.towcontentitem {
+		width: 100%;
+		position: relative;
+		padding: 32rpx;
+		border-radius: 12rpx;
+		background: linear-gradient(126deg, #FFFBF2 0%, #F2D093 100%);
+		border-radius: 12rpx 12rpx 12rpx 12rpx;
+
+		&::after {
+			position: absolute;
+			bottom: 0;
+			right: 68rpx;
+			content: '';
+			display: inline-block;
+			width: 240rpx;
+			height: 232rpx;
+			background: url(https://czg-qr-order.oss-cn-beijing.aliyuncs.com/member.png) no-repeat;
+			background-size: 100% 100%;
+		}
+
+		.towcontentitemimage {
+			top: 0;
+			left: 0;
+			position: absolute;
+			width: 100%;
+			height: 100%;
+			border-radius: 12rpx;
+			z-index: 5;
+		}
+
+		.towcontentitemone {
+			width: 100%;
+			position: relative;
+			z-index: 9;
+
+			.towcontentitemoneimage {
+				width: 76rpx;
+				height: 76rpx;
+				border-radius: 50%;
+			}
+
+
+
+			.towcontentitemonetext {
+				height: 76rpx;
+				margin-left: 16rpx;
+
+				.towcontentitemonetextone {
+					font-family: Source Han Sans CN, Source Han Sans CN;
+					font-weight: 500;
+					font-size: 36rpx;
+					color: #333333;
+				}
+
+				.towcontentitemonetexttow {
+					font-size: 24rpx;
+					font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+					font-weight: 400;
+					color: #422A07;
+				}
+
+			}
+		}
+
+		.towcontentitemprogressa {
+			padding: 8rpx 44rpx;
+			z-index: 10;
+			position: relative;
+			margin-top: 54rpx;
+		}
+
+		.towcontentitemtow {
+			margin-top: 84rpx;
+			z-index: 10;
+			font-size: 24rpx;
+			font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+			font-weight: 400;
+			color: #422A07;
+		}
+
+		.towcontentitevip {
+			position: absolute;
+			right: 0;
+			top: 0;
+			width: 92rpx;
+			height: 40rpx;
+			font-size: 20rpx;
+			background: #F4C380;
+			border-radius: 0rpx 12rpx 0rpx 12rpx;
+			text-align: center;
+			line-height: 40rpx;
+			color: #fff;
+			font-family: Source Han Sans CN-Medium;
+			font-weight: Medium;
+
+		}
+
+		.towcontentitemthere {
+			margin-left: 92rpx;
+			font-family: Source Han Sans CN, Source Han Sans CN;
+			font-weight: Medium;
+			font-size: 24rpx;
+			color: #333333;
+
+			.towcontentitemtheretext {
+				font-family: Source Han Sans CN, Source Han Sans CN;
+				font-weight: bold;
+				font-size: 36rpx;
+				color: #333333;
+			}
+		}
+	}
+
+	.imgStyle {
+		width: 54rpx;
+		height: 52rpx;
+		position: absolute;
+		right: 50rpx;
+		bottom: 30rpx;
+		// border: 2px solid #fff;
+		z-index: 666;
+	}
+</style>