‘修改包邮城市三级页面’

pages/baoyou-city/baoyou-city.vue

@@ -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>