You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
128 lines
2.7 KiB
128 lines
2.7 KiB
4 years ago
|
<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>
|