ZhiQiXiaoYuan/pages/dashboard/dashboard.wxss

/* pages/dashboard/dashboard.wxss */
@import "/styles/design-tokens.wxss";
@import "/styles/premium-animations.wxss";

.dashboard-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 30rpx;
  padding-bottom: calc(env(safe-area-inset-bottom) + 30rpx);
}

/* 顶部统计卡片 */
.stats-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30rpx;
  gap: 20rpx;
}

.stats-card {
  flex: 1;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20rpx;
  padding: 30rpx 20rpx;
  text-align: center;
  position: relative;
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
  animation: fadeInUp 0.6s ease;
}

.stat-value {
  font-size: 48rpx;
  font-weight: bold;
  color: #667eea;
  margin-bottom: 8rpx;
}

.stat-label {
  font-size: 22rpx;
  color: #666666;
}

.stat-icon {
  position: absolute;
  top: 20rpx;
  right: 20rpx;
  font-size: 32rpx;
  opacity: 0.3;
}

/* 图表区域 */
.chart-section {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
  animation: fadeInUp 0.6s ease;
}

.section-header {
  margin-bottom: 30rpx;
  padding-bottom: 20rpx;
  border-bottom: 2rpx solid #F0F0F0;
}

.section-title {
  display: flex;
  align-items: center;
  margin-bottom: 8rpx;
}

.title-icon {
  font-size: 36rpx;
  margin-right: 12rpx;
}

.title-text {
  font-size: 32rpx;
  font-weight: bold;
  color: #333333;
}

.section-desc {
  font-size: 24rpx;
  color: #999999;
  margin-left: 48rpx;
}

/* 画布容器 */
.chart-container {
  width: 100%;
}

.chart-canvas {
  width: 100%;
  height: 500rpx;
}

.pie-canvas {
  height: 400rpx;
}

/* 雷达图图例 */
.chart-legend {
  margin-top: 30rpx;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20rpx;
}

.legend-item {
  display: flex;
  align-items: center;
  font-size: 24rpx;
}

.legend-dot {
  width: 12rpx;
  height: 12rpx;
  border-radius: 50%;
  margin-right: 12rpx;
}

.legend-name {
  flex: 1;
  color: #666666;
}

.legend-value {
  font-weight: bold;
  color: #667eea;
}

/* 预测信息 */
.prediction-info {
  margin-top: 30rpx;
  display: flex;
  justify-content: space-around;
  padding: 20rpx;
  background: #F8F9FA;
  border-radius: 16rpx;
}

.prediction-item {
  text-align: center;
}

.pred-label {
  font-size: 24rpx;
  color: #999999;
  display: block;
  margin-bottom: 8rpx;
}

.pred-value {
  font-size: 32rpx;
  font-weight: bold;
  color: #667eea;
}

.trend-up {
  color: #4CAF50;
}

.trend-down {
  color: #FF5252;
}

/* 饼图图例 */
.pie-legend {
  margin-top: 30rpx;
}

.pie-legend-item {
  display: flex;
  align-items: center;
  padding: 16rpx 0;
  border-bottom: 1rpx solid #F0F0F0;
  font-size: 26rpx;
}

.pie-legend-item:last-child {
  border-bottom: none;
}

.pie-dot {
  width: 16rpx;
  height: 16rpx;
  border-radius: 50%;
  margin-right: 16rpx;
}

.pie-name {
  flex: 1;
  color: #333333;
}

.pie-percent {
  font-weight: bold;
  color: #667eea;
  margin-right: 20rpx;
}

.pie-time {
  color: #999999;
}

/* 柱状图总结 */
.bar-summary {
  margin-top: 30rpx;
  display: flex;
  justify-content: space-around;
  padding: 20rpx;
  background: #F8F9FA;
  border-radius: 16rpx;
}

.summary-item {
  text-align: center;
}

.summary-label {
  font-size: 24rpx;
  color: #999999;
  display: block;
  margin-bottom: 8rpx;
}

.summary-value {
  font-size: 32rpx;
  font-weight: bold;
  color: #667eea;
}

/* 数据来源说明 */
.data-source {
  display: flex;
  align-items: flex-start;
  padding: 30rpx;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 16rpx;
  margin-top: 20rpx;
}

.source-icon {
  font-size: 36rpx;
  margin-right: 16rpx;
}

.source-text {
  flex: 1;
}

.source-title {
  font-size: 26rpx;
  font-weight: bold;
  color: #FFFFFF;
  display: block;
  margin-bottom: 8rpx;
}

.source-desc {
  font-size: 22rpx;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.6;
}

/* 动画 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(40rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}