| | |
| | | border: 1px solid rgba(78, 228, 255, 0.25); |
| | | cursor: pointer; |
| | | z-index: 10; |
| | | transition: all 0.3s ease; |
| | | } |
| | | |
| | | .warn-range:hover { |
| | | background: linear-gradient(180deg, rgba(51, 140, 255, 1) 0%, rgba(0, 184, 237, 1) 100%); |
| | | box-shadow: 0 0 15px rgba(0, 212, 255, 0.4); |
| | | transform: translateY(-1px); |
| | | } |
| | | |
| | | /* 按钮微光效果 */ |
| | | .warn-range::before { |
| | | content: ''; |
| | | position: absolute; |
| | | top: 0; |
| | | left: -100%; |
| | | width: 100%; |
| | | height: 100%; |
| | | background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); |
| | | transition: left 0.5s; |
| | | } |
| | | |
| | | .warn-range:hover::before { |
| | | left: 100%; |
| | | } |
| | | |
| | | .main-panel { |
| | |
| | | padding: 18px; |
| | | width: 100%; |
| | | height: 436px; |
| | | position: relative; |
| | | overflow: hidden; |
| | | } |
| | | |
| | | /* 图表面板角落装饰 */ |
| | | .panel-item-customers::before, |
| | | .panel-item-customers::after { |
| | | content: ''; |
| | | position: absolute; |
| | | width: 15px; |
| | | height: 15px; |
| | | 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; |
| | | } |
| | | |
| | | /* 图表底部光线 */ |
| | | .panel-item-customers::before { |
| | | content: ''; |
| | | position: absolute; |
| | | bottom: 0; |
| | | left: 10%; |
| | | right: 10%; |
| | | height: 2px; |
| | | background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.4), transparent); |
| | | animation: bottomGlow 3s ease-in-out infinite; |
| | | z-index: 1; |
| | | } |
| | | |
| | | @keyframes bottomGlow { |
| | | 0%, 100% { opacity: 0.3; } |
| | | 50% { opacity: 0.7; } |
| | | } |
| | | |
| | | /* 深度图背景光效 */ |
| | | .panel-item-customers > div { |
| | | position: relative; |
| | | z-index: 2; |
| | | } |
| | | |
| | | .panel-item-customers::after { |
| | | content: ''; |
| | | position: absolute; |
| | | top: 50%; |
| | | left: 50%; |
| | | transform: translate(-50%, -50%); |
| | | width: 80%; |
| | | height: 80%; |
| | | background: radial-gradient(ellipse, rgba(78, 228, 255, 0.05) 0%, transparent 70%); |
| | | pointer-events: none; |
| | | animation: chartGlow 4s ease-in-out infinite; |
| | | } |
| | | |
| | | @keyframes chartGlow { |
| | | 0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); } |
| | | 50% { opacity: 0.8; transform: translate(-50%, -50%) scale(1.02); } |
| | | } |
| | | </style> |