@import '../globals.scss'; | |
.reward { | |
padding: 2rem; | |
position: relative; | |
max-width: 1200px; | |
margin: 0 auto; | |
padding: 0 2rem; | |
cursor: pointer; | |
.reward-header { | |
display: flex; | |
flex-direction: row; | |
justify-content: space-between; | |
.title-section { | |
display: flex; | |
flex-direction: column; | |
gap: 24px; | |
align-items: flex-start; | |
h1 { | |
font-size: 3rem; | |
margin: 0; | |
margin-top: 64px; | |
} | |
.subtitle { | |
margin: 0; | |
color: #718096; | |
font-size: 1rem; | |
} | |
.reward-states { | |
display: flex; | |
gap: 2rem; | |
align-items: center; | |
.state-item { | |
display: flex; | |
align-items: center; | |
gap: 0.5rem; | |
color: #666; | |
span { | |
font-size: 0.9rem; | |
} | |
} | |
} | |
} | |
.input { | |
display: flex; | |
flex-direction: column; | |
justify-content: flex-end; | |
align-items: flex-end; | |
margin-top: 2rem; | |
.reward-buttons { | |
display: flex; | |
gap: 1rem; | |
.p-button { | |
width: 150px; | |
font-size: 0.9rem; | |
padding: 0.5rem 1rem; | |
border-radius: 8px; | |
} | |
} | |
} | |
.searchBar { | |
max-width: 100%; | |
position: relative; | |
.pi-search { | |
position: absolute; | |
left: 1rem; | |
top: 50%; | |
transform: translateY(-50%); | |
z-index: 1; | |
} | |
.search-helper { | |
width: 316px; | |
height: 3rem; | |
border-radius: 10px 10px 10px 10px; | |
font-size: 1.1rem; | |
border: 1px solid #ddd; | |
} | |
} | |
.select-dropdown { | |
width: 100px; | |
height: 48px; | |
border-radius: 0px 10px 10px 0px; | |
.p-dropdown-items { | |
max-height: 20px; | |
} | |
} | |
} | |
// 全部社区样式 | |
.rewards-list { | |
width: 100%; | |
padding: 1rem; | |
&-card { | |
height: 140px; | |
padding: 1.5rem; | |
margin-bottom: 1rem; | |
border-radius: 0.5rem; | |
transition: transform 0.3s ease; | |
box-shadow: none !important; // 取消阴影 | |
//填充卡片 | |
&.p-card.p-component { | |
padding: 0; | |
} | |
.p-card-body { | |
padding: 0; | |
} | |
&:hover { | |
transform: translateY(-3px); | |
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); | |
} | |
.p-card-content { | |
height: 140px; | |
display: flex; | |
justify-content: space-between; | |
padding: 0; | |
} | |
img { | |
border-radius: 0.5rem 0 0 0.5rem; | |
object-fit: cover; | |
} | |
.reward-header { | |
display: flex; | |
flex: 1; | |
max-width: 800px; | |
padding-left: 20px; | |
padding-right: 20px; | |
margin-bottom: 20px; | |
} | |
.reward-avatar { | |
width: 80px; | |
height: 80px; | |
border-radius: 8px; | |
object-fit: cover; | |
} | |
.reward-content { | |
flex: 1; | |
display: flex; | |
flex-direction: column; | |
h3 { | |
font-size: 1.5rem; | |
font-weight: bold; | |
color: #2c3e50; | |
} | |
.reward-introduction { | |
color: #666; | |
font-size: 1rem; | |
margin-bottom: 0; | |
} | |
} | |
.reward-states { | |
min-width: 120px; | |
display: flex; | |
flex-direction: column; | |
justify-content: flex-end; | |
align-items: flex-end; | |
gap: 1rem; | |
.price { | |
font-size: 1.25rem; | |
font-weight: bold; | |
color: #526665; | |
} | |
} | |
} | |
} | |
} | |
// ========== 弹窗发布样式 ========== | |
.publish-dialog { | |
width: 600px !important; | |
max-width: 90vw; | |
.p-dialog-header { | |
font-size: 1.5rem; | |
font-weight: bold; | |
color: $heading-color; | |
padding-bottom: 0.5rem; | |
} | |
.p-dialog-content { | |
padding-top: 0; | |
padding-bottom: 0; | |
.publish-form { | |
display: flex; | |
flex-direction: column; | |
gap: 1.5rem; | |
margin-top: 1rem; | |
.form-field { | |
display: flex; | |
flex-direction: column; | |
gap: 0.5rem; | |
label { | |
font-weight: 600; | |
color: $heading-color; | |
} | |
input, | |
textarea { | |
padding: 0.75rem 1rem; | |
border-radius: 8px; | |
font-size: 1rem; | |
color: #2d3748; | |
} | |
.p-fileupload { | |
.p-button { | |
width: 100%; | |
justify-content: center; | |
border: none; | |
margin-bottom: 1rem; | |
} | |
} | |
} | |
} | |
} | |
} |