新增CSS动画效果和交互样式优化

website/css/responsive.css

@@ -92,6 +92,39 @@
     .xs-p-2 {
         padding: 0.5rem;
     }
+    
+    /* 新增超小屏幕优化类 */
+    .xs-d-block {
+        display: block !important;
+    }
+    
+    .xs-d-flex {
+        display: flex !important;
+    }
+    
+    .xs-flex-column {
+        flex-direction: column !important;
+    }
+    
+    .xs-gap-2 {
+        gap: 0.5rem !important;
+    }
+    
+    .xs-gap-3 {
+        gap: 1rem !important;
+    }
+    
+    .xs-w-100 {
+        width: 100% !important;
+    }
+    
+    .xs-text-start {
+        text-align: start !important;
+    }
+    
+    .xs-text-end {
+        text-align: end !important;
+    }
 }
 
 /* 移动设备优先设计 (小于768px) */
@@ -256,6 +289,48 @@
     .mobile-p-3 {
         padding: 1rem;
     }
+    
+    /* 新增移动端优化类 */
+    .mobile-d-block {
+        display: block !important;
+    }
+    
+    .mobile-d-flex {
+        display: flex !important;
+    }
+    
+    .mobile-flex-column {
+        flex-direction: column !important;
+    }
+    
+    .mobile-gap-2 {
+        gap: 0.5rem !important;
+    }
+    
+    .mobile-gap-3 {
+        gap: 1rem !important;
+    }
+    
+    .mobile-w-100 {
+        width: 100% !important;
+    }
+    
+    .mobile-text-start {
+        text-align: start !important;
+    }
+    
+    .mobile-text-end {
+        text-align: end !important;
+    }
+    
+    /* 新增移动端交互动画优化 */
+    .mobile-no-transform:hover {
+        transform: none !important;
+    }
+    
+    .mobile-no-shadow:hover {
+        box-shadow: inherit !important;
+    }
 }
 
 /* 平板设备优化 (768px 到 991.98px) */
@@ -300,6 +375,35 @@
     .tablet-d-flex {
         display: flex;
     }
+    
+    /* 新增平板优化类 */
+    .tablet-d-block {
+        display: block !important;
+    }
+    
+    .tablet-flex-row {
+        flex-direction: row !important;
+    }
+    
+    .tablet-gap-3 {
+        gap: 1rem !important;
+    }
+    
+    .tablet-w-75 {
+        width: 75% !important;
+    }
+    
+    .tablet-text-center {
+        text-align: center !important;
+    }
+    
+    .tablet-text-start {
+        text-align: start !important;
+    }
+    
+    .tablet-text-end {
+        text-align: end !important;
+    }
 }
 
 /* 中等屏幕设备优化 (992px 到 1199.98px) */
@@ -340,6 +444,35 @@
     .md-card:hover {
         transform: translateY(-5px);
     }
+    
+    /* 新增中等屏幕优化类 */
+    .md-d-block {
+        display: block !important;
+    }
+    
+    .md-d-flex {
+        display: flex !important;
+    }
+    
+    .md-flex-row {
+        flex-direction: row !important;
+    }
+    
+    .md-gap-4 {
+        gap: 1.5rem !important;
+    }
+    
+    .md-w-50 {
+        width: 50% !important;
+    }
+    
+    .md-text-left {
+        text-align: left !important;
+    }
+    
+    .md-text-center {
+        text-align: center !important;
+    }
 }
 
 /* 大屏幕优化 (1200px 及以上) */
@@ -388,6 +521,36 @@
     .desktop-d-flex {
         display: flex;
     }
+    
+    /* 新增大屏幕优化类 */
+    .desktop-d-block {
+        display: block !important;
+    }
+    
+    .desktop-flex-row {
+        flex-direction: row !important;
+    }
+    
+    .desktop-gap-5 {
+        gap: 3rem !important;
+    }
+    
+    .desktop-w-25 {
+        width: 25% !important;
+    }
+    
+    .desktop-text-center {
+        text-align: center !important;
+    }
+    
+    /* 新增大屏幕交互动画 */
+    .desktop-hover-lift:hover {
+        transform: translateY(-10px) !important;
+    }
+    
+    .desktop-hover-scale:hover {
+        transform: scale(1.05) !important;
+    }
 }
 
 /* 超大屏幕优化 (1400px 及以上) */
@@ -412,6 +575,31 @@
     .xxl-section {
         padding: 6rem 0;
     }
+    
+    /* 新增超大屏幕优化类 */
+    .xxl-d-block {
+        display: block !important;
+    }
+    
+    .xxl-d-flex {
+        display: flex !important;
+    }
+    
+    .xxl-flex-row {
+        flex-direction: row !important;
+    }
+    
+    .xxl-gap-5 {
+        gap: 3rem !important;
+    }
+    
+    .xxl-w-20 {
+        width: 20% !important;
+    }
+    
+    .xxl-text-left {
+        text-align: left !important;
+    }
 }
 
 /* 触摸设备优化 */
