优化代码

2024-05-27 16:58:04 +08:00
parent d67ab4d9b6
commit 91d22d5e7d
9 changed files with 521 additions and 28 deletions
--- a/pages/member/billDetails.vue
+++ b/pages/member/billDetails.vue
@@ -0,0 +1,100 @@
+<template>
+	<!-- 账单明细 -->
+	<view>
+		<view class="bild">
+			<view class="bildLeft">
+				<text>充值金额</text>
+				<view>12</view>
+			</view>
+			<view class="bildRight">
+				<text>剩余次数（次）</text>
+				<view>12</view>
+			</view>
+		</view>
+		<view class="navTop">
+			<view @click="clickEvent(1)">
+				充值
+				<view :class="[active==1?'xian':'']" style="left: 8rpx;"> </view>
+			</view>
+			<view @click="clickEvent(2)">
+				消费
+				<view :class="[active==2?'xian':'']" style="left: 8rpx;"> </view>
+			</view>
+		</view>
+		<view class="listStyle">
+			<image :src="request('./1.png')" style="width: 76rpx;height: 76rpx;float: left;" mode=""></image>
+			<view style="float: left;">
+				<text>阿什顿</text>
+				<text>阿什顿</text>
+				<text>阿什顿</text>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				active: 1
+			}
+		},
+		methods: {
+			clickEvent(i) {
+				this.active = i
+			}
+		}
+	}
+</script>
+
+<style scoped lang="less">
+	.bild {
+		height: 488rpx;
+		background-image: url('https://czg-qr-order.oss-cn-beijing.aliyuncs.com/drder/czmxbg.png');
+		display: flex;
+		justify-content: space-around;
+		align-items: center;
+
+		.bildLeft,
+		.bildRight {
+			font-weight: 400;
+			font-size: 32rpx;
+
+			>view,
+			>text {
+				text-align: center;
+				color: rgba(255, 255, 255, 0.7);
+			}
+
+			>view {
+				margin-top: 34rpx;
+				font-weight: bold;
+			}
+		}
+	}
+
+	.navTop {
+		display: flex;
+		justify-content: space-around;
+		align-items: center;
+		color: #fff;
+		margin-top: -50rpx;
+		padding: 0 120rpx;
+
+		>view {
+			position: relative;
+
+			.xian {
+				width: 58rpx;
+				height: 6rpx;
+				background: #F1CB66;
+				border-radius: 2rpx 2rpx 2rpx 2rpx;
+				position: absolute;
+				bottom: -6rpx;
+			}
+		}
+
+	}
+
+	.listStyle {}
+</style>