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)，保持程序可运行。
This commit is contained in:
@@ -1,43 +1,83 @@
|
||||
/* ── 底部导航栏 ── */
|
||||
.tab-bar {
|
||||
/* ── 底部导航：悬浮玻璃浮岛 ──
|
||||
绝对定位浮在内容上方，左右下三边露出底层内容；
|
||||
分层折射高光 + 缓慢流动的光泽，模拟液态玻璃透镜质感 */
|
||||
.tab-dock {
|
||||
position: fixed;
|
||||
left: 16rpx;
|
||||
right: 16rpx;
|
||||
bottom: 28rpx;
|
||||
z-index: 999;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-top: 1rpx solid rgba(255, 255, 255, 0.65);
|
||||
background: rgba(255, 255, 255, 0.90);
|
||||
padding: 10rpx 0 calc(10rpx + env(safe-area-inset-bottom));
|
||||
box-shadow: 0 -10rpx 24rpx rgba(110, 78, 131, 0.08);
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 999;
|
||||
justify-content: space-around;
|
||||
border-radius: 64rpx;
|
||||
padding: 14rpx 8rpx calc(14rpx + env(safe-area-inset-bottom) * 0.6);
|
||||
overflow: hidden;
|
||||
isolation: isolate;
|
||||
background:
|
||||
radial-gradient(130% 160% at 16% -40%, rgba(255, 255, 255, 0.6), transparent 56%),
|
||||
radial-gradient(110% 140% at 92% 145%, rgba(255, 255, 255, 0.16), transparent 60%),
|
||||
rgba(255, 255, 255, 0.30);
|
||||
backdrop-filter: blur(26rpx) saturate(200%);
|
||||
-webkit-backdrop-filter: blur(26rpx) saturate(200%);
|
||||
border: 1rpx solid rgba(255, 255, 255, 0.55);
|
||||
box-shadow:
|
||||
0 20rpx 50rpx rgba(120, 70, 140, 0.18),
|
||||
inset 0 1.5rpx 0 rgba(255, 255, 255, 0.7),
|
||||
inset 0 -10rpx 22rpx rgba(255, 255, 255, 0.10),
|
||||
inset 10rpx 0 22rpx rgba(255, 255, 255, 0.08),
|
||||
inset -10rpx 0 22rpx rgba(180, 150, 210, 0.10);
|
||||
}
|
||||
|
||||
/* 流动光泽：缓慢左右扫过的液态高光带 */
|
||||
.dock-sheen {
|
||||
position: absolute;
|
||||
top: -60%;
|
||||
left: -15%;
|
||||
right: -15%;
|
||||
height: 220%;
|
||||
background: linear-gradient(102deg, transparent 32%, rgba(255, 255, 255, 0.40) 48%, transparent 64%);
|
||||
filter: blur(14rpx);
|
||||
animation: liquid-sheen 8s ease-in-out infinite;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
transform: translateX(-14%) rotate(-2deg);
|
||||
}
|
||||
|
||||
@keyframes liquid-sheen {
|
||||
0%, 100% { transform: translateX(-14%) rotate(-2deg); opacity: 0.45; }
|
||||
50% { transform: translateX(14%) rotate(2deg); opacity: 0.85; }
|
||||
}
|
||||
|
||||
/* ── Tab 项 ── */
|
||||
.tab-item {
|
||||
.tab-pill {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 5rpx;
|
||||
border-radius: 22rpx;
|
||||
padding: 8rpx 0 6rpx;
|
||||
position: relative;
|
||||
gap: 6rpx;
|
||||
border-radius: 36rpx;
|
||||
padding: 12rpx 0 8rpx;
|
||||
transition: transform 0.25s cubic-bezier(.34, 1.56, .64, 1), background 0.25s ease, color 0.25s ease;
|
||||
}
|
||||
|
||||
.tab-item.active {
|
||||
background: linear-gradient(180deg, rgba(255, 79, 145, 0.12), rgba(255, 225, 90, 0.08));
|
||||
.tab-pill.active {
|
||||
background: rgba(255, 45, 110, 0.14);
|
||||
transform: translateY(-6rpx) scale(1.04);
|
||||
}
|
||||
|
||||
.tab-label {
|
||||
font-size: 20rpx;
|
||||
font-weight: 700;
|
||||
color: #9b8fa8;
|
||||
color: #a59cb5;
|
||||
line-height: 1;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.tab-item.active .tab-label {
|
||||
color: #ff4f91;
|
||||
.tab-pill.active .tab-label {
|
||||
color: #ff2d6e;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
@@ -61,13 +101,13 @@
|
||||
}
|
||||
|
||||
.icon-grid .sq {
|
||||
background: #9b8fa8;
|
||||
background: #a59cb5;
|
||||
border-radius: 4rpx;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.tab-item.active .icon-grid .sq {
|
||||
background: #ff4f91;
|
||||
.tab-pill.active .icon-grid .sq {
|
||||
background: #ff2d6e;
|
||||
}
|
||||
|
||||
/* ── 附近图标：地图 Pin ── */
|
||||
@@ -82,7 +122,7 @@
|
||||
width: 22rpx;
|
||||
height: 22rpx;
|
||||
border-radius: 50% 50% 50% 0;
|
||||
background: #9b8fa8;
|
||||
background: #a59cb5;
|
||||
transform: rotate(-45deg);
|
||||
transition: background 0.2s;
|
||||
}
|
||||
@@ -90,15 +130,15 @@
|
||||
.pin-tail {
|
||||
width: 4rpx;
|
||||
height: 8rpx;
|
||||
background: #9b8fa8;
|
||||
background: #a59cb5;
|
||||
border-radius: 0 0 4rpx 4rpx;
|
||||
margin-top: -2rpx;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.tab-item.active .pin-head,
|
||||
.tab-item.active .pin-tail {
|
||||
background: #ff4f91;
|
||||
.tab-pill.active .pin-head,
|
||||
.tab-pill.active .pin-tail {
|
||||
background: #ff2d6e;
|
||||
}
|
||||
|
||||
/* ── 汪友图标：双人轮廓 ── */
|
||||
@@ -113,7 +153,7 @@
|
||||
width: 14rpx;
|
||||
height: 14rpx;
|
||||
border-radius: 50%;
|
||||
background: #9b8fa8;
|
||||
background: #a59cb5;
|
||||
top: 0;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
@@ -127,14 +167,14 @@
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 14rpx;
|
||||
background: #9b8fa8;
|
||||
background: #a59cb5;
|
||||
border-radius: 8rpx 8rpx 0 0;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.tab-item.active .ppl-head,
|
||||
.tab-item.active .ppl-body {
|
||||
background: #ff4f91;
|
||||
.tab-pill.active .ppl-head,
|
||||
.tab-pill.active .ppl-body {
|
||||
background: #ff2d6e;
|
||||
}
|
||||
|
||||
/* ── 我的图标：单人轮廓 ── */
|
||||
@@ -151,7 +191,7 @@
|
||||
width: 18rpx;
|
||||
height: 18rpx;
|
||||
border-radius: 50%;
|
||||
background: #9b8fa8;
|
||||
background: #a59cb5;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
@@ -159,39 +199,63 @@
|
||||
width: 28rpx;
|
||||
height: 14rpx;
|
||||
border-radius: 8rpx 8rpx 0 0;
|
||||
background: #9b8fa8;
|
||||
background: #a59cb5;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.tab-item.active .user-head,
|
||||
.tab-item.active .user-body {
|
||||
background: #ff4f91;
|
||||
.tab-pill.active .user-head,
|
||||
.tab-pill.active .user-body {
|
||||
background: #ff2d6e;
|
||||
}
|
||||
|
||||
/* ── 发布 FAB ── */
|
||||
/* ── 发布 FAB：液态玻璃凸透镜质感 ── */
|
||||
.tab-fab-wrap {
|
||||
flex: 1;
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-bottom: 4rpx;
|
||||
padding: 0 8rpx;
|
||||
}
|
||||
|
||||
.tab-fab {
|
||||
width: 92rpx;
|
||||
height: 92rpx;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
isolation: isolate;
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, #ff4f91, #ff9f1c 55%, #ffe15a);
|
||||
border: 4rpx solid rgba(255, 255, 255, 0.90);
|
||||
box-shadow: 0 10rpx 22rpx rgba(255, 79, 145, 0.28);
|
||||
background: linear-gradient(140deg, #ff2d6e, #ff7a1a 55%, #ffd400);
|
||||
border: 5rpx solid rgba(255, 255, 255, 0.85);
|
||||
box-shadow: 0 16rpx 36rpx rgba(255, 45, 110, 0.40), inset 0 1rpx 0 rgba(255, 255, 255, 0.6);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 4rpx;
|
||||
transform: translateY(-18rpx);
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.tab-fab:active {
|
||||
transform: translateY(-18rpx) scale(0.92);
|
||||
}
|
||||
|
||||
/* 液态高光：左上角玻璃透镜光斑 */
|
||||
.fab-shine {
|
||||
position: absolute;
|
||||
top: 6%;
|
||||
left: 14%;
|
||||
width: 46%;
|
||||
height: 38%;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.85), transparent 72%);
|
||||
filter: blur(4rpx);
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.fab-plus {
|
||||
font-size: 52rpx;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
font-size: 56rpx;
|
||||
color: #fff;
|
||||
font-weight: 300;
|
||||
line-height: 1;
|
||||
@@ -206,7 +270,7 @@
|
||||
min-width: 30rpx;
|
||||
height: 30rpx;
|
||||
border-radius: 15rpx;
|
||||
background: #ff4f91;
|
||||
background: #ff2d6e;
|
||||
color: #fff;
|
||||
font-size: 18rpx;
|
||||
font-weight: 800;
|
||||
|
||||
Reference in New Issue
Block a user