toutoukan_front/miniprogram/pages/activities/activities.wxss

/* 页面容器 */
.activity-list-container {
  padding: 20rpx 30rpx;
  background-color: #f8f9fa;
  min-height: 100vh;
  box-sizing: border-box;
}

/* 页面标题 */
.page-header {
  margin-bottom: 30rpx;
  text-align: center;
}

.page-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
  display: inline-block;
}

.page-subtitle {
  font-size: 24rpx;
  color: #666;
}

/* 搜索框 */
.search-box {
  display: flex;
  align-items: center;
  background-color: #fff;
  border-radius: 60rpx;
  padding: 15rpx 25rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.search-icon {
  margin-right: 15rpx;
}

.search-input {
  flex: 1;
  font-size: 28rpx;
  height: 50rpx;
  line-height: 50rpx;
}

/* 分类标签 */
.category-tabs {
  display: flex;
  overflow-x: auto;
  padding-bottom: 10rpx;
  margin-bottom: 30rpx;
  scrollbar-width: none; /* 隐藏滚动条 */
}

.category-tabs::-webkit-scrollbar {
  display: none; /* 隐藏滚动条 */
}

.category-tab {
  padding: 12rpx 30rpx;
  background-color: #fff;
  border-radius: 60rpx;
  font-size: 26rpx;
  color: #666;
  margin-right: 15rpx;
  white-space: nowrap;
  box-shadow: 0 2rpx 5rpx rgba(0, 0, 0, 0.03);
}

.category-tab.active {
  background-color: #51bdb6;
  color: #fff;
}

/* 活动列表 */
.activities-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 25rpx;
}

/* 活动卡片 */
.activity-card {
  background-color: #fff;
  border-radius: 18rpx;
  overflow: hidden;
  box-shadow: 0 3rpx 15rpx rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.activity-card:active {
  transform: translateY(2rpx);
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.03);
}

/* 活动图片 */
.activity-image-container {
  position: relative;
  width: 100%;
}

.activity-image {
  width: 100%;
  height: 200rpx;
  object-fit: cover;
}

/* 活动状态标签 */
.activity-tag {
  position: absolute;
  top: 15rpx;
  right: 15rpx;
  padding: 5rpx 15rpx;
  border-radius: 20rpx;
  font-size: 22rpx;
  color: #fff;
}

.activity-tag.ongoing {
  background-color: #51bdb6;
}

.activity-tag.upcoming {
  background-color: #f5a623;
}

/* 活动信息 */
.activity-info {
  padding: 20rpx;
}

.activity-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 15rpx;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
}

/* 时间信息 */
.activity-time {
  display: flex;
  align-items: center;
  margin-bottom: 12rpx;
  font-size: 22rpx;
  color: #666;
}

.time-text {
  margin-left: 8rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 活动简介 */
.activity-desc {
  font-size: 24rpx;
  color: #999;
  margin-bottom: 15rpx;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
}

/* 参与人数 */
.activity-participants {
  display: flex;
  align-items: center;
  font-size: 22rpx;
  color: #666;
}

.participants-text {
  margin-left: 8rpx;
}

/* 空状态 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 200rpx;
}

.empty-image {
  width: 300rpx;
  height: 300rpx;
  margin-bottom: 30rpx;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
}