| | |
| | | background-position: center; |
| | | background-repeat: no-repeat; |
| | | height: 142px; |
| | | transition: all 0.3s ease; |
| | | position: relative; |
| | | overflow: hidden; |
| | | animation: cardFadeIn 0.6s ease-out both; |
| | | } |
| | | |
| | | .stat-card:nth-child(1) { animation-delay: 0.1s; } |
| | | .stat-card:nth-child(2) { animation-delay: 0.2s; } |
| | | |
| | | @keyframes cardFadeIn { |
| | | from { opacity: 0; transform: translateY(20px); } |
| | | to { opacity: 1; transform: translateY(0); } |
| | | } |
| | | |
| | | .stat-card:hover { |
| | | transform: translateY(-3px); |
| | | box-shadow: 0 10px 30px rgba(0, 212, 255, 0.2); |
| | | } |
| | | |
| | | /* 卡片底部光线 */ |
| | | .stat-card::after { |
| | | content: ''; |
| | | position: absolute; |
| | | bottom: 0; |
| | | left: 10%; |
| | | right: 10%; |
| | | height: 2px; |
| | | background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.5), transparent); |
| | | opacity: 0; |
| | | transition: opacity 0.3s; |
| | | } |
| | | |
| | | .stat-card:hover::after { |
| | | opacity: 1; |
| | | } |
| | | |
| | | .card-icon { |
| | | width: 100px; |
| | | height: 100px; |
| | | width: 70px; |
| | | height: 70px; |
| | | margin: 20px 20px 0 10px; |
| | | animation: iconFloat 4s ease-in-out infinite; |
| | | } |
| | | |
| | | @keyframes iconFloat { |
| | | 0%, 100% { transform: translateY(0); } |
| | | 50% { transform: translateY(-5px); } |
| | | } |
| | | |
| | | .card-content { |
| | |
| | | |
| | | .card-value { |
| | | font-weight: 500; |
| | | font-size: 40px; |
| | | font-size: 32px; |
| | | background: linear-gradient(360deg, #008bfd 0%, #ffffff 100%); |
| | | -webkit-background-clip: text; |
| | | -webkit-text-fill-color: transparent; |
| | | background-clip: text; |
| | | transition: all 0.3s ease; |
| | | } |
| | | |
| | | .stat-card:hover .card-value { |
| | | text-shadow: 0 0 15px rgba(0, 212, 255, 0.4); |
| | | transform: scale(1.05); |
| | | } |
| | | |
| | | .card-label { |
| | | font-weight: 400; |
| | | font-size: 19px; |
| | | font-size: 16px; |
| | | color: rgba(208, 231, 255, 0.7); |
| | | } |
| | | |
| | |
| | | height: 240px; |
| | | padding-top: 0px; |
| | | margin-bottom: 20px; |
| | | position: relative; |
| | | overflow: hidden; |
| | | } |
| | | |
| | | /* 设备统计面板角落装饰 */ |
| | | .equipment-stats::before, |
| | | .equipment-stats::after { |
| | | content: ''; |
| | | position: absolute; |
| | | width: 15px; |
| | | height: 15px; |
| | | border-color: rgba(0, 212, 255, 0.5); |
| | | border-style: solid; |
| | | pointer-events: none; |
| | | } |
| | | |
| | | .equipment-stats::before { |
| | | top: -1px; |
| | | left: -1px; |
| | | border-width: 2px 0 0 2px; |
| | | } |
| | | |
| | | .equipment-stats::after { |
| | | bottom: -1px; |
| | | right: -1px; |
| | | border-width: 0 2px 2px 0; |
| | | } |
| | | |
| | | .equipment-header { |
| | |
| | | .equipment-value { |
| | | display: block; |
| | | font-weight: 500; |
| | | font-size: 40px; |
| | | font-size: 36px; |
| | | color: #ffffff; |
| | | width: 120px; |
| | | height: 110px; |
| | |
| | | background-position: center; |
| | | background-repeat: no-repeat; |
| | | margin-bottom: 8px; |
| | | transition: all 0.3s ease; |
| | | animation: valuePulse 3s ease-in-out infinite; |
| | | } |
| | | |
| | | @keyframes valuePulse { |
| | | 0%, 100% { text-shadow: 0 0 10px rgba(78, 228, 255, 0.2); } |
| | | 50% { text-shadow: 0 0 20px rgba(78, 228, 255, 0.4); } |
| | | } |
| | | |
| | | .equipment-label { |
| | |
| | | padding-top: 10px; |
| | | height: 480px; |
| | | flex: 1; |
| | | position: relative; |
| | | overflow: hidden; |
| | | } |
| | | |
| | | /* 事件面板角落装饰 */ |
| | | .event-info::before, |
| | | .event-info::after { |
| | | content: ''; |
| | | position: absolute; |
| | | width: 15px; |
| | | height: 15px; |
| | | border-color: rgba(0, 212, 255, 0.5); |
| | | border-style: solid; |
| | | pointer-events: none; |
| | | } |
| | | |
| | | .event-info::before { |
| | | top: -1px; |
| | | left: -1px; |
| | | border-width: 2px 0 0 2px; |
| | | } |
| | | |
| | | .event-info::after { |
| | | bottom: -1px; |
| | | right: -1px; |
| | | border-width: 0 2px 2px 0; |
| | | } |
| | | |
| | | .event-header { |
| | |
| | | display: flex; |
| | | justify-content: space-between; |
| | | align-items: center; |
| | | transition: all 0.3s ease; |
| | | position: relative; |
| | | } |
| | | |
| | | .todo-list li:hover { |
| | | background: rgba(0, 212, 255, 0.08); |
| | | transform: translateX(5px); |
| | | } |
| | | |
| | | .todo-list li::after { |
| | | content: ''; |
| | | position: absolute; |
| | | left: 0; |
| | | right: 0; |
| | | bottom: 0; |
| | | height: 1px; |
| | | background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.3), transparent); |
| | | opacity: 0; |
| | | transition: opacity 0.3s; |
| | | } |
| | | |
| | | .todo-list li:hover::after { |
| | | opacity: 1; |
| | | } |
| | | |
| | | .todo-title { |