生产管理系统前端 - 更新瓦力提交的产品原型到参考目录
This commit is contained in:
@@ -1,175 +1,4 @@
|
||||
@import 'tailwindcss';
|
||||
|
||||
/* 自定义变量和农业主题色彩 */
|
||||
:root {
|
||||
/* 基础字体大小 */
|
||||
--font-size: 16px;
|
||||
|
||||
/* 绿色农业主题色系 */
|
||||
--color-green-50: #f0fdf4;
|
||||
--color-green-100: #dcfce7;
|
||||
--color-green-200: #bbf7d0;
|
||||
--color-green-300: #86efac;
|
||||
--color-green-400: #4ade80;
|
||||
--color-green-500: #22c55e;
|
||||
--color-green-600: #16a34a;
|
||||
--color-green-700: #15803d;
|
||||
--color-green-800: #166534;
|
||||
--color-green-900: #14532d;
|
||||
--color-green-950: #052e16;
|
||||
|
||||
/* 农业相关色彩 */
|
||||
--color-earth-50: #fef7ee;
|
||||
--color-earth-100: #fdecd1;
|
||||
--color-earth-200: #fad7bc;
|
||||
--color-earth-300: #f6c4a0;
|
||||
--color-earth-400: #f0aa7c;
|
||||
--color-earth-500: #ea8e5e;
|
||||
--color-earth-600: #d4734d;
|
||||
--color-earth-700: #b35a3b;
|
||||
--color-earth-800: #8e4332;
|
||||
--color-earth-900: #723528;
|
||||
|
||||
--color-water-50: #ecfeff;
|
||||
--color-water-100: #cffafe;
|
||||
--color-water-200: #a5f3fc;
|
||||
--color-water-300: #67e8f9;
|
||||
--color-water-400: #22d3ee;
|
||||
--color-water-500: #06b6d4;
|
||||
--color-water-600: #0891b2;
|
||||
--color-water-700: #0e7490;
|
||||
--color-water-800: #155e75;
|
||||
--color-water-900: #164e63;
|
||||
|
||||
--color-crop-wheat: #fbbf24;
|
||||
--color-crop-rice: #34d399;
|
||||
--color-crop-corn: #f59e0b;
|
||||
--color-crop-soy: #8b5cf6;
|
||||
--color-crop-vegetable: #10b981;
|
||||
--color-crop-fruit: #ef4444;
|
||||
|
||||
/* 现有的基础色彩系统 */
|
||||
--background: #ffffff;
|
||||
--foreground: oklch(0.145 0 0);
|
||||
--card: #ffffff;
|
||||
--card-foreground: oklch(0.145 0 0);
|
||||
--popover: oklch(1 0 0);
|
||||
--popover-foreground: oklch(0.145 0 0);
|
||||
--primary: #16a34a; /* 使用绿色作为主色 */
|
||||
--primary-foreground: oklch(1 0 0);
|
||||
--secondary: oklch(0.95 0.0058 264.53);
|
||||
--secondary-foreground: #030213;
|
||||
--muted: #ececf0;
|
||||
--muted-foreground: #717182;
|
||||
--accent: #e9ebef;
|
||||
--accent-foreground: #030213;
|
||||
--destructive: #d4183d;
|
||||
--destructive-foreground: #ffffff;
|
||||
--border: rgba(0, 0, 0, 0.1);
|
||||
--input: transparent;
|
||||
--input-background: #f3f3f5;
|
||||
--switch-background: #cbced4;
|
||||
--font-weight-medium: 500;
|
||||
--font-weight-normal: 400;
|
||||
--ring: oklch(0.708 0 0);
|
||||
--chart-1: var(--color-green-600);
|
||||
--chart-2: var(--color-water-600);
|
||||
--chart-3: var(--color-earth-600);
|
||||
--chart-4: oklch(0.828 0.189 84.429);
|
||||
--chart-5: oklch(0.769 0.188 70.08);
|
||||
--radius: 0.625rem;
|
||||
--sidebar: oklch(0.985 0 0);
|
||||
--sidebar-foreground: oklch(0.145 0 0);
|
||||
--sidebar-primary: var(--color-green-600);
|
||||
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||
--sidebar-accent: oklch(0.97 0 0);
|
||||
--sidebar-accent-foreground: oklch(0.205 0 0);
|
||||
--sidebar-border: oklch(0.922 0 0);
|
||||
--sidebar-ring: oklch(0.708 0 0);
|
||||
|
||||
/* 动画缓动 */
|
||||
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
--ease-out: cubic-bezier(0, 0, 0.2, 1);
|
||||
--ease-in: cubic-bezier(0.4, 0, 1, 1);
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: oklch(0.145 0 0);
|
||||
--foreground: oklch(0.985 0 0);
|
||||
--card: oklch(0.145 0 0);
|
||||
--card-foreground: oklch(0.985 0 0);
|
||||
--popover: oklch(0.145 0 0);
|
||||
--popover-foreground: oklch(0.985 0 0);
|
||||
--primary: var(--color-green-500);
|
||||
--primary-foreground: oklch(0.145 0 0);
|
||||
--secondary: oklch(0.269 0 0);
|
||||
--secondary-foreground: oklch(0.985 0 0);
|
||||
--muted: oklch(0.269 0 0);
|
||||
--muted-foreground: oklch(0.708 0 0);
|
||||
--accent: oklch(0.269 0 0);
|
||||
--accent-foreground: oklch(0.985 0 0);
|
||||
--destructive: oklch(0.396 0.141 25.723);
|
||||
--destructive-foreground: oklch(0.637 0.237 25.331);
|
||||
--border: oklch(0.269 0 0);
|
||||
--input: oklch(0.269 0 0);
|
||||
--ring: oklch(0.439 0 0);
|
||||
--font-weight-medium: 500;
|
||||
--font-weight-normal: 400;
|
||||
--chart-1: var(--color-green-400);
|
||||
--chart-2: var(--color-water-400);
|
||||
--chart-3: var(--color-earth-400);
|
||||
--chart-4: oklch(0.627 0.265 303.9);
|
||||
--chart-5: oklch(0.645 0.246 16.439);
|
||||
--sidebar: oklch(0.205 0 0);
|
||||
--sidebar-foreground: oklch(0.985 0 0);
|
||||
--sidebar-primary: var(--color-green-400);
|
||||
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||
--sidebar-accent: oklch(0.269 0 0);
|
||||
--sidebar-accent-foreground: oklch(0.985 0 0);
|
||||
--sidebar-border: oklch(0.269 0 0);
|
||||
--sidebar-ring: oklch(0.439 0 0);
|
||||
}
|
||||
|
||||
@theme inline {
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
--color-card: var(--card);
|
||||
--color-card-foreground: var(--card-foreground);
|
||||
--color-popover: var(--popover);
|
||||
--color-popover-foreground: var(--popover-foreground);
|
||||
--color-primary: var(--primary);
|
||||
--color-primary-foreground: var(--primary-foreground);
|
||||
--color-secondary: var(--secondary);
|
||||
--color-secondary-foreground: var(--secondary-foreground);
|
||||
--color-muted: var(--muted);
|
||||
--color-muted-foreground: var(--muted-foreground);
|
||||
--color-accent: var(--accent);
|
||||
--color-accent-foreground: var(--accent-foreground);
|
||||
--color-destructive: var(--destructive);
|
||||
--color-destructive-foreground: var(--destructive-foreground);
|
||||
--color-border: var(--border);
|
||||
--color-input: var(--input);
|
||||
--color-input-background: var(--input-background);
|
||||
--color-switch-background: var(--switch-background);
|
||||
--color-ring: var(--ring);
|
||||
--color-chart-1: var(--chart-1);
|
||||
--color-chart-2: var(--chart-2);
|
||||
--color-chart-3: var(--chart-3);
|
||||
--color-chart-4: var(--chart-4);
|
||||
--color-chart-5: var(--chart-5);
|
||||
--radius-sm: calc(var(--radius) - 4px);
|
||||
--radius-md: calc(var(--radius) - 2px);
|
||||
--radius-lg: var(--radius);
|
||||
--radius-xl: calc(var(--radius) + 4px);
|
||||
--color-sidebar: var(--sidebar);
|
||||
--color-sidebar-foreground: var(--sidebar-foreground);
|
||||
--color-sidebar-primary: var(--sidebar-primary);
|
||||
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
||||
--color-sidebar-accent: var(--sidebar-accent);
|
||||
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
||||
--color-sidebar-border: var(--sidebar-border);
|
||||
--color-sidebar-ring: var(--sidebar-ring);
|
||||
}
|
||||
@custom-variant dark (&:is(.dark *));
|
||||
|
||||
:root {
|
||||
--font-size: 16px;
|
||||
@@ -363,543 +192,13 @@ html {
|
||||
font-size: var(--font-size);
|
||||
}
|
||||
|
||||
/* 自定义基础样式 */
|
||||
@layer base {
|
||||
/* 自定义滚动条 */
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
@apply bg-gray-100;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
@apply bg-gray-300 rounded-full;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
@apply bg-gray-400;
|
||||
}
|
||||
|
||||
/* Firefox 滚动条 */
|
||||
* {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: rgb(209 213 219) rgb(243 244 246);
|
||||
}
|
||||
|
||||
* {
|
||||
@apply border-border outline-ring/50;
|
||||
}
|
||||
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
}
|
||||
}
|
||||
|
||||
/* 自定义组件样式 - 农业主题 */
|
||||
/* Field value styling for forms and detail views */
|
||||
@layer components {
|
||||
/* 农业状态指示器 */
|
||||
.status-running {
|
||||
@apply bg-green-100 text-green-800 px-3 py-1 rounded-full text-xs font-medium;
|
||||
}
|
||||
|
||||
.status-idle {
|
||||
@apply bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-xs font-medium;
|
||||
}
|
||||
|
||||
.status-maintenance {
|
||||
@apply bg-yellow-100 text-yellow-800 px-3 py-1 rounded-full text-xs font-medium;
|
||||
}
|
||||
|
||||
.status-scrapped {
|
||||
@apply bg-red-100 text-red-800 px-3 py-1 rounded-full text-xs font-medium;
|
||||
}
|
||||
|
||||
/* 农作物类型徽章 */
|
||||
.crop-wheat {
|
||||
@apply bg-yellow-100 text-yellow-800 px-2 py-1 rounded text-xs font-medium;
|
||||
}
|
||||
|
||||
.crop-rice {
|
||||
@apply bg-emerald-100 text-emerald-800 px-2 py-1 rounded text-xs font-medium;
|
||||
}
|
||||
|
||||
.crop-corn {
|
||||
@apply bg-orange-100 text-orange-800 px-2 py-1 rounded text-xs font-medium;
|
||||
}
|
||||
|
||||
.crop-soy {
|
||||
@apply bg-purple-100 text-purple-800 px-2 py-1 rounded text-xs font-medium;
|
||||
}
|
||||
|
||||
.crop-vegetable {
|
||||
@apply bg-green-100 text-green-800 px-2 py-1 rounded text-xs font-medium;
|
||||
}
|
||||
|
||||
.crop-fruit {
|
||||
@apply bg-red-100 text-red-800 px-2 py-1 rounded text-xs font-medium;
|
||||
}
|
||||
|
||||
/* 表格边框样式 */
|
||||
.table-row-border {
|
||||
border-bottom: 1px solid theme('colors.border');
|
||||
}
|
||||
|
||||
/* 卡片阴影效果 */
|
||||
.card-shadow {
|
||||
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
/* 输入框聚焦效果 */
|
||||
.input-focus {
|
||||
@apply focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent;
|
||||
}
|
||||
|
||||
/* 按钮过渡效果 */
|
||||
.btn-transition {
|
||||
@apply transition-all duration-200 ease-in-out;
|
||||
}
|
||||
|
||||
/* 文字省略 */
|
||||
.text-ellipsis-2 {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.text-ellipsis-3 {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 按钮组件 */
|
||||
.btn {
|
||||
@apply inline-flex items-center justify-center px-4 py-2 text-sm font-medium rounded-md btn-transition focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
@apply bg-primary text-primary-foreground hover:bg-primary/90 focus:ring-primary-500;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
@apply bg-secondary text-secondary-foreground hover:bg-secondary/80 focus:ring-secondary-500;
|
||||
}
|
||||
|
||||
.btn-outline {
|
||||
@apply border border-border bg-background text-foreground hover:bg-accent hover:text-accent-foreground focus:ring-primary-500;
|
||||
}
|
||||
|
||||
.btn-ghost {
|
||||
@apply text-muted-foreground hover:bg-accent hover:text-accent-foreground focus:ring-accent-foreground;
|
||||
}
|
||||
|
||||
.btn-sm {
|
||||
@apply px-3 py-1.5 text-xs;
|
||||
}
|
||||
|
||||
.btn-lg {
|
||||
@apply px-6 py-3 text-base;
|
||||
}
|
||||
|
||||
/* 输入框组件 */
|
||||
.input {
|
||||
@apply block w-full px-3 py-2 border border-input bg-background rounded-md placeholder:text-muted-foreground input-focus;
|
||||
}
|
||||
|
||||
.input-error {
|
||||
@apply border-destructive focus:ring-destructive;
|
||||
}
|
||||
|
||||
/* 卡片组件 */
|
||||
.card {
|
||||
@apply bg-card rounded-lg shadow-sm border border-border p-6;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
@apply border-b border-border pb-4 mb-4;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
@apply text-lg font-semibold text-card-foreground;
|
||||
}
|
||||
|
||||
.card-description {
|
||||
@apply text-sm text-muted-foreground mt-1;
|
||||
}
|
||||
|
||||
/* 徽章组件 */
|
||||
.badge {
|
||||
@apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
|
||||
}
|
||||
|
||||
.badge-primary {
|
||||
@apply bg-primary/10 text-primary border border-primary/20;
|
||||
}
|
||||
|
||||
.badge-secondary {
|
||||
@apply bg-secondary text-secondary-foreground;
|
||||
}
|
||||
|
||||
.badge-success {
|
||||
@apply bg-green-100 text-green-800 border border-green-200;
|
||||
}
|
||||
|
||||
.badge-warning {
|
||||
@apply bg-yellow-100 text-yellow-800 border border-yellow-200;
|
||||
}
|
||||
|
||||
.badge-error {
|
||||
@apply bg-destructive text-destructive-foreground;
|
||||
}
|
||||
|
||||
/* 加载状态 */
|
||||
.loading-spinner {
|
||||
@apply inline-block w-4 h-4 border-2 border-current border-t-transparent rounded-full animate-spin;
|
||||
}
|
||||
|
||||
/* 表格样式 */
|
||||
.table {
|
||||
@apply w-full border-collapse;
|
||||
}
|
||||
|
||||
.table th {
|
||||
@apply px-4 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider bg-muted/50;
|
||||
}
|
||||
|
||||
.table td {
|
||||
@apply px-4 py-3 text-sm table-row-border;
|
||||
}
|
||||
|
||||
/* 页面布局 */
|
||||
.page-container {
|
||||
@apply container mx-auto px-4 py-6 max-w-7xl;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
@apply mb-6;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
@apply text-2xl font-bold text-foreground mb-2;
|
||||
}
|
||||
|
||||
.page-description {
|
||||
@apply text-muted-foreground;
|
||||
}
|
||||
|
||||
/* 表单样式 */
|
||||
.form-group {
|
||||
@apply space-y-2;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
@apply block text-sm font-medium text-foreground;
|
||||
}
|
||||
|
||||
.form-error {
|
||||
@apply text-sm text-destructive mt-1;
|
||||
}
|
||||
|
||||
.form-help {
|
||||
@apply text-sm text-muted-foreground mt-1;
|
||||
}
|
||||
|
||||
/* 导航样式 */
|
||||
.nav-item {
|
||||
@apply flex items-center px-3 py-2 text-sm font-medium rounded-md btn-transition;
|
||||
}
|
||||
|
||||
.nav-item-active {
|
||||
@apply bg-primary/10 text-primary border border-primary/20;
|
||||
}
|
||||
|
||||
.nav-item-inactive {
|
||||
@apply text-muted-foreground hover:text-foreground hover:bg-accent;
|
||||
}
|
||||
|
||||
/* 工具提示 */
|
||||
.tooltip {
|
||||
@apply absolute z-50 px-3 py-2 text-sm text-popover-foreground bg-popover rounded-md shadow-lg opacity-0 pointer-events-none transition-opacity duration-200;
|
||||
}
|
||||
|
||||
.tooltip-visible {
|
||||
@apply opacity-100 pointer-events-auto;
|
||||
}
|
||||
|
||||
/* 模态框样式 */
|
||||
.modal-overlay {
|
||||
@apply fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
@apply bg-card rounded-lg shadow-xl max-w-lg w-full max-h-screen overflow-y-auto;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
@apply px-6 py-4 border-b border-border;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
@apply text-lg font-semibold text-card-foreground;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
@apply px-6 py-4;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
@apply px-6 py-4 border-t border-border flex justify-end space-x-3;
|
||||
}
|
||||
|
||||
/* Field value styling for forms and detail views */
|
||||
.field-value {
|
||||
@apply mt-2 text-base text-foreground px-3 py-2 bg-muted/50 rounded-md min-h-[2.5rem] flex items-center;
|
||||
@apply mt-2 text-base text-foreground px-3 py-2 bg-gray-50 rounded-md min-h-[2.5rem] flex items-center;
|
||||
}
|
||||
|
||||
|
||||
.field-value-inline {
|
||||
@apply mt-2 text-base text-foreground;
|
||||
}
|
||||
}
|
||||
|
||||
/* 自定义工具类 */
|
||||
@layer utilities {
|
||||
/* 安全区域 */
|
||||
.safe-top {
|
||||
padding-top: env(safe-area-inset-top);
|
||||
}
|
||||
|
||||
.safe-bottom {
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
|
||||
.safe-left {
|
||||
padding-left: env(safe-area-inset-left);
|
||||
}
|
||||
|
||||
.safe-right {
|
||||
padding-right: env(safe-area-inset-right);
|
||||
}
|
||||
|
||||
/* 隐藏滚动条 */
|
||||
.scrollbar-hide {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.scrollbar-hide::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 文本选择 */
|
||||
.select-none {
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
/* 玻璃效果 */
|
||||
.glass {
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.glass-dark {
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
/* 渐变背景 */
|
||||
.gradient-primary {
|
||||
background: linear-gradient(135deg, var(--primary) 0%, color-mix(in srgb, var(--primary) 85%) 100%);
|
||||
}
|
||||
|
||||
.gradient-success {
|
||||
background: linear-gradient(135deg, var(--color-green-500) 0%, color-mix(in srgb, var(--color-green-500) 85%) 100%);
|
||||
}
|
||||
|
||||
/* 网格布局 */
|
||||
.grid-auto-fit {
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
}
|
||||
|
||||
.grid-auto-fill {
|
||||
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
||||
}
|
||||
|
||||
/* 响应式网格 */
|
||||
.grid-responsive {
|
||||
@apply grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4;
|
||||
}
|
||||
|
||||
/* 响应式文本 */
|
||||
.text-responsive {
|
||||
@apply text-sm sm:text-base lg:text-lg;
|
||||
}
|
||||
|
||||
.text-responsive-xl {
|
||||
@apply text-base sm:text-lg lg:text-xl xl:text-2xl;
|
||||
}
|
||||
|
||||
/* 动画延迟 */
|
||||
.animate-delay-100 {
|
||||
animation-delay: 100ms;
|
||||
}
|
||||
|
||||
.animate-delay-200 {
|
||||
animation-delay: 200ms;
|
||||
}
|
||||
|
||||
.animate-delay-300 {
|
||||
animation-delay: 300ms;
|
||||
}
|
||||
|
||||
.animate-delay-500 {
|
||||
animation-delay: 500ms;
|
||||
}
|
||||
|
||||
/* 悬停提升效果 */
|
||||
.hover-lift {
|
||||
@apply transition-transform duration-200 hover:scale-105 hover:-translate-y-1;
|
||||
}
|
||||
|
||||
/* 渐入动画 */
|
||||
.fade-in-up {
|
||||
animation: fadeInUp 0.6s ease-out;
|
||||
}
|
||||
|
||||
.fade-in-down {
|
||||
animation: fadeInDown 0.6s ease-out;
|
||||
}
|
||||
|
||||
.fade-in-left {
|
||||
animation: fadeInLeft 0.6s ease-out;
|
||||
}
|
||||
|
||||
.fade-in-right {
|
||||
animation: fadeInRight 0.6s ease-out;
|
||||
}
|
||||
|
||||
/* 自定义动画关键帧 */
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeInDown {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeInLeft {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(-10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeInRight {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideIn {
|
||||
from {
|
||||
transform: translateX(-100%);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideUp {
|
||||
from {
|
||||
transform: translateY(20px);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
0%, 20%, 53%, 80%, 100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
40%, 43% {
|
||||
transform: translateY(-8px);
|
||||
}
|
||||
70% {
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
90% {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 响应式断点样式 */
|
||||
@media (max-width: 640px) {
|
||||
.mobile-hidden {
|
||||
@apply hidden;
|
||||
}
|
||||
|
||||
.mobile-full {
|
||||
@apply w-full;
|
||||
}
|
||||
|
||||
.mobile-center {
|
||||
@apply text-center;
|
||||
}
|
||||
|
||||
.mobile-stack {
|
||||
@apply flex-col space-y-4;
|
||||
}
|
||||
}
|
||||
|
||||
/* 打印样式 */
|
||||
@media print {
|
||||
.print-hidden {
|
||||
@apply hidden;
|
||||
}
|
||||
|
||||
.print-only {
|
||||
@apply block;
|
||||
}
|
||||
|
||||
* {
|
||||
@apply text-foreground bg-background;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user