225 lines
3.4 KiB
Plaintext
225 lines
3.4 KiB
Plaintext
.page-container {
|
|
min-height: 100vh;
|
|
background-color: #F9FAFB;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.main-content {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding-top: 194rpx; /* Height of unified-header */
|
|
}
|
|
|
|
/* Tab 切换 */
|
|
.tab-section {
|
|
background: #fff;
|
|
padding: 0 32rpx;
|
|
position: sticky;
|
|
top: 194rpx;
|
|
z-index: 10;
|
|
}
|
|
|
|
.tab-list {
|
|
display: flex;
|
|
height: 88rpx;
|
|
border-bottom: 2rpx solid #F3F4F6;
|
|
}
|
|
|
|
.tab-item {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 32rpx;
|
|
color: #6B7280;
|
|
position: relative;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.tab-item.active {
|
|
color: #914584;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.active-line {
|
|
position: absolute;
|
|
bottom: 0;
|
|
width: 40rpx;
|
|
height: 4rpx;
|
|
background: #914584;
|
|
border-radius: 4rpx;
|
|
}
|
|
|
|
/* 列表滚动区域 */
|
|
.list-scroll {
|
|
flex: 1;
|
|
height: 0; /* Use flex:1 and height:0 for scroll-view in flex column */
|
|
}
|
|
|
|
.activity-list {
|
|
padding: 32rpx;
|
|
}
|
|
|
|
/* 活动卡片 */
|
|
.activity-card {
|
|
background: #fff;
|
|
border-radius: 32rpx;
|
|
margin-bottom: 32rpx;
|
|
overflow: hidden;
|
|
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
|
|
display: flex;
|
|
transition: transform 0.2s ease;
|
|
}
|
|
|
|
.activity-card:active {
|
|
transform: scale(0.98);
|
|
}
|
|
|
|
.card-image-wrap {
|
|
width: 200rpx;
|
|
height: 200rpx;
|
|
flex-shrink: 0;
|
|
position: relative;
|
|
}
|
|
|
|
.card-image {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.time-status-badge {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
font-size: 20rpx;
|
|
padding: 4rpx 12rpx;
|
|
border-bottom-right-radius: 12rpx;
|
|
color: #fff;
|
|
z-index: 1;
|
|
}
|
|
|
|
.time-status-badge.pending { background: #0EA5E9; }
|
|
.time-status-badge.started { background: #10B981; }
|
|
.time-status-badge.finished { background: #9CA3AF; }
|
|
|
|
.card-info {
|
|
flex: 1;
|
|
padding: 20rpx 24rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.activity-title {
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
color: #111827;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 1;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
margin-bottom: 12rpx;
|
|
}
|
|
|
|
.meta-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8rpx;
|
|
}
|
|
|
|
.meta-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8rpx;
|
|
font-size: 24rpx;
|
|
color: #6B7280;
|
|
}
|
|
|
|
.card-footer {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-top: 16rpx;
|
|
}
|
|
|
|
.status-tags {
|
|
display: flex;
|
|
gap: 12rpx;
|
|
}
|
|
|
|
.status-tag {
|
|
font-size: 20rpx;
|
|
padding: 4rpx 12rpx;
|
|
border-radius: 8rpx;
|
|
}
|
|
|
|
.status-tag.pending {
|
|
background: #FEF3C7;
|
|
color: #D97706;
|
|
}
|
|
|
|
.status-tag.confirmed {
|
|
background: #ECFDF5;
|
|
color: #059669;
|
|
}
|
|
|
|
.status-tag.cancelled {
|
|
background: #FEE2E2;
|
|
color: #DC2626;
|
|
}
|
|
|
|
.price-text {
|
|
font-size: 28rpx;
|
|
font-weight: bold;
|
|
color: #914584;
|
|
}
|
|
|
|
/* 加载状态 */
|
|
.load-status {
|
|
text-align: center;
|
|
padding: 32rpx;
|
|
font-size: 24rpx;
|
|
color: #9CA3AF;
|
|
}
|
|
|
|
/* 空状态 */
|
|
.empty-state {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding-bottom: 200rpx;
|
|
}
|
|
|
|
.empty-icon {
|
|
width: 240rpx;
|
|
height: 240rpx;
|
|
margin-bottom: 32rpx;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.empty-text {
|
|
font-size: 28rpx;
|
|
color: #9CA3AF;
|
|
margin-bottom: 48rpx;
|
|
}
|
|
|
|
.go-btn {
|
|
width: 240rpx;
|
|
height: 80rpx;
|
|
border-radius: 40rpx;
|
|
font-size: 28rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.safe-bottom-spacer {
|
|
height: env(safe-area-inset-bottom);
|
|
}
|