<template>
	<view>
		<view class="content text-left padding">
			<view class="strong padding-bottom-xs color-333 ">
				{{'oilSiteName'}}
			</view>
			<view class="font-12 color-999">
				<text class="padding-right">1.32km</text> | <text class="padding-left text-cut">紫云路与金寨南路交口向西200...</text>
			</view>
		</view>
		<view class="padding-left padding-right">
			<view class="padding-bottom-sm">
				油号选择：
			</view>
			<view class="grid col-5 justify-start">
				<view class="padding-xs" v-for="(item,index) in ColorList" :key="index">
					<button class="cu-btn" :class="[active===index?'bg-main-oil':'line-gray']">92#</button>
				</view>
			</view>
		</view>
		<view class="padding-top-xs padding-left padding-right">
			<text class="strong padding-right font-16">
				0#柴油
			</text>
			<text class="padding-right">星油价格:<text class="oil-main-color text-bold">￥6.41/L</text></text>
			<text class="s-rich">市场价:￥6.5/L</text>
		</view>
		<view class="padding-left padding-right">
			<view class="padding-bottom-sm">
				油枪选择：
			</view>
			<view class="grid col-5 justify-start">

				<view class="padding-xs" v-for="(item,index) in ColorList" :key="index">
					<button class="cu-btn" :class="[active===index?'bg-main-oil':'line-gray']">{{index}}</button>
				</view>
			</view>
		</view>

		<view class="solid-top margin-top-sm shadow-warp">
			<view class="cu-form-group">
				<view class="title">加油升数</view>
				<input type="number" placeholder="请输入加油升数" name="input"></input>
				<text>约￥0.00</text>
			</view>
			<view class="my-cell">
				<text class="font-12">星卡优惠金额</text><text class="fr">-￥0.00</text>
			</view>
			<view class="my-cell">
				<text class="font-12">实际支付金额</text><text class="oil-main-color fr">￥0.00</text>
			</view>
		</view>
		<button class="margin  round bg-main-oil">确定</button>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				active: 0,
				ColorList: [1, 2, 9, 10]
			}
		}
	}
</script>

<style scoped>
	.page-content {
		background-color: #F1F2F7;
		min-height: 100%;
		position: relative;
	}

	.navigation {
		position: absolute;
		right: 16px;
		top: 10px;
	}

	.icon-self {
		width: 1rem;
		height: 1rem;
	}

	.oil-price {
		position: relative;
	}

	.oil-price radio {
		position: absolute;
		left: 0rem;
		top: 10px;
	}

	.qr-icon {
		font-size: 2rem;
	}

	.pay-desc {
		line-height: 2rem;
	}

	.bottom-pay {
		min-height: 100rpx;
		width: 750upx;
	}

	.pay-bar {
		width: 750upx;
		position: absolute;
		bottom: 0;
	}

	.money-container {
		position: relative;
	}

	.money-position {
		position: absolute;
		top: 0;
		right: 0;
		display: block;
		border-radius: 0 0 0 100upx;
	}
</style>
