chenwu/PetCommunity
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
2c3c2653faa0e22f5e55227234c3038a17b3c276
PetCommunity/miniprogram/pages/nearby/nearby.wxss
chenwu 2c3c2653fa style: 按毛玻璃设计稿重做广场/附近/发布/汪友/我的五大页面视觉 
参照 wangquan_glass_redesign_mockup.html 的玻璃拟态(glassmorphism)设计语言重写前端展示样式：
- app.wxss: 引入 coral/tangerine/lemon/mint/sky/lilac 色板与 .glass/.glass-strong/.sticker-tag 毛玻璃工具类，背景改为纯白
- custom-tab-bar: 改为悬浮玻璃浮岛(.tab-dock)，含液态光泽动画与渐变发布按钮(FAB)
- feed: 故事条改为方形圆角描边+conic渐变，顶部操作按钮、骨架屏改为玻璃质感
- post-card 组件: 卡片/贴纸标签/操作按钮全面玻璃化，点赞按钮改为渐变高亮
- nearby: 地图控件、宠物弹窗、列表项、预览条统一为毛玻璃卡片
- post: 上传区/输入框/标签pill/心情选择器改为玻璃质感+渐变选中态
- friends: 空态与好友列表项改为玻璃卡片
- profile: 用户信息区改为带渐变光斑的玻璃英雄卡，统计/宠物卡/动态网格同步玻璃化

未改动页面结构(WXML)与业务逻辑(TS)，仅升级视觉样式(WXSS)，保持程序可运行。
2026-06-08 11:36:38 +08:00

430 lines
7.9 KiB
Plaintext
Raw Blame History

