timi/gaoYuJournal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix map marker width

Browse Source
This commit is contained in:
Timi
2025-12-18 19:21:46 +08:00
parent 186a74bc77
commit 6f74559c01
11 changed files with 130 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files

129
miniprogram/pages/main/journal-map/index.less
View File

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

33
miniprogram/pages/main/journal-map/index.wxml
View File

@ -13,23 +13,28 @@
bindcallouttap="onCalloutTap"
>
<cover-view slot="callout">
<block wx:for="{{locations}}" wx:key="locationKey" wx:for-index="markerIndex">
<cover-view class="custom-callout" marker-id="{{markerIndex}}">
<cover-view class="callout-content">
<cover-view wx:if="{{item.previewThumb}}" class="thumb-container">
<cover-image class="thumb" src="{{item.previewThumb}}" />
<cover-view wx:if="{{item.count > 1}}" class="count-badge">{{item.count}}</cover-view>
</cover-view>
<cover-view class="text-container">
<cover-view wx:if="{{item.location}}" class="location">{{item.location}}</cover-view>
<cover-view class="date-count">
<cover-view class="date">{{item.date}}</cover-view>
<cover-view wx:if="{{item.count > 1}}" class="count">{{item.count}} 条日记</cover-view>
</cover-view>
<cover-view
class="location"
wx:for="{{locations}}"
wx:key="locationKey"
wx:for-index="locationIndex"
marker-id="{{locationIndex}}"
style="{{'--title-length: ' + item.location.length}}"
>
<cover-view class="content">
<cover-view wx:if="{{item.previewThumb}}" class="thumb">
<cover-image class="img" src="{{item.previewThumb}}" />
<cover-view wx:if="{{1 < item.count}}" class="badge">{{item.count}}</cover-view>
</cover-view>
<cover-view class="text">
<cover-view wx:if="{{item.location}}" class="value">{{item.location}}</cover-view>
<cover-view class="date-count">
<cover-view class="date">{{item.date}}</cover-view>
<cover-view wx:if="{{1 < item.count}}" class="count">{{item.count}} 条日记</cover-view>
</cover-view>
</cover-view>
</cover-view>
</block>
</cover-view>
</cover-view>
</map>
<view wx:if="{{isLoading}}" class="loading">