zhangyan/cmr-mini
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refine compass and ruler overlay

Browse Source
This commit is contained in:
zhangyan
2026-03-25 19:47:39 +08:00
parent f7d4499e36
commit ce25530938
5 changed files with 534 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
miniprogram/pages/map/map.wxss
View File

@@ -97,6 +97,86 @@
z-index: 4;
}
.map-stage__overlay-center-layer {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 4;
}
.center-scale-ruler {
position: absolute;
width: 220rpx;
transform: translate(-50%, -100%);
pointer-events: none;
z-index: 12;
}
.center-scale-ruler__axis {
position: absolute;
left: 50%;
top: 0;
bottom: 0;
width: 4rpx;
margin-left: -2rpx;
border-radius: 999rpx;
background: rgba(19, 20, 18, 0.92);
}
.center-scale-ruler__arrow {
position: absolute;
left: 50%;
top: -34rpx;
width: 0;
height: 0;
margin-left: -14rpx;
border-left: 14rpx solid transparent;
border-right: 14rpx solid transparent;
border-bottom: 34rpx solid rgba(19, 20, 18, 0.96);
}
.center-scale-ruler__tick {
position: absolute;
left: 50%;
width: 18rpx;
height: 4rpx;
margin-left: -9rpx;
margin-top: -2rpx;
border-radius: 999rpx;
background: rgba(19, 20, 18, 0.82);
}
.center-scale-ruler__tick--major {
width: 32rpx;
margin-left: -16rpx;
height: 5rpx;
margin-top: -2.5rpx;
background: rgba(12, 14, 12, 0.96);
}
.center-scale-ruler__tick--zero {
width: 34rpx;
margin-left: -17rpx;
}
.center-scale-ruler__label {
position: absolute;
left: 50%;
margin-left: 18rpx;
transform: translateY(-50%);
font-size: 22rpx;
line-height: 1;
font-weight: 800;
color: rgba(19, 20, 18, 0.96);
text-shadow: 0 1rpx 0 rgba(255, 255, 255, 0.28);
white-space: nowrap;
}
.center-scale-ruler__label--zero {
transform: translateY(-24%);
font-size: 24rpx;
}
.map-stage__topbar {
display: flex;
align-items: flex-start;
@@ -329,14 +409,38 @@
align-items: center;
gap: 6rpx;
flex-shrink: 0;
position: relative;
z-index: 20;
}
.compass-widget__heading-wrap {
display: flex;
flex-direction: column;
align-items: center;
gap: 0;
position: relative;
z-index: 21;
}
.compass-widget__heading {
font-size: 14rpx;
min-width: 96rpx;
padding: 6rpx 12rpx;
font-size: 20rpx;
line-height: 1;
font-weight: 600;
color: rgba(32, 42, 34, 0.72);
text-shadow: 0 1rpx 0 rgba(255, 255, 255, 0.35);
text-align: center;
}
.compass-widget__edge-arrow-wrap {
display: flex;
align-items: center;
justify-content: center;
width: 40rpx;
height: 20rpx;
margin-top: -2rpx;
margin-bottom: -4rpx;
}
.compass-widget__dial {
@@ -519,8 +623,6 @@
.compass-widget__edge-arrow {
width: 0;
height: 0;
margin-top: -2rpx;
margin-bottom: -4rpx;
border-left: 8rpx solid transparent;
border-right: 8rpx solid transparent;
border-top: 14rpx solid rgba(58, 49, 37, 0.72);
@@ -530,12 +632,16 @@
.compass-widget__hint {
max-width: 196rpx;
font-size: 14rpx;
padding: 4rpx 10rpx;
border-radius: 999rpx;
background: rgba(219, 238, 212, 0.94);
font-size: 16rpx;
line-height: 1.3;
color: #d62828;
text-align: center;
font-weight: 700;
text-shadow: 0 1rpx 0 rgba(255, 255, 255, 0.24);
box-shadow: 0 2rpx 8rpx rgba(22, 48, 32, 0.08);
}
.race-panel-swiper {
position: absolute;