.nearby-page {
display: flex;
flex-direction: column;
height: 100vh;
background: #ffffff;
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;
}
.topbar-logo {
font-size: 46rpx;
font-weight: 800;
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%);
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;
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);
}
.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);
box-shadow: var(--shadow-soft);
display: flex;
align-items: center;
justify-content: center;
font-size: 28rpx;
color: #6e6480;
}
/* 地图 */
.map-wrap {
flex: 1;
position: relative;
overflow: hidden;
}
.map {
width: 100%;
height: 100%;
}
/* 地图控件 */
.map-controls {
position: absolute;
right: 24rpx;
bottom: 300rpx;
display: flex;
flex-direction: column;
gap: 14rpx;
z-index: 10;
}
.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);
border-radius: 26rpx;
box-shadow: var(--shadow-soft);
display: flex;
align-items: center;
justify-content: center;
font-size: 30rpx;
font-weight: 800;
color: #1f9bff;
}
/* 宠物弹窗 */
.pet-popup {
position: absolute;
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);
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);
min-width: 520rpx;
z-index: 20;
}
.popup-avatar {
width: 72rpx;
height: 72rpx;
border-radius: 22rpx;
display: flex;
align-items: center;
justify-content: center;
font-size: 36rpx;
flex-shrink: 0;
}
.popup-info { flex: 1; }
.popup-name {
display: block;
font-size: 28rpx;
font-weight: 800;
color: #2b2438;
}
.popup-sub {
display: block;
font-size: 22rpx;
color: #a59cb5;
margin-top: 4rpx;
}
.popup-hi {
padding: 16rpx 24rpx;
font-size: 24rpx;
font-weight: 800;
border-radius: 999rpx;
flex-shrink: 0;
}
/* 在线数角标 */
.online-badge {
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);
border-radius: 999rpx;
padding: 10rpx 22rpx;
font-size: 22rpx;
font-weight: 800;
color: #ff2d6e;
box-shadow: var(--shadow-soft);
z-index: 10;
}
/* 底部预览条 */
.map-preview-list {
position: absolute;
bottom: 0;
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);
padding: 20rpx 0;
}
.preview-scroll {
white-space: nowrap;
padding: 0 24rpx;
}
.preview-card {
display: inline-flex;
align-items: center;
gap: 12rpx;
background: rgba(255, 255, 255, 0.50);
border: 1rpx solid rgba(255, 255, 255, 0.72);
border-radius: 26rpx;
padding: 14rpx 18rpx;
margin-right: 16rpx;
box-shadow: 0 12rpx 26rpx rgba(120, 70, 140, 0.12);
}
.preview-avatar {
width: 60rpx;
height: 60rpx;
border-radius: 18rpx;
display: flex;
align-items: center;
justify-content: center;
font-size: 30rpx;
flex-shrink: 0;
}
.preview-info {
display: flex;
flex-direction: column;
gap: 4rpx;
}
.preview-name {
font-size: 26rpx;
font-weight: 800;
color: #2b2438;
}
.preview-dist {
font-size: 20rpx;
color: #1f9bff;
font-weight: 700;
}
/* 列表视图 */
.list-scroll {
flex: 1;
background: #ffffff;
}
.list-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 28rpx 28rpx 18rpx;
}
.list-title {
font-size: 32rpx;
font-weight: 800;
color: #2b2438;
}
.online-chip {
font-size: 24rpx;
font-weight: 800;
color: #fff;
background: linear-gradient(135deg, #ff2d6e, #ff7a1a);
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);
border-radius: 48rpx;
margin: 0 28rpx 20rpx;
padding: 22rpx;
box-shadow: var(--shadow-soft), inset 0 1rpx 0 rgba(255, 255, 255, 0.6);
}
.nearby-avatar {
width: 92rpx;
height: 92rpx;
border-radius: 32rpx;
display: flex;
align-items: center;
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; }
.nearby-info { flex: 1; min-width: 0; }
.nearby-name-row {
display: flex;
align-items: center;
gap: 10rpx;
margin-bottom: 6rpx;
}
.nearby-pet-name {
font-size: 28rpx;
font-weight: 800;
color: #2b2438;
}
.breed-chip {
font-size: 20rpx;
font-weight: 800;
color: #fff;
background: #ff2d6e;
border-radius: 999rpx;
padding: 4rpx 14rpx;
}
.nearby-sub {
display: flex;
align-items: center;
gap: 8rpx;
font-size: 22rpx;
color: #a59cb5;
}
.online-dot {
width: 14rpx;
height: 14rpx;
border-radius: 50%;
background: #00d9a0;
flex-shrink: 0;
box-shadow: 0 0 0 4rpx rgba(0, 217, 160, 0.18);
}
.nearby-right {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 10rpx;
flex-shrink: 0;
}
.dist-text {
font-size: 22rpx;
font-weight: 800;
color: #1f9bff;
}
.say-hi {
background: linear-gradient(135deg, #ff2d6e, #ff7a1a);
border: 1.5rpx solid rgba(255, 255, 255, 0.7);
border-radius: 999rpx;
padding: 14rpx 26rpx;
font-size: 22rpx;
font-weight: 800;
color: #fff;
box-shadow: 0 14rpx 28rpx rgba(255, 45, 110, 0.32);
transition: transform 0.18s ease;
}
.say-hi:active {
transform: scale(0.94);
}
/* 骨架 */
.nearby-skeleton {
height: 128rpx;
background: linear-gradient(90deg, #f0eef5 25%, #e8e4f0 50%, #f0eef5 75%);
background-size: 200% 100%;
animation: shine 1.4s infinite;
border-radius: 40rpx;
margin: 0 28rpx 20rpx;
}
@keyframes shine {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* 空态 */
.empty-nearby {
display: flex;
flex-direction: column;
align-items: center;
padding: 120rpx 60rpx;
gap: 16rpx;
}
.empty-emoji { font-size: 80rpx; }
.empty-title {
font-size: 34rpx;
font-weight: 900;
color: #2b2438;
}
.empty-desc {
font-size: 26rpx;
color: #a59cb5;
text-align: center;
line-height: 1.6;
}
Reference in New Issue View Git Blame Copy Permalink