From 8eb09ce6f069c4655e58adfba6fd5ae4d79bfcc8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=BB=9D=E5=B0=98?= <237809796@qq.com> Date: Thu, 29 Jan 2026 17:06:05 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=EF=BC=9A=E5=9F=8E=E5=B8=82?= =?UTF-8?q?=E9=80=89=E6=8B=A9=E5=99=A8UI=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- basic-info.css | 364 ++++++++++++++++++++++++++++---- basic-info.html | 38 +++- src/js/pages/basic-info.page.js | 1 + src/js/services/area.service.js | 2 +- 4 files changed, 355 insertions(+), 50 deletions(-) diff --git a/basic-info.css b/basic-info.css index ddfeb7a..57143ec 100644 --- a/basic-info.css +++ b/basic-info.css @@ -669,9 +669,9 @@ body { bottom: 0; left: 0; width: 100%; - background-color: #f5f5f5; - border-radius: 16px 16px 0 0; - max-height: 70vh; + background-color: #fff; + border-radius: 20px 20px 0 0; + max-height: 80vh; display: flex; flex-direction: column; animation: slideUp 0.3s ease; @@ -690,11 +690,319 @@ body { display: flex; justify-content: space-between; align-items: center; - padding: 16px; - border-bottom: 1px solid #e5e5e5; + padding: 6px 20px; + border-bottom: 1px solid #f0f0f0; background-color: #fff; } +.city-picker-body { + flex: 1; + overflow-y: auto; + padding: 0; + background-color: #fff; + display: flex; + flex-direction: column; +} + +.city-picker-body::-webkit-scrollbar { + width: 4px; +} + +.city-picker-body::-webkit-scrollbar-thumb { + background: #e0e0e0; + border-radius: 2px; +} + +/* ==================== 定位和热门城市区域 ==================== */ +.city-picker-hot-section { + padding: 8px; + border-bottom: 1px solid #f0f0f0; + flex-shrink: 0; +} + +/* 定位区域 */ +.location-section { + margin-bottom: 12px; +} + +/* 定位标签 */ +.location-badge { + display: inline-flex; + align-items: center; + gap: 6px; + padding: 8px 16px; + background: #fff; + border: 1.5px solid #e5e5e5; + border-radius: 18px; + font-size: 14px; + color: #333; + font-weight: 500; + cursor: pointer; + transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); + user-select: none; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); +} + +.location-badge:hover { + border-color: #3474fe; + color: #3474fe; + background: #E8F0FF; + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(52, 116, 254, 0.2); +} + +.location-badge:active { + transform: translateY(0); +} + +.location-badge.locating { + opacity: 0.7; + cursor: not-allowed; + pointer-events: none; +} + +.location-badge .location-icon { + font-size: 16px; + display: inline-block; + filter: hue-rotate(0deg) saturate(1.2); + line-height: 1; +} + +.location-badge .location-text { + font-size: 13px; +} + +/* 热门城市区域 */ +.hot-cities-section { + margin-bottom: 0; +} + +.section-title { + font-size: 14px; + font-weight: 600; + color: #333; + margin-bottom: 10px; + display: flex; + align-items: center; + gap: 6px; +} + +.section-title::before { + content: ''; + width: 3px; + height: 14px; + background: #3474fe; + border-radius: 2px; +} + +.hot-cities-grid { + display: flex; + flex-wrap: wrap; + gap: 10px; +} + +/* 热门城市标签 */ +.city-tag { + padding: 8px 16px; + background: #fff; + border: 1.5px solid #e5e5e5; + border-radius: 20px; + font-size: 13px; + color: #333; + cursor: pointer; + transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); + user-select: none; + white-space: nowrap; +} + +.city-tag:hover { + border-color: #3474fe; + color: #3474fe; + background: #E8F0FF; + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(52, 116, 254, 0.2); +} + +.city-tag:active { + transform: translateY(0); +} + +.city-tag.active { + background: #3474fe; + border-color: #3474fe; + color: #fff; + font-weight: 500; + box-shadow: 0 4px 12px rgba(52, 116, 254, 0.35); +} + +/* ==================== 省份城市联动区域 ==================== */ +.province-city-section { + padding: 0; + flex: 1; + display: flex; + flex-direction: column; + overflow: hidden; +} + +.province-city-section > .section-title { + padding: 12px 16px 10px; + margin-bottom: 0; + background: #fff; +} + +.province-city-container { + display: flex; + flex: 1; + overflow: hidden; + border-top: 1px solid #f0f0f0; +} + +/* 省份列表 */ +.province-list-wrapper { + width: 100px; + flex-shrink: 0; + overflow: hidden; + background: #f5f5f5; + border-right: 1px solid #e5e5e5; +} + +.province-list { + display: flex; + flex-direction: column; + gap: 0; + max-height: 280px; + overflow-y: auto; + padding-right: 0; + background: #f5f5f5; +} + +.province-list::-webkit-scrollbar { + width: 4px; +} + +.province-list::-webkit-scrollbar-thumb { + background: #e0e0e0; + border-radius: 2px; +} + +.province-item { + padding: 12px 10px; + font-size: 14px; + color: #333; + cursor: pointer; + border-radius: 0; + transition: all 0.2s ease; + text-align: center; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + background: transparent; + flex-shrink: 0; +} + +.province-item:hover { + background: rgba(255, 255, 255, 0.5); + color: #333; +} + +.province-item.active { + background: #3474fe; + color: #fff; + font-weight: 500; +} + +/* 城市网格 */ +.city-grid-wrapper { + flex: 1; + overflow: hidden; + background: #fff; +} + +.city-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 10px; + max-height: 280px; + overflow-y: auto; + padding: 12px; + align-content: start; +} + +.city-grid::-webkit-scrollbar { + width: 6px; +} + +.city-grid::-webkit-scrollbar-thumb { + background: #e0e0e0; + border-radius: 3px; +} + +.city-item { + padding: 10px 6px; + text-align: center; + font-size: 13px; + color: #333; + background: #fff; + border: 1px solid #e5e5e5; + border-radius: 8px; + cursor: pointer; + transition: all 0.2s ease; + white-space: normal; + word-break: break-all; + line-height: 1.3; + min-height: 40px; + display: flex; + align-items: center; + justify-content: center; +} + +.city-item:hover { + background: #E8F0FF; + border-color: #3474fe; + color: #3474fe; +} + +.city-item.active { + background: #3474fe; + border-color: #3474fe; + color: #fff; + font-weight: 500; +} + +/* 淡入动画 */ +@keyframes fadeIn { + from { + opacity: 0; + transform: translateY(10px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +/* 响应式设计 */ +@media (max-width: 768px) { + .province-list-wrapper { + width: 90px; + } + + .city-grid { + grid-template-columns: repeat(3, 1fr); + gap: 8px; + padding: 10px; + } + + .hot-cities-grid { + gap: 8px; + } + + .city-tag { + padding: 8px 16px; + font-size: 13px; + } +} + .city-picker-btn { background: none; border: none; @@ -713,50 +1021,16 @@ body { } .city-picker-confirm { + color: #666; + font-weight: 400; + transition: all 0.2s ease; +} + +.city-picker-confirm.has-selection { color: #3474fe; font-weight: 500; } -.city-picker-body { - display: flex; - flex: 1; - overflow: hidden; - background-color: #f5f5f5; -} - -.city-picker-column { - flex: 1; - overflow-y: auto; - background-color: #fff; -} - -.city-picker-column:first-child { - border-right: 1px solid #e5e5e5; -} - -.city-picker-item { - padding: 12px 16px; - font-size: 14px; - color: #333; - cursor: pointer; - transition: background-color 0.2s ease; - border-bottom: 1px solid #f5f5f5; -} - -.city-picker-item:active { - background-color: #f0f0f0; -} - -.city-picker-item.active { - background-color: #e8f0ff; - color: #3474fe; - font-weight: 600; -} - -body.modal-open { - overflow: hidden; -} - /* Toast 提示样式 */ .toast { position: fixed; diff --git a/basic-info.html b/basic-info.html index ad6f609..aa4caba 100644 --- a/basic-info.html +++ b/basic-info.html @@ -74,12 +74,42 @@ +
-
- + +
+ +
+ +
+ + +
+
热门城市
+
+ +
+
-
- + + +
+
选择地区
+
+ +
+
+ +
+
+ + +
+
+ +
+
+
diff --git a/src/js/pages/basic-info.page.js b/src/js/pages/basic-info.page.js index bd2867a..e78288f 100644 --- a/src/js/pages/basic-info.page.js +++ b/src/js/pages/basic-info.page.js @@ -100,6 +100,7 @@ export class BasicInfoPage { modalId: 'cityPickerModal', provinceColumnId: 'provinceColumn', cityColumnId: 'cityColumn', + hotCitiesId: 'hotCitiesList', cancelBtnId: 'cityCancelBtn', confirmBtnId: 'cityConfirmBtn', onConfirm: (result) => { diff --git a/src/js/services/area.service.js b/src/js/services/area.service.js index fa35650..16c9557 100644 --- a/src/js/services/area.service.js +++ b/src/js/services/area.service.js @@ -121,7 +121,7 @@ export class AreaService { provinceCode: province.code, cityCode: city ? city.code : '', districtCode: district ? district.code : '', - value: city ? `${province.name}/${city.name}` : province.name + value: city ? city.name : province.name // 只返回市名或省名 }; }