102 lines
1.8 KiB
Vue
102 lines
1.8 KiB
Vue
<template>
|
|
<view class="section-panel" v-if="bookingRuleRows.length">
|
|
<view class="section-header">
|
|
<text class="section-title">{{ isRoomType ? t('bookingRules') : t('bookingInfo') }}</text>
|
|
</view>
|
|
<view class="rule-list">
|
|
<view v-for="item in bookingRuleRows" :key="item.label" class="rule-item tn-flex tn-flex-row-between tn-flex-col-center">
|
|
<view class="rule-left tn-flex tn-flex-col-center">
|
|
<text class="tn-icon-success-circle-fill rule-icon"></text>
|
|
<text class="rule-label">{{ item.label }}</text>
|
|
</view>
|
|
<text class="rule-value">{{ item.value }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
bookingRuleRows: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
isRoomType: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
language: {
|
|
type: String,
|
|
default: 'zh'
|
|
}
|
|
},
|
|
methods: {
|
|
t(key) {
|
|
return this.$tm('pkgExplore.room_detail.room_detail', key)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.section-panel {
|
|
background: #ffffff;
|
|
padding: 48rpx 32rpx;
|
|
margin: 0;
|
|
border-bottom: 1rpx solid #F2F3F5;
|
|
}
|
|
|
|
.section-header {
|
|
margin-bottom: 32rpx;
|
|
}
|
|
|
|
.section-title {
|
|
position: relative;
|
|
font-size: 36rpx;
|
|
font-weight: 800;
|
|
color: #1D2129;
|
|
letter-spacing: 2rpx;
|
|
}
|
|
|
|
.rule-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 24rpx;
|
|
}
|
|
|
|
.rule-item {
|
|
min-height: 80rpx;
|
|
padding: 0;
|
|
background: transparent;
|
|
border-bottom: 1rpx dashed #E5E6EB;
|
|
}
|
|
|
|
.rule-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.rule-left {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.rule-icon {
|
|
margin-right: 16rpx;
|
|
font-size: 28rpx;
|
|
color: #1D2129;
|
|
}
|
|
|
|
.rule-label {
|
|
font-size: 26rpx;
|
|
color: #4E5969;
|
|
}
|
|
|
|
.rule-value {
|
|
margin-left: 20rpx;
|
|
font-size: 26rpx;
|
|
color: #1D2129;
|
|
font-weight: 700;
|
|
}
|
|
</style>
|