duxingchen
620df5ce11
- capabilityOption 改 custom 系列，居中紧凑算法消除幽灵占位 - 柱宽保底 3px（0值/极小值也有柱子）、数字标签悬浮柱顶 - X 轴四行展示：物料名/规格型号/序列号/身份证 - 原生横向滚动容器（每设备 140px）+ custom-scrollbar 样式 - tooltip appendToBody 避免被容器裁剪
76 lines
1.8 KiB
CSS
76 lines
1.8 KiB
CSS
@import "tailwindcss";
|
|
|
|
/* ============================================================
|
|
移动端安全区适配（刘海屏 / 底部指示条）
|
|
TailwindCSS v4 自定义 utility
|
|
============================================================ */
|
|
|
|
@utility pt-safe {
|
|
padding-top: max(1rem, env(safe-area-inset-top));
|
|
}
|
|
|
|
@utility pb-safe {
|
|
padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
|
|
}
|
|
|
|
/* ============================================================
|
|
全局基样式
|
|
============================================================ */
|
|
|
|
html {
|
|
/* 防止 iOS Safari 橡皮筋效果导致误触导航 */
|
|
overscroll-behavior: none;
|
|
}
|
|
|
|
body {
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
/* 禁止用户缩放（移动端 PWA 常用） */
|
|
touch-action: manipulation;
|
|
}
|
|
|
|
/* 隐藏默认的滚动条（移动端无滚动条更干净） */
|
|
::-webkit-scrollbar {
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
|
|
/* ============================================================
|
|
Toast 动画
|
|
============================================================ */
|
|
|
|
@keyframes slide-in {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateX(100%);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
.animate-slide-in {
|
|
animation: slide-in 0.3s ease-out;
|
|
}
|
|
|
|
/* ============================================================
|
|
自定义横向滚动条（人员视图图表）
|
|
============================================================ */
|
|
.custom-scrollbar {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: #cbd5e1 #f1f5f9;
|
|
}
|
|
.custom-scrollbar::-webkit-scrollbar {
|
|
width: 6px;
|
|
height: 6px;
|
|
}
|
|
.custom-scrollbar::-webkit-scrollbar-thumb {
|
|
background-color: #cbd5e1;
|
|
border-radius: 3px;
|
|
}
|
|
.custom-scrollbar::-webkit-scrollbar-track {
|
|
background-color: #f1f5f9;
|
|
border-radius: 3px;
|
|
}
|