@@ -441,6 +629,20 @@
     .form-select {
         min-height: 44px;
     }
+    
+    /* 新增触摸设备优化类 */
+    .touch-no-transform:hover {
+        transform: none !important;
+    }
+    
+    .touch-no-shadow:hover {
+        box-shadow: inherit !important;
+    }
+    
+    .touch-larger-hit-area {
+        min-height: 44px !important;
+        min-width: 44px !important;
+    }
 }
 
 /* 高对比度模式 */
@@ -459,6 +661,16 @@
     .card {
         border: 2px solid #000;
     }
+    
+    /* 新增高对比度模式优化类 */
+    .high-contrast-border {
+        border: 2px solid currentColor !important;
+    }
+    
+    .high-contrast-bg {
+        background-color: #000 !important;
+        color: #fff !important;
+    }
 }
 
 /* 暗色模式支持 */
@@ -490,6 +702,23 @@
         background-color: var(--card-bg);
         border-color: var(--border-color);
     }
+    
+    /* 新增暗色模式优化类 */
+    .dark-bg {
+        background-color: var(--bg-color) !important;
+    }
+    
+    .dark-text {
+        color: var(--text-color) !important;
+    }
+    
+    .dark-card-bg {
+        background-color: var(--card-bg) !important;
+    }
+    
+    .dark-border {
+        border-color: var(--border-color) !important;
+    }
 }
 
 /* 减少动画效果 */
@@ -507,6 +736,16 @@
     .floating-card {
         animation: none !important;
     }
+    
+    /* 新增减少动画效果优化类 */
+    .no-animation {
+        animation: none !important;
+        transition: none !important;
+    }
+    
+    .reduced-motion-transform {
+        transform: none !important;
+    }
 }
 
 /* 横屏模式优化 */
@@ -528,6 +767,16 @@
     .hero-features {
         margin-bottom: 1.5rem;
     }
+    
+    /* 新增横屏模式优化类 */
+    .landscape-min-height {
+        min-height: 100vh !important;
+    }
+    
+    .landscape-padding-adjust {
+        padding-top: 80px !important;
+        padding-bottom: 20px !important;
+    }
 }
 
 /* 打印样式优化 */
@@ -567,6 +816,23 @@
         border: 1px solid #ddd !important;
         box-shadow: none !important;
     }
+    
+    /* 新增打印样式优化类 */
+    .print-only {
+        display: block !important;
+    }
+    
+    .no-print {
+        display: none !important;
+    }
+    
+    .print-border {
+        border: 1px solid #000 !important;
+    }
+    
+    .print-no-shadow {
+        box-shadow: none !important;
+    }
 }
 
 /* 可访问性增强 */
@@ -585,6 +851,12 @@
     .metric-number {
         text-rendering: optimizeLegibility;
     }
+    
+    /* 新增高分辨率屏幕优化类 */
+    .high-dpi-enhanced {
+        image-rendering: -webkit-optimize-contrast;
+        image-rendering: crisp-edges;
+    }
 }
 
 /* 键盘导航优化 */
@@ -607,4 +879,104 @@
 .is-valid:focus {
     border-color: var(--success-color);
     box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
+}
+
+/* 新增响应式工具类 */
+/* 超小屏幕专用类 */
+@media (max-width: 575.98px) {
+    .xs-only {
+        display: block !important;
+    }
+    
+    .sm-up,
+    .md-up,
+    .lg-up,
+    .xl-up {
+        display: none !important;
+    }
+}
+
+/* 小屏幕及以上 */
+@media (min-width: 576px) {
+    .sm-up {
+        display: block !important;
+    }
+    
+    .xs-only {
+        display: none !important;
+    }
+}
+
+/* 中等屏幕及以上 */
+@media (min-width: 768px) {
+    .md-up {
+        display: block !important;
+    }
+    
+    .xs-only,
+    .sm-only {
+        display: none !important;
+    }
+}
+
+/* 大屏幕及以上 */
+@media (min-width: 992px) {
+    .lg-up {
+        display: block !important;
+    }
+    
+    .xs-only,
+    .sm-only,
+    .md-only {
+        display: none !important;
+    }
+}
+
+/* 超大屏幕及以上 */
+@media (min-width: 1200px) {
+    .xl-up {
+        display: block !important;
+    }
+    
+    .xs-only,
+    .sm-only,
+    .md-only,
+    .lg-only {
+        display: none !important;
+    }
+}
+
+/* 特定屏幕尺寸专用类 */
+.xs-only {
+    display: none !important;
+}
+
+.sm-only {
+    display: none !important;
+}
+
+.md-only {
+    display: none !important;
+}
+
+.lg-only {
+    display: none !important;
+}
+
+@media (min-width: 576px) and (max-width: 767.98px) {
+    .sm-only {
+        display: block !important;
+    }
+}
+
+@media (min-width: 768px) and (max-width: 991.98px) {
+    .md-only {
+        display: block !important;
+    }
+}
+
+@media (min-width: 992px) and (max-width: 1199.98px) {
+    .lg-only {
+        display: block !important;
+    }
 }