create-seed-detail
Change-Id: I7dcce81a7510b6fa97781d3ce509a8dc2ac229d4
diff --git a/src/pages/SeedList/SeedList.css b/src/pages/SeedList/SeedList.css
index 5d17275..9187c56 100644
--- a/src/pages/SeedList/SeedList.css
+++ b/src/pages/SeedList/SeedList.css
@@ -1,173 +1,231 @@
- .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;
- }
-
\ No newline at end of file
+.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;
+}
+
+.clear-filter-btn {
+ background: transparent;
+ border: none;
+ color: #888;
+ font-size: 1rem;
+ cursor: pointer;
+ margin-left: 4px;
+}
+
+.clear-filter-btn:hover {
+ color: red;
+}
+
+/* 卡片展示 */
+.seed-list-content {
+ padding: 20px;
+}
+
+.seed-cards {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+ gap: 20px;
+ padding: 20px 0;
+}
+
+.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;
+ word-break: break-word;
+}
+
+.seed-card-body {
+ display: flex;
+ flex-direction: column;
+}
+
+.seed-info {
+ display: flex;
+ justify-content: space-between;
+ font-size: 0.9rem;
+ color: #666;
+ margin-bottom: 8px;
+}
+
+.seed-card-tags {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 6px;
+ margin-top: 6px;
+}
+
+.tag-label {
+ background-color: #f0f0f0;
+ color: #555;
+ padding: 4px 10px;
+ font-size: 0.75rem;
+ border-radius: 12px;
+ white-space: nowrap;
+}
+
+.seed-card-actions {
+ display: flex;
+ justify-content: space-between;
+ 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;
+ text-align: center;
+ white-space: nowrap;
+ transition: background-color 0.2s ease;
+}
+
+.btn-primary {
+ background-color: #007bff;
+ color: white;
+}
+
+.btn-primary:hover {
+ background-color: #0056b3;
+}
+
+.btn-secondary {
+ background-color: #28a745;
+ color: white;
+}
+
+.btn-secondary:hover {
+ background-color: #218838;
+}
+
+.btn-outline {
+ background-color: transparent;
+ border: 1px solid #ccc;
+ color: #333;
+}
+
+.btn-outline:hover {
+ background-color: #f8f9fa;
+}
+.seed-cover {
+ width: 100%;
+ height: 180px;
+ object-fit: cover;
+ border-radius: 8px;
+ margin-bottom: 12px;
+}