d07235b64c
- 自定义 tabBar：AI 入口图标与样式，相关页面与审核门控调整 - API：MpTabbar、出站推送 Hook、后台设置与迁移 SQL（含 FAB 居中排序） - 管理端：推送 Hook 面板、出站推送调试工具与生产环境注释说明 Made-with: Cursor
210 lines
13 KiB
Plaintext
210 lines
13 KiB
Plaintext
/* 自定义 TabBar：白底 · 参考「左二 + 中间大圆钮上凸」布局 · 主题紫 #7c3aed */
|
||
.tab-bar {
|
||
position: fixed;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: #ffffff;
|
||
padding-bottom: env(safe-area-inset-bottom);
|
||
z-index: 9999;
|
||
box-shadow: 0 -4rpx 24rpx rgba(15, 23, 42, 0.06);
|
||
}
|
||
|
||
.tab-bar-line {
|
||
height: 1rpx;
|
||
background: #e5e7eb;
|
||
width: 100%;
|
||
}
|
||
|
||
.tab-bar-inner {
|
||
display: flex;
|
||
align-items: flex-end;
|
||
justify-content: space-around;
|
||
min-height: 116rpx;
|
||
padding: 8rpx 8rpx 12rpx;
|
||
position: relative;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.tab-bar-count-3 { padding-left: 40rpx; padding-right: 40rpx; }
|
||
.tab-bar-count-4,
|
||
.tab-bar-count-5 { padding-left: 12rpx; padding-right: 12rpx; }
|
||
|
||
.tab-item {
|
||
flex: 1;
|
||
min-width: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
padding-bottom: 4rpx;
|
||
z-index: 1;
|
||
}
|
||
|
||
.tab-icon {
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
margin-bottom: 4rpx;
|
||
background-repeat: no-repeat;
|
||
background-position: center;
|
||
background-size: 44rpx 44rpx;
|
||
}
|
||
|
||
/* 图片形态的图标（iconUrl 传图片时使用，保留圆角便于 logo 类图片显示） */
|
||
.tab-icon-img {
|
||
width: 52rpx;
|
||
height: 52rpx;
|
||
margin-bottom: 4rpx;
|
||
border-radius: 12rpx;
|
||
filter: grayscale(60%);
|
||
opacity: 0.85;
|
||
}
|
||
/* 神仙AI：未选/已选为两张独立 PNG，不做灰阶与缩放，避免叠加强调 */
|
||
.tab-icon-img--dual {
|
||
filter: none;
|
||
opacity: 1;
|
||
border-radius: 0;
|
||
}
|
||
.tab-icon-img--active {
|
||
filter: none;
|
||
opacity: 1;
|
||
transform: scale(1.05);
|
||
box-shadow: 0 4rpx 10rpx rgba(124, 58, 237, 0.25);
|
||
}
|
||
.tab-icon-img--dual.tab-icon-img--active {
|
||
transform: none;
|
||
box-shadow: none;
|
||
}
|
||
|
||
/* 中间浮钮的图片形态 */
|
||
.center-img {
|
||
width: 50rpx;
|
||
height: 50rpx;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.tab-text {
|
||
font-size: 20rpx;
|
||
color: #999999;
|
||
}
|
||
|
||
.tab-item.active .tab-text {
|
||
color: #7c3aed;
|
||
}
|
||
|
||
/* ===== 图标：home ===== */
|
||
.tab-icon--home {
|
||
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999999' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M3 12l9-9 9 9'/><path d='M5 10v10h14V10'/><path d='M10 20v-6h4v6'/></svg>");
|
||
}
|
||
.tab-icon--home.tab-icon--active,
|
||
.tab-item.active .tab-icon--home {
|
||
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%237c3aed' stroke='%237c3aed' stroke-width='1.6' stroke-linejoin='round'><path d='M3 12l9-9 9 9'/><path d='M5 10v10h14V10'/><path d='M10 20v-6h4v6' fill='none' stroke='%23ffffff'/></svg>");
|
||
}
|
||
|
||
/* ===== 图标：ai（神仙AI · 未选中 #999 / 选中 #7c3aed） ===== */
|
||
.tab-icon--ai {
|
||
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'><path d='M891.562667 550.570667l-58.026667-126.122667v-17.066667a317.269333 317.269333 0 0 0-107.861333-238.08 368.981333 368.981333 0 0 0-284.842667-90.453333C278.186667 95.573333 147.626667 218.112 130.048 370.176A316.416 316.416 0 0 0 241.152 648.533333a109.909333 109.909333 0 0 1 36.864 110.592l-34.133333 129.365334a49.834667 49.834667 0 0 0 5.290666 44.885333 35.669333 35.669333 0 0 0 28.501334 13.653333h318.634666a38.4 38.4 0 0 0 37.376-29.354666l20.992-93.866667a24.234667 24.234667 0 0 1 24.234667-17.066667h83.797333a69.290667 69.290667 0 0 0 70.826667-68.266666v-119.466667h11.605333a51.2 51.2 0 0 0 43.178667-23.210667 47.445333 47.445333 0 0 0 3.242667-45.226666z m-109.226667 17.066666v170.666667a18.261333 18.261333 0 0 1-19.626667 17.066667h-83.797333a75.605333 75.605333 0 0 0-74.24 57.344l-18.602667 83.285333h-290.133333l32.256-123.733333a160.426667 160.426667 0 0 0-52.906667-162.304A266.410667 266.410667 0 0 1 180.906667 375.466667c14.848-127.829333 126.293333-231.424 265.216-245.76a316.586667 316.586667 0 0 1 245.248 77.653333 266.24 266.24 0 0 1 90.965333 199.338667v29.013333l61.098667 132.608z' fill='%23999999'/><path d='M585.386667 166.229333a292.693333 292.693333 0 0 0-216.064 2.56 265.386667 265.386667 0 0 0-153.6 162.816 111.616 111.616 0 0 0 43.861333 125.952 42.837333 42.837333 0 0 1 19.797333 34.133334v32.085333a51.2 51.2 0 0 0 101.546667 0v-26.112a38.229333 38.229333 0 0 1 17.066667-32.768 164.522667 164.522667 0 0 0 59.221333-65.024 22.186667 22.186667 0 0 1 12.8-12.288 26.965333 26.965333 0 0 1 20.309333 0A131.413333 131.413333 0 0 0 631.466667 363.008 116.053333 116.053333 0 0 0 670.890667 256c-7.850667-39.253333-39.424-72.021333-85.504-89.770667z m11.946666 159.744a82.602667 82.602667 0 0 1-88.064 13.312 79.189333 79.189333 0 0 0-57.685333 0.853334A73.386667 73.386667 0 0 0 409.6 380.757333a117.589333 117.589333 0 0 1-39.594667 40.96 89.941333 89.941333 0 0 0-40.277333 64.682667 94.037333 94.037333 0 0 0-40.96-70.485333 59.733333 59.733333 0 0 1-25.088-68.266667 214.357333 214.357333 0 0 1 124.757333-131.242667 240.64 240.64 0 0 1 178.346667-2.218666 78.165333 78.165333 0 0 1 53.589333 52.394666A65.877333 65.877333 0 0 1 597.333333 325.973333z' fill='%23999999'/><path d='M502.784 207.018667a159.402667 159.402667 0 0 0-87.552 15.872 203.264 203.264 0 0 0-117.76 124.586666 51.2 51.2 0 0 0 3.584 39.765334 53.76 53.76 0 0 0 33.28 26.282666 57.514667 57.514667 0 0 0 15.36 2.048 54.272 54.272 0 0 0 52.053333-36.864 96.938667 96.938667 0 0 1 56.32-59.221333l5.802667-2.218667a42.666667 42.666667 0 0 1 29.013333-5.461333 54.101333 54.101333 0 0 0 59.221334-47.274667 51.2 51.2 0 0 0-11.605334-37.888 55.808 55.808 0 0 0-37.717333-19.626666z m-5.461333 53.76a90.453333 90.453333 0 0 0-53.248 9.216l-5.461334 3.072a148.138667 148.138667 0 0 0-85.333333 90.794666s-1.194667 1.536-4.778667 1.194667a3.413333 3.413333 0 0 1-1.877333-1.024 151.722667 151.722667 0 0 1 88.405333-92.842667 108.544 108.544 0 0 1 63.658667-12.288 5.802667 5.802667 0 0 1 2.901333 1.194667 5.290667 5.290667 0 0 1-4.266666 0.682667z' fill='%23999999'/></svg>");
|
||
}
|
||
.tab-icon--ai.tab-icon--active,
|
||
.tab-item.active .tab-icon--ai {
|
||
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'><path d='M891.562667 550.570667l-58.026667-126.122667v-17.066667a317.269333 317.269333 0 0 0-107.861333-238.08 368.981333 368.981333 0 0 0-284.842667-90.453333C278.186667 95.573333 147.626667 218.112 130.048 370.176A316.416 316.416 0 0 0 241.152 648.533333a109.909333 109.909333 0 0 1 36.864 110.592l-34.133333 129.365334a49.834667 49.834667 0 0 0 5.290666 44.885333 35.669333 35.669333 0 0 0 28.501334 13.653333h318.634666a38.4 38.4 0 0 0 37.376-29.354666l20.992-93.866667a24.234667 24.234667 0 0 1 24.234667-17.066667h83.797333a69.290667 69.290667 0 0 0 70.826667-68.266666v-119.466667h11.605333a51.2 51.2 0 0 0 43.178667-23.210667 47.445333 47.445333 0 0 0 3.242667-45.226666z m-109.226667 17.066666v170.666667a18.261333 18.261333 0 0 1-19.626667 17.066667h-83.797333a75.605333 75.605333 0 0 0-74.24 57.344l-18.602667 83.285333h-290.133333l32.256-123.733333a160.426667 160.426667 0 0 0-52.906667-162.304A266.410667 266.410667 0 0 1 180.906667 375.466667c14.848-127.829333 126.293333-231.424 265.216-245.76a316.586667 316.586667 0 0 1 245.248 77.653333 266.24 266.24 0 0 1 90.965333 199.338667v29.013333l61.098667 132.608z' fill='%237c3aed'/><path d='M585.386667 166.229333a292.693333 292.693333 0 0 0-216.064 2.56 265.386667 265.386667 0 0 0-153.6 162.816 111.616 111.616 0 0 0 43.861333 125.952 42.837333 42.837333 0 0 1 19.797333 34.133334v32.085333a51.2 51.2 0 0 0 101.546667 0v-26.112a38.229333 38.229333 0 0 1 17.066667-32.768 164.522667 164.522667 0 0 0 59.221333-65.024 22.186667 22.186667 0 0 1 12.8-12.288 26.965333 26.965333 0 0 1 20.309333 0A131.413333 131.413333 0 0 0 631.466667 363.008 116.053333 116.053333 0 0 0 670.890667 256c-7.850667-39.253333-39.424-72.021333-85.504-89.770667z m11.946666 159.744a82.602667 82.602667 0 0 1-88.064 13.312 79.189333 79.189333 0 0 0-57.685333 0.853334A73.386667 73.386667 0 0 0 409.6 380.757333a117.589333 117.589333 0 0 1-39.594667 40.96 89.941333 89.941333 0 0 0-40.277333 64.682667 94.037333 94.037333 0 0 0-40.96-70.485333 59.733333 59.733333 0 0 1-25.088-68.266667 214.357333 214.357333 0 0 1 124.757333-131.242667 240.64 240.64 0 0 1 178.346667-2.218666 78.165333 78.165333 0 0 1 53.589333 52.394666A65.877333 65.877333 0 0 1 597.333333 325.973333z' fill='%237c3aed'/><path d='M502.784 207.018667a159.402667 159.402667 0 0 0-87.552 15.872 203.264 203.264 0 0 0-117.76 124.586666 51.2 51.2 0 0 0 3.584 39.765334 53.76 53.76 0 0 0 33.28 26.282666 57.514667 57.514667 0 0 0 15.36 2.048 54.272 54.272 0 0 0 52.053333-36.864 96.938667 96.938667 0 0 1 56.32-59.221333l5.802667-2.218667a42.666667 42.666667 0 0 1 29.013333-5.461333 54.101333 54.101333 0 0 0 59.221334-47.274667 51.2 51.2 0 0 0-11.605334-37.888 55.808 55.808 0 0 0-37.717333-19.626666z m-5.461333 53.76a90.453333 90.453333 0 0 0-53.248 9.216l-5.461334 3.072a148.138667 148.138667 0 0 0-85.333333 90.794666s-1.194667 1.536-4.778667 1.194667a3.413333 3.413333 0 0 1-1.877333-1.024 151.722667 151.722667 0 0 1 88.405333-92.842667 108.544 108.544 0 0 1 63.658667-12.288 5.802667 5.802667 0 0 1 2.901333 1.194667 5.290667 5.290667 0 0 1-4.266666 0.682667z' fill='%237c3aed'/></svg>");
|
||
}
|
||
|
||
/* ===== 图标：profile ===== */
|
||
.tab-icon--profile {
|
||
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999999' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='8' r='4'/><path d='M4 21c0-4.4 3.6-8 8-8s8 3.6 8 8'/></svg>");
|
||
}
|
||
.tab-icon--profile.tab-icon--active,
|
||
.tab-item.active .tab-icon--profile {
|
||
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%237c3aed' stroke='%237c3aed' stroke-width='1.6' stroke-linejoin='round'><circle cx='12' cy='8' r='4'/><path d='M4 21c0-4.4 3.6-8 8-8s8 3.6 8 8' fill='%237c3aed'/></svg>");
|
||
}
|
||
|
||
/* ===== 图标：camera（作为普通 Tab 时用） ===== */
|
||
.tab-icon--camera {
|
||
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999999' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M4 7h3l2-3h6l2 3h3v13H4z'/><circle cx='12' cy='13' r='4'/></svg>");
|
||
}
|
||
.tab-icon--camera.tab-icon--active,
|
||
.tab-item.active .tab-icon--camera {
|
||
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%237c3aed' stroke='%237c3aed' stroke-width='1.6' stroke-linejoin='round'><path d='M4 7h3l2-3h6l2 3h3v13H4z'/><circle cx='12' cy='13' r='4' fill='%23ffffff' stroke='%237c3aed'/></svg>");
|
||
}
|
||
|
||
/* ===== 中间浮钮（第 2 项：拍摄） ===== */
|
||
.tab-slot-middle {
|
||
flex: 1;
|
||
min-width: 0;
|
||
position: relative;
|
||
z-index: 6;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
padding-bottom: 0;
|
||
}
|
||
|
||
.middle-fab {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: flex-start;
|
||
width: 100%;
|
||
transform: translateY(-40rpx);
|
||
margin-bottom: -36rpx;
|
||
}
|
||
|
||
.center-circle {
|
||
width: 96rpx;
|
||
height: 96rpx;
|
||
min-width: 96rpx;
|
||
min-height: 96rpx;
|
||
border-radius: 50%;
|
||
background: linear-gradient(145deg, #7c3aed 0%, #a78bfa 55%, #8b5cf6 100%);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-bottom: 8rpx;
|
||
border: 5rpx solid #ffffff;
|
||
flex-shrink: 0;
|
||
overflow: visible;
|
||
box-shadow:
|
||
0 0 0 1rpx rgba(167, 139, 250, 0.35),
|
||
0 12rpx 36rpx rgba(124, 58, 237, 0.48),
|
||
0 0 40rpx rgba(124, 58, 237, 0.28);
|
||
}
|
||
|
||
.middle-fab.active .center-circle {
|
||
background: linear-gradient(145deg, #6d28d9 0%, #7c3aed 50%, #a78bfa 100%);
|
||
box-shadow:
|
||
0 0 0 1rpx rgba(196, 181, 253, 0.45),
|
||
0 14rpx 40rpx rgba(124, 58, 237, 0.58),
|
||
0 0 48rpx rgba(124, 58, 237, 0.35);
|
||
}
|
||
|
||
.center-svg {
|
||
width: 46rpx;
|
||
height: 46rpx;
|
||
background-repeat: no-repeat;
|
||
background-position: center;
|
||
background-size: 44rpx 44rpx;
|
||
}
|
||
|
||
.center-svg--camera {
|
||
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 7h3l2-3h6l2 3h3v13H4z'/><circle cx='12' cy='13' r='4'/></svg>");
|
||
}
|
||
.center-svg--ai {
|
||
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3v3M12 18v3M3 12h3M18 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M5.6 18.4l2.1-2.1M16.3 7.7l2.1-2.1'/><circle cx='12' cy='12' r='3.5' fill='%23ffffff'/></svg>");
|
||
}
|
||
|
||
.tab-text-fab {
|
||
font-size: 20rpx;
|
||
color: #999999;
|
||
line-height: 1.25;
|
||
text-align: center;
|
||
max-width: 168rpx;
|
||
margin-top: 2rpx;
|
||
}
|
||
|
||
.middle-fab.active .tab-text-fab {
|
||
color: #7c3aed;
|
||
font-weight: 600;
|
||
}
|