604 lines
23 KiB
Vue
604 lines
23 KiB
Vue
<template>
|
||
<view class="zcfangan">
|
||
<view class="name" style="margin-bottom: 24rpx;font-size:36rpx;font-weight: 700;">
|
||
选择套餐
|
||
</view>
|
||
<view class="fanganlist">
|
||
<view hover-class="app-tap-hover"
|
||
v-for="(item,index) in taocanlist" :key="index"
|
||
:class="['fanganlist_item', fanganindex == index ? 'gaoliang' : '', item.ridingRule == 2 ? 'interval-billing' : '', item.ridingRule == 3 ? 'deadline-billing' : '']"
|
||
@click="onSelect(index, item)">
|
||
<view class="check-icon" v-if="fanganindex == index">
|
||
<text class="check-mark">✓</text>
|
||
</view>
|
||
|
||
<template v-if="item.ridingRule == 1">
|
||
<scroll-view
|
||
class="package-name-wrapper"
|
||
:id="'package-name-' + index"
|
||
:ref="'packageName' + index"
|
||
scroll-x="true"
|
||
:scroll-left="packageNameScrollLeft[index] || 0"
|
||
:show-scrollbar="false"
|
||
:enable-back-to-top="false"
|
||
:scroll-with-animation="false">
|
||
<view class="package-name-content" :style="{ justifyContent: packageNeedScroll[index] ? 'flex-start' : 'center' }">
|
||
<view class="package-name" :class="{ 'selected': fanganindex == index }">{{item.name}}</view>
|
||
<view v-if="packageNeedScroll[index]" class="package-name package-name-duplicate" style="margin-left: 40rpx;" :class="{ 'selected': fanganindex == index }">{{item.name}}</view>
|
||
</view>
|
||
</scroll-view>
|
||
<view class="package-price">
|
||
<text class="price-value">{{item.startRule.startingPrice}}</text>
|
||
<text class="price-unit">元</text>
|
||
</view>
|
||
<view class="package-duration">{{getPackageDuration(item)}}</view>
|
||
</template>
|
||
|
||
<template v-if="item.ridingRule == 2">
|
||
<scroll-view
|
||
class="package-name-wrapper"
|
||
:id="'package-name-' + index"
|
||
:ref="'packageName' + index"
|
||
scroll-x="true"
|
||
:scroll-left="packageNameScrollLeft[index] || 0"
|
||
:show-scrollbar="false"
|
||
:enable-back-to-top="false"
|
||
:scroll-with-animation="false">
|
||
<view class="package-name-content" :style="{ justifyContent: packageNeedScroll[index] ? 'flex-start' : 'center' }">
|
||
<view class="package-name" :class="{ 'selected': fanganindex == index }">{{item.name}}</view>
|
||
<view v-if="packageNeedScroll[index]" class="package-name package-name-duplicate" style="margin-left: 40rpx;" :class="{ 'selected': fanganindex == index }">{{item.name}}</view>
|
||
</view>
|
||
</scroll-view>
|
||
<view class="interval-list">
|
||
<view class="interval-item" v-for="(rule, ruleIndex) in item.intervalRule" :key="ruleIndex">
|
||
<view class="interval-content">
|
||
<view class="interval-left">
|
||
<text class="interval-range">
|
||
<text v-if="rule.end == null || rule.end === undefined">
|
||
{{rule.start == null ? '0' : rule.start}}
|
||
<text v-if="item.rentalUnit == 'hours'">时</text>
|
||
<text v-if="item.rentalUnit == 'minutes'">分</text>
|
||
<text v-if="item.rentalUnit == 'day'">天</text>
|
||
以上
|
||
</text>
|
||
<text v-else>
|
||
{{rule.start == null ? '0' : rule.start}}-{{rule.end}}
|
||
<text v-if="item.rentalUnit == 'hours'">时</text>
|
||
<text v-if="item.rentalUnit == 'minutes'">分</text>
|
||
<text v-if="item.rentalUnit == 'day'">天</text>
|
||
</text>
|
||
</text>
|
||
</view>
|
||
<view class="interval-right">
|
||
每<text class="interval-price">{{rule.fee}}</text>
|
||
<text class="interval-unit">元/{{rule.eachUnit}}
|
||
<text v-if="item.rentalUnit == 'hours'">时</text>
|
||
<text v-if="item.rentalUnit == 'minutes'">分</text>
|
||
<text v-if="item.rentalUnit == 'day'">天</text>
|
||
</text>
|
||
</view>
|
||
</view>
|
||
<view class="interval-divider" v-if="ruleIndex < item.intervalRule.length - 1"></view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<template v-if="item.ridingRule == 3">
|
||
<scroll-view
|
||
class="package-name-wrapper"
|
||
:id="'package-name-' + index"
|
||
:ref="'packageName' + index"
|
||
scroll-x="true"
|
||
:scroll-left="packageNameScrollLeft[index] || 0"
|
||
:show-scrollbar="false"
|
||
:enable-back-to-top="false"
|
||
:scroll-with-animation="false">
|
||
<view class="package-name-content" :style="{ justifyContent: packageNeedScroll[index] ? 'flex-start' : 'center' }">
|
||
<view class="package-name" :class="{ 'selected': fanganindex == index }">{{item.name}}</view>
|
||
<view v-if="packageNeedScroll[index]" class="package-name package-name-duplicate" style="margin-left: 40rpx;" :class="{ 'selected': fanganindex == index }">{{item.name}}</view>
|
||
</view>
|
||
</scroll-view>
|
||
<view class="package-price">
|
||
<text class="price-value">{{item.deadlineRule && item.deadlineRule.basePrice != null ? item.deadlineRule.basePrice : 0}}</text>
|
||
<text class="price-unit">元</text>
|
||
</view>
|
||
<view class="package-duration">{{item.deadlineRule && item.deadlineRule.deadlineTime ? item.deadlineRule.deadlineTime : '23:59:59'}}前还车</view>
|
||
</template>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="wei" v-if="taocanlist.length == 0">
|
||
当前车辆车型未配置套餐，请管理员前往车型中配置！
|
||
</view>
|
||
|
||
<view class="package-info-box" v-if="taocanlist.length != 0">
|
||
<view class="package-header">
|
||
<view class="package-title">套餐说明</view>
|
||
<view class="package-buttons">
|
||
<view class="parking-btn" @click="onElectronicFence">
|
||
<u-icon name="tags" color="#4297F3" size="22"></u-icon>
|
||
<text class="btn-text">电子围栏</text>
|
||
</view>
|
||
<view class="parking-btn" @click="$emit('check-location')">
|
||
<u-icon name="map" color="#4297F3" size="22"></u-icon>
|
||
<text class="btn-text">还车点</text>
|
||
</view>
|
||
<view class="parking-btn" @click="$emit('contact-service')">
|
||
<u-icon name="phone-fill" color="#4297F3" size="22"></u-icon>
|
||
<text class="btn-text">客服</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="package-content">
|
||
<view class="info-item" v-if="actiobj.freeRideTime != null && actiobj.freeRideTime != '' && actiobj.freeRideTime != 0">
|
||
<view class="info-icon-wrap"><u-icon name="clock" color="#10B981" size="28"></u-icon></view>
|
||
<view class="info-text">
|
||
免费骑行<text class="highlight">{{actiobj.freeRideTime == null ? '0' : actiobj.freeRideTime}}</text>分钟
|
||
</view>
|
||
</view>
|
||
<view class="info-item" v-if="taocanlist[fanganindex] && taocanlist[fanganindex].ridingRule == 1">
|
||
<view class="info-icon-wrap"><u-icon name="red-packet" color="#F17F37" size="28"></u-icon></view>
|
||
<view class="info-text">
|
||
超出计费<text class="highlight">{{taocanlist[fanganindex].startRule.timeoutPrice}}</text>元/<text class="highlight">{{taocanlist[fanganindex].startRule.timeoutTime}}</text>
|
||
<text v-if="taocanlist[fanganindex].rentalUnit == 'hours'">小时</text>
|
||
<text v-if="taocanlist[fanganindex].rentalUnit == 'minutes'">分钟</text>
|
||
<text v-if="taocanlist[fanganindex].rentalUnit == 'day'">天</text>
|
||
,不足<text class="highlight">{{taocanlist[fanganindex].startRule.timeoutTime}}</text>
|
||
<text v-if="taocanlist[fanganindex].rentalUnit == 'hours'">小时</text>
|
||
<text v-if="taocanlist[fanganindex].rentalUnit == 'minutes'">分钟</text>
|
||
<text v-if="taocanlist[fanganindex].rentalUnit == 'day'">天</text>
|
||
按<text class="highlight">{{taocanlist[fanganindex].startRule.timeoutTime}}</text>
|
||
<text v-if="taocanlist[fanganindex].rentalUnit == 'hours'">小时</text>
|
||
<text v-if="taocanlist[fanganindex].rentalUnit == 'minutes'">分钟</text>
|
||
<text v-if="taocanlist[fanganindex].rentalUnit == 'day'">天</text>算
|
||
</view>
|
||
</view>
|
||
<view class="info-item" v-if="taocanlist[fanganindex] && taocanlist[fanganindex].ridingRule == 2 && taocanlist[fanganindex].intervalRule && taocanlist[fanganindex].intervalRule.length > 0">
|
||
<view class="info-icon-wrap"><u-icon name="red-packet" color="#F17F37" size="28"></u-icon></view>
|
||
<view class="info-text">
|
||
区间计费：
|
||
<text v-for="(rule, ruleIndex) in taocanlist[fanganindex].intervalRule" :key="ruleIndex">
|
||
<text v-if="rule.end == null || rule.end === undefined">
|
||
{{rule.start == null ? '0' : rule.start}}
|
||
<text v-if="taocanlist[fanganindex].rentalUnit == 'hours'">时</text>
|
||
<text v-if="taocanlist[fanganindex].rentalUnit == 'minutes'">分</text>
|
||
<text v-if="taocanlist[fanganindex].rentalUnit == 'day'">天</text>
|
||
以上每<text class="highlight">{{rule.eachUnit}}</text>
|
||
<text v-if="taocanlist[fanganindex].rentalUnit == 'hours'">时</text>
|
||
<text v-if="taocanlist[fanganindex].rentalUnit == 'minutes'">分</text>
|
||
<text v-if="taocanlist[fanganindex].rentalUnit == 'day'">天</text>
|
||
<text class="highlight">{{rule.fee}}</text>元
|
||
</text>
|
||
<text v-else>
|
||
{{rule.start == null ? '0' : rule.start}}-{{rule.end}}
|
||
<text v-if="taocanlist[fanganindex].rentalUnit == 'hours'">时</text>
|
||
<text v-if="taocanlist[fanganindex].rentalUnit == 'minutes'">分</text>
|
||
<text v-if="taocanlist[fanganindex].rentalUnit == 'day'">天</text>
|
||
每<text class="highlight">{{rule.eachUnit}}</text>
|
||
<text v-if="taocanlist[fanganindex].rentalUnit == 'hours'">时</text>
|
||
<text v-if="taocanlist[fanganindex].rentalUnit == 'minutes'">分</text>
|
||
<text v-if="taocanlist[fanganindex].rentalUnit == 'day'">天</text>
|
||
<text class="highlight">{{rule.fee}}</text>元
|
||
</text>
|
||
<text v-if="ruleIndex < taocanlist[fanganindex].intervalRule.length - 1">；</text>
|
||
</text>
|
||
</view>
|
||
</view>
|
||
<view class="info-item" v-if="taocanlist[fanganindex] && taocanlist[fanganindex].ridingRule == 3 && taocanlist[fanganindex].deadlineRule">
|
||
<view class="info-icon-wrap"><u-icon name="red-packet" color="#F17F37" size="28"></u-icon></view>
|
||
<view class="info-text">
|
||
支付后第<text class="highlight">{{taocanlist[fanganindex].deadlineRule.dayOffset || 1}}</text>天（第1天为当天）截止<text class="highlight">{{taocanlist[fanganindex].deadlineRule.deadlineTime || '23:59:59'}}</text>前还车收费
|
||
<text class="highlight">{{taocanlist[fanganindex].deadlineRule.basePrice || 0}}</text>元，超时后每<text class="highlight">{{taocanlist[fanganindex].deadlineRule.overtimeUnit || 1}}</text>
|
||
<text v-if="taocanlist[fanganindex].rentalUnit == 'hours'">小时</text>
|
||
<text v-if="taocanlist[fanganindex].rentalUnit == 'minutes'">分钟</text>
|
||
<text v-if="taocanlist[fanganindex].rentalUnit == 'day'">天</text>
|
||
收费<text class="highlight">{{taocanlist[fanganindex].deadlineRule.overtimePrice || 0}}</text>元
|
||
</view>
|
||
</view>
|
||
<view class="info-item" v-if="bikeobj.areaDispatchFee != null">
|
||
<view class="info-icon-wrap"><u-icon name="map" color="#666" size="28"></u-icon></view>
|
||
<view class="info-text">
|
||
还车点外还车将额外产生调度费<text class="highlight">{{bikeobj.areaDispatchFee == null ? '--' : bikeobj.areaDispatchFee}}</text>元
|
||
</view>
|
||
</view>
|
||
<view class="info-item" v-if="bikeobj.areaVehicleManagementFee != null">
|
||
<view class="info-icon-wrap"><u-icon name="map" color="#666" size="28"></u-icon></view>
|
||
<view class="info-text">
|
||
运营区外还车将额外产生调度费<text class="highlight">{{bikeobj.areaVehicleManagementFee == null ? '--' : bikeobj.areaVehicleManagementFee}}</text>元
|
||
</view>
|
||
</view>
|
||
<view class="info-item" v-if="instructions != null && instructions != ''">
|
||
<view class="info-icon-wrap"><u-icon name="file-text" color="#4297F3" size="28"></u-icon></view>
|
||
<view class="info-text">说明：{{instructions == null ? '暂无说明' : instructions}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'PackageSelector',
|
||
props: {
|
||
taocanlist: { type: Array, default: () => [] },
|
||
fanganindex: { type: Number, default: 0 },
|
||
bikeobj: { type: Object, default: () => ({}) },
|
||
actiobj: { type: Object, default: () => ({}) },
|
||
instructions: { type: String, default: '' }
|
||
},
|
||
data() {
|
||
return {
|
||
packageNameScrollLeft: {},
|
||
packageNeedScroll: {},
|
||
scrollTimers: {},
|
||
scrollPauseTimers: {}
|
||
}
|
||
},
|
||
watch: {
|
||
// 不在此监听 fanganindex：与 onSelect 里 startAutoScroll 重复触发，会叠加多套定时器导致横向滚动失控
|
||
taocanlist(newList) {
|
||
if (newList.length > 0) {
|
||
this.$nextTick(() => {
|
||
setTimeout(() => {
|
||
this.startAutoScroll(0)
|
||
}, 800)
|
||
})
|
||
}
|
||
}
|
||
},
|
||
beforeDestroy() {
|
||
this.clearAllScrollTimers()
|
||
},
|
||
methods: {
|
||
clearAllScrollTimers() {
|
||
for (let key in this.scrollTimers) {
|
||
if (this.scrollTimers[key]) {
|
||
clearInterval(this.scrollTimers[key])
|
||
delete this.scrollTimers[key]
|
||
}
|
||
}
|
||
for (let key in this.scrollPauseTimers) {
|
||
if (this.scrollPauseTimers[key]) {
|
||
clearTimeout(this.scrollPauseTimers[key])
|
||
delete this.scrollPauseTimers[key]
|
||
}
|
||
}
|
||
},
|
||
onElectronicFence() {
|
||
const id = this.bikeobj && this.bikeobj.areaId
|
||
if (!id) {
|
||
uni.showToast({ title: '未获取到运营区信息', icon: 'none' })
|
||
return
|
||
}
|
||
uni.navigateTo({
|
||
url: '/pages/myorder/returned/tingche?areaId=' + id + '&mode=fence'
|
||
})
|
||
},
|
||
onSelect(index, item) {
|
||
this.clearAllScrollTimers()
|
||
const list = this.taocanlist || []
|
||
for (let i = 0; i < list.length; i++) {
|
||
this.$set(this.packageNameScrollLeft, i, 0)
|
||
this.$set(this.packageNeedScroll, i, false)
|
||
}
|
||
this.$emit('select', index, item)
|
||
this.$nextTick(() => {
|
||
this.startAutoScroll(index)
|
||
})
|
||
},
|
||
startAutoScroll(index) {
|
||
if (this.scrollTimers[index]) {
|
||
clearInterval(this.scrollTimers[index])
|
||
delete this.scrollTimers[index]
|
||
}
|
||
const startKey = 'start_' + index
|
||
if (this.scrollPauseTimers[startKey]) {
|
||
clearTimeout(this.scrollPauseTimers[startKey])
|
||
delete this.scrollPauseTimers[startKey]
|
||
}
|
||
this.$set(this.packageNeedScroll, index, false)
|
||
this.$set(this.packageNameScrollLeft, index, 0)
|
||
|
||
const packageItem = this.taocanlist[index]
|
||
if (!packageItem || !packageItem.name || packageItem.name.length <= 10) return
|
||
|
||
this.$nextTick(() => {
|
||
setTimeout(() => {
|
||
const query = uni.createSelectorQuery().in(this)
|
||
query.select('#package-name-' + index).boundingClientRect((containerRect) => {
|
||
if (containerRect && containerRect.width) {
|
||
const query2 = uni.createSelectorQuery().in(this)
|
||
query2.select('#package-name-' + index + ' .package-name').boundingClientRect((contentRect) => {
|
||
if (contentRect && contentRect.width) {
|
||
if (contentRect.width > containerRect.width) {
|
||
this.$set(this.packageNeedScroll, index, true)
|
||
this.$nextTick(() => {
|
||
setTimeout(() => {
|
||
const maxScrollLeft = contentRect.width
|
||
this.$set(this.packageNameScrollLeft, index, 0)
|
||
setTimeout(() => {
|
||
this.startLoopScroll(index, maxScrollLeft)
|
||
}, 300)
|
||
}, 100)
|
||
})
|
||
} else {
|
||
this.$set(this.packageNeedScroll, index, false)
|
||
this.$set(this.packageNameScrollLeft, index, 0)
|
||
}
|
||
}
|
||
}).exec()
|
||
}
|
||
}).exec()
|
||
}, 300)
|
||
})
|
||
},
|
||
startLoopScroll(index, maxScrollLeft) {
|
||
if (this.scrollTimers[index]) {
|
||
clearInterval(this.scrollTimers[index])
|
||
delete this.scrollTimers[index]
|
||
}
|
||
const startKey = 'start_' + index
|
||
if (this.scrollPauseTimers[startKey]) {
|
||
clearTimeout(this.scrollPauseTimers[startKey])
|
||
delete this.scrollPauseTimers[startKey]
|
||
}
|
||
let currentScroll = 0
|
||
const scrollStep = 0.5
|
||
const startTimer = setTimeout(() => {
|
||
this.scrollTimers[index] = setInterval(() => {
|
||
if (!this.scrollTimers[index]) return
|
||
currentScroll += scrollStep
|
||
if (currentScroll >= maxScrollLeft) currentScroll = 0
|
||
this.$set(this.packageNameScrollLeft, index, Math.round(currentScroll))
|
||
}, 80)
|
||
}, 600)
|
||
this.scrollPauseTimers[startKey] = startTimer
|
||
},
|
||
getPackageDuration(item) {
|
||
if (item.ridingRule == 1 && item.startRule) {
|
||
let time = item.startRule.startingTime
|
||
if (item.rentalUnit == 'hours') return time + '小时'
|
||
if (item.rentalUnit == 'minutes') return time + '分钟'
|
||
if (item.rentalUnit == 'day') return time + '天'
|
||
return time + '分钟'
|
||
} else if (item.ridingRule == 2 && item.intervalRule && item.intervalRule.length > 0) {
|
||
let lastRule = item.intervalRule[item.intervalRule.length - 1]
|
||
let end = lastRule.end
|
||
if (end == null || end === undefined) {
|
||
let nameMatch = item.name.match(/(\d+)/)
|
||
if (nameMatch) end = parseInt(nameMatch[1])
|
||
else return '不限'
|
||
}
|
||
if (item.rentalUnit == 'hours') return end + '小时'
|
||
if (item.rentalUnit == 'minutes') return end + '分钟'
|
||
if (item.rentalUnit == 'day') return end + '天'
|
||
return end + '分钟'
|
||
} else if (item.ridingRule == 3 && item.deadlineRule) {
|
||
return '截止' + (item.deadlineRule.deadlineTime || '23:59:59')
|
||
}
|
||
let nameMatch = item.name.match(/(\d+)/)
|
||
if (nameMatch) {
|
||
let num = parseInt(nameMatch[1])
|
||
if (item.name.includes('小时') || item.name.includes('时')) return num + '小时'
|
||
if (item.name.includes('天')) return num + '天'
|
||
if (item.name.includes('分钟') || item.name.includes('分')) return num + '分钟'
|
||
}
|
||
return '--'
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.zcfangan {
|
||
margin: auto;
|
||
padding-right: 0 !important;
|
||
box-sizing: border-box;
|
||
width: 698rpx;
|
||
border-radius: 20rpx;
|
||
margin-top: 16rpx;
|
||
|
||
.name {
|
||
font-size: 32rpx;
|
||
color: #111827;
|
||
font-weight: 700;
|
||
letter-spacing: 0.5rpx;
|
||
}
|
||
.wei {
|
||
margin-top: 30rpx;
|
||
width: 100%;
|
||
text-align: center;
|
||
color: #ccc;
|
||
}
|
||
.fanganlist {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: space-between;
|
||
gap: 16rpx;
|
||
|
||
.fanganlist_item {
|
||
position: relative;
|
||
width: 48%;
|
||
padding: 28rpx 20rpx;
|
||
background: #fff;
|
||
border-radius: 20rpx;
|
||
border: 3rpx solid #E5E7EB;
|
||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.06);
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
height: 218rpx;
|
||
overflow: hidden;
|
||
box-sizing: border-box;
|
||
transition: all 0.3s ease;
|
||
|
||
.check-icon {
|
||
position: absolute;
|
||
bottom: 0;
|
||
right: 0;
|
||
width: 56rpx;
|
||
height: 56rpx;
|
||
background: linear-gradient(135deg, #4297F3 0%, #60A5FA 100%);
|
||
clip-path: polygon(100% 0, 100% 100%, 0 100%);
|
||
display: flex;
|
||
align-items: flex-end;
|
||
justify-content: flex-end;
|
||
padding: 0 6rpx 6rpx 0;
|
||
box-sizing: border-box;
|
||
z-index: 10;
|
||
.check-mark {
|
||
font-size: 28rpx;
|
||
font-weight: 700;
|
||
color: #FFFFFF;
|
||
line-height: 1;
|
||
}
|
||
}
|
||
|
||
.package-name-wrapper {
|
||
width: 100%;
|
||
margin-bottom: 18rpx;
|
||
::v-deep .uni-scroll-view { width: 100%; }
|
||
::v-deep .uni-scroll-view-content { display: flex; align-items: center; }
|
||
}
|
||
.package-name-content {
|
||
display: flex;
|
||
align-items: center;
|
||
white-space: nowrap;
|
||
}
|
||
.package-name {
|
||
font-size: 32rpx;
|
||
font-weight: 700;
|
||
color: #1F2937;
|
||
text-align: center;
|
||
letter-spacing: 0.5rpx;
|
||
white-space: nowrap;
|
||
display: inline-block;
|
||
flex-shrink: 0;
|
||
&.selected { color: #4297F3; font-weight: 700; }
|
||
}
|
||
.package-price {
|
||
display: flex;
|
||
align-items: baseline;
|
||
justify-content: center;
|
||
margin-bottom: 10rpx;
|
||
.price-value { font-size: 52rpx; font-weight: 700; color: #F17F37; line-height: 1; letter-spacing: -1rpx; }
|
||
.price-unit { font-size: 30rpx; font-weight: 600; color: #F17F37; margin-left: 4rpx; }
|
||
}
|
||
.package-duration { font-size: 26rpx; font-weight: 500; color: #6B7280; text-align: center; }
|
||
|
||
&.gaoliang {
|
||
border-color: #4297F3;
|
||
border-width: 3rpx;
|
||
background: linear-gradient(135deg, #F0F7FF 0%, #FFFFFF 100%);
|
||
box-shadow: 0 6rpx 20rpx rgba(66, 151, 243, 0.25);
|
||
}
|
||
|
||
&.interval-billing {
|
||
align-items: flex-start;
|
||
padding: 24rpx;
|
||
min-height: auto;
|
||
justify-content: flex-start;
|
||
.package-name-wrapper { margin-bottom: 24rpx; width: 100%; }
|
||
.interval-list {
|
||
width: 100%;
|
||
margin-bottom: 16rpx;
|
||
background: #F9FAFB;
|
||
border-radius: 12rpx;
|
||
padding: 12rpx;
|
||
.interval-item {
|
||
width: 100%;
|
||
.interval-content {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 14rpx 0;
|
||
.interval-left {
|
||
display: flex; align-items: center; flex: 1;
|
||
.interval-range { font-size: 28rpx; font-weight: 600; color: #111827; line-height: 1.6; }
|
||
}
|
||
.interval-right {
|
||
display: flex; align-items: baseline; flex-shrink: 0; font-weight: 500;
|
||
.interval-price { font-size: 30rpx; font-weight: 700; color: #F17F37; margin-right: 6rpx; }
|
||
.interval-unit { font-size: 26rpx; color: #6B7280; }
|
||
}
|
||
}
|
||
.interval-divider {
|
||
width: 100%; height: 2rpx;
|
||
background: repeating-linear-gradient(to right, #E5E7EB 0, #E5E7EB 8rpx, transparent 8rpx, transparent 16rpx);
|
||
margin: 14rpx 0;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.package-info-box {
|
||
width: 698rpx;
|
||
margin: 24rpx auto 0;
|
||
background: #fff;
|
||
border-radius: 24rpx;
|
||
padding: 32rpx;
|
||
box-sizing: border-box;
|
||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
|
||
border: 1rpx solid #F3F4F6;
|
||
|
||
.package-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 24rpx;
|
||
}
|
||
.package-title { font-size: 32rpx; color: #1F2937; font-weight: 700; letter-spacing: 0.5rpx; }
|
||
.package-content {
|
||
.info-item {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: flex-start;
|
||
padding: 8rpx 0;
|
||
border-left: 4rpx solid transparent;
|
||
&:last-child { margin-bottom: 0; }
|
||
.info-icon-wrap {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
flex-shrink: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-right: 8rpx;
|
||
}
|
||
.info-text {
|
||
flex: 1;
|
||
min-width: 0;
|
||
font-size: 28rpx;
|
||
font-weight: 500;
|
||
color: #374151;
|
||
line-height: 40rpx;
|
||
margin-left: 0;
|
||
.highlight { color: #F17F37; font-weight: 700; font-size: 30rpx; }
|
||
}
|
||
}
|
||
}
|
||
.package-buttons {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12rpx;
|
||
.parking-btn {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 8rpx 18rpx;
|
||
background: rgba(66, 151, 243, 0.1);
|
||
border: 1rpx solid rgba(66, 151, 243, 0.3);
|
||
border-radius: 32rpx;
|
||
gap: 6rpx;
|
||
transition: all 0.2s ease;
|
||
&:active { transform: scale(0.96); background: rgba(66, 151, 243, 0.15); }
|
||
.btn-text { font-size: 24rpx; color: #4297F3; font-weight: 500; }
|
||
}
|
||
}
|
||
}
|
||
</style>
|