.main-page { | |
background-color: #5c3f31; | |
color: white; | |
} | |
.header { | |
display: flex; | |
justify-content: space-between; | |
align-items: center; | |
padding: 10px; | |
} | |
.logo-and-name { | |
display: flex; | |
align-items: center; | |
} | |
.logo { | |
height: 30px; | |
margin-right: 10px; | |
} | |
.site-name { | |
font-size: 24px; | |
} | |
.user-and-message { | |
display: flex; | |
align-items: center; | |
} | |
.user-avatar { | |
height: 40px; | |
margin-right: 10px; | |
} | |
.message-center { | |
font-size: 16px; | |
} | |
.nav { | |
background-color: #b38867; | |
display: flex; | |
justify-content: center; | |
} | |
.nav-item { | |
color: white; | |
text-decoration: none; | |
padding: 10px 20px; | |
} | |
.active { | |
background-color: #996633; | |
} | |
/* 搜索、排序控件 */ | |
.controls { | |
display: flex; | |
justify-content: center; | |
gap: 16px; | |
padding: 10px 20px; | |
background-color: #704c3b; | |
} | |
.search-input { | |
padding: 6px 10px; | |
border-radius: 6px; | |
border: none; | |
width: 200px; | |
} | |
.sort-select { | |
padding: 6px; | |
border-radius: 6px; | |
border: none; | |
} | |
/* 标签过滤 */ | |
.tag-filters { | |
display: flex; | |
justify-content: center; | |
flex-wrap: wrap; | |
gap: 8px; | |
padding: 10px; | |
} | |
.tag-button { | |
background-color: #b38867; | |
color: white; | |
border: none; | |
border-radius: 20px; | |
padding: 6px 12px; | |
cursor: pointer; | |
} | |
.active-tag { | |
background-color: #d17c4f; | |
} | |
/* 卡片展示 */ | |
.seed-list-content { | |
padding: 20px; | |
} | |
.seed-cards { | |
display: grid; | |
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); | |
gap: 20px; | |
} | |
.seed-card { | |
background-color: #fff; | |
border-radius: 12px; | |
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); | |
padding: 16px; | |
display: flex; | |
flex-direction: column; | |
justify-content: space-between; | |
color: #333; | |
transition: transform 0.2s ease; | |
} | |
.seed-card:hover { | |
transform: translateY(-5px); | |
} | |
.seed-card-header h3 { | |
font-size: 1.2rem; | |
margin-bottom: 10px; | |
color: #333; | |
} | |
.seed-card-body p { | |
margin: 4px 0; | |
font-size: 0.95rem; | |
color: #666; | |
} | |
.seed-card-actions { | |
display: flex; | |
gap: 10px; | |
margin-top: 12px; | |
} | |
.btn-primary, | |
.btn-secondary, | |
.btn-outline { | |
padding: 6px 12px; | |
border: none; | |
border-radius: 6px; | |
cursor: pointer; | |
font-size: 0.9rem; | |
} | |
.btn-primary { | |
background-color: #007bff; | |
color: white; | |
} | |
.btn-secondary { | |
background-color: #28a745; | |
color: white; | |
text-decoration: none; | |
text-align: center; | |
} | |
.btn-outline { | |
background-color: transparent; | |
border: 1px solid #ccc; | |
color: #333; | |
} | |