<template>
	<view class="centenr">
		<view class="Candywrapper">
			<view class="title_">中建锦绣二期站</view>
			<view class="title_">选择油品油枪</view>
			<view class="input_k">
				<view class="input_sz" @click="show = true">
					汽油92#1号枪
				</view>
				<view class="rr-box">小王</view>
			</view>
			<view class="title_">加油金额</view>
			<view class="input_k">
				<view class="input_sz">
					<input type="text" placeholder="金额" />
				</view>
				<view class="rr-box">36.55L</view>
			</view>
			<view class="title_">付款备注</view>
			<view class="input_k"></view>
			<view class="x_"></view>
			<view class="title_">支付方式</view>
			<view class="d_box">
				<image src="../../static/icon/hyk.png" style="width: 35px; height: 35px; "></image>
				<div class="r-bot">
					<view class="">
						<view class="">会员卡类型</view>
						<view class="">储值卡（余额：6532.89）</view>
					</view>
					<u-icon name="arrow-right" size="18"></u-icon>
				</div>
			</view>
		</view>
		<u-picker :show="show" :columns="columns" @cancel='cancel' @confirm='confirm'></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				columns: [
					['汽油95#1号枪', '汽油98#1号枪', '汽油92#1号枪']
				],
			}
		},
		methods: {
			cancel() {
				this.show = false
			},
			confirm() {
				this.show = false
			}
		}
	}
</script>

<style scoped lang="scss">
	.centenr {}

	.Candywrapper {

		box-sizing: border-box;
		padding: 10px;
	}

	.title_ {
		margin: 10px 0px;
		font-size: 16px;
		font-weight: bold;
	}

	.input_k {
		width: 100%;
		border-radius: 4px;
		border: 1px solid #EEEEEE;
		height: 40px;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.rr-box {
		width: 80px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-left: 1px solid #EEEEEE;
	}

	.input_sz {
		width: 100%;
		display: flex;
		align-items: center;
		margin-left: 10px;
	}

	.x_ {
		margin: 10px auto;
		border-bottom: 1px solid #EEEEEE;
	}

	.d_box {
		width: 100%;
		box-sizing: border-box;
		padding: 10px 0px;
		border-bottom: 1px solid #EEEEEE;
	}

	.r-bot {
		width: 80%;
		display: flex;
		align-items: center;
		justify-content: space-between;


	}
</style>