src/views/reportAnalysis/qualityAnalysis/components/center-bottom.vue
@@ -190,10 +190,29 @@
  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 {
@@ -207,5 +226,73 @@
  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>