.Home { | |
padding: 2rem; | |
position: relative; | |
max-width: 1200px; | |
margin: 0 auto; | |
padding: 0 2rem; | |
} | |
.main-header { | |
display: flex; | |
flex-direction: row; | |
gap: 24px; | |
margin: 0 auto; | |
margin-bottom: 2rem; | |
margin-top: 2rem; | |
} | |
.section-header { | |
display: flex; | |
justify-content: space-between; | |
align-items: center; | |
margin-top: 20px; | |
} | |
.carousel-wrapper { | |
flex: 1; | |
.custom-carousel { | |
position: relative; | |
.carousel-item { | |
max-width: 100px; | |
img { | |
border-radius: 8px; | |
object-fit: cover; | |
cursor: pointer; | |
} | |
} | |
.p-carousel-prev, | |
.p-carousel-next { | |
position: absolute; | |
top: 50%; | |
z-index: 10; | |
/* 保证在图片之上 */ | |
width: 2.5rem; | |
height: 2.5rem; | |
border-radius: 50%; | |
background: rgba(213, 244, 235, 0.5); | |
color: #ffffff; | |
display: flex; | |
align-items: center; | |
justify-content: center; | |
pointer-events: auto; | |
/* 确保按钮可点击 */ | |
} | |
/* 左箭头靠左 */ | |
.p-carousel-prev { | |
left: 0.5rem; | |
} | |
/* 右箭头靠右 */ | |
.p-carousel-next { | |
right: 1rem; | |
} | |
} | |
} | |
.rewards-panel { | |
display: flex; | |
flex-direction: column; | |
height: 350px; | |
width: 400px; | |
background: #fff; | |
border-radius: 10px; | |
padding: 1rem; | |
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); | |
h2 { | |
color: #526665; | |
font-size: 1.25rem; | |
margin-bottom: 1rem; | |
padding-bottom: 0.5rem; | |
border-bottom: 1px solid #eee; | |
text-align: center; | |
} | |
.rewards-list { | |
display: flex; | |
flex-direction: column; | |
gap: 1rem; | |
.reward-item { | |
display: flex; | |
justify-content: space-between; | |
align-items: center; | |
padding: 0.75rem; | |
background: #f8f9fa; | |
border-radius: 6px; | |
transition: all 0.3s ease; | |
&:hover { | |
background: #f0f4f7; | |
transform: translateY(-2px); | |
} | |
.reward-title { | |
font-size: 0.7rem; | |
color: #333; | |
} | |
.reward-price { | |
font-weight: bold; | |
color: #526665; | |
} | |
} | |
} | |
.view-all-button { | |
width: 60%; | |
margin-left: 4.5rem; | |
margin-top: 2rem; | |
} | |
} | |
.site-stats { | |
max-width: 1200px; | |
margin: 2rem auto; | |
padding: 1rem; | |
background-color: #fff; | |
border-radius: 8px; | |
display: flex; | |
justify-content: space-around; | |
align-items: center; | |
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); | |
.stat-item { | |
display: flex; | |
flex-direction: column; | |
align-items: center; | |
gap: 0.5rem; | |
.stat-value { | |
font-size: 1.5rem; | |
font-weight: bold; | |
color: #333; | |
} | |
.stat-label { | |
font-size: 0.875rem; | |
color: #666; | |
} | |
} | |
} | |
.resource-grid { | |
display: grid; | |
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); | |
gap: 1rem; | |
.resource-card { | |
transition: transform 0.2s ease; | |
cursor: pointer; | |
box-shadow: none !important; | |
.p-image { | |
img { | |
border-radius: 0.5rem 0.5rem 0 0; | |
object-fit: cover; | |
} | |
} | |
.p-card-body { | |
padding: 0; | |
} | |
.p-card-content { | |
padding: 0; | |
} | |
&:hover { | |
transform: translateY(-4px); | |
} | |
.card-content { | |
display: flex; | |
flex-direction: column; | |
position: relative; | |
margin-left: 16px; | |
margin-right: 16px; | |
margin-bottom: 16px; | |
h3 { | |
margin: 1rem 0; | |
font-size: 1rem; | |
line-height: 1.5; | |
color: #2d3748; | |
} | |
.view-count { | |
position: absolute; | |
bottom: 0rem; | |
right: 0rem; | |
display: flex; | |
align-items: center; | |
gap: 0.5rem; | |
color: #718096; | |
font-size: 0.9rem; | |
} | |
} | |
} | |
} |