.promotion-container { | |
padding: 20px; | |
margin: 20px 0; | |
border-radius: 8px; | |
} | |
/* 并排两列 */ | |
.carousel-container { | |
display: flex; | |
gap: 20px; | |
} | |
.carousel-section { | |
flex: 1; | |
} | |
.carousel-section h2 { | |
font-size: 20px; | |
margin-bottom: 15px; | |
} | |
/* 轮播框架 */ | |
.carousel { | |
position: relative; | |
/* background: #a54747; */ | |
/* background: linear-gradient(135deg, #4A3B34, #a54747); */ | |
/* background: linear-gradient(135deg, #e38f77, #aa3e3e); */ | |
/* 背景渐变 */ | |
background: linear-gradient(135deg, #e1cab2, #b68791); | |
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); | |
border-radius: 6px; | |
padding: 15px; | |
color: #fff; | |
min-height: 200px; | |
display: flex; | |
align-items: center; | |
justify-content: center; | |
} | |
/* 左右箭头 */ | |
.carousel .arrow { | |
background: rgba(0,0,0,0.2); | |
border: none; | |
color: #fff; | |
font-size: 24px; | |
width: 36px; | |
height: 36px; | |
border-radius: 50%; | |
cursor: pointer; | |
position: absolute; | |
top: 50%; | |
transform: translateY(-50%); | |
} | |
.carousel .arrow.left { | |
left: 10px; | |
} | |
.carousel .arrow.right { | |
right: 10px; | |
} | |
.carousel .arrow:hover { | |
background: rgba(0,0,0,0.4); | |
} | |
/* 每帧内容 */ | |
.carousel .slide { | |
width: calc(100% - 80px); | |
/* 留出箭头空间 */ | |
text-align: left; | |
} | |
/* 冷门资源专用 slide */ | |
.cold-slide { | |
display: flex; | |
gap: 10px; | |
align-items: center; | |
} | |
/* 资源海报 */ | |
.resource-poster { | |
width: 80px; | |
height: 100px; | |
object-fit: cover; | |
border-radius: 4px; | |
} | |
/* 文本信息 */ | |
.resource-info div, | |
.slide div { | |
margin-bottom: 6px; | |
} | |
/* 激励徽章 */ | |
.incentive-badge { | |
background-color: #17a2b8; | |
color: #d13c3c; | |
padding: 2px 8px; | |
margin-right: 6px; | |
font-size: 12px; | |
border-radius: 12px; | |
} | |
/* 空状态 */ | |
.empty-state { | |
color: #fff; | |
font-size: 16px; | |
text-align: center; | |
} |