修改种子列表
Change-Id: I1f9d57092ca3ae2381da2b8dd137e2743782642d
diff --git a/src/pages/SeedList/SeedList.css b/src/pages/SeedList/SeedList.css
index 028ef55..94c70aa 100644
--- a/src/pages/SeedList/SeedList.css
+++ b/src/pages/SeedList/SeedList.css
@@ -1,185 +1,239 @@
-.main-page {
- background-color: #5c3f31;
- color: white;
-}
+
+ .main-page {
+ background-color: #5c3f31;
+ color: white;
+ }
+
+ /* 搜索、排序控件 */
+ .controls {
+ display: flex;
+ justify-content: center;
+ gap: 16px;
+ padding: 10px 20px;
+ background-color: #5c3f31;
+ }
+
+ .search-input {
+ padding: 6px 10px;
+ border-radius: 6px;
+ border: none;
+ width: 200px;
+ }
+
+ .sort-select {
+ padding: 6px;
+ border-radius: 6px;
+ border: none;
+ }
+
+ /* 标签过滤 */
+ .tag-filters {
+ background-color: #5c3f31;
+ 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;
+ }
+
+ /* 去除 Link 组件默认的下划线和文字颜色变化 */
+ .seed-item-link {
+ text-decoration: none;
+ color: inherit;
+ display: block; /* 确保整个卡片可点击 */
+ }
+
+ .clear-filter-btn:hover {
+ color: red;
+ }
+
+ /* 卡片展示 */
+ .seed-list-content {
+ padding: 20px;
+ background-color: #5c3f31;
+ }
+
+ .seed-list-card {
+ background-color: #e9ded2;
+ color: #333;
+ border-radius: 8px;
+ box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
+ overflow: hidden;
+ }
+
+ .seed-list-header {
+ display: grid;
+ grid-template-columns: 180px 2fr 1fr 1fr 1fr 1fr;
+ align-items: center;
+ justify-items: center; /* 新增：水平居中 */
+ padding: 12px 16px;
+ background-color: #BA929A;
+ font-weight: bold;
+ }
+
+ .seed-list-body {
+ display: flex;
+ flex-direction: column;
+ }
+
+ .seed-item {
+ display: grid;
+ grid-template-columns: 180px 2fr 1fr 1fr 1fr 1fr;
+ align-items: center;
+ justify-items: center; /* 新增：水平居中 */
+ padding: 12px 16px;
+ border-top: 1px solid #ccc;
+ }
+
+ .seed-item-cover {
+ margin-left: -50px;
+ width: 100px;
+ height: 140px;
+ object-fit: cover;
+ border-radius: 6px;
+ flex-shrink: 0;
+ }
+
+ .seed-item-title {
+ width: 100%;
+ margin-left: -100px;
+ text-align: center;
+ }
+
+ .seed-title-row {
+ display: flex;
+ flex-direction: column;
+ align-items: center; /* 新增：垂直居中 */
+ gap: 8px;
+ }
+
+ .seed-title {
+ font-size: 1.1rem;
+ margin: 0;
+ font-weight: bold;
+ }
+
+ .seed-tags {
+ margin-top: 4px;
+ display: flex;
+ flex-wrap: wrap;
+ gap: 4px;
+ justify-content: center; /* 标签水平居中 */
+ max-width: 100%; /* 限制最大宽度以触发换行 */
+ word-break: break-word; /* 避免长标签溢出 */
+ }
+
+
+ .seed-item-actions {
+ display: flex;
+ flex-direction: row;
+ gap: 8px;
+ justify-content: center; /* 新增：操作按钮水平居中 */
+ }
+
+ .seed-header-cover {
+ width: 180px;
+ flex-shrink: 0;
+ text-align: center;
+ }
+
+ .seed-header-title {
+ margin-left: -100px;
+ }
-/* 搜索、排序控件 */
-.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;
-}
- .friend-moments {
- background-color: #5c3f31;
- color: white;
- }
-
+ .seed-header-size,
+ .seed-header-upload-time,
+ .seed-header-downloads,
+ .seed-header-actions {
+ text-align: center; /* 新增：文字居中 */
+ }
+
+ .seed-info {
+ display: flex;
+ justify-content: space-between;
+ font-size: 0.9rem;
+ color: #666;
+ margin-bottom: 8px;
+ }
+
+ .tag-label {
+ background-color: #eee;
+ border-radius: 4px;
+ padding: 2px 6px;
+ font-size: 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;
+ }
+ .friend-moments {
+ background-color: #5c3f31;
+ color: white;
+ }
+
\ No newline at end of file