feat: 重构核心租住流程页面与交互体验
统一注册、看房、申请与入住等核心页面的视觉和流程衔接，补齐支付、签约与状态流转闭环，提升移动端操作连贯性。
This commit is contained in:
liangjian
@@ -1,32 +1,40 @@
|
||||
<template>
|
||||
<view class="building-selector">
|
||||
<view
|
||||
class="selector-header tn-flex tn-flex-row-between tn-flex-col-center"
|
||||
:class="{ 'selector-header--disabled': !areaCode }"
|
||||
class="selector-card tn-flex tn-flex-row-between tn-flex-col-center"
|
||||
:class="{ 'selector-card--disabled': !areaCode }"
|
||||
@click="handleOpen"
|
||||
>
|
||||
<view class="selected-info">
|
||||
<view class="selected-label">{{ $tr('楼栋') }}</view>
|
||||
<view class="selected-name tn-text-ellipsis" :class="{ 'is-empty': !selectedBuilding }">
|
||||
{{ selectedBuilding ? getBuildingDisplayName(selectedBuilding) : placeholderText }}
|
||||
</view>
|
||||
</view>
|
||||
<text class="tn-icon-right" :class="areaCode ? 'tn-color-gray' : 'tn-color-disabled'"></text>
|
||||
<view class="selector-arrow">
|
||||
<text class="tn-icon-right"></text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<tn-popup v-model="showPopup" mode="bottom" length="72%" :borderRadius="32" :closeBtn="true">
|
||||
<view class="popup-content">
|
||||
<view class="popup-header">
|
||||
<text class="popup-title">{{ $tr('选择意向楼栋') }}</text>
|
||||
<view class="popup-title">{{ $tr('选择意向楼栋') }}</view>
|
||||
<view class="popup-subtitle">{{ $tr('选择您期望入住的楼栋') }}</view>
|
||||
</view>
|
||||
|
||||
<scroll-view scroll-y class="building-list-scroll">
|
||||
<view v-if="isLoading" class="loading-state tn-padding-xl tn-text-center">
|
||||
<tn-loading mode="circle"></tn-loading>
|
||||
<view class="tn-margin-top-sm tn-color-gray">{{ $tr('楼栋加载中...') }}</view>
|
||||
<tn-loading mode="circle" :size="48"></tn-loading>
|
||||
<view class="tn-margin-top tn-color-gray">{{ $tr('楼栋加载中...') }}</view>
|
||||
</view>
|
||||
|
||||
<view v-else-if="!buildingList.length" class="empty-state tn-padding-xl tn-text-center">
|
||||
<text class="tn-color-gray">{{ $tr('暂无可选楼栋') }}</text>
|
||||
<view class="empty-icon">
|
||||
<text class="tn-icon-empty-data"></text>
|
||||
</view>
|
||||
<view class="empty-title">{{ $tr('暂无可选楼栋') }}</view>
|
||||
<view class="empty-desc">{{ $tr('当前暂无可用楼栋，请稍后再试') }}</view>
|
||||
</view>
|
||||
|
||||
<view v-else class="building-list">
|
||||
@@ -37,8 +45,13 @@
|
||||
:class="{ 'is-active': selectedBuilding && selectedBuilding.code === item.code }"
|
||||
@click="handleSelect(item)"
|
||||
>
|
||||
<text class="building-name">{{ getBuildingDisplayName(item) }}</text>
|
||||
<text v-if="selectedBuilding && selectedBuilding.code === item.code" class="tn-icon-success-circle-fill building-check"></text>
|
||||
<view class="building-name-left tn-flex tn-flex-col-center">
|
||||
<view class="building-icon-wrap">
|
||||
<text class="tn-icon-building"></text>
|
||||
</view>
|
||||
<text class="building-name">{{ getBuildingDisplayName(item) }}</text>
|
||||
</view>
|
||||
<text v-if="selectedBuilding && selectedBuilding.code === item.code" class="tn-icon-check building-check"></text>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
@@ -186,7 +199,7 @@ export default {
|
||||
this.buildingList = []
|
||||
this.selectedBuilding = null
|
||||
uni.showToast({
|
||||
title: this.$tr('楼栋列表加载失败'),
|
||||
title: this.$tr('楼栋加载失败'),
|
||||
icon: 'none'
|
||||
})
|
||||
})
|
||||
@@ -218,20 +231,32 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
$text-primary: #1A2233;
|
||||
$text-secondary: #6A7A99;
|
||||
$text-tertiary: #A1B0C4;
|
||||
$surface: #FFFFFF;
|
||||
$bg-popup: #F8FAFF;
|
||||
|
||||
.building-selector {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.selector-header {
|
||||
background: #FFFFFF;
|
||||
.selector-card {
|
||||
background: $surface;
|
||||
border-radius: 20rpx;
|
||||
padding: 26rpx 32rpx;
|
||||
border: 1rpx solid rgba($brand-primary, 0.15);
|
||||
box-shadow: 0 4rpx 12rpx rgba($brand-primary, 0.05);
|
||||
min-height: 100rpx;
|
||||
padding: 26rpx 30rpx;
|
||||
border: 2rpx solid rgba($brand-primary, 0.12);
|
||||
box-shadow: 0 6rpx 20rpx rgba($brand-primary, 0.05);
|
||||
min-height: 120rpx;
|
||||
transition: all 0.25s ease;
|
||||
}
|
||||
|
||||
.selector-header--disabled {
|
||||
.selector-card:active {
|
||||
background: #FAFCFF;
|
||||
border-color: rgba($brand-primary, 0.25);
|
||||
}
|
||||
|
||||
.selector-card--disabled {
|
||||
opacity: 0.72;
|
||||
}
|
||||
|
||||
@@ -240,41 +265,104 @@ export default {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.selected-label {
|
||||
font-size: 22rpx;
|
||||
color: $text-tertiary;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.selected-name {
|
||||
font-size: 28rpx;
|
||||
color: #1A2233;
|
||||
font-weight: 600;
|
||||
font-size: 30rpx;
|
||||
color: $text-primary;
|
||||
font-weight: 700;
|
||||
|
||||
&.is-empty {
|
||||
color: #A0B0C0;
|
||||
color: $text-tertiary;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.selector-arrow {
|
||||
width: 52rpx;
|
||||
height: 52rpx;
|
||||
border-radius: 50%;
|
||||
background: #F4F8FF;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-left: 20rpx;
|
||||
flex-shrink: 0;
|
||||
|
||||
text {
|
||||
font-size: 28rpx;
|
||||
color: $text-secondary;
|
||||
}
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
background: #F8FAFF;
|
||||
background: $bg-popup;
|
||||
}
|
||||
|
||||
.popup-header {
|
||||
padding: 40rpx 30rpx 20rpx;
|
||||
padding: 40rpx 30rpx 28rpx;
|
||||
text-align: center;
|
||||
border-bottom: 1px dashed rgba($brand-primary, 0.15);
|
||||
background: #FFFFFF;
|
||||
background: $surface;
|
||||
border-bottom: 1rpx solid rgba($brand-primary, 0.08);
|
||||
}
|
||||
|
||||
.popup-title {
|
||||
font-size: 32rpx;
|
||||
font-size: 34rpx;
|
||||
font-weight: 700;
|
||||
color: #1A2233;
|
||||
color: $text-primary;
|
||||
margin-bottom: 8rpx;
|
||||
letter-spacing: 1rpx;
|
||||
}
|
||||
|
||||
.popup-subtitle {
|
||||
font-size: 24rpx;
|
||||
color: $text-secondary;
|
||||
}
|
||||
|
||||
.building-list-scroll {
|
||||
flex: 1;
|
||||
height: 0;
|
||||
padding: 20rpx 30rpx 60rpx;
|
||||
padding: 24rpx 30rpx 60rpx;
|
||||
}
|
||||
|
||||
.loading-state,
|
||||
.empty-state {
|
||||
padding-top: 120rpx;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
border-radius: 50%;
|
||||
background: rgba($brand-primary, 0.08);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 auto 24rpx;
|
||||
|
||||
text {
|
||||
font-size: 56rpx;
|
||||
color: $brand-primary;
|
||||
}
|
||||
}
|
||||
|
||||
.empty-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: 700;
|
||||
color: $text-primary;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.empty-desc {
|
||||
font-size: 24rpx;
|
||||
color: $text-secondary;
|
||||
}
|
||||
|
||||
.building-list {
|
||||
@@ -289,23 +377,55 @@ export default {
|
||||
justify-content: space-between;
|
||||
background: #FFFFFF;
|
||||
border-radius: 20rpx;
|
||||
padding: 28rpx 30rpx;
|
||||
border: 1rpx solid rgba($brand-primary, 0.12);
|
||||
transition: all 0.2s ease;
|
||||
padding: 24rpx 28rpx;
|
||||
border: 2rpx solid rgba($brand-primary, 0.1);
|
||||
transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
|
||||
&.is-active {
|
||||
border-color: rgba($brand-primary, 0.5);
|
||||
box-shadow: 0 8rpx 20rpx rgba($brand-primary, 0.08);
|
||||
background: #FFFFFF;
|
||||
border-color: $brand-primary;
|
||||
box-shadow: 0 8rpx 24rpx rgba($brand-primary, 0.14);
|
||||
|
||||
.building-name {
|
||||
color: $brand-primary;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.building-icon-wrap {
|
||||
background: rgba($brand-primary, 0.15);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.building-name-left {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.building-icon-wrap {
|
||||
width: 44rpx;
|
||||
height: 44rpx;
|
||||
border-radius: 12rpx;
|
||||
background: rgba($brand-primary, 0.08);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 16rpx;
|
||||
transition: all 0.25s ease;
|
||||
|
||||
text {
|
||||
font-size: 24rpx;
|
||||
color: $brand-primary;
|
||||
}
|
||||
}
|
||||
|
||||
.building-name {
|
||||
font-size: 28rpx;
|
||||
color: #1A2233;
|
||||
color: $text-primary;
|
||||
}
|
||||
|
||||
.building-check {
|
||||
color: $brand-primary;
|
||||
font-size: 30rpx;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,22 +1,34 @@
|
||||
<template>
|
||||
<view class="date-range-selector">
|
||||
<view class="date-item">
|
||||
<view class="date-label">{{ resolvedStartLabel }}</view>
|
||||
<picker mode="date" @change="onStartChange">
|
||||
<view class="date-input" :class="{ 'is-empty': !start }">
|
||||
{{ start || resolvedStartPlaceholder }}
|
||||
<view class="date-range-selector tn-flex tn-flex-col-center">
|
||||
<picker mode="date" @change="onStartChange" class="date-picker date-picker--start">
|
||||
<view class="date-card" :class="{ 'is-empty': !start, 'is-active': start }">
|
||||
<view class="date-card-header tn-flex tn-flex-row-between tn-flex-col-center">
|
||||
<text class="date-label">{{ resolvedStartLabel }}</text>
|
||||
<view class="date-icon-wrap">
|
||||
<text class="tn-icon-calendar"></text>
|
||||
</view>
|
||||
</view>
|
||||
</picker>
|
||||
<view class="date-value">{{ start || resolvedStartPlaceholder }}</view>
|
||||
</view>
|
||||
</picker>
|
||||
|
||||
<view class="range-connector">
|
||||
<view class="connector-line"></view>
|
||||
<text class="connector-text">{{ $tr('至') }}</text>
|
||||
<view class="connector-line"></view>
|
||||
</view>
|
||||
<view class="date-divider">{{ $tr('至') }}</view>
|
||||
<view class="date-item">
|
||||
<view class="date-label">{{ resolvedEndLabel }}</view>
|
||||
<picker mode="date" @change="onEndChange">
|
||||
<view class="date-input" :class="{ 'is-empty': !end }">
|
||||
{{ end || resolvedEndPlaceholder }}
|
||||
|
||||
<picker mode="date" @change="onEndChange" class="date-picker date-picker--end">
|
||||
<view class="date-card" :class="{ 'is-empty': !end, 'is-active': end }">
|
||||
<view class="date-card-header tn-flex tn-flex-row-between tn-flex-col-center">
|
||||
<text class="date-label">{{ resolvedEndLabel }}</text>
|
||||
<view class="date-icon-wrap">
|
||||
<text class="tn-icon-calendar"></text>
|
||||
</view>
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
<view class="date-value">{{ end || resolvedEndPlaceholder }}</view>
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@@ -75,44 +87,92 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
$text-primary: #1A2233;
|
||||
$text-secondary: #6A7A99;
|
||||
$text-tertiary: #A1B0C4;
|
||||
|
||||
.date-range-selector {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: rgba(255, 255, 255, 0.6);
|
||||
border-radius: 24rpx;
|
||||
padding: 24rpx 32rpx;
|
||||
border: 2rpx solid rgba(226, 232, 240, 0.8);
|
||||
backdrop-filter: blur(8px);
|
||||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.02);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.date-item {
|
||||
.date-picker {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.date-divider {
|
||||
margin: 0 24rpx;
|
||||
color: #94A3B8;
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
.date-card {
|
||||
background: #F4F8FF;
|
||||
border-radius: 20rpx;
|
||||
padding: 24rpx;
|
||||
border: 2rpx solid transparent;
|
||||
transition: all 0.25s ease;
|
||||
|
||||
&.is-active {
|
||||
background: #FFFFFF;
|
||||
border-color: rgba($brand-primary, 0.25);
|
||||
box-shadow: 0 6rpx 20rpx rgba($brand-primary, 0.08);
|
||||
|
||||
.date-value {
|
||||
color: $text-primary;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-empty .date-value {
|
||||
color: $text-tertiary;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.date-card-header {
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.date-label {
|
||||
font-size: 22rpx;
|
||||
color: #64748B;
|
||||
margin-bottom: 12rpx;
|
||||
color: $text-secondary;
|
||||
}
|
||||
|
||||
.date-input {
|
||||
font-size: 28rpx;
|
||||
color: #1A2B4C;
|
||||
font-weight: 600;
|
||||
.date-icon-wrap {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
border-radius: 12rpx;
|
||||
background: rgba($brand-primary, 0.1);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&.is-empty {
|
||||
color: #CBD5E1;
|
||||
font-weight: normal;
|
||||
text {
|
||||
font-size: 22rpx;
|
||||
color: $brand-primary;
|
||||
}
|
||||
}
|
||||
|
||||
.date-value {
|
||||
font-size: 28rpx;
|
||||
color: $text-primary;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.range-connector {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 18rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.connector-line {
|
||||
width: 2rpx;
|
||||
height: 24rpx;
|
||||
background: rgba($brand-primary, 0.25);
|
||||
}
|
||||
|
||||
.connector-text {
|
||||
font-size: 22rpx;
|
||||
color: $brand-primary;
|
||||
font-weight: 700;
|
||||
margin: 8rpx 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,31 +1,39 @@
|
||||
<template>
|
||||
<view class="floor-selector">
|
||||
<view
|
||||
class="selector-header tn-flex tn-flex-row-between tn-flex-col-center"
|
||||
class="selector-card tn-flex tn-flex-row-between tn-flex-col-center"
|
||||
@click="handleOpen"
|
||||
>
|
||||
<view class="selected-info">
|
||||
<view class="selected-label">{{ $tr('楼层') }}</view>
|
||||
<view class="selected-name tn-text-ellipsis" :class="{ 'is-empty': !selectedFloor }">
|
||||
{{ selectedFloor ? getFloorDisplayName(selectedFloor) : placeholderText }}
|
||||
</view>
|
||||
</view>
|
||||
<text class="tn-icon-right tn-color-gray"></text>
|
||||
<view class="selector-arrow">
|
||||
<text class="tn-icon-right"></text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<tn-popup v-model="showPopup" mode="bottom" length="72%" :borderRadius="32" :closeBtn="true">
|
||||
<view class="popup-content">
|
||||
<view class="popup-header">
|
||||
<text class="popup-title">{{ $tr('选择意向楼层') }}</text>
|
||||
<view class="popup-title">{{ $tr('选择意向楼层') }}</view>
|
||||
<view class="popup-subtitle">{{ $tr('选择您期望入住的楼层') }}</view>
|
||||
</view>
|
||||
|
||||
<scroll-view scroll-y class="floor-list-scroll">
|
||||
<view v-if="isLoading" class="loading-state tn-padding-xl tn-text-center">
|
||||
<tn-loading mode="circle"></tn-loading>
|
||||
<view class="tn-margin-top-sm tn-color-gray">{{ $tr('楼层加载中...') }}</view>
|
||||
<tn-loading mode="circle" :size="48"></tn-loading>
|
||||
<view class="tn-margin-top tn-color-gray">{{ $tr('楼层加载中...') }}</view>
|
||||
</view>
|
||||
|
||||
<view v-else-if="!floorList.length" class="empty-state tn-padding-xl tn-text-center">
|
||||
<text class="tn-color-gray">{{ $tr('暂无可选楼层') }}</text>
|
||||
<view class="empty-icon">
|
||||
<text class="tn-icon-empty-data"></text>
|
||||
</view>
|
||||
<view class="empty-title">{{ $tr('暂无可选楼层') }}</view>
|
||||
<view class="empty-desc">{{ $tr('当前暂无可用楼层，请稍后再试') }}</view>
|
||||
</view>
|
||||
|
||||
<view v-else class="floor-list">
|
||||
@@ -34,8 +42,13 @@
|
||||
:class="{ 'is-active': !selectedFloor }"
|
||||
@click="handleClear"
|
||||
>
|
||||
<text class="floor-name">{{ $tr('不选择') }}</text>
|
||||
<text v-if="!selectedFloor" class="tn-icon-success-circle-fill floor-check"></text>
|
||||
<view class="floor-name-left tn-flex tn-flex-col-center">
|
||||
<view class="floor-icon-wrap">
|
||||
<text class="tn-icon-close" style="font-size: 22rpx;"></text>
|
||||
</view>
|
||||
<text class="floor-name">{{ $tr('不选择') }}</text>
|
||||
</view>
|
||||
<text v-if="!selectedFloor" class="tn-icon-check floor-check"></text>
|
||||
</view>
|
||||
<view
|
||||
v-for="item in floorList"
|
||||
@@ -44,8 +57,13 @@
|
||||
:class="{ 'is-active': selectedFloor && selectedFloor.value === item.value }"
|
||||
@click="handleSelect(item)"
|
||||
>
|
||||
<text class="floor-name">{{ getFloorDisplayName(item) }}</text>
|
||||
<text v-if="selectedFloor && selectedFloor.value === item.value" class="tn-icon-success-circle-fill floor-check"></text>
|
||||
<view class="floor-name-left tn-flex tn-flex-col-center">
|
||||
<view class="floor-icon-wrap">
|
||||
<text class="tn-icon-building"></text>
|
||||
</view>
|
||||
<text class="floor-name">{{ getFloorDisplayName(item) }}</text>
|
||||
</view>
|
||||
<text v-if="selectedFloor && selectedFloor.value === item.value" class="tn-icon-check floor-check"></text>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
@@ -173,7 +191,7 @@ export default {
|
||||
this.floorList = []
|
||||
this.selectedFloor = null
|
||||
uni.showToast({
|
||||
title: this.$tr('楼层列表加载失败'),
|
||||
title: this.$tr('楼层加载失败'),
|
||||
icon: 'none'
|
||||
})
|
||||
})
|
||||
@@ -212,17 +230,29 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
$text-primary: #1A2233;
|
||||
$text-secondary: #6A7A99;
|
||||
$text-tertiary: #A1B0C4;
|
||||
$surface: #FFFFFF;
|
||||
$bg-popup: #F8FAFF;
|
||||
|
||||
.floor-selector {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.selector-header {
|
||||
background: #FFFFFF;
|
||||
.selector-card {
|
||||
background: $surface;
|
||||
border-radius: 20rpx;
|
||||
padding: 26rpx 32rpx;
|
||||
border: 1rpx solid rgba($brand-primary, 0.15);
|
||||
box-shadow: 0 4rpx 12rpx rgba($brand-primary, 0.05);
|
||||
min-height: 100rpx;
|
||||
padding: 26rpx 30rpx;
|
||||
border: 2rpx solid rgba($brand-primary, 0.12);
|
||||
box-shadow: 0 6rpx 20rpx rgba($brand-primary, 0.05);
|
||||
min-height: 120rpx;
|
||||
transition: all 0.25s ease;
|
||||
}
|
||||
|
||||
.selector-card:active {
|
||||
background: #FAFCFF;
|
||||
border-color: rgba($brand-primary, 0.25);
|
||||
}
|
||||
|
||||
.selected-info {
|
||||
@@ -230,41 +260,104 @@ export default {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.selected-label {
|
||||
font-size: 22rpx;
|
||||
color: $text-tertiary;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.selected-name {
|
||||
font-size: 28rpx;
|
||||
color: #1A2233;
|
||||
font-weight: 600;
|
||||
font-size: 30rpx;
|
||||
color: $text-primary;
|
||||
font-weight: 700;
|
||||
|
||||
&.is-empty {
|
||||
color: #A0B0C0;
|
||||
color: $text-tertiary;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.selector-arrow {
|
||||
width: 52rpx;
|
||||
height: 52rpx;
|
||||
border-radius: 50%;
|
||||
background: #F4F8FF;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-left: 20rpx;
|
||||
flex-shrink: 0;
|
||||
|
||||
text {
|
||||
font-size: 28rpx;
|
||||
color: $text-secondary;
|
||||
}
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
background: #F8FAFF;
|
||||
background: $bg-popup;
|
||||
}
|
||||
|
||||
.popup-header {
|
||||
padding: 40rpx 30rpx 20rpx;
|
||||
padding: 40rpx 30rpx 28rpx;
|
||||
text-align: center;
|
||||
border-bottom: 1px dashed rgba($brand-primary, 0.15);
|
||||
background: #FFFFFF;
|
||||
background: $surface;
|
||||
border-bottom: 1rpx solid rgba($brand-primary, 0.08);
|
||||
}
|
||||
|
||||
.popup-title {
|
||||
font-size: 32rpx;
|
||||
font-size: 34rpx;
|
||||
font-weight: 700;
|
||||
color: #1A2233;
|
||||
color: $text-primary;
|
||||
margin-bottom: 8rpx;
|
||||
letter-spacing: 1rpx;
|
||||
}
|
||||
|
||||
.popup-subtitle {
|
||||
font-size: 24rpx;
|
||||
color: $text-secondary;
|
||||
}
|
||||
|
||||
.floor-list-scroll {
|
||||
flex: 1;
|
||||
height: 0;
|
||||
padding: 20rpx 30rpx 60rpx;
|
||||
padding: 24rpx 30rpx 60rpx;
|
||||
}
|
||||
|
||||
.loading-state,
|
||||
.empty-state {
|
||||
padding-top: 120rpx;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
border-radius: 50%;
|
||||
background: rgba($brand-primary, 0.08);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 auto 24rpx;
|
||||
|
||||
text {
|
||||
font-size: 56rpx;
|
||||
color: $brand-primary;
|
||||
}
|
||||
}
|
||||
|
||||
.empty-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: 700;
|
||||
color: $text-primary;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.empty-desc {
|
||||
font-size: 24rpx;
|
||||
color: $text-secondary;
|
||||
}
|
||||
|
||||
.floor-list {
|
||||
@@ -279,13 +372,23 @@ export default {
|
||||
justify-content: space-between;
|
||||
background: #FFFFFF;
|
||||
border-radius: 20rpx;
|
||||
padding: 28rpx 30rpx;
|
||||
border: 1rpx solid rgba($brand-primary, 0.12);
|
||||
transition: all 0.2s ease;
|
||||
padding: 24rpx 28rpx;
|
||||
border: 2rpx solid rgba($brand-primary, 0.1);
|
||||
transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
|
||||
&.is-active {
|
||||
border-color: rgba($brand-primary, 0.5);
|
||||
box-shadow: 0 8rpx 20rpx rgba($brand-primary, 0.08);
|
||||
background: #FFFFFF;
|
||||
border-color: $brand-primary;
|
||||
box-shadow: 0 8rpx 24rpx rgba($brand-primary, 0.14);
|
||||
|
||||
.floor-name {
|
||||
color: $brand-primary;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.floor-icon-wrap {
|
||||
background: rgba($brand-primary, 0.15);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -293,13 +396,35 @@ export default {
|
||||
border-style: dashed;
|
||||
}
|
||||
|
||||
.floor-name-left {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.floor-icon-wrap {
|
||||
width: 44rpx;
|
||||
height: 44rpx;
|
||||
border-radius: 12rpx;
|
||||
background: rgba($brand-primary, 0.08);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 16rpx;
|
||||
transition: all 0.25s ease;
|
||||
|
||||
text {
|
||||
font-size: 24rpx;
|
||||
color: $brand-primary;
|
||||
}
|
||||
}
|
||||
|
||||
.floor-name {
|
||||
font-size: 28rpx;
|
||||
color: #1A2233;
|
||||
color: $text-primary;
|
||||
}
|
||||
|
||||
.floor-check {
|
||||
color: $brand-primary;
|
||||
font-size: 30rpx;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,51 +1,72 @@
|
||||
<template>
|
||||
<view class="room-type-selector">
|
||||
<view class="selector-header tn-flex tn-flex-row-between tn-flex-col-center" @click="openSelector">
|
||||
<view class="selector-card tn-flex tn-flex-row-between tn-flex-col-center" @click="openSelector">
|
||||
<view class="selected-info">
|
||||
<view class="selected-label">{{ $tr('意向房型') }}</view>
|
||||
<view class="selected-name tn-text-ellipsis" :class="{ 'is-empty': !selectedRoomType }">
|
||||
{{ selectedRoomType ? getRoomTypeDisplayName(selectedRoomType) : $tr('请选择意向房型') }}
|
||||
</view>
|
||||
<view class="selected-area tn-text-ellipsis" v-if="selectedArea">
|
||||
<text class="tn-icon-location area-icon"></text>
|
||||
{{ getAreaDisplayName(selectedArea) }}
|
||||
</view>
|
||||
</view>
|
||||
<text class="tn-icon-right tn-color-gray"></text>
|
||||
<view class="selector-arrow">
|
||||
<text class="tn-icon-right"></text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<tn-popup v-model="showPopup" mode="bottom" length="80%" :borderRadius="32" :closeBtn="true">
|
||||
<view class="popup-content">
|
||||
<view class="popup-header">
|
||||
<text class="popup-title">{{ $tr('选择意向房型') }}</text>
|
||||
<view class="popup-title">{{ $tr('选择意向房型') }}</view>
|
||||
<view class="popup-subtitle">{{ $tr('选择您心仪的房型与区域') }}</view>
|
||||
</view>
|
||||
|
||||
|
||||
<scroll-view scroll-y class="area-list-scroll">
|
||||
<view v-if="isLoading" class="loading-state tn-padding-xl tn-text-center">
|
||||
<tn-loading mode="circle"></tn-loading>
|
||||
<view class="tn-margin-top-sm tn-color-gray">{{ $tr('房型加载中...') }}</view>
|
||||
<tn-loading mode="circle" :size="48"></tn-loading>
|
||||
<view class="tn-margin-top tn-color-gray">{{ $tr('房型加载中...') }}</view>
|
||||
</view>
|
||||
|
||||
|
||||
<view v-else-if="!displayAreaList.length" class="empty-state tn-padding-xl tn-text-center">
|
||||
<text class="tn-color-gray">{{ $tr('暂无可选房型') }}</text>
|
||||
<view class="empty-icon">
|
||||
<text class="tn-icon-empty-data"></text>
|
||||
</view>
|
||||
<view class="empty-title">{{ $tr('暂无可选房型') }}</view>
|
||||
<view class="empty-desc">{{ $tr('当前暂无可用房型，请稍后再试') }}</view>
|
||||
</view>
|
||||
|
||||
<view v-else class="area-group" v-for="(area, index) in displayAreaList" :key="area.code">
|
||||
<view class="area-title tn-flex tn-flex-row-between tn-flex-col-center" @click="toggleArea(index)">
|
||||
<view class="tn-flex tn-flex-col-center">
|
||||
<text class="area-dot"></text>
|
||||
<text>{{ getAreaDisplayName(area) }}</text>
|
||||
<view class="area-title-left tn-flex tn-flex-col-center">
|
||||
<view class="area-icon-wrap">
|
||||
<text class="tn-icon-home"></text>
|
||||
</view>
|
||||
<text class="area-title-text">{{ getAreaDisplayName(area) }}</text>
|
||||
</view>
|
||||
<view class="area-toggle">
|
||||
<text :class="collapsedAreas[index] ? 'tn-icon-down' : 'tn-icon-up'"></text>
|
||||
</view>
|
||||
<text :class="collapsedAreas[index] ? 'tn-icon-down' : 'tn-icon-up'" class="tn-color-gray"></text>
|
||||
</view>
|
||||
<view class="room-type-grid" v-show="!collapsedAreas[index]">
|
||||
<view
|
||||
class="room-type-item"
|
||||
v-for="room in area.roomTypes"
|
||||
<view
|
||||
class="room-type-item"
|
||||
v-for="room in area.roomTypes"
|
||||
:key="room.code"
|
||||
:class="{ 'is-active': selectedRoomType && selectedRoomType.code === room.code }"
|
||||
@click="handleSelect(area, room)"
|
||||
>
|
||||
<view class="room-name tn-text-ellipsis">{{ getRoomTypeDisplayName(room) }}</view>
|
||||
<view class="room-price" v-if="room.price">¥{{ getPriceValue(room.price) }}{{ $tr('/月') }}</view>
|
||||
<view class="room-price" v-if="room.price">
|
||||
<text class="price-symbol">¥</text>
|
||||
<text class="price-value">{{ getPriceValue(room.price) }}</text>
|
||||
<text class="price-unit">{{ $tr('/月') }}</text>
|
||||
</view>
|
||||
<view v-else class="room-price room-price--empty">{{ $tr('价格面议') }}</view>
|
||||
<view class="active-mark">
|
||||
<text class="tn-icon-check"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -124,28 +145,28 @@ export default {
|
||||
},
|
||||
loadData(force = false) {
|
||||
if (!force && this.areaList.length > 0) return
|
||||
|
||||
|
||||
this.isLoading = true
|
||||
return areaPagination({ PageIndex: 1, PageSize: 100 }, this.language)
|
||||
.then((res) => {
|
||||
const rawList = Array.isArray(res?.data?.data) ? res.data.data : (Array.isArray(res?.data) ? res.data : [])
|
||||
|
||||
|
||||
this.areaList = rawList
|
||||
.map(item => normalizeAreaItem(item))
|
||||
.filter(area => area.roomTypes && area.roomTypes.length > 0)
|
||||
|
||||
|
||||
// 初始化全部不折叠
|
||||
const collapsed = {}
|
||||
this.areaList.forEach((_, index) => {
|
||||
collapsed[index] = false
|
||||
})
|
||||
this.collapsedAreas = collapsed
|
||||
|
||||
|
||||
this.syncSelection()
|
||||
})
|
||||
.catch((e) => {
|
||||
console.error('load room types error', e)
|
||||
uni.showToast({ title: this.$tr('房型列表加载失败'), icon: 'none' })
|
||||
uni.showToast({ title: this.$tr('房型加载失败'), icon: 'none' })
|
||||
})
|
||||
.finally(() => {
|
||||
this.isLoading = false
|
||||
@@ -153,12 +174,12 @@ export default {
|
||||
},
|
||||
syncSelection() {
|
||||
if (!this.displayAreaList.length) return
|
||||
|
||||
|
||||
let foundArea = null
|
||||
let foundRoom = null
|
||||
const previousAreaCode = this.selectedArea && this.selectedArea.code ? this.selectedArea.code : ''
|
||||
const previousRoomCode = this.selectedRoomType && this.selectedRoomType.code ? this.selectedRoomType.code : ''
|
||||
|
||||
|
||||
// Try to find by room type code
|
||||
if (this.value) {
|
||||
for (const area of this.displayAreaList) {
|
||||
@@ -170,18 +191,18 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// If not found by room, try to find by initial area code
|
||||
if (!foundRoom && this.initialAreaCode) {
|
||||
foundArea = this.displayAreaList.find(a => a.code === this.initialAreaCode)
|
||||
}
|
||||
|
||||
|
||||
if (foundArea) {
|
||||
this.selectedArea = foundArea
|
||||
if (foundRoom) {
|
||||
this.selectedRoomType = foundRoom
|
||||
}
|
||||
|
||||
|
||||
if (foundRoom) {
|
||||
if (this.value !== foundRoom.code) {
|
||||
this.$emit('input', foundRoom.code)
|
||||
@@ -227,17 +248,30 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
$luxury-gold: #D8B56A;
|
||||
$text-primary: #1A2233;
|
||||
$text-secondary: #6A7A99;
|
||||
$text-tertiary: #A1B0C4;
|
||||
$surface: #FFFFFF;
|
||||
$bg-popup: #F8FAFF;
|
||||
|
||||
.room-type-selector {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.selector-header {
|
||||
background: #FFFFFF;
|
||||
.selector-card {
|
||||
background: $surface;
|
||||
border-radius: 20rpx;
|
||||
padding: 26rpx 32rpx;
|
||||
border: 1rpx solid rgba($brand-primary, 0.15);
|
||||
box-shadow: 0 4rpx 12rpx rgba($brand-primary, 0.05);
|
||||
min-height: 100rpx;
|
||||
padding: 26rpx 30rpx;
|
||||
border: 2rpx solid rgba($brand-primary, 0.12);
|
||||
box-shadow: 0 6rpx 20rpx rgba($brand-primary, 0.05);
|
||||
min-height: 120rpx;
|
||||
transition: all 0.25s ease;
|
||||
}
|
||||
|
||||
.selector-card:active {
|
||||
background: #FAFCFF;
|
||||
border-color: rgba($brand-primary, 0.25);
|
||||
}
|
||||
|
||||
.selected-info {
|
||||
@@ -245,72 +279,175 @@ export default {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.selected-label {
|
||||
font-size: 22rpx;
|
||||
color: $text-tertiary;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.selected-name {
|
||||
font-size: 28rpx;
|
||||
color: #1A2233;
|
||||
font-weight: 600;
|
||||
|
||||
font-size: 30rpx;
|
||||
color: $text-primary;
|
||||
font-weight: 700;
|
||||
|
||||
&.is-empty {
|
||||
color: #A0B0C0;
|
||||
color: $text-tertiary;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.selected-area {
|
||||
font-size: 24rpx;
|
||||
color: $text-secondary;
|
||||
margin-top: 10rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.area-icon {
|
||||
font-size: 22rpx;
|
||||
color: #6A7A99;
|
||||
margin-top: 6rpx;
|
||||
margin-right: 6rpx;
|
||||
color: $brand-primary;
|
||||
}
|
||||
|
||||
.selector-arrow {
|
||||
width: 52rpx;
|
||||
height: 52rpx;
|
||||
border-radius: 50%;
|
||||
background: #F4F8FF;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-left: 20rpx;
|
||||
flex-shrink: 0;
|
||||
|
||||
text {
|
||||
font-size: 28rpx;
|
||||
color: $text-secondary;
|
||||
}
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
background: #F8FAFF;
|
||||
background: $bg-popup;
|
||||
}
|
||||
|
||||
.popup-header {
|
||||
padding: 40rpx 30rpx 20rpx;
|
||||
padding: 40rpx 30rpx 28rpx;
|
||||
text-align: center;
|
||||
border-bottom: 1px dashed rgba($brand-primary, 0.15);
|
||||
background: #FFFFFF;
|
||||
background: $surface;
|
||||
border-bottom: 1rpx solid rgba($brand-primary, 0.08);
|
||||
}
|
||||
|
||||
.popup-title {
|
||||
font-size: 32rpx;
|
||||
font-size: 34rpx;
|
||||
font-weight: 700;
|
||||
color: #1A2233;
|
||||
color: $text-primary;
|
||||
margin-bottom: 8rpx;
|
||||
letter-spacing: 1rpx;
|
||||
}
|
||||
|
||||
.popup-subtitle {
|
||||
font-size: 24rpx;
|
||||
color: $text-secondary;
|
||||
}
|
||||
|
||||
.area-list-scroll {
|
||||
flex: 1;
|
||||
height: 0;
|
||||
padding: 20rpx 30rpx 60rpx;
|
||||
padding: 24rpx 30rpx 60rpx;
|
||||
}
|
||||
|
||||
.loading-state,
|
||||
.empty-state {
|
||||
padding-top: 120rpx;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
border-radius: 50%;
|
||||
background: rgba($brand-primary, 0.08);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 auto 24rpx;
|
||||
|
||||
text {
|
||||
font-size: 56rpx;
|
||||
color: $brand-primary;
|
||||
}
|
||||
}
|
||||
|
||||
.empty-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: 700;
|
||||
color: $text-primary;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.empty-desc {
|
||||
font-size: 24rpx;
|
||||
color: $text-secondary;
|
||||
}
|
||||
|
||||
.area-group {
|
||||
margin-bottom: 30rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 20rpx;
|
||||
padding: 24rpx;
|
||||
box-shadow: 0 4rpx 12rpx rgba($brand-primary, 0.04);
|
||||
border: 1rpx solid rgba($brand-primary, 0.05);
|
||||
margin-bottom: 28rpx;
|
||||
background: $surface;
|
||||
border-radius: 24rpx;
|
||||
padding: 28rpx;
|
||||
box-shadow: 0 8rpx 28rpx rgba(26, 34, 51, 0.04);
|
||||
border: 1rpx solid rgba($brand-primary, 0.06);
|
||||
}
|
||||
|
||||
.area-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #1A2233;
|
||||
margin-bottom: 20rpx;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.area-dot {
|
||||
width: 12rpx;
|
||||
height: 12rpx;
|
||||
.area-title-left {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.area-icon-wrap {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
border-radius: 14rpx;
|
||||
background: rgba($brand-primary, 0.1);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 16rpx;
|
||||
flex-shrink: 0;
|
||||
|
||||
text {
|
||||
font-size: 26rpx;
|
||||
color: $brand-primary;
|
||||
}
|
||||
}
|
||||
|
||||
.area-title-text {
|
||||
font-size: 30rpx;
|
||||
font-weight: 700;
|
||||
color: $text-primary;
|
||||
}
|
||||
|
||||
.area-toggle {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
border-radius: 50%;
|
||||
background: $brand-primary;
|
||||
margin-right: 12rpx;
|
||||
box-shadow: 0 0 8rpx rgba($brand-primary, 0.4);
|
||||
background: #F4F8FF;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
|
||||
text {
|
||||
font-size: 24rpx;
|
||||
color: $text-secondary;
|
||||
}
|
||||
}
|
||||
|
||||
.room-type-grid {
|
||||
@@ -320,36 +457,86 @@ export default {
|
||||
}
|
||||
|
||||
.room-type-item {
|
||||
padding: 20rpx;
|
||||
border-radius: 16rpx;
|
||||
background: #FFFFFF;
|
||||
border: 1rpx solid rgba($brand-primary, 0.15);
|
||||
box-shadow: 0 4rpx 12rpx rgba($brand-primary, 0.05);
|
||||
transition: all 0.3s ease;
|
||||
|
||||
position: relative;
|
||||
padding: 24rpx 20rpx;
|
||||
border-radius: 20rpx;
|
||||
background: #FAFCFF;
|
||||
border: 2rpx solid rgba($brand-primary, 0.1);
|
||||
transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
overflow: hidden;
|
||||
|
||||
&.is-active {
|
||||
background: #FFFFFF;
|
||||
border-color: $brand-primary;
|
||||
box-shadow: 0 4rpx 16rpx rgba($brand-primary, 0.1);
|
||||
|
||||
box-shadow: 0 8rpx 24rpx rgba($brand-primary, 0.14);
|
||||
|
||||
.room-name {
|
||||
color: $brand-primary;
|
||||
}
|
||||
|
||||
.room-price {
|
||||
color: $brand-primary;
|
||||
}
|
||||
|
||||
.active-mark {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.room-name {
|
||||
font-size: 26rpx;
|
||||
font-weight: 600;
|
||||
color: #1A2233;
|
||||
margin-bottom: 8rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
color: $text-primary;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.room-price {
|
||||
font-size: 24rpx;
|
||||
color: $text-secondary;
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
|
||||
&--empty {
|
||||
font-size: 22rpx;
|
||||
color: $text-tertiary;
|
||||
}
|
||||
}
|
||||
|
||||
.price-symbol {
|
||||
font-size: 22rpx;
|
||||
color: #6A7A99;
|
||||
margin-right: 2rpx;
|
||||
}
|
||||
|
||||
.price-value {
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
margin-right: 4rpx;
|
||||
}
|
||||
|
||||
.price-unit {
|
||||
font-size: 22rpx;
|
||||
}
|
||||
|
||||
.active-mark {
|
||||
position: absolute;
|
||||
top: 12rpx;
|
||||
right: 12rpx;
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
border-radius: 50%;
|
||||
background: $brand-primary;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transform: scale(0);
|
||||
opacity: 0;
|
||||
transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
|
||||
text {
|
||||
font-size: 20rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -57,35 +57,38 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
$text-primary: #1A2233;
|
||||
$text-secondary: #6A7A99;
|
||||
$text-tertiary: #A1B0C4;
|
||||
|
||||
.option-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 16rpx;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.option-chip {
|
||||
padding: 16rpx 28rpx;
|
||||
border-radius: 999rpx;
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
color: #64748B;
|
||||
font-size: 24rpx;
|
||||
line-height: 1;
|
||||
border: 2rpx solid rgba(226, 232, 240, 0.8);
|
||||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.02);
|
||||
backdrop-filter: blur(8px);
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
padding: 0 34rpx;
|
||||
height: 72rpx;
|
||||
line-height: 72rpx;
|
||||
background: #F4F8FF;
|
||||
border-radius: 36rpx;
|
||||
font-size: 26rpx;
|
||||
color: $text-secondary;
|
||||
border: 2rpx solid transparent;
|
||||
transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
}
|
||||
|
||||
.option-chip--active {
|
||||
background: #1A2B4C;
|
||||
border-color: #1A2B4C;
|
||||
color: #FFFFFF;
|
||||
font-weight: 500;
|
||||
box-shadow: 0 8rpx 24rpx rgba(26, 43, 76, 0.2);
|
||||
background: linear-gradient(135deg, rgba($brand-primary, 0.1) 0%, rgba($brand-primary, 0.06) 100%);
|
||||
border-color: rgba($brand-primary, 0.35);
|
||||
color: $brand-primary;
|
||||
font-weight: 600;
|
||||
box-shadow: 0 6rpx 16rpx rgba($brand-primary, 0.12);
|
||||
}
|
||||
|
||||
.empty-tips {
|
||||
color: #94A3B8;
|
||||
color: $text-tertiary;
|
||||
font-size: 24rpx;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user