chenwu/PetCommunity
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

checkpoint: pre-refactor state before fixing P0/P1 issues

Browse Source
This commit is contained in:
chenwu
2026-06-11 18:40:59 +08:00
parent 2c3c2653fa
commit d55ed60907
41 changed files with 1129 additions and 1051 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
miniprogram/pages/nearby/nearby.ts
View File

@@ -57,8 +57,8 @@ Page({
longitude: loc.longitude,
radius: NEARBY_RADIUS_KM * 1000,
strokeWidth: 2,
strokeColor: 'rgba(255, 79, 145, 0.3)',
fillColor: 'rgba(255, 79, 145, 0.05)',
strokeColor: 'rgba(139, 124, 246, 0.3)',
fillColor: 'rgba(139, 124, 246, 0.05)',
}],
})
app.globalData.currentLocation = loc
@@ -117,7 +117,7 @@ Page({
color: '#ffffff',
fontSize: 11,
borderRadius: 12,
bgColor: '#ff4f91',
bgColor: '#8b7cf6',
padding: 6,
display: 'ALWAYS',
},
@@ -133,7 +133,7 @@ Page({
height: 36,
callout: {
content: item.petName,
color: '#272235',
color: '#1b1b20',
fontSize: 11,
borderRadius: 12,
bgColor: 'rgba(255,255,255,0.92)',

15
miniprogram/pages/nearby/nearby.wxml
View File

@@ -1,12 +1,15 @@
<view class="nearby-page">
<!-- 状态栏占位 -->
<view style="height: {{statusBarHeight}}px; flex-shrink: 0;"></view>
<!-- 主导航栏：与胶囊等高，右侧避让胶囊 -->
<view class="navbar" style="height: {{navbarHeight}}px; padding-right: {{navbarPaddingRight}}px;">
<view class="topbar-logo">附<text class="logo-accent">近</text></view>
<!-- 固定液态玻璃顶栏:标题 -->
<view class="glass-topbar">
<view style="height: {{statusBarHeight}}px;"></view>
<view class="navbar" style="height: {{navbarHeight}}px; padding-right: {{navbarPaddingRight}}px;">
<view class="topbar-logo">附<text class="logo-accent">近</text></view>
</view>
</view>
<!-- 顶栏占位 -->
<view style="height: {{statusBarHeight + navbarHeight}}px; flex-shrink: 0;"></view>
<!-- 次级菜单栏：位于胶囊下方，全宽可用 -->
<view class="subbar">
<view class="view-toggle">

161
miniprogram/pages/nearby/nearby.wxss
View File

@@ -1,90 +1,78 @@
/* ── 附近页:Vital 风格工具页 ──
浅灰底 + 白卡,地图浮层全部实底白卡,动作按钮用强调黑 */
.nearby-page {
display: flex;
flex-direction: column;
height: 100vh;
background: #ffffff;
background: #f1f2f6;
overflow: hidden;
}
/* 主导航栏：与胶囊等高，右侧避让胶囊 */
/* 主导航栏:与胶囊等高,右侧避让胶囊 */
.navbar {
display: flex;
align-items: center;
padding-left: 28rpx;
flex-shrink: 0;
box-sizing: border-box;
background: #ffffff;
}
/* 次级菜单栏：胶囊下方，全宽 */
/* 次级菜单栏:胶囊下方,全宽 */
.subbar {
display: flex;
align-items: center;
padding: 8rpx 28rpx 16rpx;
gap: 16rpx;
flex-shrink: 0;
background: #ffffff;
}
/* logo:玻璃顶栏上的深色标题(颜色由 .glass-topbar 统一控制) */
.topbar-logo {
font-size: 46rpx;
font-weight: 800;
font-weight: 700;
letter-spacing: -0.5rpx;
color: #2b2438;
flex-shrink: 0;
}
.logo-accent {
background: linear-gradient(120deg, #ff2d6e, #ff7a1a);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* 视图切换:灰底分段控件,激活为白色胶囊 */
.view-toggle {
flex: 1;
display: flex;
background: var(--glass);
backdrop-filter: blur(28rpx) saturate(170%);
-webkit-backdrop-filter: blur(28rpx) saturate(170%);
background: #e7e9ef;
border-radius: 999rpx;
padding: 6rpx;
gap: 4rpx;
border: 1rpx solid var(--glass-edge);
}
.toggle-btn {
flex: 1;
text-align: center;
font-size: 24rpx;
font-weight: 700;
color: #a59cb5;
font-weight: 600;
color: #6e7280;
padding: 12rpx 0;
border-radius: 999rpx;
transition: all 0.2s ease;
}
.toggle-active {
background: rgba(255, 255, 255, 0.85);
color: #2b2438;
font-weight: 900;
box-shadow: 0 8rpx 18rpx rgba(120, 70, 140, 0.14);
background: #ffffff;
color: #1b1b20;
font-weight: 700;
box-shadow: 0 8rpx 18rpx rgba(27, 27, 32, 0.08);
}
.topbar-btn {
width: 64rpx;
height: 64rpx;
border-radius: 26rpx;
background: var(--glass);
backdrop-filter: blur(28rpx) saturate(170%);
-webkit-backdrop-filter: blur(28rpx) saturate(170%);
border: 1rpx solid var(--glass-edge);
background: #ffffff;
box-shadow: var(--shadow-soft);
display: flex;
align-items: center;
justify-content: center;
font-size: 28rpx;
color: #6e6480;
color: #6e7280;
}
/* 地图 */
@@ -113,18 +101,15 @@
.map-ctrl-btn {
width: 76rpx;
height: 76rpx;
background: var(--glass-strong);
backdrop-filter: blur(34rpx) saturate(180%);
-webkit-backdrop-filter: blur(34rpx) saturate(180%);
border: 1rpx solid var(--glass-edge);
background: #ffffff;
border-radius: 26rpx;
box-shadow: var(--shadow-soft);
box-shadow: 0 12rpx 32rpx rgba(27, 27, 32, 0.12);
display: flex;
align-items: center;
justify-content: center;
font-size: 30rpx;
font-weight: 800;
color: #1f9bff;
font-weight: 700;
color: #2b2b30;
}
/* 宠物弹窗 */
@@ -133,16 +118,13 @@
bottom: 300rpx;
left: 50%;
transform: translateX(-50%);
background: var(--glass-strong);
backdrop-filter: blur(34rpx) saturate(180%);
-webkit-backdrop-filter: blur(34rpx) saturate(180%);
border: 1rpx solid var(--glass-edge);
background: #ffffff;
border-radius: 36rpx;
padding: 22rpx 26rpx;
display: flex;
align-items: center;
gap: 18rpx;
box-shadow: var(--shadow-soft), inset 0 1rpx 0 rgba(255, 255, 255, 0.7);
box-shadow: 0 20rpx 50rpx rgba(27, 27, 32, 0.14);
min-width: 520rpx;
z-index: 20;
}
@@ -163,21 +145,21 @@
.popup-name {
display: block;
font-size: 28rpx;
font-weight: 800;
color: #2b2438;
font-weight: 600;
color: #1b1b20;
}
.popup-sub {
display: block;
font-size: 22rpx;
color: #a59cb5;
color: #b9bdc6;
margin-top: 4rpx;
}
.popup-hi {
padding: 16rpx 24rpx;
font-size: 24rpx;
font-weight: 800;
font-weight: 600;
border-radius: 999rpx;
flex-shrink: 0;
}
@@ -187,15 +169,12 @@
position: absolute;
top: 20rpx;
left: 20rpx;
background: var(--glass-strong);
backdrop-filter: blur(28rpx) saturate(170%);
-webkit-backdrop-filter: blur(28rpx) saturate(170%);
border: 1rpx solid var(--glass-edge);
background: #ffffff;
border-radius: 999rpx;
padding: 10rpx 22rpx;
font-size: 22rpx;
font-weight: 800;
color: #ff2d6e;
font-weight: 600;
color: #7563e0;
box-shadow: var(--shadow-soft);
z-index: 10;
}
@@ -207,10 +186,8 @@
left: 0;
right: 0;
z-index: 15;
background: var(--glass-strong);
backdrop-filter: blur(34rpx) saturate(180%);
-webkit-backdrop-filter: blur(34rpx) saturate(180%);
border-top: 1rpx solid var(--glass-edge);
background: #ffffff;
border-top: 1rpx solid rgba(27, 27, 32, 0.06);
padding: 20rpx 0;
}
@@ -223,12 +200,10 @@
display: inline-flex;
align-items: center;
gap: 12rpx;
background: rgba(255, 255, 255, 0.50);
border: 1rpx solid rgba(255, 255, 255, 0.72);
background: #f1f2f6;
border-radius: 26rpx;
padding: 14rpx 18rpx;
margin-right: 16rpx;
box-shadow: 0 12rpx 26rpx rgba(120, 70, 140, 0.12);
}
.preview-avatar {
@@ -250,20 +225,21 @@
.preview-name {
font-size: 26rpx;
font-weight: 800;
color: #2b2438;
font-weight: 600;
color: #1b1b20;
}
.preview-dist {
font-size: 20rpx;
color: #1f9bff;
font-weight: 700;
color: #7563e0;
font-weight: 600;
font-variant-numeric: tabular-nums;
}
/* 列表视图 */
.list-scroll {
flex: 1;
background: #ffffff;
background: #f1f2f6;
}
.list-header {
@@ -275,33 +251,30 @@
.list-title {
font-size: 32rpx;
font-weight: 800;
color: #2b2438;
font-weight: 700;
color: #1b1b20;
}
/* 在线数:淡紫静默胶囊 */
.online-chip {
font-size: 24rpx;
font-weight: 800;
color: #fff;
background: linear-gradient(135deg, #ff2d6e, #ff7a1a);
font-weight: 600;
color: #7563e0;
background: rgba(139, 124, 246, 0.12);
border-radius: 999rpx;
padding: 10rpx 22rpx;
box-shadow: 0 12rpx 24rpx rgba(255, 45, 110, 0.30);
}
/* 列表项 */
/* 列表项:白卡 */
.nearby-item {
display: flex;
align-items: center;
gap: 18rpx;
background: var(--glass);
backdrop-filter: blur(28rpx) saturate(170%);
-webkit-backdrop-filter: blur(28rpx) saturate(170%);
border: 1rpx solid var(--glass-edge);
background: #ffffff;
border-radius: 48rpx;
margin: 0 28rpx 20rpx;
padding: 22rpx;
box-shadow: var(--shadow-soft), inset 0 1rpx 0 rgba(255, 255, 255, 0.6);
box-shadow: var(--shadow-soft);
}
.nearby-avatar {
@@ -313,7 +286,6 @@
justify-content: center;
font-size: 40rpx;
flex-shrink: 0;
border: 3rpx solid rgba(255, 255, 255, 0.8);
}
.avatar-emoji { font-size: 40rpx; line-height: 1; }
@@ -329,15 +301,15 @@
.nearby-pet-name {
font-size: 28rpx;
font-weight: 800;
color: #2b2438;
font-weight: 600;
color: #1b1b20;
}
.breed-chip {
font-size: 20rpx;
font-weight: 800;
color: #fff;
background: #ff2d6e;
font-weight: 600;
color: #7563e0;
background: rgba(139, 124, 246, 0.12);
border-radius: 999rpx;
padding: 4rpx 14rpx;
}
@@ -347,16 +319,16 @@
align-items: center;
gap: 8rpx;
font-size: 22rpx;
color: #a59cb5;
color: #b9bdc6;
}
.online-dot {
width: 14rpx;
height: 14rpx;
border-radius: 50%;
background: #00d9a0;
background: #4bbe9a;
flex-shrink: 0;
box-shadow: 0 0 0 4rpx rgba(0, 217, 160, 0.18);
box-shadow: 0 0 0 4rpx rgba(75, 190, 154, 0.16);
}
.nearby-right {
@@ -369,19 +341,20 @@
.dist-text {
font-size: 22rpx;
font-weight: 800;
color: #1f9bff;
font-weight: 600;
color: #7563e0;
font-variant-numeric: tabular-nums;
}
/* 打招呼:强调黑胶囊 */
.say-hi {
background: linear-gradient(135deg, #ff2d6e, #ff7a1a);
border: 1.5rpx solid rgba(255, 255, 255, 0.7);
background: #2b2b30;
border-radius: 999rpx;
padding: 14rpx 26rpx;
font-size: 22rpx;
font-weight: 800;
font-weight: 600;
color: #fff;
box-shadow: 0 14rpx 28rpx rgba(255, 45, 110, 0.32);
box-shadow: 0 12rpx 28rpx rgba(43, 43, 48, 0.24);
transition: transform 0.18s ease;
}
@@ -392,7 +365,7 @@
/* 骨架 */
.nearby-skeleton {
height: 128rpx;
background: linear-gradient(90deg, #f0eef5 25%, #e8e4f0 50%, #f0eef5 75%);
background: linear-gradient(90deg, #ebecf1 25%, #e2e4ea 50%, #ebecf1 75%);
background-size: 200% 100%;
animation: shine 1.4s infinite;
border-radius: 40rpx;
@@ -417,13 +390,13 @@
.empty-title {
font-size: 34rpx;
font-weight: 900;
color: #2b2438;
font-weight: 700;
color: #1b1b20;
}
.empty-desc {
font-size: 26rpx;
color: #a59cb5;
color: #b9bdc6;
text-align: center;
line-height: 1.6;
}