Merge remote-tracking branch 'origin/main'

gasStation-uni/pagesHome/memberRecharge/index.vue

@@ -0,0 +1,226 @@
+<template>
+	<view class="centenr">
+		<view class="vip-top">
+			<view class="t-right">储值卡</view>
+			<view class="t-title">当前余额（元）</view>
+			<view class="t-num">123456.98</view>
+		</view>
+		<view class="vip-title">
+			<view class="">中建锦绣二期站</view>
+			<image src="../../static/new/qh.png" style="width: 18px; height: 18px; "></image>
+		</view>
+		<view class="input-box">
+			<view class="i-title">充值金额</view>
+			<view class="n_input">
+				<input type="text">
+				<view class="r-title">
+					人名
+				</view>
+			</view>
+		</view>
+		<view class="wrap_box">
+			<view class="w_box" v-for="(item,index) in 4" :key="index" @click="setIndex(index)"
+				:class="{ 'acvit' :windex  == index}">
+				<view class="">充5000元</view>
+				<view class="">赠400元</view>
+			</view>
+		</view>
+		<view class="input-box">
+			<view class="i-title">赠送金额</view>
+			<view class="n_input"></view>
+		</view>
+		<view class="input-box">
+			<view class="i-title">充值备注</view>
+			<view class="b_input"></view>
+		</view>
+		<view class="title-box">
+			<view class="i-title">充值备注</view>
+			<view class="i-text">充值10000元赠送1000元</view>
+			<view class="i-text">充值5000元赠送400元</view>
+			<view class="i-text">充值3000元赠送200元</view>
+		</view>
+		<view class="k-box">
+			<view class="i-title">充值规则</view>
+		</view>
+
+		<view style="width: 100%; height: 88px; "></view>
+		<view class="bottom_">
+			<view class="anniu_">
+				立即充值10000元
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				windex: 0
+			}
+		},
+		methods: {
+			setIndex(index) {
+				this.windex = index
+			}
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	.centenr {}
+
+	.vip-top {
+		width: 95%;
+		height: 90px;
+		background: url('../../static/imgs/topback.png') no-repeat;
+		background-size: 100% 100%;
+		margin: 15px auto;
+		overflow: hidden;
+		border-radius: 4px;
+		color: #fff;
+		box-sizing: border-box;
+		padding: 10px;
+	}
+
+	.t-right {
+		display: flex;
+		width: 100%;
+		align-items: center;
+		justify-content: flex-end;
+		font-size: 14px;
+	}
+
+	.t-title {
+		font-size: 14px;
+		color: #FFFFFF;
+		margin-bottom: 5px;
+	}
+
+	.t-num {
+		font-size: 20px;
+		color: #FFFFFF;
+	}
+
+	.vip-title {
+		width: 95%;
+		margin: 15px auto;
+		font-weight: bold;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		font-size: 16px;
+		color: #333333;
+	}
+
+	.n_input {
+		width: 95%;
+		height: 40px;
+		background: #FAFAFA;
+		border-radius: 4px;
+		border: 1px solid #EEEEEE;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		box-sizing: border-box;
+		padding-left: 10px;
+	}
+
+	.b_input {
+		width: 95%;
+		height: 40px;
+		background: #fff;
+		border-radius: 4px;
+		border: 1px solid #EEEEEE;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+	}
+
+	.input-box {
+		width: 95%;
+		margin: 15px auto;
+	}
+
+	.title-box {
+		border-top: 1px solid #EEEEEE;
+		border-bottom: 1px solid #EEEEEE;
+		box-sizing: border-box;
+		padding: 15px 10px;
+	}
+
+	.bottom_ {
+		width: 100%;
+		position: fixed;
+		bottom: 0px;
+		left: 0px;
+		background: #fff;
+		height: 80px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.wrap_box {
+		width: 95%;
+		margin: 15px auto;
+		display: flex;
+		flex-wrap: wrap;
+
+	}
+
+	.w_box {
+		width: 31%;
+		border: 1px solid #EEEEEE;
+		border-radius: 4px;
+		text-align: center;
+		color: #333333;
+		box-sizing: border-box;
+		padding: 5px;
+		font-size: 14px;
+		margin-bottom: 15px;
+		margin-right: 1%;
+	}
+
+	.anniu_ {
+		width: 80%;
+		height: 35px;
+		background: #FF9655;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		color: #fff;
+		border-radius: 50px;
+		color: #fff;
+	}
+
+	.i-title {
+		font-weight: 600;
+		font-size: 14px;
+		color: #333333;
+		margin-bottom: 15px;
+	}
+
+	.k-box {
+		width: 100%;
+		box-sizing: border-box;
+		padding: 15px 10px;
+	}
+
+	.acvit {
+		background: #FF9655 !important;
+		color: #fff !important;
+	}
+
+	.r-title {
+		border-left: 1px solid #eee;
+		width: 60px;
+		height: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		font-size: 14px;
+		color: #333333;
+
+	}
+</style>