| | |
| | | { |
| | | key: 'raw', |
| | | title: '原材料检测', |
| | | dateType: 1, |
| | | dateType: 3, |
| | | qualifiedCount: 0, |
| | | unqualifiedCount: 0, |
| | | qualifiedRate: 0, |
| | |
| | | { |
| | | key: 'process', |
| | | title: '过程检测', |
| | | dateType: 1, |
| | | dateType: 3, |
| | | qualifiedCount: 0, |
| | | unqualifiedCount: 0, |
| | | qualifiedRate: 0, |
| | |
| | | { |
| | | key: 'final', |
| | | title: '成品出厂检测', |
| | | dateType: 1, |
| | | dateType: 3, |
| | | qualifiedCount: 0, |
| | | unqualifiedCount: 0, |
| | | qualifiedRate: 0, |
| | |
| | | .filters-row-left { |
| | | width: 50%; |
| | | color: white; |
| | | /* 用flex替代float,让子元素对齐更稳定 */ |
| | | display: flex; |
| | | align-items: center; |
| | | |
| | | span { |
| | | /* 核心:父级相对定位,作为伪元素基准 */ |
| | | position: relative; |
| | | display: inline-block; |
| | | /* 给伪元素和文字留空间 */ |
| | | padding-left: 22px; |
| | | /* 文字垂直居中 */ |
| | | line-height: 23px; |
| | | margin-right: 8px; |
| | | |
| | |
| | | top: 50%; |
| | | left: 0; |
| | | transform: translateY(-50%); |
| | | /* 确保菱形在渐变块上方 */ |
| | | z-index: 1; |
| | | animation: diamondPulse 2s ease-in-out infinite; |
| | | } |
| | | |
| | | &::before { |
| | |
| | | position: absolute; |
| | | top: 50%; |
| | | left: -1px; |
| | | /* 精准贴在菱形正下方 */ |
| | | transform: translateY(calc(0% + 8px)); |
| | | z-index: 0; |
| | | } |
| | |
| | | p { |
| | | width: 100px; |
| | | height: 23px; |
| | | /* 渐变起始色和菱形统一,更协调 */ |
| | | background: linear-gradient(90deg, #217AFF 0%, rgba(33, 221, 255, 0) 100%); |
| | | /* 精准垂直居中 */ |
| | | line-height: 26px; |
| | | text-align: center; |
| | | color: white; |
| | | /* 用高度的一半做圆角,确保左边是完美半圆 */ |
| | | border-radius: 12px 0 0 12px; |
| | | /* 可选:加一点左内边距,让文字不贴边 */ |
| | | padding-left: 4px; |
| | | animation: titleShimmer 3s ease-in-out infinite; |
| | | } |
| | | } |
| | | } |
| | | |
| | | @keyframes diamondPulse { |
| | | 0%, 100% { opacity: 0.8; } |
| | | 50% { opacity: 1; box-shadow: 0 0 10px rgba(33, 133, 255, 0.5); } |
| | | } |
| | | |
| | | @keyframes titleShimmer { |
| | | 0%, 100% { opacity: 1; } |
| | | 50% { opacity: 0.85; } |
| | | } |
| | | |
| | | .panel-item-customers { |
| | |
| | | width: 100%; |
| | | height: 958px; |
| | | box-sizing: border-box; |
| | | position: relative; |
| | | } |
| | | |
| | | /* 面板角落装饰 */ |
| | | .panel-item-customers::before, |
| | | .panel-item-customers::after { |
| | | content: ''; |
| | | position: absolute; |
| | | width: 20px; |
| | | height: 20px; |
| | | border-color: rgba(0, 212, 255, 0.5); |
| | | border-style: solid; |
| | | pointer-events: none; |
| | | } |
| | | |
| | | .panel-item-customers::before { |
| | | top: -1px; |
| | | left: -1px; |
| | | border-width: 2px 0 0 2px; |
| | | } |
| | | |
| | | .panel-item-customers::after { |
| | | bottom: -1px; |
| | | right: -1px; |
| | | border-width: 0 2px 2px 0; |
| | | } |
| | | |
| | | .inspect-block { |
| | |
| | | padding: 8px 0; |
| | | gap: 6px; |
| | | position: relative; |
| | | animation: blockFadeIn 0.5s ease-out both; |
| | | animation-delay: calc(var(--index, 0) * 0.1s); |
| | | } |
| | | |
| | | @keyframes blockFadeIn { |
| | | from { |
| | | opacity: 0; |
| | | transform: translateX(-20px); |
| | | } |
| | | to { |
| | | opacity: 1; |
| | | transform: translateX(0); |
| | | } |
| | | } |
| | | |
| | | .inspect-block:nth-child(1) { --index: 0; } |
| | | .inspect-block:nth-child(2) { --index: 1; } |
| | | .inspect-block:nth-child(3) { --index: 2; } |
| | | |
| | | .inspect-block:not(:last-child)::after { |
| | | content: ''; |
| | |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | animation: ringFloat 4s ease-in-out infinite; |
| | | } |
| | | |
| | | /* 外圈刻度(点状环) */ |
| | | @keyframes ringFloat { |
| | | 0%, 100% { transform: translateY(0); } |
| | | 50% { transform: translateY(-3px); } |
| | | } |
| | | |
| | | /* 外圈刻度(点状环)- 旋转动画 */ |
| | | .ring::before { |
| | | content: ''; |
| | | position: absolute; |
| | |
| | | mask: radial-gradient(circle, transparent 62%, #000 63%); |
| | | opacity: 0.35; |
| | | pointer-events: none; |
| | | animation: ringRotate 30s linear infinite; |
| | | } |
| | | |
| | | /* 柔和发光背景 */ |
| | | @keyframes ringRotate { |
| | | from { transform: rotate(0deg); } |
| | | to { transform: rotate(360deg); } |
| | | } |
| | | |
| | | /* 柔和发光背景 - 脉冲动画 */ |
| | | .ring::after { |
| | | content: ''; |
| | | position: absolute; |
| | |
| | | background: radial-gradient(circle, rgba(78, 228, 255, 0.18) 0%, rgba(78, 228, 255, 0.06) 40%, rgba(0, 0, 0, 0) 70%); |
| | | filter: blur(0.2px); |
| | | pointer-events: none; |
| | | animation: ringGlow 3s ease-in-out infinite; |
| | | } |
| | | |
| | | @keyframes ringGlow { |
| | | 0%, 100% { opacity: 0.8; transform: scale(1); } |
| | | 50% { opacity: 1; transform: scale(1.02); } |
| | | } |
| | | |
| | | .stats { |
| | |
| | | border: 1px solid rgba(78, 228, 255, 0.22); |
| | | background: linear-gradient(90deg, rgba(33, 122, 255, 0.28) 0%, rgba(10, 28, 58, 0.35) 55%, rgba(10, 28, 58, 0.2) 100%); |
| | | box-shadow: inset 0 0 18px rgba(16, 45, 95, 0.25); |
| | | transition: all 0.3s ease; |
| | | position: relative; |
| | | overflow: hidden; |
| | | } |
| | | |
| | | /* 统计行悬停效果 */ |
| | | .stat-row:hover { |
| | | border-color: rgba(0, 212, 255, 0.4); |
| | | box-shadow: inset 0 0 18px rgba(16, 45, 95, 0.25), 0 0 15px rgba(0, 212, 255, 0.15); |
| | | } |
| | | |
| | | /* 统计行底部光线 */ |
| | | .stat-row::after { |
| | | content: ''; |
| | | position: absolute; |
| | | bottom: 0; |
| | | left: 0; |
| | | right: 0; |
| | | height: 1px; |
| | | background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.4), transparent); |
| | | opacity: 0; |
| | | transition: opacity 0.3s; |
| | | } |
| | | |
| | | .stat-row:hover::after { |
| | | opacity: 1; |
| | | } |
| | | |
| | | .stat-left { |
| | |
| | | border-radius: 2px; |
| | | display: inline-block; |
| | | box-shadow: 0 0 10px rgba(78, 228, 255, 0.25); |
| | | animation: dotPulse 2s ease-in-out infinite; |
| | | } |
| | | |
| | | @keyframes dotPulse { |
| | | 0%, 100% { box-shadow: 0 0 10px rgba(78, 228, 255, 0.25); } |
| | | 50% { box-shadow: 0 0 15px rgba(78, 228, 255, 0.5); } |
| | | } |
| | | |
| | | .dot-qualified { |
| | |
| | | min-width: 40px; |
| | | text-align: right; |
| | | text-shadow: 0 0 10px rgba(78, 228, 255, 0.15); |
| | | transition: all 0.3s ease; |
| | | } |
| | | |
| | | .stat-row:hover .stat-value { |
| | | text-shadow: 0 0 15px rgba(78, 228, 255, 0.4); |
| | | transform: scale(1.05); |
| | | } |
| | | |
| | | .stat-percent { |