duidui_mini_program/pages/camp_list/index.wxss

/* pages/camp_list/index.wxss */
.container {
      padding: 20rpx;
      background-color: #f5f5f5;
      height: 100vh;
      box-sizing: border-box;
}

/* Header styles */
.header {
      display: flex;
      align-items: center;
      margin-bottom: 20rpx;
}

.logo {
      width: 40rpx;
      height: 40rpx;
      margin-right: 10rpx;
}

.header-title {
      font-size: 36rpx;
      font-weight: bold;
}

.camp-layout {
      display: flex;
      width: 100%;
      height: 90vh;
}

/* Left sidebar: 推荐/已加入固定，中间可上下滑动 */
.category-tabs-wrapper {
      display: flex;
      flex-direction: column;
      height: 100%;
      margin-right: 10rpx;
      border-right: 12rpx solid #FD77B0;
      align-items: center;
      width: 40px;
      min-width: 40px;
}

.category-tab-fixed {
      flex-shrink: 0;
}

.category-tabs-scroll {
      flex: 1;
      min-height: 0;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
}

.category-tabs-inner {
      padding: 4rpx 0;
}

.category-tab {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 74rpx;
      padding: 35rpx 0;
      font-size: 28rpx;
      color: #666;
      transition: all 0.3s;
      writing-mode: vertical-lr;
      text-orientation: upright;
      letter-spacing: 4rpx;
      white-space: nowrap;
      line-height: 1.4;
      background-color: #4DD0E1;
      margin: 4rpx 0;
      border-radius: 8rpx 0 0 8rpx;
}

.category-tab-fixed:first-child {
      margin-top: 0;
}

.category-tab-fixed:last-child {
      margin-bottom: 0;
}

.category-tab.active {
      color: #fff;                  /* 选中时的文字颜色 */
      font-weight: bold;
      background-color: #FD77B0;    /* 选中时的背景色 */
}

/* Right content area styles */
.camps-grid {
      flex: 1;
      display: flex;
      flex-wrap: wrap;
      align-content: flex-start;
      gap: 10rpx;
      /* height: calc(16vh * 5); */
      overflow-y: auto;
}

.border-completed {
      border: 6rpx solid #e14db5;
}

.border-notStarted {
      border: 6rpx solid #aca4a9;
}

.border-inProgress {
      border: 6rpx solid #4DD0E1;
}

.camp-card {
      width: calc((100% - 20rpx) / 3);
      aspect-ratio: 1/1;
      background-color: white;
      border-radius: 10rpx;
      overflow: hidden;
      box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
      /* border: 4rpx solid #4DD0E1; */
      display: flex;
      flex-direction: column;
      box-sizing: border-box;
      padding: 8rpx;
}

.camp-card.highlight {
      border: 4rpx solid #EC407A;
}

.camp-image {
      height: 60%;
      background-color: #f0f0f0;
      overflow: hidden;
}

.camp-image image {
      width: 100%;
      height: 100%;
}

.camp-info {
      /* padding: 15rpx; */
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
}

.camp-title {
      font-size: 28rpx;
      font-weight: bold;
      margin-bottom: 6rpx;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
}

.camp-desc {
      font-size: 22rpx;
      color: #666;
      line-height: 1.2;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
}

/* Loading styles */
.loading {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 70vh;
}

.loading-spinner {
      width: 60rpx;
      height: 60rpx;
      border: 6rpx solid #f3f3f3;
      border-top: 6rpx solid #1CCFD6;
      border-radius: 50%;
      animation: spin 1s linear infinite;
      margin-bottom: 20rpx;
}

@keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
}

/* Empty state styles */
.empty-state, .empty-camps {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 70vh;
      color: #999;
      font-size: 28rpx;
}

.empty-camps {
      height: 100%;
      width: 100%;
}