添加活动列表页面

miniprogram/pages/activities/activities.wxss

@@ -0,0 +1,207 @@
+/* 页面容器 */
+.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;
+}
+