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

style: 按毛玻璃设计稿重做广场/附近/发布/汪友/我的五大页面视觉

Browse Source 
参照 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)，保持程序可运行。
This commit is contained in:
chenwu
2026-06-08 11:36:38 +08:00
parent b02e26f602
commit 2c3c2653fa
10 changed files with 697 additions and 399 deletions
Download Patch File Download Diff File Expand all files Collapse all files

105
miniprogram/pages/friends/friends.wxss
View File

@@ -1,6 +1,6 @@
.friends-page {
min-height: 100vh;
background: linear-gradient(180deg, #fff8f2 0%, #f5f0ff 100%);
background: #ffffff;
display: flex;
flex-direction: column;
}
@@ -21,36 +21,46 @@
flex-shrink: 0;
}
.topbar-logo { font-size: 44rpx; font-weight: 900; color: #272235; }
.topbar-logo {
font-size: 46rpx;
font-weight: 800;
letter-spacing: -0.5rpx;
color: #2b2438;
}
.logo-accent { color: #ff4f91; }
.logo-accent {
background: linear-gradient(120deg, #ff2d6e, #ff7a1a);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.topbar-tabs { flex: 1; display: flex; gap: 6rpx; }
.ftab {
font-size: 28rpx;
font-weight: 700;
color: #9b8fa8;
color: #a59cb5;
padding: 10rpx 20rpx;
border-radius: 999rpx;
}
.ftab-active { color: #ff4f91; background: rgba(255, 79, 145, 0.10); font-weight: 900; }
.ftab-active { color: #ff2d6e; background: rgba(255, 45, 110, 0.12); font-weight: 900; }
.ftab-count { font-size: 22rpx; font-weight: 800; }
.topbar-btn {
width: 60rpx;
height: 60rpx;
border-radius: 50%;
background: linear-gradient(135deg, #ff4f91, #ff9f1c);
width: 64rpx;
height: 64rpx;
border-radius: 26rpx;
background: linear-gradient(135deg, #ff2d6e, #ff7a1a);
color: #fff;
font-size: 40rpx;
font-weight: 200;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 8rpx 16rpx rgba(255, 79, 145, 0.28);
box-shadow: 0 12rpx 24rpx rgba(255, 45, 110, 0.30);
}
/* 空态 */
@@ -65,17 +75,36 @@
display: flex;
flex-direction: column;
align-items: center;
gap: 16rpx;
padding: 0 60rpx;
gap: 18rpx;
padding: 48rpx 60rpx;
text-align: center;
}
.empty-emoji { font-size: 80rpx; }
.empty-emoji {
font-size: 64rpx;
color: #8b5cf6;
background: var(--glass);
backdrop-filter: blur(28rpx) saturate(170%);
-webkit-backdrop-filter: blur(28rpx) saturate(170%);
border: 1rpx solid var(--glass-edge);
border-radius: 40rpx;
padding: 28rpx;
box-shadow: var(--shadow-soft);
}
.empty-title { font-size: 34rpx; font-weight: 900; color: #272235; }
.empty-title { font-size: 34rpx; font-weight: 900; color: #2b2438; }
.empty-desc { font-size: 26rpx; color: #9b8fa8; text-align: center; line-height: 1.6; }
.empty-desc { font-size: 26rpx; color: #6e6480; text-align: center; line-height: 1.6; }
.go-btn { margin-top: 20rpx; padding: 22rpx 60rpx; font-size: 28rpx; font-weight: 800; }
.go-btn {
margin-top: 12rpx;
padding: 22rpx 60rpx;
font-size: 26rpx;
font-weight: 800;
border: 1.5rpx solid rgba(255, 255, 255, 0.7);
background: linear-gradient(135deg, #ff2d6e, #8b5cf6);
box-shadow: 0 18rpx 36rpx rgba(139, 92, 246, 0.32);
}
/* 好友列表 */
.friends-scroll { flex: 1; }
@@ -84,21 +113,27 @@
display: flex;
align-items: center;
gap: 20rpx;
padding: 20rpx 28rpx;
background: rgba(255, 255, 255, 0.80);
border-bottom: 1rpx solid rgba(43, 37, 61, 0.05);
padding: 22rpx;
margin: 0 28rpx 20rpx;
background: var(--glass);
backdrop-filter: blur(28rpx) saturate(170%);
-webkit-backdrop-filter: blur(28rpx) saturate(170%);
border: 1rpx solid var(--glass-edge);
border-radius: 44rpx;
box-shadow: var(--shadow-soft), inset 0 1rpx 0 rgba(255, 255, 255, 0.6);
}
.friend-avatar {
width: 88rpx;
height: 88rpx;
border-radius: 28rpx;
width: 92rpx;
height: 92rpx;
border-radius: 32rpx;
display: flex;
align-items: center;
justify-content: center;
font-size: 36rpx;
font-weight: 800;
color: rgba(39, 34, 53, 0.72);
color: rgba(43, 36, 56, 0.72);
border: 3rpx solid rgba(255, 255, 255, 0.8);
flex-shrink: 0;
}
@@ -111,20 +146,20 @@
margin-bottom: 6rpx;
}
.friend-name { font-size: 28rpx; font-weight: 800; color: #272235; }
.friend-name { font-size: 28rpx; font-weight: 800; color: #2b2438; }
.online-tag {
font-size: 20rpx;
font-weight: 800;
color: #2fd37a;
background: rgba(47, 211, 122, 0.12);
color: #00a87a;
background: rgba(0, 217, 160, 0.14);
border-radius: 999rpx;
padding: 4rpx 12rpx;
}
.friend-bio {
font-size: 24rpx;
color: #9b8fa8;
color: #a59cb5;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
@@ -132,17 +167,25 @@
}
.follow-btn {
background: linear-gradient(135deg, #ff4f91, #ff9f1c);
background: linear-gradient(135deg, #ff2d6e, #ff7a1a);
color: #fff;
border: 1.5rpx solid rgba(255, 255, 255, 0.7);
border-radius: 999rpx;
padding: 14rpx 28rpx;
font-size: 24rpx;
font-weight: 800;
flex-shrink: 0;
box-shadow: 0 12rpx 24rpx rgba(255, 45, 110, 0.28);
transition: transform 0.18s ease;
}
.follow-btn:active {
transform: scale(0.94);
}
.follow-btn.following {
background: rgba(255, 255, 255, 0.80);
border: 1rpx solid rgba(43, 37, 61, 0.12);
color: #9b8fa8;
background: rgba(255, 255, 255, 0.55);
border: 1rpx solid rgba(43, 36, 56, 0.12);
color: #a59cb5;
box-shadow: none;
}