|
|
|
@ -1,11 +1,14 @@ |
|
|
|
<template> |
|
|
|
<view class="byc-container" :style="{paddingTop: (statusBarHeight + 88) + 'rpx'}"> |
|
|
|
<view class="byc-container" :style="{paddingTop: 'calc(150rpx + ' + statusBarHeight + 'px)'}"> |
|
|
|
<!-- 顶部导航栏 --> |
|
|
|
<view class="nav-bar" :style="{height: (statusBarHeight + 88) + 'rpx', paddingTop: statusBarHeight + 'px'}"> |
|
|
|
<view class="nav-bar" :style="{paddingTop: statusBarHeight + 'px'}"> |
|
|
|
<view class="back" @tap="goBack"> |
|
|
|
<uni-icons type="left" size="20" color="#fff"></uni-icons> |
|
|
|
</view> |
|
|
|
<!-- <text class="title">包邮服务城市</text> --> |
|
|
|
<text class="nav-title">包邮服务城市</text> |
|
|
|
<view class="nav-icons"> |
|
|
|
<!-- 占位元素，保持布局对称 --> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<!-- 蓝色banner卡片 --> |
|
|
|
<view class="byc-banner"> |
|
|
|
@ -21,10 +24,13 @@ |
|
|
|
<view class="byc-province-list"> |
|
|
|
<view class="byc-province-item" v-for="(province, idx) in cityList" :key="province.id"> |
|
|
|
<view class="byc-province-name">{{ province.name }}</view> |
|
|
|
<view class="byc-city-list"> |
|
|
|
<text v-for="(city, cidx) in (province.children || [])" :key="city.id" class="byc-city"> |
|
|
|
<text v-if="cidx !== 0" class="byc-dot">·</text>{{ city.name }} |
|
|
|
</text> |
|
|
|
<view class="byc-city-group" v-for="(city, cidx) in (province.children || [])" :key="city.id"> |
|
|
|
<view class="byc-city-name">{{ city.name }}</view> |
|
|
|
<view class="byc-district-list" v-if="city.children && city.children.length > 0"> |
|
|
|
<text v-for="(district, didx) in city.children" :key="district.id" class="byc-district"> |
|
|
|
<text v-if="didx !== 0" class="byc-dot">·</text>{{ district.name }} |
|
|
|
</text> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
@ -80,34 +86,44 @@ export default { |
|
|
|
padding-bottom: env(safe-area-inset-bottom); |
|
|
|
} |
|
|
|
.nav-bar { |
|
|
|
|
|
|
|
background: #2180ee; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
height: calc(150rpx + var(--status-bar-height)); |
|
|
|
padding: 0 32rpx; |
|
|
|
background: #2486f6; |
|
|
|
position: fixed; |
|
|
|
top: 0; |
|
|
|
left: 0; |
|
|
|
right: 0; |
|
|
|
z-index: 999; |
|
|
|
// padding: 0 30rpx; |
|
|
|
} |
|
|
|
.back { |
|
|
|
width: 100%; |
|
|
|
padding: 10rpx; |
|
|
|
color: #fff; |
|
|
|
// margin-left: -20rpx; |
|
|
|
left: 0; |
|
|
|
display: flex; |
|
|
|
box-sizing: border-box; |
|
|
|
box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.03); |
|
|
|
.back { |
|
|
|
padding: 20rpx; |
|
|
|
margin-left: -20rpx; |
|
|
|
} |
|
|
|
.nav-title { |
|
|
|
flex: 1; |
|
|
|
text-align: center; |
|
|
|
font-size: 32rpx; |
|
|
|
font-weight: 500; |
|
|
|
color: #fff; |
|
|
|
} |
|
|
|
.nav-icons { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
// justify-content: center; |
|
|
|
gap: 12px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.byc-banner { |
|
|
|
margin: 0; |
|
|
|
// border-radius: 24rpx; |
|
|
|
margin: -60rpx 0 0 0; |
|
|
|
overflow: hidden; |
|
|
|
box-shadow: 0 4rpx 24rpx rgba(60, 167, 250, 0.10); |
|
|
|
background: none; |
|
|
|
position: relative; |
|
|
|
z-index: 1; |
|
|
|
max-height: 400rpx; |
|
|
|
} |
|
|
|
.byc-banner-left { |
|
|
|
flex: 1; |
|
|
|
@ -126,12 +142,15 @@ export default { |
|
|
|
} |
|
|
|
.byc-banner-img { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
max-height: 400rpx; |
|
|
|
display: block; |
|
|
|
object-fit: cover; |
|
|
|
} |
|
|
|
.byc-main-card { |
|
|
|
background: #fff; |
|
|
|
border-radius: 36rpx; |
|
|
|
margin: -60rpx 0 0 0; |
|
|
|
margin: -40rpx 0 0 0; |
|
|
|
box-shadow: 0 8rpx 32rpx rgba(60, 167, 250, 0.08); |
|
|
|
padding: 48rpx 32rpx 32rpx 32rpx; |
|
|
|
position: relative; |
|
|
|
@ -164,22 +183,36 @@ export default { |
|
|
|
color: #222; |
|
|
|
margin-bottom: 12rpx; |
|
|
|
} |
|
|
|
.byc-city-list { |
|
|
|
.byc-city-group { |
|
|
|
margin-bottom: 20rpx; |
|
|
|
padding-left: 16rpx; |
|
|
|
border-left: 3rpx solid #e5e5e5; |
|
|
|
&:last-child { margin-bottom: 0; } |
|
|
|
} |
|
|
|
.byc-city-name { |
|
|
|
font-size: 30rpx; |
|
|
|
font-weight: 600; |
|
|
|
color: #333; |
|
|
|
margin-bottom: 8rpx; |
|
|
|
} |
|
|
|
.byc-district-list { |
|
|
|
display: flex; |
|
|
|
flex-wrap: wrap; |
|
|
|
font-size: 28rpx; |
|
|
|
color: #999; |
|
|
|
line-height: 1.7; |
|
|
|
font-size: 26rpx; |
|
|
|
color: #666; |
|
|
|
line-height: 1.6; |
|
|
|
padding-left: 20rpx; |
|
|
|
} |
|
|
|
.byc-city { |
|
|
|
margin-right: 18rpx; |
|
|
|
.byc-district { |
|
|
|
margin-right: 16rpx; |
|
|
|
margin-bottom: 6rpx; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
} |
|
|
|
.byc-dot { |
|
|
|
margin-right: 8rpx; |
|
|
|
margin-right: 6rpx; |
|
|
|
color: #bbb; |
|
|
|
font-size: 28rpx; |
|
|
|
font-size: 24rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
