Merge remote-tracking branch 'origin/main'

website/css/custom.css

@@ -1,26 +1,27 @@
 /* 自定义样式文件 - 活牛采购智能数字化系统官网 */
 
-/* 全局样式 */
+/* 全局样式 - 按照需求文档规范优化配色 */
 :root {
     --primary-color: #4CAF50; /* 农业绿色主色调 */
     --primary-light: #81C784; /* 浅绿色 */
     --primary-dark: #388E3C; /* 深绿色 */
     --secondary-color: #1976D2; /* 深蓝色辅助色 */
-    --success-color: #00d474; /* 绿色成功色 */
+    --success-color: #4CAF50; /* 绿色成功色（与主色调一致） */
     --warning-color: #FF9800; /* 橙色警告色 */
-    --danger-color: #ff3c78; /* 粉色危险色 */
+    --danger-color: #F44336; /* 红色危险色 */
     --light-color: #f8f9fa;
-    --dark-color: #121212; /* 深色背景 */
-    --gray-color: #2d2d2d; /* 灰色 */
-    --text-light: #f8f9fa; /* 浅色文字 */
-    --text-dark: #343a40; /* 深色文字 */
+    --dark-color: #212529; /* 深色背景 */
+    --gray-color: #6c757d; /* 灰色 */
+    --text-light: #ffffff; /* 浅色文字 */
+    --text-dark: #212529; /* 深色文字 */
+    --text-muted: #6c757d; /* 柔和文字 */
     
-    --font-family-base: 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif, 'Source Han Sans CN';
+    --font-family-base: 'Source Han Sans CN', 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
     --border-radius: 0.75rem;
-    --box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.3);
+    --box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
     --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
