wxapp_escort/pages/hospital/ranking.wxss

/* pages/hospital/ranking.wxss */
page {
  background: linear-gradient(180deg, #E8F5E9 0%, #F1F8F2 30%, #F5FAF6 100%);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.container {
  min-height: 100vh;
  padding-bottom: 60rpx;
}

/* ========== 顶部标题 ========== */
.header {
  padding: 32rpx 32rpx 16rpx 32rpx;
  text-align: center;
}

.header-title {
  font-size: 36rpx;
  font-weight: 700;
  color: #1F2937;
  display: block;
}

.header-note {
  font-size: 24rpx;
  color: #9CA3AF;
  margin-top: 8rpx;
  display: block;
}

/* ========== 搜索栏 ========== */
.search-bar {
  padding: 16rpx 32rpx;
}

.search-input-wrap {
  display: flex;
  align-items: center;
  background: #FFFFFF;
  border-radius: 40rpx;
  padding: 16rpx 24rpx;
  box-shadow: 0 2rpx 12rpx rgba(45, 106, 79, 0.08);
}

.search-input {
  flex: 1;
  font-size: 28rpx;
  color: #1F2937;
  margin-left: 16rpx;
  margin-right: 16rpx;
}

.search-input::placeholder {
  color: #9CA3AF;
}

.search-clear {
  padding: 4rpx;
}

/* ========== Tab 切换 ========== */
.tab-bar {
  display: flex;
  justify-content: center;
  padding: 0 32rpx;
  margin-top: 8rpx;
  border-bottom: 1rpx solid rgba(45, 106, 79, 0.08);
}

.tab-item {
  position: relative;
  padding: 24rpx 48rpx;
  cursor: pointer;
}

.tab-text {
  font-size: 30rpx;
  color: #6B7280;
  font-weight: 500;
}

.tab-item.active .tab-text {
  color: #2D6A4F;
  font-weight: 700;
}

.tab-line {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 48rpx;
  height: 4rpx;
  background: linear-gradient(90deg, #2D6A4F 0%, #40916C 100%);
  border-radius: 2rpx;
}

/* ========== 综合榜内容 ========== */
.content {
  padding: 0 24rpx;
}

/* 医院列表 */
.hospital-list {
  margin-top: 16rpx;
}

.hospital-card {
  position: relative;
  background: #FFFFFF;
  border-radius: 20rpx;
  margin-bottom: 16rpx;
  box-shadow: 0 4rpx 16rpx rgba(45, 106, 79, 0.08);
  overflow: hidden;
}

.hospital-rank-badge {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10;
}

.hospital-rank-badge .rank-grade {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8rpx 16rpx;
  border-radius: 0 20rpx 0 12rpx;
  font-size: 22rpx;
  font-weight: 700;
  min-width: 80rpx;
  text-align: center;
}

.hospital-header {
  display: flex;
  align-items: center;
  padding: 24rpx 100rpx 24rpx 24rpx;
}

.rank-grade {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8rpx 16rpx;
  border-radius: 12rpx;
  font-size: 24rpx;
  font-weight: 700;
  min-width: 80rpx;
  text-align: center;
}

.rank-grade.grade-a5 {
  background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
  color: #92400E;
}

.rank-grade.grade-a4 {
  background: linear-gradient(135deg, #DBEAFE 0%, #BFDBFE 100%);
  color: #1E40AF;
}

.rank-grade.grade-a3 {
  background: linear-gradient(135deg, #D1FAE5 0%, #A7F3D0 100%);
  color: #065F46;
}

.rank-grade.grade-a2 {
  background: linear-gradient(135deg, #E0E7FF 0%, #C7D2FE 100%);
  color: #3730A3;
}

.rank-grade.grade-a1 {
  background: linear-gradient(135deg, #F3E8FF 0%, #E9D5FF 100%);
  color: #6B21A8;
}

.hospital-info {
  flex: 1;
  min-width: 0;
}

.hospital-name {
  font-size: 32rpx;
  font-weight: 600;
  color: #1F2937;
  display: block;
}

.hospital-tags {
  display: flex;
  flex-wrap: wrap;
  margin-top: 8rpx;
  gap: 8rpx;
}

.tag {
  font-size: 24rpx;
  color: #2D6A4F;
  background: rgba(45, 106, 79, 0.08);
  padding: 4rpx 12rpx;
  border-radius: 8rpx;
}

.hospital-arrow {
  margin-left: 16rpx;
  transition: transform 0.3s;
}

.arrow-up {
  transform: rotate(180deg);
}

/* 医院详情展开 */
.hospital-detail {
  padding: 0 24rpx 24rpx 24rpx;
  border-top: 1rpx solid rgba(45, 106, 79, 0.06);
}

.detail-title {
  font-size: 26rpx;
  font-weight: 600;
  color: #374151;
  padding: 16rpx 0 12rpx 0;
}

.dept-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12rpx;
}

.dept-item {
  background: #F9FAFB;
  border-radius: 12rpx;
  padding: 12rpx 16rpx;
  flex: 1;
  min-width: 200rpx;
  max-width: calc(50% - 6rpx);
}

.dept-name {
  font-size: 24rpx;
  color: #4B5563;
  display: block;
}

.dept-rank {
  display: flex;
  justify-content: space-between;
  margin-top: 4rpx;
}

.rank-num {
  font-size: 22rpx;
  color: #2D6A4F;
  font-weight: 600;
}

.rank-score {
  font-size: 22rpx;
  color: #9CA3AF;
}

/* ========== 专科榜内容 ========== */
.content:has(.dept-filter) {
  display: flex;
  padding: 0;
}

.dept-filter {
  width: 200rpx;
  background: #FFFFFF;
  border-right: 1rpx solid rgba(45, 106, 79, 0.06);
}

.dept-sidebar {
  padding: 8rpx 0;
}

.sidebar-item {
  padding: 24rpx 16rpx;
  text-align: center;
  border-left: 4rpx solid transparent;
  transition: all 0.2s;
}

.sidebar-item.active {
  background: #F0FDF4;
  border-left-color: #2D6A4F;
}

.sidebar-text {
  font-size: 26rpx;
  color: #4B5563;
}

.sidebar-item.active .sidebar-text {
  color: #2D6A4F;
  font-weight: 600;
}

.dept-ranking-content {
  flex: 1;
  padding: 16rpx 24rpx 24rpx 24rpx;
  overflow-y: auto;
}

.dept-ranking-header {
  margin-bottom: 16rpx;
}

.dept-ranking-title {
  font-size: 32rpx;
  font-weight: 700;
  color: #1F2937;
  display: block;
}

.dept-ranking-subtitle {
  font-size: 24rpx;
  color: #9CA3AF;
  margin-top: 4rpx;
  display: block;
}

/* Top10 列表 */
.top10-list {
  background: #FFFFFF;
  border-radius: 20rpx;
  box-shadow: 0 4rpx 16rpx rgba(45, 106, 79, 0.08);
  overflow: hidden;
}

.top10-item {
  display: flex;
  align-items: center;
  padding: 20rpx 24rpx;
  border-bottom: 1rpx solid rgba(45, 106, 79, 0.04);
}

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

.top10-item.top3 {
  background: linear-gradient(90deg, rgba(254, 243, 199, 0.3) 0%, rgba(255, 255, 255, 0) 100%);
}

.top10-rank {
  margin-right: 20rpx;
  min-width: 56rpx;
  text-align: center;
}

.rank-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48rpx;
  height: 48rpx;
  border-radius: 50%;
  font-size: 26rpx;
  font-weight: 700;
  color: #FFFFFF;
}

.top10-item:nth-child(1) .rank-badge {
  background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
}

.top10-item:nth-child(2) .rank-badge {
  background: linear-gradient(135deg, #9CA3AF 0%, #6B7280 100%);
}

.top10-item:nth-child(3) .rank-badge {
  background: linear-gradient(135deg, #B45309 0%, #92400E 100%);
}

.rank-num {
  font-size: 28rpx;
  font-weight: 600;
  color: #6B7280;
}

.top10-info {
  flex: 1;
  min-width: 0;
}

.top10-name {
  font-size: 28rpx;
  color: #1F2937;
  font-weight: 500;
  display: block;
}

.top10-score {
  font-size: 24rpx;
  color: #9CA3AF;
  margin-top: 4rpx;
  display: block;
}

/* 获提名医院 */
.nominated-section {
  margin-top: 24rpx;
  background: #FFFFFF;
  border-radius: 20rpx;
  padding: 20rpx 24rpx;
  box-shadow: 0 4rpx 16rpx rgba(45, 106, 79, 0.08);
}

.nominated-title {
  font-size: 26rpx;
  font-weight: 600;
  color: #374151;
  margin-bottom: 12rpx;
}

.nominated-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12rpx;
}

.nominated-item {
  font-size: 24rpx;
  color: #4B5563;
  background: #F9FAFB;
  padding: 8rpx 16rpx;
  border-radius: 8rpx;
}

/* ========== 空状态 ========== */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 120rpx 32rpx;
}

.empty-text {
  font-size: 28rpx;
  color: #9CA3AF;
  margin-top: 24rpx;
}