🎯
{{ isLoggedIn ? '暂无相关活动' : '登录后查看更多活动' }}
{{ act.title }}
🕐
{{ act._timeText }}
{{ badge.icon }}
{{ act._statusText }}
{{ act.priceLabel }}
会员价 {{ act._memberPriceDisplay }}
{{ act._priceDisplay }}
免费
.section {
margin: 16rpx 20rpx;
}
/* ===== 头部 ===== */
.section-header {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin-bottom: 16rpx;
}
.section-header-left {
display: flex;
flex-direction: row;
align-items: center;
}
.section-icon-wrap {
width: 44rpx;
height: 44rpx;
border-radius: 12rpx;
background: linear-gradient(135deg, #FF6B9D, #FF8FB1);
display: flex;
align-items: center;
justify-content: center;
margin-right: 12rpx;
}
.section-icon {
font-size: 24rpx;
}
.section-title {
font-size: 32rpx;
font-weight: 700;
color: $uni-text-color;
letter-spacing: 1rpx;
}
.section-more {
display: flex;
flex-direction: row;
align-items: center;
padding: 8rpx 20rpx;
background: $facade-fill-slate;
border-radius: 24rpx;
}
.section-more-text {
font-size: 24rpx;
color: $uni-text-color-secondary;
margin-right: 4rpx;
}
.section-more-arrow {
font-size: 20rpx;
color: $app-text-subtle;
}
/* ===== 空状态 ===== */
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
padding: 30rpx 0;
}
.empty-icon {
font-size: 64rpx;
margin-bottom: 16rpx;
}
.empty-tip {
font-size: 26rpx;
color: $app-text-subtle;
}
/* ===== 活动轮播 ===== */
.activity-carousel {
width: 100%;
margin: 0 -20rpx;
}
.activity-swiper {
width: 100%;
height: 210rpx;
}
.activity-swiper .swiper-slide {
width: 100%;
height: 100%;
}
/* 轮播指示点 */
.swiper-dots {
display: flex;
justify-content: center;
align-items: center;
gap: 8rpx;
margin-top: 12rpx;
}
.dot {
width: 8rpx;
height: 8rpx;
border-radius: 50%;
background: #D1D5DB;
transition: width 0.3s ease, border-radius 0.3s ease, background-color 0.3s ease;
}
.dot.active {
width: 32rpx;
border-radius: 4rpx;
background: $brand-primary;
}
/* ===== 活动卡片（行布局） ===== */
.activity-card {
background: $app-surface;
border-radius: 16rpx;
overflow: hidden;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
display: flex;
flex-direction: row;
height: 100%;
}
.activity-card:active {
opacity: 0.8;
}
/* 封面图 — 占总宽度1/3，占满卡片高度 */
.card-cover-img {
width: 33.33%;
height: 100%;
flex-shrink: 0;
background: $facade-fill-slate;
}
/* 右侧信息区 — 文字右对齐 */
.card-info {
flex: 1;
padding: 16rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: stretch;
text-align: right;
min-width: 0;
}
/* 标题 */
.card-title {
font-size: 28rpx;
font-weight: bold;
color: $facade-text-strong;
margin-bottom: 8rpx;
}
.line-clamp-1 {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* 时间和维度标签 */
.card-meta-row {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
margin-bottom: 8rpx;
}
.card-time {
display: flex;
flex-direction: row;
align-items: center;
margin-right: 16rpx;
}
.meta-icon {
font-size: 22rpx;
margin-right: 6rpx;
}
.meta-text {
font-size: 24rpx;
color: $uni-text-color-secondary;
}
.card-badges {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 8rpx;
}
.card-badge {
width: 36rpx;
height: 36rpx;
border-radius: 50%;
border: 2rpx solid;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
}
.badge-icon {
font-size: 20rpx;
line-height: 1;
}
/* 底部：状态 + 价格 */
.card-bottom {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
gap: 12rpx;
}
.card-status {
font-size: 20rpx;
padding: 2rpx 10rpx;
border-radius: 8rpx;
background: $mat-green-tint;
color: $mat-green-strong;
}
.card-status.status-upcoming {
background: $mat-blue-tint;
color: $mat-blue-strong;
}
.card-status.status-ended {
background: $facade-fill-2;
color: $facade-text-muted;
}
.card-price {
font-size: 24rpx;
font-weight: bold;
color: $brand-primary;
}
.card-price.member-teaser {
color: $brand-primary;
text-decoration: underline;
}
.card-price-free {
font-size: 24rpx;
font-weight: 600;
color: $status-success-2;
}