From 6f74559c012b5c9f4c6c8f66780252946de46051 Mon Sep 17 00:00:00 2001 From: Timi Date: Thu, 18 Dec 2025 19:21:46 +0800 Subject: [PATCH] fix map marker width --- miniprogram/pages/main/journal-map/index.less | 129 +++++++++--------- miniprogram/pages/main/journal-map/index.wxml | 33 +++-- .../main/travel-location-detail/index.less | 25 ++-- .../main/travel-location-detail/index.ts | 2 +- .../main/travel-location-detail/index.wxml | 8 +- .../main/travel-location-editor/index.json | 4 +- .../pages/main/travel-location-map/index.less | 12 +- .../pages/main/travel-location-map/index.ts | 4 +- .../pages/main/travel-location-map/index.wxml | 27 ++-- miniprogram/theme.less | 6 +- miniprogram/types/Travel.ts | 8 +- 11 files changed, 130 insertions(+), 128 deletions(-) diff --git a/miniprogram/pages/main/journal-map/index.less b/miniprogram/pages/main/journal-map/index.less index 5671ea3..4c171a1 100644 --- a/miniprogram/pages/main/journal-map/index.less +++ b/miniprogram/pages/main/journal-map/index.less @@ -8,75 +8,74 @@ .map { width: 100%; height: 100%; - } - .custom-callout { - width: fit-content; - min-width: 350rpx; - max-width: 450rpx; - background: var(--theme-bg-card-secondary); - box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, .15); - border-radius: 6rpx; - - .callout-content { - display: flex; - padding: 8rpx 16rpx 8rpx 8rpx; - align-items: flex-start; - - .thumb-container { - width: 72rpx; - height: 72rpx; - position: relative; - flex-shrink: 0; - margin-right: 12rpx; - overflow: hidden; - border-radius: 6rpx; - - .thumb { - width: 100%; - height: 100%; - } - - .count-badge { - top: 4rpx; - right: 4rpx; - color: #fff; - padding: 2rpx 6rpx; - position: absolute; - font-size: 20rpx; - background: rgba(0, 0, 0, .7); - border-radius: 8rpx; - } - } - - .text-container { - flex: 1; + .location { + width: fit-content; + background: var(--theme-bg-card); + box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, .15); + border-radius: 6rpx; + + .content { display: flex; - overflow: hidden; - flex-direction: column; - - .location { - color: var(--theme-text-primary); + padding: 8rpx 16rpx 8rpx 8rpx; + align-items: flex-start; + + .thumb { + width: 72rpx; + height: 72rpx; + position: relative; + flex-shrink: 0; + margin-right: 12rpx; overflow: hidden; - font-size: 30rpx; - white-space: nowrap; - text-overflow: ellipsis; - margin-bottom: 4rpx; - } - - .date-count { - display: flex; - - .date { - color: var(--theme-text-secondary); - font-size: 24rpx; - margin-right: 16rpx; + border-radius: 6rpx; + + .img { + width: 100%; + height: 100%; } - - .count { - color: var(--theme-wx); - font-size: 24rpx; - font-weight: 600; + + .badge { + top: 4rpx; + right: 4rpx; + color: #fff; + padding: 2rpx 6rpx; + position: absolute; + font-size: 20rpx; + background: rgba(0, 0, 0, .7); + border-radius: 8rpx; + } + } + + .text { + flex: 1; + display: flex; + overflow: hidden; + flex-direction: column; + + .value { + color: var(--theme-text-primary); + width: calc(var(--title-length) * 30rpx); + overflow: hidden; + font-size: 30rpx; + white-space: nowrap; + text-overflow: ellipsis; + margin-bottom: 4rpx; + } + + .date-count { + display: flex; + + .date { + color: var(--theme-text-secondary); + font-size: 24rpx; + margin-right: 16rpx; + } + + .count { + color: var(--theme-wx); + font-size: 24rpx; + font-weight: 600; + } } } } diff --git a/miniprogram/pages/main/journal-map/index.wxml b/miniprogram/pages/main/journal-map/index.wxml index 0c4789b..6788a53 100644 --- a/miniprogram/pages/main/journal-map/index.wxml +++ b/miniprogram/pages/main/journal-map/index.wxml @@ -13,23 +13,28 @@ bindcallouttap="onCalloutTap" > - - - - - - {{item.count}} - - - {{item.location}} - - {{item.date}} - {{item.count}} 条日记 - + + + + + {{item.count}} + + + {{item.location}} + + {{item.date}} + {{item.count}} 条日记 - + diff --git a/miniprogram/pages/main/travel-location-detail/index.less b/miniprogram/pages/main/travel-location-detail/index.less index e1a6230..8d95921 100644 --- a/miniprogram/pages/main/travel-location-detail/index.less +++ b/miniprogram/pages/main/travel-location-detail/index.less @@ -55,28 +55,21 @@ .map { padding: 0; - } - .mini-map { - width: 100%; - height: 520rpx; - } + .instance { + width: 100%; + height: 520rpx; - .custom-callout { - width: fit-content; - max-width: 400rpx; - background: var(--theme-bg-card-secondary); - box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, .15); - border-radius: 8rpx; - - .callout-content { - padding: 12rpx 20rpx; - - .callout-text { + .marker { + width: calc(var(--title-length) * 28rpx); color: var(--theme-text-primary); + padding: 8rpx; overflow: hidden; font-size: 28rpx; + background: var(--theme-bg-card); + box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, .15); white-space: nowrap; + border-radius: 8rpx; text-overflow: ellipsis; } } diff --git a/miniprogram/pages/main/travel-location-detail/index.ts b/miniprogram/pages/main/travel-location-detail/index.ts index 87b17fd..1301a7b 100644 --- a/miniprogram/pages/main/travel-location-detail/index.ts +++ b/miniprogram/pages/main/travel-location-detail/index.ts @@ -120,7 +120,7 @@ Page({ width: 24, height: 30, customCallout: { - anchorY: 0, + anchorY: -2, anchorX: 0, display: "ALWAYS" } diff --git a/miniprogram/pages/main/travel-location-detail/index.wxml b/miniprogram/pages/main/travel-location-detail/index.wxml index 371ba5b..b38563d 100644 --- a/miniprogram/pages/main/travel-location-detail/index.wxml +++ b/miniprogram/pages/main/travel-location-detail/index.wxml @@ -35,7 +35,7 @@ - - - {{location.title || '地点'}} - + + {{location.title || '地点'}} diff --git a/miniprogram/pages/main/travel-location-editor/index.json b/miniprogram/pages/main/travel-location-editor/index.json index 3b377fe..f20f142 100644 --- a/miniprogram/pages/main/travel-location-editor/index.json +++ b/miniprogram/pages/main/travel-location-editor/index.json @@ -7,13 +7,11 @@ "t-input": "tdesign-miniprogram/input/input", "t-button": "tdesign-miniprogram/button/button", "t-dialog": "tdesign-miniprogram/dialog/dialog", - "t-picker": "tdesign-miniprogram/picker/picker", "t-navbar": "tdesign-miniprogram/navbar/navbar", "t-loading": "tdesign-miniprogram/loading/loading", "t-stepper": "tdesign-miniprogram/stepper/stepper", "t-textarea": "tdesign-miniprogram/textarea/textarea", - "t-cell-group": "tdesign-miniprogram/cell-group/cell-group", - "t-picker-item": "tdesign-miniprogram/picker-item/picker-item" + "t-cell-group": "tdesign-miniprogram/cell-group/cell-group" }, "styleIsolation": "shared" } diff --git a/miniprogram/pages/main/travel-location-map/index.less b/miniprogram/pages/main/travel-location-map/index.less index 4659c10..e6b2f1c 100644 --- a/miniprogram/pages/main/travel-location-map/index.less +++ b/miniprogram/pages/main/travel-location-map/index.less @@ -9,20 +9,17 @@ width: 100%; height: 100%; - .custom-callout { + .marker { width: fit-content; - padding: 12rpx 16rpx; display: flex; - min-width: 300rpx; - max-width: 400rpx; - background: var(--theme-bg-card-secondary); + background: var(--theme-bg-card); box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, .15); border-radius: 6rpx; flex-direction: column; - .location-item { + .location { display: flex; - padding: 6rpx 0; + padding: 8rpx 16rpx 8rpx 8rpx; align-items: center; .type { @@ -37,6 +34,7 @@ .title { flex: 1; + width: calc(var(--title-length) * 28rpx); color: var(--theme-text-primary, #333); overflow: hidden; font-size: 28rpx; diff --git a/miniprogram/pages/main/travel-location-map/index.ts b/miniprogram/pages/main/travel-location-map/index.ts index a9ce72e..00795fe 100644 --- a/miniprogram/pages/main/travel-location-map/index.ts +++ b/miniprogram/pages/main/travel-location-map/index.ts @@ -2,6 +2,7 @@ import { TravelLocationApi } from "../../../api/TravelLocationApi"; import { TravelLocation, TravelLocationTypeLabel } from "../../../types/Travel"; +import Toolkit from "../../../utils/Toolkit"; interface MapMarker { id: number; @@ -110,7 +111,8 @@ Page({ height: 30, customCallout: { anchorY: -2, - anchorX: 0, + // 随机错位避免近距离重叠 + anchorX: Toolkit.random(-10, 10), display: "ALWAYS" }, locations: locs diff --git a/miniprogram/pages/main/travel-location-map/index.wxml b/miniprogram/pages/main/travel-location-map/index.wxml index d2d5315..003b08e 100644 --- a/miniprogram/pages/main/travel-location-map/index.wxml +++ b/miniprogram/pages/main/travel-location-map/index.wxml @@ -13,16 +13,25 @@ bindcallouttap="onCalloutTap" > - - - - - {{location.typeLabel}} - {{location.title || '未命名地点'}} - - + + + {{location.typeLabel}} + {{location.title || '未命名地点'}} - + diff --git a/miniprogram/theme.less b/miniprogram/theme.less index 7db672b..d0ff13f 100644 --- a/miniprogram/theme.less +++ b/miniprogram/theme.less @@ -68,9 +68,9 @@ page { --theme-bg-wx: #111; --theme-bg-primary: #1A1A1A; --theme-bg-secondary: #2A2A2A; - --theme-bg-card: #2C2C2C; - --theme-bg-card-secondary: #404040; - --theme-bg-journal: #404040; + --theme-bg-card: #3D3D3D; + --theme-bg-card-secondary: #525252; + --theme-bg-journal: #4B4B4B; --theme-bg-overlay: rgba(0, 0, 0, .3); --theme-bg-menu: rgba(40, 40, 40, .95); diff --git a/miniprogram/types/Travel.ts b/miniprogram/types/Travel.ts index b062739..2810262 100644 --- a/miniprogram/types/Travel.ts +++ b/miniprogram/types/Travel.ts @@ -96,7 +96,7 @@ export enum TravelLocationType { ATTRACTION = "ATTRACTION", SHOPPING = "SHOPPING", PLAY = "PLAY", - LIFE = "LEFE" + LIFE = "LIFE" } /** 地点类型中文映射 */ @@ -118,7 +118,7 @@ export const TravelLocationTypeIcon: Record = { [TravelLocationType.ATTRACTION]: "image-1", [TravelLocationType.SHOPPING]: "shop", [TravelLocationType.PLAY]: "ferris-wheel", - [TravelLocationType.LIFE]: "cart" + [TravelLocationType.LIFE]: "location" }; /** 出行地点实体 */ @@ -154,10 +154,10 @@ export interface TravelLocation extends Model { requireAppointment?: boolean; /** 评分 */ - score?: number; + score?: number | null; /** 重要程度 */ - importance?: number; + importance?: number | null; /** 附件 */ items?: Attachment[];