oil-station/gasStation-uni/pagesHome/memberRecharge/index.vue

<template>
	<view class="centenr">
		<view class="vip-top">
			<view class="t-right">储值卡 <u-icon name="arrow-down-fill" color="#fff" size="12"></u-icon> </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;" @click="show = true"></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">
				<input type="text">
			</view>
		</view>
		<view class="input-box">
			<view class="i-title">充值备注</view>
			<view class="b_input">
				<input type="text">
			</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>
		<u-popup :show="show" :closeable="true" :round="10" mode="bottom" @close="close">
			<view class="_tbox">
				<view class="_btop">选择油站</view>
				<view class="input_sou">
					<input type="text" placeholder="请输入油站" />
					<u-icon name="search" size="18px"></u-icon>
				</view>
				<view class="h_box" v-for="(item,index) in 4" :key="index">
					<view class="">测试A店</view>
					<view class="">129.9km</view>
				</view>

			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				windex: 0
			}
		},
		methods: {
			close() {
				this.show = false
			},
			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;

	}

	._tbox {
		border-radius: 10px;
		background: #fff;
		width: 100%;


	}

	._btop {
		box-sizing: border-box;
		padding: 15px;
		border-bottom: 1px solid #EEEEEE;
		text-align: center;
		font-weight: 600;
		font-size: 14px;
		color: #333333;
	}

	.input_sou {
		width: 95%;
		border: 1px solid #EEEEEE;
		border-radius: 50px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 5px 10px;
		margin: 15px auto;
	}

	.h_box {
		border-bottom: 1px solid #EEEEEE;
		box-sizing: border-box;
		padding: 5px 15px;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
</style>