-    --neon-shadow: 0 0 10px rgba(76, 175, 80, 0.5);
-    --neon-shadow-hover: 0 0 20px rgba(76, 175, 80, 0.8);
+    --neon-shadow: 0 0 10px rgba(76, 175, 80, 0.3);
+    --neon-shadow-hover: 0 0 20px rgba(76, 175, 80, 0.5);
 }
 
 * {
@@ -51,13 +52,14 @@ body {
 .navbar {
     padding: 0.5rem 0;
     transition: var(--transition);
+    background: rgba(30, 30, 30, 0.9) !important;
     backdrop-filter: blur(10px);
-    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+    border-bottom: 1px solid rgba(76, 175, 80, 0.2);
 }
 
 .navbar.scrolled {
-    background: rgba(255, 255, 255, 0.95) !important;
-    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
+    background: rgba(30, 30, 30, 0.95) !important;
+    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
 }
 
 /* 品牌logo样式 */
@@ -235,12 +237,80 @@ body {
 .btn-primary {
     background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
     box-shadow: 0 4px 15px rgba(76, 175, 80, 0.4);
+    color: var(--text-light);
 }
 
 .btn-primary:hover {
     background: linear-gradient(135deg, var(--primary-light), var(--primary-color));
     transform: translateY(-3px);
     box-shadow: 0 8px 25px rgba(76, 175, 80, 0.6);
+    color: var(--text-light);
+}
+
+.btn-outline-primary {
+    border: 2px solid var(--primary-color);
+    color: var(--primary-color);
+    background: transparent;
+}
+
+.btn-outline-primary:hover {
+    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
+    border-color: var(--primary-color);
+    color: var(--text-light);
+    transform: translateY(-3px);
+    box-shadow: 0 4px 15px rgba(76, 175, 80, 0.4);
+}
+
+.btn-success {
+    background: linear-gradient(135deg, var(--success-color), #3d8b40);
+    box-shadow: 0 4px 15px rgba(76, 175, 80, 0.4);
+    color: var(--text-light);
+}
+
+.btn-success:hover {
+    background: linear-gradient(135deg, var(--success-color), var(--success-color));
+    transform: translateY(-3px);
+    box-shadow: 0 8px 25px rgba(76, 175, 80, 0.6);
+    color: var(--text-light);
+}
+
+.btn-warning {
+    background: linear-gradient(135deg, var(--warning-color), #e68a00);
+    box-shadow: 0 4px 15px rgba(255, 152, 0, 0.4);
+    color: var(--text-light);
+}
+
+.btn-warning:hover {
+    background: linear-gradient(135deg, var(--warning-color), var(--warning-color));
+    transform: translateY(-3px);
+    box-shadow: 0 8px 25px rgba(255, 152, 0, 0.6);
+    color: var(--text-light);
+}
+
+.btn-info {
+    background: linear-gradient(135deg, var(--secondary-color), #1565c0);
+    box-shadow: 0 4px 15px rgba(25, 118, 210, 0.4);
+    color: var(--text-light);
+}
+
+.btn-info:hover {
+    background: linear-gradient(135deg, var(--secondary-color), var(--secondary-color));
+    transform: translateY(-3px);
+    box-shadow: 0 8px 25px rgba(25, 118, 210, 0.6);
+    color: var(--text-light);
+}
+
+.btn-danger {
+    background: linear-gradient(135deg, var(--danger-color), #d32f2f);
+    box-shadow: 0 4px 15px rgba(244, 67, 54, 0.4);
+    color: var(--text-light);
+}
+
+.btn-danger:hover {
+    background: linear-gradient(135deg, var(--danger-color), var(--danger-color));
+    transform: translateY(-3px);
+    box-shadow: 0 8px 25px rgba(244, 67, 54, 0.6);
+    color: var(--text-light);
 }
 
 .btn-outline-secondary {
@@ -307,16 +377,21 @@ body {
 /* 统计数据样式 */
 .stat-item {
     text-align: center;
+    padding: 1.5rem;
 }
 
 .stat-number {
-    font-size: 2rem;
+    font-size: 2.5rem;
     font-weight: 700;
     margin-bottom: 0.5rem;
-    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
+    color: var(--primary-color);
+    text-shadow: 0 2px 4px rgba(76, 175, 80, 0.2);
+}
+
+.stat-label {
+    font-size: 1rem;
+    color: var(--text-muted);
+    font-weight: 500;
 }
 
 /* 响应式设计优化 */
@@ -384,15 +459,23 @@ body {
     border-right-color: transparent;
     border-radius: 50%;
     animation: spinner-border 0.75s linear infinite;
+    color: var(--primary-color);
 }
 
 @keyframes spinner-border {
     to { transform: rotate(360deg); }
 }
 
+/* 加载按钮状态 */
+.btn-loading .loading-spinner {
+    margin-right: 0.5rem;
+}
+
 /* 动画效果增强 */
 .fade-in-up {
     animation: fadeInUp 0.8s ease-out forwards;
+    opacity: 0;
+    transform: translateY(30px);
 }
 
 @keyframes fadeInUp {
@@ -406,6 +489,57 @@ body {
     }
 }
 
+.fade-in-left {
+    animation: fadeInLeft 0.8s ease-out forwards;
+    opacity: 0;
+    transform: translateX(-30px);
+}
+
+@keyframes fadeInLeft {
+    from {
+        opacity: 0;
+        transform: translateX(-30px);
+    }
+    to {
+        opacity: 1;
+        transform: translateX(0);
+    }
+}
+
+.fade-in-right {
+    animation: fadeInRight 0.8s ease-out forwards;
+    opacity: 0;
+    transform: translateX(30px);
+}
+
+@keyframes fadeInRight {
+    from {
+        opacity: 0;
+        transform: translateX(30px);
+    }
+    to {
+        opacity: 1;
+        transform: translateX(0);
+    }
+}
+
+.zoom-in {
+    animation: zoomIn 0.6s ease-out forwards;
+    opacity: 0;
+    transform: scale(0.8);
+}
+
+@keyframes zoomIn {
+    from {
+        opacity: 0;
+        transform: scale(0.8);
+    }
+    to {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+
 /* 图片优化 */
 img {
     max-width: 100%;
@@ -415,10 +549,12 @@ img {
 /* 滚动条样式 */
 ::-webkit-scrollbar {
     width: 8px;
+    height: 8px;
 }
 
 ::-webkit-scrollbar-track {
     background: #f1f1f1;
+    border-radius: 4px;
 }
 
 ::-webkit-scrollbar-thumb {
@@ -430,6 +566,12 @@ img {
     background: var(--primary-dark);
 }
 
+/* 火狐浏览器滚动条 */
+* {
+    scrollbar-width: thin;
+    scrollbar-color: var(--primary-color) #f1f1f1;
+}
+
 /* 返回顶部按钮 */
 .back-to-top {
     position: fixed;
@@ -442,11 +584,20 @@ img {
     z-index: 1000;
     transition: var(--transition);
     box-shadow: 0 4px 15px rgba(76, 175, 80, 0.4);
+    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
+    color: var(--text-light);
+    border: none;
 }
 
 .back-to-top:hover {
     transform: translateY(-3px);
     box-shadow: 0 6px 20px rgba(76, 175, 80, 0.6);
+    background: linear-gradient(135deg, var(--primary-light), var(--primary-color));
+    color: var(--text-light);
+}
+
+.back-to-top i {
+    font-size: 1.25rem;
 }
 
 /* 导航栏动画 */
@@ -494,6 +645,7 @@ img {
     height: 8px;
     border-radius: 10px;
     background: rgba(76, 175, 80, 0.1);
+    overflow: hidden;
 }
 
 .progress-bar {
@@ -501,6 +653,22 @@ img {
     background: linear-gradient(90deg, var(--primary-color), var(--primary-light));
 }
 
+.progress-bar.bg-success {
+    background: linear-gradient(90deg, var(--success-color), #81c784);
+}
+
+.progress-bar.bg-warning {
+    background: linear-gradient(90deg, var(--warning-color), #ffb74d);
+}
+
+.progress-bar.bg-info {
+    background: linear-gradient(90deg, var(--secondary-color), #64b5f6);
+}
+
+.progress-bar.bg-danger {
+    background: linear-gradient(90deg, var(--danger-color), #e57373);
+}
+
 /* 数字统计增强 */
 .count-up {
     font-weight: 700;
@@ -508,6 +676,36 @@ img {
     text-shadow: 0 2px 4px rgba(76, 175, 80, 0.2);
 }
 
+/* 面包屑导航样式 */
+.breadcrumb {
+    background-color: transparent;
+    padding: 1rem 0;
+    margin-bottom: 0;
+}
+
+.breadcrumb-item {
+    font-size: 0.9rem;
+}
+
+.breadcrumb-item a {
+    color: var(--secondary-color);
+    text-decoration: none;
+    transition: var(--transition);
+}
+
+.breadcrumb-item a:hover {
+    color: var(--primary-color);
+    text-decoration: underline;
+}
+
+.breadcrumb-item.active {
+    color: var(--text-muted);
+}
+
+.breadcrumb-item + .breadcrumb-item::before {
+    color: var(--text-muted);
+}
+
 /* 模态框动画 */
 .modal-dialog {
     transition: all 0.3s ease;
@@ -524,6 +722,13 @@ img.lazy.loaded {
 }
 
 /* 表单增强样式 */
+.form-control {
+    border: 1px solid #ced4da;
+    border-radius: 0.5rem;
+    padding: 0.75rem 1rem;
+    transition: var(--transition);
+}
+
 .form-control:focus {
     border-color: var(--primary-color);
     box-shadow: 0 0 0 0.2rem rgba(76, 175, 80, 0.25);
@@ -533,15 +738,101 @@ img.lazy.loaded {
     border-color: var(--success-color);
 }
 
+.form-control.is-valid:focus {
+    border-color: var(--success-color);
+    box-shadow: 0 0 0 0.2rem rgba(76, 175, 80, 0.25);
+}
+
 .form-control.is-invalid {
     border-color: var(--danger-color);
 }
 
+.form-control.is-invalid:focus {
+    border-color: var(--danger-color);
+    box-shadow: 0 0 0 0.2rem rgba(244, 67, 54, 0.25);
+}
+
+.form-select {
+    border: 1px solid #ced4da;
+    border-radius: 0.5rem;
+    padding: 0.75rem 1rem;
+    transition: var(--transition);
+}
+
+.form-select:focus {
+    border-color: var(--primary-color);
+    box-shadow: 0 0 0 0.2rem rgba(76, 175, 80, 0.25);
+}
+
+.form-check-input:checked {
+    background-color: var(--primary-color);
+    border-color: var(--primary-color);
+}
+
+.form-check-input:focus {
+    border-color: var(--primary-color);
+    box-shadow: 0 0 0 0.2rem rgba(76, 175, 80, 0.25);
+}
+
+.invalid-feedback {
+    display: block;
+    width: 100%;
+    margin-top: 0.25rem;
+    font-size: 0.875em;
+    color: var(--danger-color);
+}
+
+.valid-feedback {
+    display: block;
+    width: 100%;
+    margin-top: 0.25rem;
+    font-size: 0.875em;
+    color: var(--success-color);
+}
+
 /* 提示框样式 */
 .alert {
     border: none;
     border-radius: 12px;
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+    padding: 1.25rem;
+}
+
+.alert-primary {
+    background-color: rgba(76, 175, 80, 0.15);
+    color: #2e7d32;
+    border-left: 4px solid var(--primary-color);
+}
+
+.alert-success {
+    background-color: rgba(76, 175, 80, 0.15);
+    color: #2e7d32;
+    border-left: 4px solid var(--success-color);
+}
+
+.alert-warning {
+    background-color: rgba(255, 152, 0, 0.15);
+    color: #ef6c00;
+    border-left: 4px solid var(--warning-color);
+}
+
+.alert-info {
+    background-color: rgba(25, 118, 210, 0.15);
+    color: #0d47a1;
+    border-left: 4px solid var(--secondary-color);
+}
+
+.alert-danger {
+    background-color: rgba(244, 67, 54, 0.15);
+    color: #b71c1c;
+    border-left: 4px solid var(--danger-color);
+}
+
+.alert .btn-close {
+    position: absolute;
+    top: 1rem;
+    right: 1rem;
+    padding: 0.5rem;
 }
 
 /* 打字机效果 */
@@ -578,7 +869,7 @@ img.lazy.loaded {
 .page-transition {
     opacity: 0;
     transform: translateY(20px);
-    transition: all 0.5s ease;
+    transition: all 0.3s ease;
 }
 
 .page-transition.loaded {
@@ -625,445 +916,89 @@ img.lazy.loaded {
     transform: rotateY(5deg) rotateX(5deg);
 }
 
-/* 无障碍优化 */
-@media (prefers-reduced-motion: reduce) {
-    * {
-        animation-duration: 0.01ms !important;
-        animation-iteration-count: 1 !important;
-        transition-duration: 0.01ms !important;
-    }
+/* 按钮增强效果 */
+.btn-pressed {
+    transform: scale(0.95) !important;
+    transition: transform 0.1s ease;
 }
 
-/* 焦点可见性 */
-.btn:focus-visible,
-.nav-link:focus-visible,
-.form-control:focus-visible {
-    outline: 2px solid var(--primary-color);
-    outline-offset: 2px;
+/* 卡片增强效果 */
+.card {
+    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
 }
 
-/* 打印样式 */
-@media print {
-    .navbar,
-    .back-to-top,
-    .floating-element {
-        display: none !important;
-    }
-    
-    .hero-section {
-        background: white !important;
-        color: black !important;
-    }
-}
-
-/* 导航栏样式 */
-.navbar {
-    padding: 1rem 0;
-    transition: var(--transition);
-    background: rgba(30, 30, 30, 0.8) !important;
-    backdrop-filter: blur(10px);
-    border-bottom: 1px solid rgba(76, 175, 80, 0.2);
-}
-
-.navbar-brand {
-    font-weight: 700;
-    font-size: 1.5rem;
-    color: var(--text-light) !important;
-    text-shadow: 0 0 10px rgba(76, 175, 80, 0.5);
-}
-
-.navbar-nav .nav-link {
-    font-weight: 500;
-    color: var(--text-light) !important;
-    transition: var(--transition);
-    padding: 0.5rem 1rem;
-    border-radius: var(--border-radius);
-    position: relative;
-    overflow: hidden;
-}
-
-.navbar-nav .nav-link::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: -100%;
-    width: 100%;
-    height: 100%;
-    background: linear-gradient(90deg, transparent, rgba(76, 175, 80, 0.2), transparent);
-    transition: 0.5s;
-}
-
-.navbar-nav .nav-link:hover::before {
-    left: 100%;
-}
-
-.navbar-nav .nav-link:hover {
-    color: var(--secondary-color) !important;
-    box-shadow: var(--neon-shadow);
-}
-
-.navbar-nav .nav-link.active {
-    color: var(--secondary-color) !important;
-    background: rgba(76, 175, 80, 0.1);
-    box-shadow: var(--neon-shadow);
-}
-
-/* 英雄区域样式 */
-.hero-section {
-    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
-    color: var(--text-light);
-    position: relative;
-    overflow: hidden;
-    padding: 6rem 0;
-    min-height: 100vh;
-    display: flex;
-    align-items: center;
-}
-
-.hero-section::before {
-    content: '';
-    position: absolute;
+/* 滚动进度条 */
+.scroll-progress {
+    position: fixed;
     top: 0;
     left: 0;
-    right: 0;
-    bottom: 0;
-    background: radial-gradient(circle at 10% 20%, rgba(111, 66, 193, 0.1) 0%, transparent 20%),
-                radial-gradient(circle at 90% 80%, rgba(0, 198, 255, 0.1) 0%, transparent 20%);
-    z-index: 1;
-}
-
-.hero-section .container {
-    position: relative;
-    z-index: 2;
-}
-
-.hero-section h1 {
-    font-weight: 800;
-    margin-bottom: 1.5rem;
-    font-size: 3.5rem;
-    background: linear-gradient(to right, var(--secondary-color), var(--primary-light));
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    text-shadow: 0 0 20px rgba(0, 198, 255, 0.3);
-}
-
-.hero-section .lead {
-    font-size: 1.5rem;
-    margin-bottom: 2rem;
-    opacity: 0.9;
-    max-width: 800px;
-    margin-left: auto;
-    margin-right: auto;
-}
-
-/* 功能特性卡片样式 */
-.feature-icon {
-    transition: var(--transition);
-    width: 80px;
-    height: 80px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin: 0 auto 1.5rem;
-    border-radius: 50%;
-    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
-    box-shadow: var(--neon-shadow);
-    color: var(--text-light);
-    font-size: 2rem;
-}
-
-.card {
-    transition: var(--transition);
-    border: none;
-    border-radius: var(--border-radius);
-    overflow: hidden;
-    background: rgba(45, 45, 45, 0.7);
-    backdrop-filter: blur(10px);
-    border: 1px solid rgba(76, 175, 80, 0.2);
-    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
-}
-
-.card:hover {
-    transform: translateY(-10px) scale(1.02);
-    box-shadow: var(--neon-shadow-hover), 0 15px 40px rgba(0, 0, 0, 0.4);
-    border: 1px solid rgba(76, 175, 80, 0.5);
-}
-
-.card:hover .feature-icon {
-    transform: scale(1.1) rotate(5deg);
-    box-shadow: var(--neon-shadow-hover);
-}
-
-/* 按钮样式 */
-.btn {
-    border-radius: var(--border-radius);
-    font-weight: 600;
-    padding: 0.875rem 1.75rem;
-    transition: var(--transition);
-    border: none;
-    position: relative;
-    overflow: hidden;
-    z-index: 1;
-}
-
-.btn::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: -100%;
     width: 100%;
+    height: 3px;
+    background: rgba(0, 0, 0, 0.1);
+    z-index: 9999;
+}
+
+.scroll-progress-bar {
     height: 100%;
-    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
-    transition: 0.5s;
-    z-index: -1;
+    background: linear-gradient(90deg, var(--primary-color), var(--primary-light));
+    width: 0%;
+    transition: width 0.1s ease;
 }
 
-.btn:hover::before {
-    left: 100%;
+/* 模态框背景模糊 */
+.modal-open-blur {
+    backdrop-filter: blur(5px);
 }
 
-.btn-primary {
-    background: linear-gradient(45deg, var(--primary-color), var(--primary-dark));
-    border: none;
-    box-shadow: var(--neon-shadow);
-}
-
-.btn-primary:hover {
-    background: linear-gradient(45deg, var(--primary-light), var(--primary-color));
-    transform: translateY(-3px);
-    box-shadow: var(--neon-shadow-hover), 0 6px 20px rgba(0, 0, 0, 0.4);
-}
-
-.btn-outline-primary {
-    border: 2px solid var(--primary-color);
-    color: var(--primary-color);
-    background: transparent;
-    box-shadow: var(--neon-shadow);
-}
-
-.btn-outline-primary:hover {
-    background: linear-gradient(45deg, var(--primary-color), var(--primary-dark));
-    color: white;
-    transform: translateY(-3px);
-    box-shadow: var(--neon-shadow-hover);
-    border: 2px solid var(--primary-light);
-}
-
-/* 页脚样式 */
-footer {
-    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
-    border-top: 1px solid rgba(111, 66, 193, 0.2);
-}
-
-footer h5, footer h6 {
-    color: var(--text-light) !important;
-    text-shadow: 0 0 10px rgba(111, 66, 193, 0.3);
-}
-
-footer a {
-    transition: var(--transition);
-    color: var(--text-light) !important;
-}
-
-footer a:hover {
-    color: var(--secondary-color) !important;
-    text-shadow: 0 0 10px rgba(0, 198, 255, 0.5);
-}
-
-/* 响应式设计 */
+/* 响应式设计优化 */
 @media (max-width: 768px) {
-    .hero-section {
-        padding: 3rem 0;
+    .transform-3d:hover {
+        transform: none;
     }
     
-    .hero-section h1 {
-        font-size: 2.8rem;
+    .card:hover {
+        transform: translateY(-5px);
     }
     
-    .hero-section .lead {
-        font-size: 1.2rem;
+    .btn:hover {
+        transform: translateY(-2px);
     }
     
-    .navbar-brand {
-        font-size: 1.3rem;
+    .scroll-progress {
+        height: 2px;
     }
-    
-    .card {
-        margin-bottom: 1.5rem;
-    }
-    
+}
+
+@media (max-width: 576px) {
     .feature-icon {
         width: 60px;
         height: 60px;
         font-size: 1.5rem;
     }
-}
-
-@media (max-width: 576px) {
-    .hero-section {
-        text-align: center;
-        padding: 2rem 0;
-    }
     
-    .hero-section h1 {
-        font-size: 2.2rem;
-    }
-    
-    .hero-section .lead {
-        font-size: 1rem;
+    .stat-number {
+        font-size: 2rem;
     }
     
     .btn {
-        width: 100%;
-        margin-bottom: 0.75rem;
-        padding: 0.75rem 1.25rem;
+        padding: 0.75rem 1.5rem;
     }
     
-    .feature-icon {
-        margin-bottom: 1rem;
-        width: 50px;
-        height: 50px;
-        font-size: 1.25rem;
+    .back-to-top {
+        width: 40px;
+        height: 40px;
+        bottom: 20px;
+        right: 20px;
+    }
+}
+
+/* 大屏幕优化 */
+@media (min-width: 1200px) {
+    .transform-3d {
+        transition: transform 0.2s ease;
     }
     
-    .navbar-nav .nav-link {
-        text-align: center;
-        margin: 0.25rem 0;
+    .transform-3d:hover {
+        transform: rotateY(10deg) rotateX(10deg) scale(1.05);
     }
 }
-
-/* 工具类 */
-.text-shadow {
-    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
-}
-
-/* 新增：加载动画 */
-.loading-spinner {
-    display: inline-block;
-    width: 1rem;
-    height: 1rem;
-    vertical-align: text-bottom;
-    border: 0.2em solid currentColor;
-    border-right-color: transparent;
-    border-radius: 50%;
-    animation: spinner-border 0.75s linear infinite;
-}
-
-@keyframes spinner-border {
-    to { transform: rotate(360deg); }
-}
-
-/* 新增：图片占位符样式 */
-.placeholder-image {
-    background: linear-gradient(45deg, #f0f0f0, #e0e0e0);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: #999;
-}
-
-/* 新增：表单验证样式 */
-.form-control.is-invalid {
-    border-color: var(--danger-color);
-}
-
-.invalid-feedback {
-    display: block;
-    width: 100%;
-    margin-top: 0.25rem;
-    font-size: 0.875em;
-    color: var(--danger-color);
-}
-
-/* 新增：动画效果 */
-.fade-in-up {
-    animation: fadeInUp 0.6s ease-out forwards;
-}
-
-@keyframes fadeInUp {
-    from {
-        opacity: 0;
-        transform: translateY(30px);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
-
-/* 新增：回到顶部按钮样式 */
-.back-to-top {
-    position: fixed;
-    bottom: 20px;
-    right: 20px;
-    width: 50px;
-    height: 50px;
-    border-radius: 50%;
-    display: none;
-    z-index: 1000;
-    box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3);
-    transition: var(--transition);
-}
-
-.back-to-top:hover {
-    transform: translateY(-3px);
-    box-shadow: 0 6px 20px rgba(0, 123, 255, 0.4);
-}
-
-.bg-gradient-primary {
-    background: linear-gradient(135deg, var(--primary-color), #0056b3);
-}
-
-.bg-gradient-dark {
-    background: linear-gradient(135deg, var(--dark-color), #2c3e50);
-}
-
-/* 动画效果 */
-@keyframes fadeInUp {
-    from {
-        opacity: 0;
-        transform: translateY(30px);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
-
-.fade-in-up {
-    animation: fadeInUp 0.6s ease-out;
-}
-
-@keyframes pulse {
-    0% {
-        transform: scale(1);
-    }
-    50% {
-        transform: scale(1.05);
-    }
-    100% {
-        transform: scale(1);
-    }
-}
-
-.pulse {
-    animation: pulse 2s infinite;
-}
-
-/* 滚动条样式 */
-::-webkit-scrollbar {
-    width: 8px;
-}
-
-::-webkit-scrollbar-track {
-    background: #f1f1f1;
-}
-
-::-webkit-scrollbar-thumb {
-    background: var(--primary-color);
-    border-radius: 4px;
-}
-
-::-webkit-scrollbar-thumb:hover {
-    background: #0056b3;
-}