dapaijizhang3/pages/stats/session/session.wxss

/* 牌局统计页面样式 */
.container {
  padding-bottom: 100rpx;
}

/* 牌局信息卡片 */
.session-info {
  margin-bottom: 20rpx;
}

.session-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24rpx;
}

.session-name {
  font-size: 36rpx;
  font-weight: bold;
  color: #FFFFFF;
}

.session-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20rpx;
}

.meta-item {
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.meta-label {
  font-size: 24rpx;
  color: #B0B0B0;
}

.meta-value {
  font-size: 32rpx;
  font-weight: bold;
  color: #FFFFFF;
}

/* 最终排名 */
.final-ranking {
  margin-bottom: 20rpx;
}

.total-chips {
  font-size: 24rpx;
  color: #B0B0B0;
}

.ranking-list {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
  margin-top: 20rpx;
}

.ranking-item {
  display: flex;
  align-items: center;
  padding: 20rpx;
  background: #f8f9fa;
  border-radius: 16rpx;
  gap: 16rpx;
}

.ranking-item.champion {
  background: linear-gradient(135deg, #fff9e6 0%, #fff3cc 100%);
  border: 2rpx solid #ffd700;
}

.ranking-item.runner-up {
  background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
  border: 2rpx solid #c0c0c0;
}

.ranking-item.third {
  background: linear-gradient(135deg, #fff0e6 0%, #ffe6cc 100%);
  border: 2rpx solid #cd7f32;
}

.rank-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 60rpx;
}

.rank-number {
  font-size: 40rpx;
  font-weight: bold;
  color: #FFFFFF;
  line-height: 1;
}

.rank-label {
  font-size: 20rpx;
  color: #B0B0B0;
  margin-top: 4rpx;
}

.ranking-item.champion .rank-number {
  color: #ff9500;
}

.ranking-item.runner-up .rank-number {
  color: #E0E0E0;
}

.ranking-item.third .rank-number {
  color: #cd7f32;
}

.player-info {
  display: flex;
  align-items: center;
  flex: 1;
  gap: 12rpx;
}

.player-avatar {
  width: 64rpx;
  height: 64rpx;
  border-radius: 50%;
  border: 2rpx solid #fff;
}

.player-name {
  font-size: 30rpx;
  font-weight: 500;
  color: #FFFFFF;
}

.player-stats {
  display: flex;
  gap: 24rpx;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4rpx;
}

.stat-value {
  font-size: 28rpx;
  font-weight: bold;
  color: #FFFFFF;
}

.stat-label {
  font-size: 20rpx;
  color: #B0B0B0;
}

/* 战绩统计 */
.stats-summary {
  margin-bottom: 20rpx;
}

.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16rpx;
  margin-top: 20rpx;
}

.stats-item {
  padding: 20rpx;
  background: #f8f9fa;
  border-radius: 12rpx;
  text-align: center;
}

.stats-number {
  font-size: 40rpx;
  font-weight: bold;
  color: #FFFFFF;
  display: block;
  margin-bottom: 8rpx;
}

.stats-label {
  font-size: 24rpx;
  color: #B0B0B0;
}

/* 图表容器 */
.chart-card {
  margin-bottom: 20rpx;
}

.chart-container {
  width: 100%;
  height: 400rpx;
  margin-top: 20rpx;
}

/* 趋势分析 */
.trend-analysis {
  margin-bottom: 20rpx;
}

.trend-list {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
  margin-top: 20rpx;
}

.trend-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx;
  background: #f8f9fa;
  border-radius: 12rpx;
}

.trend-info {
  flex: 1;
}

.trend-title {
  font-size: 28rpx;
  color: #FFFFFF;
  margin-bottom: 8rpx;
  display: block;
}

.trend-desc {
  font-size: 24rpx;
  color: #B0B0B0;
}

.trend-value {
  font-size: 36rpx;
  font-weight: bold;
}

/* 底部操作按钮 */
.bottom-actions {
  display: flex;
  gap: 16rpx;
  padding: 0 20rpx 20rpx;
}

.bottom-actions button {
  flex: 1;
}

/* 结算详情弹窗 */
.settlement-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
}

.settlement-list {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.settlement-item {
  padding: 24rpx;
  background: #f8f9fa;
  border-radius: 12rpx;
}

.settlement-flow {
  display: flex;
  align-items: center;
  gap: 16rpx;
  margin-bottom: 12rpx;
}

.settlement-player {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12rpx;
}

.settlement-arrow {
  font-size: 32rpx;
  color: #50C878;
}

.settlement-amount {
  font-size: 36rpx;
  font-weight: bold;
  color: #50C878;
  text-align: center;
}

.settlement-method {
  font-size: 24rpx;
  color: #B0B0B0;
  text-align: center;
  margin-top: 8rpx;
}

.settlement-status {
  padding: 4rpx 12rpx;
  border-radius: 12rpx;
  font-size: 24rpx;
  margin-left: 8rpx;
}

.settlement-status.paid {
  background: #e8f5e9;
  color: #50C878;
}

.settlement-status.pending {
  background: #1A1A1A3e0;
  color: #ff9500;
}