574 lines
13 KiB
CSS
574 lines
13 KiB
CSS
@tailwind base;
|
||
@tailwind components;
|
||
@tailwind utilities;
|
||
/* 背景图居中 */
|
||
/* 背景图居中覆盖 - 支持自定义padding控制 */
|
||
.bg-flex-center {
|
||
@apply flex items-center justify-center bg-center bg-no-repeat bg-contain;
|
||
}
|
||
|
||
/* 自定义样式 */
|
||
.crud-container {
|
||
@apply max-w-7xl mx-auto p-6;
|
||
}
|
||
|
||
.crud-header {
|
||
@apply mb-6 flex justify-between items-center;
|
||
}
|
||
|
||
.crud-table {
|
||
@apply bg-white rounded-lg shadow-sm;
|
||
}
|
||
|
||
.crud-form {
|
||
@apply bg-white p-6 rounded-lg shadow-sm;
|
||
}
|
||
|
||
/*
|
||
九宫格（9-slice）图片边框 Utility
|
||
|
||
目标：
|
||
- 传入一张九宫格图片的 URL，保持4个角按上下左右的参数不拉伸
|
||
- 中间和4个角中间的区域拉伸
|
||
- 支持自定义重复模式、填充行为、边框扩展等高级选项
|
||
|
||
核心参数：
|
||
- 图片URL：--nine-src
|
||
- 切片参数：--nine-top/right/bottom/left（基于图片实际像素）
|
||
- 快速设置：--nine-all（一次性设置四个角相等）
|
||
- 重复模式：--nine-repeat（stretch/repeat/round/space）
|
||
- 填充控制：--nine-fill（1 填充/0 不填充）
|
||
- 边框扩展：--nine-outset（向外扩展距离）
|
||
- 边框宽度：--nine-width（边框图像宽度）
|
||
|
||
使用说明（Tailwind 原子类 + CSS 变量）：
|
||
1) 在元素上添加基础类：`nine-slice`
|
||
2) 通过 Tailwind 任意值设置 CSS 变量：
|
||
- 设置图片 URL：`[--nine-src:url('/public/images/frame-9.png')]`
|
||
- 设置切片大小：`[--nine-top:10] [--nine-right:10] [--nine-bottom:10] [--nine-left:10]`
|
||
- 快速设置（四个角相等）：`[--nine-all:15]`（等效于设置四个角都为15）
|
||
- 可选高级参数：
|
||
- 重复模式：`[--nine-repeat:repeat]`（默认 stretch）
|
||
- 向外扩展：`[--nine-outset:5]`（默认 0）
|
||
- 边框宽度：`[--nine-width:2]`（默认 1）
|
||
3) 填充控制：
|
||
- 默认：填充中心区域
|
||
- 添加 `nine-slice-no-fill` 类：不填充中心，露出背景
|
||
|
||
示例：
|
||
<!-- 基础使用 -->
|
||
<div class="nine-slice [--nine-src:url('/public/images/frame-9.png')] [--nine-top:10] [--nine-right:10] [--nine-bottom:10] [--nine-left:10] p-4">
|
||
内容区域
|
||
</div>
|
||
|
||
<!-- 快速设置（四个角相等） -->
|
||
<div class="nine-slice [--nine-src:url('/public/images/frame-9.png')] [--nine-all:15] p-4">
|
||
快速设置 - 四个角都是15px
|
||
</div>
|
||
|
||
<!-- 重复图案 -->
|
||
<div class="nine-slice [--nine-src:url('/public/images/pattern.png')] [--nine-top:15] [--nine-right:15] [--nine-bottom:15] [--nine-left:15] [--nine-repeat:round] p-6">
|
||
重复图案边框
|
||
</div>
|
||
|
||
<!-- 不填充中心 -->
|
||
<div class="nine-slice nine-slice-no-fill [--nine-src:url('/public/images/frame.png')] [--nine-top:20] [--nine-right:20] [--nine-bottom:20] [--nine-left:20] p-8">
|
||
不填充中心
|
||
</div>
|
||
|
||
关键点：
|
||
- 使用 CSS border-image 实现精确的9宫格切片
|
||
- 4个角保持不拉伸，边缘和中心区域可配置拉伸或重复
|
||
- 支持 fill/unfill 控制中心区域填充
|
||
- 兼容所有现代浏览器
|
||
*/
|
||
@layer utilities {
|
||
.H2 {
|
||
@apply text-2xl font-bold;
|
||
}
|
||
.H3 {
|
||
@apply text-xl font-bold;
|
||
}
|
||
.H4 {
|
||
@apply text-base font-light;
|
||
}
|
||
.frame1 {
|
||
@apply nine-slice [--nine-src:url('/public/images/Frame1.png')] [--nine-all:10] [--nine-fill:1];
|
||
}
|
||
.frame-border2 {
|
||
@apply absolute inset-0 nine-slice [--nine-src:url('/public/images/frame-border2.png')] [--nine-all:50] [--nine-fill:1];
|
||
}
|
||
/* 九宫格边框类 - 支持基础到高级功能 */
|
||
.nine-slice {
|
||
border-style: solid;
|
||
width: 100%;
|
||
height: 100%;
|
||
/* 边框厚度：基于独立的切片值或快速设置 */
|
||
border-width: calc(var(--nine-top, var(--nine-all, 24)) * 1px)
|
||
calc(var(--nine-right, var(--nine-all, 24)) * 1px)
|
||
calc(var(--nine-bottom, var(--nine-all, 24)) * 1px)
|
||
calc(var(--nine-left, var(--nine-all, 24)) * 1px);
|
||
|
||
/* 边框图像 */
|
||
border-image-source: var(--nine-src);
|
||
|
||
/* 边框图像宽度 */
|
||
border-image-width: var(--nine-width, 1);
|
||
|
||
/* 边框图像向外扩展 */
|
||
border-image-outset: calc(var(--nine-outset, 0) * 1px);
|
||
|
||
/* 重复模式 - 支持 stretch, repeat, round, space */
|
||
border-image-repeat: var(--nine-repeat, stretch);
|
||
|
||
/* 默认切片设置（填充中心） */
|
||
border-image-slice: var(--nine-top, var(--nine-all, 24)) var(--nine-right, var(--nine-all, 24))
|
||
var(--nine-bottom, var(--nine-all, 24)) var(--nine-left, var(--nine-all, 24)) fill;
|
||
}
|
||
|
||
/* 不填充中心的变体 */
|
||
.nine-slice.nine-slice-no-fill {
|
||
border-image-slice: var(--nine-top, var(--nine-all, 24)) var(--nine-right, var(--nine-all, 24))
|
||
var(--nine-bottom, var(--nine-all, 24)) var(--nine-left, var(--nine-all, 24));
|
||
}
|
||
|
||
/* 动画支持 - 平滑过渡 */
|
||
.nine-slice-animated {
|
||
transition:
|
||
border-image-source 0.3s ease,
|
||
border-width 0.3s ease,
|
||
border-image-slice 0.3s ease;
|
||
}
|
||
}
|
||
|
||
/*
|
||
大屏看板专用 TailwindCSS Utilities
|
||
|
||
设计目标：
|
||
- 适配4K大屏分辨率 (3840x2160)
|
||
- 支持多种布局模式（网格、弹性、绝对定位）
|
||
- 提供专业的数据可视化容器
|
||
- 优化文字可读性和对比度
|
||
- 支持动态主题切换
|
||
*/
|
||
|
||
@layer utilities {
|
||
/* 大屏布局容器 */
|
||
.dashboard-container {
|
||
@apply w-full h-screen overflow-hidden bg-slate-900 text-white;
|
||
}
|
||
|
||
.dashboard-grid {
|
||
@apply grid gap-4 p-6 h-full;
|
||
}
|
||
|
||
.dashboard-grid-2x2 {
|
||
@apply grid grid-cols-2 grid-rows-2 gap-6 p-8;
|
||
}
|
||
|
||
.dashboard-grid-3x3 {
|
||
@apply grid grid-cols-3 grid-rows-3 gap-4 p-6;
|
||
}
|
||
|
||
.dashboard-grid-4x4 {
|
||
@apply grid grid-cols-4 grid-rows-4 gap-3 p-4;
|
||
}
|
||
|
||
/* 大屏卡片容器 */
|
||
.dashboard-card {
|
||
@apply bg-slate-800/80 backdrop-blur-sm rounded-xl border border-slate-700 p-6 shadow-2xl;
|
||
}
|
||
|
||
.dashboard-card-highlight {
|
||
@apply dashboard-card border-blue-500/50 bg-slate-800/90;
|
||
}
|
||
|
||
.dashboard-card-warning {
|
||
@apply dashboard-card border-amber-500/50 bg-orange-900/20;
|
||
}
|
||
|
||
.dashboard-card-danger {
|
||
@apply dashboard-card border-red-500/50 bg-red-900/20;
|
||
}
|
||
|
||
/* 大屏标题文字 */
|
||
.dashboard-title {
|
||
@apply text-4xl font-bold text-white tracking-wide mb-4;
|
||
}
|
||
|
||
.dashboard-subtitle {
|
||
@apply text-2xl font-semibold text-slate-300 mb-3;
|
||
}
|
||
|
||
.dashboard-metric-title {
|
||
@apply text-lg font-medium text-slate-400 mb-2;
|
||
}
|
||
|
||
/* 大屏数值显示 */
|
||
.dashboard-metric-large {
|
||
@apply text-6xl font-bold text-white tabular-nums;
|
||
}
|
||
|
||
.dashboard-metric-medium {
|
||
@apply text-5xl font-semibold text-white tabular-nums;
|
||
}
|
||
|
||
.dashboard-metric-small {
|
||
@apply text-3xl font-medium text-slate-200 tabular-nums;
|
||
}
|
||
|
||
.dashboard-metric-trend-up {
|
||
@apply text-green-400 text-2xl font-semibold;
|
||
}
|
||
|
||
.dashboard-metric-trend-down {
|
||
@apply text-red-400 text-2xl font-semibold;
|
||
}
|
||
|
||
/* 图表容器 */
|
||
.chart-container {
|
||
@apply w-full h-80 bg-slate-800/50 rounded-lg p-4 border border-slate-700;
|
||
}
|
||
|
||
.chart-container-large {
|
||
@apply w-full h-96 bg-slate-800/50 rounded-lg p-4 border border-slate-700;
|
||
}
|
||
|
||
.chart-container-small {
|
||
@apply w-full h-48 bg-slate-800/50 rounded-lg p-3 border border-slate-700;
|
||
}
|
||
|
||
/* 进度条 */
|
||
.dashboard-progress {
|
||
@apply w-full h-3 bg-slate-700 rounded-full overflow-hidden;
|
||
}
|
||
|
||
.dashboard-progress-bar {
|
||
@apply h-full bg-gradient-to-r from-blue-500 to-cyan-400 rounded-full transition-all duration-500;
|
||
}
|
||
|
||
.dashboard-progress-bar-success {
|
||
@apply bg-gradient-to-r from-green-500 to-emerald-400;
|
||
}
|
||
|
||
.dashboard-progress-bar-warning {
|
||
@apply bg-gradient-to-r from-amber-500 to-yellow-400;
|
||
}
|
||
|
||
.dashboard-progress-bar-danger {
|
||
@apply bg-gradient-to-r from-red-500 to-rose-400;
|
||
}
|
||
|
||
/* 状态指示器 */
|
||
.status-indicator {
|
||
@apply inline-flex items-center px-3 py-1 rounded-full text-sm font-medium;
|
||
}
|
||
|
||
.status-online {
|
||
@apply status-indicator bg-green-500/20 text-green-300 border border-green-500/30;
|
||
}
|
||
|
||
.status-offline {
|
||
@apply status-indicator bg-red-500/20 text-red-300 border border-red-500/30;
|
||
}
|
||
|
||
.status-warning {
|
||
@apply status-indicator bg-amber-500/20 text-amber-300 border border-amber-500/30;
|
||
}
|
||
|
||
.status-dot {
|
||
@apply w-3 h-3 rounded-full mr-2;
|
||
}
|
||
|
||
.status-dot-online {
|
||
@apply status-dot bg-green-400 animate-pulse;
|
||
}
|
||
|
||
.status-dot-offline {
|
||
@apply status-dot bg-red-400;
|
||
}
|
||
|
||
.status-dot-warning {
|
||
@apply status-dot bg-amber-400;
|
||
}
|
||
|
||
/* 动画效果 */
|
||
.dashboard-fade-in {
|
||
@apply animate-fade-in duration-1000;
|
||
}
|
||
|
||
.dashboard-slide-up {
|
||
@apply animate-slide-up duration-700;
|
||
}
|
||
|
||
.dashboard-scale-in {
|
||
@apply animate-scale-in duration-500;
|
||
}
|
||
|
||
/* 自定义动画 */
|
||
@keyframes fade-in {
|
||
from {
|
||
opacity: 0;
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
@keyframes slide-up {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(30px);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
@keyframes scale-in {
|
||
from {
|
||
opacity: 0;
|
||
transform: scale(0.9);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: scale(1);
|
||
}
|
||
}
|
||
|
||
.animate-fade-in {
|
||
animation: fade-in ease-out;
|
||
}
|
||
|
||
.animate-slide-up {
|
||
animation: slide-up ease-out;
|
||
}
|
||
|
||
.animate-scale-in {
|
||
animation: scale-in ease-out;
|
||
}
|
||
|
||
/* 数据表格样式 */
|
||
.dashboard-table {
|
||
@apply w-full border-collapse bg-slate-800/50 rounded-lg overflow-hidden;
|
||
}
|
||
|
||
.dashboard-table th {
|
||
@apply px-6 py-4 text-left text-sm font-semibold text-slate-300 border-b border-slate-700 bg-slate-800/80;
|
||
}
|
||
|
||
.dashboard-table td {
|
||
@apply px-6 py-4 text-sm text-slate-200 border-b border-slate-700/50;
|
||
}
|
||
|
||
.dashboard-table tr:hover {
|
||
@apply bg-slate-700/30;
|
||
}
|
||
|
||
/* 滚动条样式 */
|
||
.dashboard-scrollbar {
|
||
overflow: auto;
|
||
scrollbar-width: thin;
|
||
scrollbar-color: #475569 #1e293b;
|
||
}
|
||
|
||
.dashboard-scrollbar::-webkit-scrollbar {
|
||
width: 8px;
|
||
height: 8px;
|
||
}
|
||
|
||
.dashboard-scrollbar::-webkit-scrollbar-track {
|
||
background: #1e293b;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.dashboard-scrollbar::-webkit-scrollbar-thumb {
|
||
background: #475569;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.dashboard-scrollbar::-webkit-scrollbar-thumb:hover {
|
||
background: #64748b;
|
||
}
|
||
|
||
/* 全屏模式 */
|
||
.dashboard-fullscreen {
|
||
@apply fixed inset-0 z-50 bg-slate-900;
|
||
}
|
||
|
||
/* 分屏布局 */
|
||
.dashboard-split-horizontal {
|
||
@apply grid grid-cols-2 gap-0 h-full;
|
||
}
|
||
|
||
.dashboard-split-vertical {
|
||
@apply grid grid-rows-2 gap-0 h-full;
|
||
}
|
||
|
||
/* 边缘对齐 */
|
||
.dashboard-align-top {
|
||
@apply flex items-start justify-center;
|
||
}
|
||
|
||
.dashboard-align-bottom {
|
||
@apply flex items-end justify-center;
|
||
}
|
||
|
||
.dashboard-align-left {
|
||
@apply flex items-center justify-start;
|
||
}
|
||
|
||
.dashboard-align-right {
|
||
@apply flex items-center justify-end;
|
||
}
|
||
|
||
/* 页面过渡动画 - 淡入淡出效果 */
|
||
.page-transition {
|
||
@apply transition-all duration-1000 ease-out;
|
||
}
|
||
|
||
.page-enter {
|
||
@apply opacity-0 scale-95;
|
||
}
|
||
|
||
.page-enter-active {
|
||
@apply transition-all duration-1000 ease-out;
|
||
}
|
||
|
||
.page-enter-to {
|
||
@apply opacity-100 scale-100;
|
||
}
|
||
|
||
.page-leave {
|
||
@apply opacity-100 scale-100;
|
||
}
|
||
|
||
.page-leave-active {
|
||
@apply transition-all duration-500 ease-in;
|
||
}
|
||
|
||
.page-leave-to {
|
||
@apply opacity-0 scale-95;
|
||
}
|
||
|
||
/* 元素淡入动画 */
|
||
.fade-in {
|
||
animation: fade-in 1s ease-out forwards;
|
||
opacity: 0; /* 初始状态设为透明，避免闪烁 */
|
||
}
|
||
|
||
.fade-in-left {
|
||
animation: fade-in-left 1s ease-out forwards;
|
||
opacity: 0; /* 初始状态设为透明，避免闪烁 */
|
||
}
|
||
|
||
.fade-in-right {
|
||
animation: fade-in-right 1s ease-out forwards;
|
||
opacity: 0; /* 初始状态设为透明，避免闪烁 */
|
||
}
|
||
|
||
.fade-in-up {
|
||
animation: fade-in-up 1s ease-out forwards;
|
||
}
|
||
|
||
.fade-in-down {
|
||
animation: fade-in-down 1s ease-out forwards;
|
||
}
|
||
|
||
/* 淡入动画关键帧 */
|
||
@keyframes fade-in {
|
||
from {
|
||
opacity: 0;
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
@keyframes fade-in-left {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateX(-20px);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translateX(0);
|
||
}
|
||
}
|
||
|
||
@keyframes fade-in-right {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateX(20px);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translateX(0);
|
||
}
|
||
}
|
||
|
||
@keyframes fade-in-up {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(20px);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
@keyframes fade-in-down {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(-20px);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
/* 动画延迟工具类 */
|
||
.delay-100 {
|
||
animation-delay: 100ms;
|
||
}
|
||
|
||
.delay-200 {
|
||
animation-delay: 200ms;
|
||
}
|
||
|
||
.delay-300 {
|
||
animation-delay: 300ms;
|
||
}
|
||
|
||
.delay-400 {
|
||
animation-delay: 400ms;
|
||
}
|
||
|
||
.delay-500 {
|
||
animation-delay: 500ms;
|
||
}
|
||
|
||
.delay-600 {
|
||
animation-delay: 600ms;
|
||
}
|
||
|
||
.delay-700 {
|
||
animation-delay: 700ms;
|
||
}
|
||
|
||
.delay-800 {
|
||
animation-delay: 800ms;
|
||
}
|
||
|
||
.delay-900 {
|
||
animation-delay: 900ms;
|
||
}
|
||
|
||
.delay-1000 {
|
||
animation-delay: 1000ms;
|
||
}
|
||
}
|