197 lines
3.9 KiB
Vue
197 lines
3.9 KiB
Vue
<template>
|
||
<view class="page">
|
||
<u-navbar title="收费方式" :border-bottom="false" :background="bgc" back-icon-color="#262B37" title-color='#262B37'
|
||
title-size='36' height='50' id="navbar">
|
||
</u-navbar>
|
||
<view class="list">
|
||
<view class="item_list">
|
||
<view class="shoufei">
|
||
<view class="shang">
|
||
<view class="">
|
||
收费方式1 (套餐收费)
|
||
</view>
|
||
</view>
|
||
<view class="shichang">
|
||
<view class="stop">
|
||
<view class="">
|
||
套餐时长
|
||
</view>
|
||
<view class="">
|
||
套餐价格(元)
|
||
</view>
|
||
</view>
|
||
<view class="stop" v-for="(item,index) in 4" :key="index" style="background-color: #F9F9F9;">
|
||
<view class="">
|
||
3小时
|
||
</view>
|
||
<view class="">
|
||
99.9
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="wz">
|
||
注：订单提前结束剩余消费时长、金额不返还
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="item_list">
|
||
<view class="shoufei">
|
||
<view class="shang">
|
||
<view class="">
|
||
收费方式2 (单价收费)
|
||
</view>
|
||
</view>
|
||
<view class="price">
|
||
5元/小时，最低消费2小时，押金金额100元
|
||
</view>
|
||
<view class="shuom">
|
||
(订单结束30分钟内退还)注：订单提前结束剩余消费时 长、金额不返还
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="anniu">
|
||
<view class="queren" @click="btnqd">
|
||
确定
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
bgc: {
|
||
backgroundColor: "#fff",
|
||
},
|
||
}
|
||
},
|
||
onLoad() {
|
||
|
||
},
|
||
methods: {
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
/deep/ .u-iconfont,
|
||
/deep/ .u-title{
|
||
padding-bottom: 20rpx;
|
||
}
|
||
page {
|
||
background: #F6F6F6;
|
||
}
|
||
.anniu{
|
||
width: 750rpx;
|
||
height: 152rpx;
|
||
background: #FFFFFF;
|
||
box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(0,0,0,0.3);
|
||
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
||
position: fixed;
|
||
left: 0;
|
||
bottom: 0;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 0 36rpx;
|
||
box-sizing: border-box;
|
||
.queren{
|
||
width: 680rpx;
|
||
margin: auto;
|
||
height: 104rpx;
|
||
background: #48893B;
|
||
text-align: center;
|
||
line-height: 104rpx;
|
||
font-weight: 600;
|
||
font-size: 36rpx;
|
||
color: #FFFFFF;
|
||
border-radius: 20rpx;
|
||
}
|
||
}
|
||
.list{
|
||
width: 100%;
|
||
height: 80vh;
|
||
padding-bottom: 80rpx;
|
||
box-sizing: border-box;
|
||
overflow: scroll;
|
||
margin-top: 28rpx;
|
||
.item_list{
|
||
width: 680rpx;
|
||
max-height: 1600rpx;
|
||
margin: auto;
|
||
margin-top: 28rpx;
|
||
background: #FFFFFF;
|
||
border: 4rpx solid #fff;
|
||
border-radius: 24rpx;
|
||
padding-bottom: 26rpx;
|
||
box-sizing: border-box;
|
||
.shoufei{
|
||
margin-top: 30rpx;
|
||
.wz{
|
||
font-size: 24rpx;
|
||
color: #3D3D3D;
|
||
margin-top: 24rpx;
|
||
text-align: center;
|
||
width: 100%;
|
||
}
|
||
.shichang{
|
||
margin-top: 34rpx;
|
||
.stop{
|
||
display: flex;
|
||
width: 618rpx;
|
||
margin: auto;
|
||
height: 76rpx;
|
||
line-height: 76rpx;
|
||
background: #F0F0F0;
|
||
view{
|
||
width: 50%;
|
||
text-align: center;
|
||
font-size: 28rpx;
|
||
color: #3D3D3D;
|
||
}
|
||
}
|
||
}
|
||
.price{
|
||
font-size: 28rpx;
|
||
color: #3D3D3D;
|
||
margin-top: 22rpx;
|
||
padding-left: 30rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
.shuom{
|
||
font-size: 24rpx;
|
||
color: #3D3D3D;
|
||
margin-top: 20rpx;
|
||
padding-left: 30rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
.shang{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
width: 100%;
|
||
view{
|
||
padding-left: 30rpx;
|
||
box-sizing: border-box;
|
||
font-size: 32rpx;
|
||
color: #3D3D3D;
|
||
font-weight: 600;
|
||
display: flex;
|
||
align-items: center;
|
||
image{
|
||
width: 14rpx;
|
||
height: 42rpx;
|
||
margin-top: 0;
|
||
margin-right: 10rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
</style> |