172 lines
6.7 KiB
Plaintext
172 lines
6.7 KiB
Plaintext
/* ── 底部导航:白色悬浮浮岛(Vital 风格)──
|
|
纯白实底 + 中性柔和阴影,激活态用强调黑胶囊,不用主题色 */
|
|
.tab-dock {
|
|
position: fixed;
|
|
left: 16rpx;
|
|
right: 16rpx;
|
|
bottom: calc(28rpx + env(safe-area-inset-bottom) * 0.5);
|
|
z-index: 999;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
border-radius: 56rpx;
|
|
padding: 12rpx 10rpx;
|
|
overflow: hidden;
|
|
background: #ffffff;
|
|
box-shadow: 0 20rpx 50rpx rgba(27, 27, 32, 0.10);
|
|
}
|
|
|
|
/* ── Tab 项:展开胶囊 ──
|
|
未选中 = 浅灰图标;选中 = 横向展开为黑色胶囊(白图标 + 白文字) */
|
|
.tab-pill {
|
|
position: relative;
|
|
z-index: 1;
|
|
flex: 0 0 auto;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0;
|
|
border-radius: 999rpx;
|
|
padding: 10rpx 16rpx;
|
|
transition:
|
|
background 0.32s cubic-bezier(.34, 1.4, .64, 1),
|
|
padding 0.32s cubic-bezier(.34, 1.4, .64, 1),
|
|
box-shadow 0.32s ease;
|
|
}
|
|
|
|
.tab-pill.active {
|
|
background: #2b2b30;
|
|
padding: 10rpx 26rpx;
|
|
box-shadow: 0 12rpx 26rpx rgba(43, 43, 48, 0.28);
|
|
}
|
|
|
|
.tab-pill:active {
|
|
transform: scale(0.94);
|
|
}
|
|
|
|
/* 文字标签:默认折叠隐藏,选中时从图标右侧平滑展开 */
|
|
.tab-label {
|
|
max-width: 0;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
font-size: 24rpx;
|
|
font-weight: 600;
|
|
color: transparent;
|
|
line-height: 1;
|
|
opacity: 0;
|
|
margin-left: 0;
|
|
transition:
|
|
max-width 0.32s cubic-bezier(.34, 1.4, .64, 1),
|
|
opacity 0.24s ease,
|
|
margin-left 0.32s cubic-bezier(.34, 1.4, .64, 1);
|
|
}
|
|
|
|
.tab-pill.active .tab-label {
|
|
max-width: 140rpx;
|
|
opacity: 1;
|
|
color: #fff;
|
|
margin-left: 12rpx;
|
|
}
|
|
|
|
/* ── 图标容器 ── */
|
|
.icon-wrap {
|
|
width: 66rpx;
|
|
height: 66rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
/* ── Tab 图标:狗主题线性描边 SVG(base64 蒙版)──
|
|
单色 alpha 蒙版 + background-color 上色,
|
|
选中时浅灰→白平滑过渡,任意尺寸保持清晰 */
|
|
.tab-icon {
|
|
width: 52rpx;
|
|
height: 52rpx;
|
|
background-color: #b9bdc6;
|
|
transition: background-color 0.2s;
|
|
-webkit-mask-repeat: no-repeat;
|
|
-webkit-mask-position: center;
|
|
-webkit-mask-size: contain;
|
|
}
|
|
|
|
.tab-pill.active .tab-icon {
|
|
background-color: #fff;
|
|
}
|
|
|
|
/* 广场:狗窝(拱形门 + 门上小骨头) */
|
|
.icon-feed {
|
|
-webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0OCA0OCI+PGcgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjMuNCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNNi41IDIxLjVWMzZhNS41IDUuNSAwIDAgMCA1LjUgNS41aDI0YTUuNSA1LjUgMCAwIDAgNS41LTUuNVYyMS41Ii8+PHBhdGggZD0iTTQgMTkuNUwyNCA0LjVMNDQgMTkuNSIvPjxwYXRoIGQ9Ik0xNy41IDQxLjV2LTcuNWE2LjUgNi41IDAgMCAxIDEzIDB2Ny41Ii8+PHBhdGggZD0iTTE5LjUgMTUuMmg5IiBzdHJva2Utd2lkdGg9IjQuNiIvPjwvZz48L3N2Zz4=");
|
|
}
|
|
|
|
/* 附近:定位水滴 + 爪印 */
|
|
.icon-nearby {
|
|
-webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0OCA0OCI+PHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjMuNCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgZD0iTTI0IDQ0QzEzLjUgMzQgOCAyNi44IDggMjBhMTYgMTYgMCAwIDEgMzIgMEM0MCAyNi44IDM0LjUgMzQgMjQgNDRaIi8+PGcgZmlsbD0iIzAwMCI+PGNpcmNsZSBjeD0iMTcuNiIgY3k9IjE1LjQiIHI9IjIuMyIvPjxjaXJjbGUgY3g9IjI0IiBjeT0iMTMiIHI9IjIuNSIvPjxjaXJjbGUgY3g9IjMwLjQiIGN5PSIxNS40IiByPSIyLjMiLz48cGF0aCBkPSJNMjQgMTkuMmMyLjkgMCA1LjIgMS45IDUuMiA0LjNjMCAyLjQtMi4zIDQuMi01LjIgNC4yYy0yLjkgMC01LjItMS44LTUuMi00LjJjMC0yLjQgMi4zLTQuMyA1LjItNC4zWiIvPjwvZz48L3N2Zz4=");
|
|
}
|
|
|
|
/* 汪友:交叉双骨头(前后交叠,交叠处留缝) */
|
|
.icon-friends {
|
|
-webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0OCA0OCI+PGRlZnM+PG1hc2sgaWQ9Im0iPjxyZWN0IHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgZmlsbD0iI2ZmZiIvPjxwYXRoIGQ9Ik0tNC4zNCAtMi42QTQuMiA0LjIgMCAxIDAgLTExLjIgMEE0LjIgNC4yIDAgMSAwIC00LjM0IDIuNkg0LjM0QTQuMiA0LjIgMCAxIDAgMTEuMiAwQTQuMiA0LjIgMCAxIDAgNC4zNCAtMi42WiIgZmlsbD0iIzAwMCIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjYuNSIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjQgMjQpIHJvdGF0ZSgtNDUpIHNjYWxlKDEuMykiLz48L21hc2s+PC9kZWZzPjxnIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSIyLjUiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxnIG1hc2s9InVybCgjbSkiPjxwYXRoIGQ9Ik0tNC4zNCAtMi42QTQuMiA0LjIgMCAxIDAgLTExLjIgMEE0LjIgNC4yIDAgMSAwIC00LjM0IDIuNkg0LjM0QTQuMiA0LjIgMCAxIDAgMTEuMiAwQTQuMiA0LjIgMCAxIDAgNC4zNCAtMi42WiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjQgMjQpIHJvdGF0ZSg0NSkgc2NhbGUoMS4zKSIvPjwvZz48cGF0aCBkPSJNLTQuMzQgLTIuNkE0LjIgNC4yIDAgMSAwIC0xMS4yIDBBNC4yIDQuMiAwIDEgMCAtNC4zNCAyLjZINC4zNEE0LjIgNC4yIDAgMSAwIDExLjIgMEE0LjIgNC4yIDAgMSAwIDQuMzQgLTIuNloiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI0IDI0KSByb3RhdGUoLTQ1KSBzY2FsZSgxLjMpIi8+PC9nPjwvc3ZnPg==");
|
|
}
|
|
|
|
/* 我的:项圈 + 爱心狗牌 */
|
|
.icon-profile {
|
|
-webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0OCA0OCI+PGcgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjMuNCI+PGNpcmNsZSBjeD0iMjQiIGN5PSIxNy41IiByPSIxMS40Ii8+PGNpcmNsZSBjeD0iMjQiIGN5PSIzNi41IiByPSI2LjQiLz48L2c+PHBhdGggZmlsbD0iIzAwMCIgZD0iTTI0IDQwYy0yLjItMS42LTMuMy0yLjctMy4zLTRhMS45IDEuOSAwIDAgMSAzLjMtMS4yYTEuOSAxLjkgMCAwIDEgMy4zIDEuMmMwIDEuMy0xLjEgMi40LTMuMyA0WiIvPjwvc3ZnPg==");
|
|
}
|
|
|
|
/* ── 发布按钮:黑色圆底 + 白色爪印(CTA 用强调黑) ── */
|
|
.tab-fab-wrap {
|
|
flex: 0 0 auto;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0 8rpx;
|
|
}
|
|
|
|
.tab-fab {
|
|
position: relative;
|
|
width: 84rpx;
|
|
height: 84rpx;
|
|
border-radius: 50%;
|
|
background: #2b2b30;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-shadow: 0 10rpx 24rpx rgba(43, 43, 48, 0.30);
|
|
transition: transform 0.2s ease;
|
|
}
|
|
|
|
.tab-fab:active {
|
|
transform: scale(0.9);
|
|
}
|
|
|
|
/* 白色爪印(base64 SVG),任意尺寸保持清晰 */
|
|
.fab-paw {
|
|
width: 52rpx;
|
|
height: 52rpx;
|
|
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0OCA0OCI+PGcgZmlsbD0iI2ZmZiI+PGNpcmNsZSBjeD0iMTEuNSIgY3k9IjE4LjUiIHI9IjMuNiIvPjxjaXJjbGUgY3g9IjE5LjUiIGN5PSIxMy41IiByPSIzLjkiLz48Y2lyY2xlIGN4PSIyOC41IiBjeT0iMTMuNSIgcj0iMy45Ii8+PGNpcmNsZSBjeD0iMzYuNSIgY3k9IjE4LjUiIHI9IjMuNiIvPjxwYXRoIGQ9Ik0yNCAyMmM1IDAgOSAzLjQgOSA3LjZjMCA0LjItNCA3LjQtOSA3LjRjLTUgMC05LTMuMi05LTcuNGMwLTQuMiA0LTcuNiA5LTcuNloiLz48L2c+PC9zdmc+");
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
background-size: contain;
|
|
}
|
|
|
|
/* ── 未读角标:主色紫 ── */
|
|
.badge {
|
|
position: absolute;
|
|
top: -4rpx;
|
|
right: -6rpx;
|
|
min-width: 30rpx;
|
|
height: 30rpx;
|
|
border-radius: 15rpx;
|
|
background: #8b7cf6;
|
|
color: #fff;
|
|
font-size: 18rpx;
|
|
font-weight: 600;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0 6rpx;
|
|
border: 2rpx solid #fff;
|
|
}
|