wechatShopUni/pages/income/index.wxss

.container {
  padding: 24rpx;
  background: #f6f6fa;
  min-height: 100vh;
}

.loading {
  text-align: center;
  padding: 30rpx;
  color: #999999;
}

/* 收入统计样式 */
.income-stats {
  background: #ffffff;
  border-radius: 16rpx;
  padding: 32rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.02);
}

.stats-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32rpx;
  color: #333333;
  font-size: 32rpx;
  font-weight: 500;
}

.unit-text {
  font-size: 24rpx;
  color: #999999;
  font-weight: normal;
}

/* 调整总收入样式 */
.total-income {
  text-align: center;
  padding: 32rpx 0;
  margin-bottom: 32rpx;
  border-bottom: 1rpx solid #f6f6fa;
}

.total-income .label {
  font-size: 28rpx;
  color: #666666;
  margin-bottom: 16rpx;
}

.total-income .amount {
  font-size: 48rpx;
  color: #ff4d4f;
  font-weight: bold;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24rpx;
  margin-top: 24rpx;
}

.stats-item {
  padding: 24rpx;
  background: #f9f9f9;
  border-radius: 12rpx;
}

.stats-item .label {
  font-size: 26rpx;
  color: #666666;
  margin-bottom: 8rpx;
}

.stats-item .amount-wrap {
  display: flex;
  align-items: center;
  margin-bottom: 8rpx;
}

.stats-item .amount {
  font-size: 36rpx;
  color: #333333;
  font-weight: 500;
}

.stats-item .trend-arrow {
  display: inline-block;
  margin-left: 8rpx;
  width: 0;
  height: 0;
  border-style: solid;
}

.stats-item .trend-arrow.up {
  border-width: 0 12rpx 16rpx 12rpx;
  border-color: transparent transparent #ff4d4f transparent;
}

.stats-item .trend-arrow.down {
  border-width: 16rpx 12rpx 0 12rpx;
  border-color: #52c41a transparent transparent transparent;
}

.stats-item .trend-arrow.equal {
  width: auto;
  height: auto;
  border: none;
  color: #999999;
  font-size: 24rpx;
}

.stats-item .trend-arrow.equal::before {
  content: '-';
}

.stats-item .sub-amount {
  font-size: 24rpx;
  color: #999999;
  margin-top: 4rpx;
}

/* 收入对比样式 */
.income-compare {
  width: 100%;
  text-align: left;
}

.compare-main {
  margin-bottom: 12rpx;
  padding-bottom: 12rpx;
  border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);
}

.compare-main .label {
  font-size: 26rpx;
  color: #666666;
  margin-bottom: 8rpx;
}

.compare-main .amount {
  font-size: 36rpx;
  color: #ff4d4f;
  font-weight: bold;
}

.compare-sub {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.compare-sub .label {
  font-size: 24rpx;
  color: #999999;
}

.compare-sub .amount {
  font-size: 26rpx;
  color: #666666;
  margin: 0 12rpx;
}

/* 收入明细样式 */
.income-list {
  background: #ffffff;
  border-radius: 16rpx;
  padding: 32rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.02);
}

.list-header {
  font-size: 32rpx;
  color: #333333;
  font-weight: 500;
  margin-bottom: 24rpx;
}

.income-item {
  padding: 24rpx 0;
  border-bottom: 1rpx solid #f6f6fa;
}

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

.item-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12rpx;
}

.item-type {
  font-size: 28rpx;
  color: #333333;
  font-weight: 500;
}

.item-amount {
  font-size: 32rpx;
  color: #ff4d4f;
  font-weight: 500;
}

.item-sub {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.item-time {
  font-size: 24rpx;
  color: #999999;
}

.item-status {
  font-size: 24rpx;
  color: #666666;
}

.item-note {
  font-size: 24rpx;
  color: #999999;
  margin-top: 8rpx;
}

/* 深色模式样式 */
.dark-mode {
  background: #1f1f1f;
}

.dark-mode .income-stats,
.dark-mode .income-list {
  background: #2c2c2c;
}

.dark-mode .stats-header,
.dark-mode .total-income .amount,
.dark-mode .stats-item .amount,
.dark-mode .item-type {
  color: #fff;
}

.dark-mode .unit-text,
.dark-mode .total-income .label,
.dark-mode .stats-item .label,
.dark-mode .item-sub,
.dark-mode .item-note {
  color: #888;
}

.dark-mode .stats-item {
  background: #363636;
}

.dark-mode .income-item {
  border-bottom-color: #363636;
}

.no-more, .empty {
  text-align: center;
  padding: 30rpx;
  color: #999;
  font-size: 26rpx;
}

.withdraw-btn {
  margin-top: 32rpx;
  background: #ff4d4f;
  color: #ffffff;
  border: none;
  border-radius: 12rpx;
  font-size: 30rpx;
  padding: 20rpx 0;
  transition: all 0.3s ease;
}

.withdraw-btn:active {
  opacity: 0.9;
  transform: scale(0.98);
}

.withdraw-btn::after {
  display: none;
}

.compare-info {
  font-size: 24rpx;
  color: #999999;
  display: flex;
  align-items: center;
  gap: 8rpx;
}

.stats-row {
  display: flex;
  align-items: center;
  gap: 12rpx;
  margin: 24rpx 0;
}

.stats-row .stats-item {
  flex: 1;
  margin: 0;
}

.formula-text {
  font-size: 32rpx;
  color: #999;
  margin: 0 4rpx;
  padding-top: 20rpx; /* 为了与金额数字对齐 */
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24rpx;
  margin-top: 24rpx;
}

.stats-item {
  padding: 24rpx;
  background: #f9f9f9;
  border-radius: 12rpx;
}

.stats-item .label {
  font-size: 26rpx;
  color: #666666;
  margin-bottom: 8rpx;
}

.amount-wrap {
  display: flex;
  align-items: center;
  margin-bottom: 8rpx;
}

.amount {
  font-size: 36rpx;
  color: #333333;
  font-weight: 500;
}