修改提示框样式、完成付费片单、推荐跳转
Change-Id: Ie84c53d4e306435144b1f26ceb39cc182e99d57a
diff --git a/src/pages/SeedList/SeedList.css b/src/pages/SeedList/SeedList.css
index cf5502c..cdbf651 100644
--- a/src/pages/SeedList/SeedList.css
+++ b/src/pages/SeedList/SeedList.css
@@ -1,99 +1,109 @@
.seed-list-container {
- background: #333;
+ background: #f8f3ef; /* 柔和米棕背景 */
}
/* 搜索、排序控件 */
.controls {
+ background-color: #fffaf7; /* 粉米白 */
+ padding: 10px 20px;
display: flex;
justify-content: center;
gap: 16px;
- padding: 10px 20px;
- background-color: #5F4437;
+ border-radius: 12px;
+ border: 1px solid #e2cfc3; /* 浅棕边框 */
}
.search-input {
padding: 6px 10px;
- border-radius: 6px;
- border: none;
+ border-radius: 8px;
+ border: 1px solid #e2cfc3;
width: 200px;
+ font-size: 1rem;
+ color: #6b4f3b;
+ background-color: #fffaf7;
}
.sort-select {
padding: 6px;
- border-radius: 6px;
- border: none;
+ border-radius: 8px;
+ border: 1px solid #e2cfc3;
+ background-color: #fffaf7;
+ color: #6b4f3b;
+ cursor: pointer;
}
/* 标签过滤 */
.tag-filters {
- background-color: #5F4437;
+ background-color: #fffaf7;
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 8px;
padding: 10px;
+ border-radius: 12px;
+ border: 1px solid #e2cfc3;
}
.tag-button {
- background-color: #b38867;
- color: white;
+ background-color: #eecfc1;
+ color: #6b4f3b;
border: none;
border-radius: 20px;
padding: 6px 12px;
cursor: pointer;
+ font-weight: 600;
+ transition: background-color 0.3s ease;
+}
+
+.tag-button:hover {
+ background-color: #f3ded7;
+ color: #4b3325;
}
.active-tag {
- background-color: #d17c4f;
+ background-color: #6b4f3b;
+ color: #fffaf7;
}
.clear-filter-btn {
background: transparent;
border: none;
- color: #888;
+ color: #6b4f3b;
font-size: 1rem;
cursor: pointer;
margin-left: 4px;
+ transition: color 0.3s ease;
}
.clear-filter-btn:hover {
- color: red;
+ color: #4b3325;
}
-/* 去除 Link 组件默认的下划线和文字颜色变化 */
-.seed-item-link {
- text-decoration: none;
- color: inherit;
- display: block;
-}
-
-/* 卡片展示 */
.seed-list-content {
padding: 20px;
- background-color: #5F4437;
+ background-color: #fffaf7;
+ border-radius: 12px;
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}
.seed-list-card {
- background-color: #e9ded2;
- color: #333;
+ background-color: #fffaf7;
+ color: #6b4f3b;
border-radius: 8px;
- box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
+ box-shadow: 0 1px 4px rgba(107, 79, 59, 0.15);
overflow: hidden;
}
.seed-list-header {
+ background-color: #eecfc1;
+ font-weight: bold;
+ color: #4e342e;
+ padding: 12px 16px;
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;
+ border-radius: 8px 8px 0 0;
}
.seed-item {
@@ -102,33 +112,31 @@
align-items: center;
justify-items: center;
padding: 12px 16px;
- border-top: 1px solid #ccc;
+ border-top: 1px solid #e2cfc3;
+ color: #6b4f3b;
+ transition: background-color 0.2s ease;
+ cursor: pointer;
+}
+
+.seed-item:hover {
+ background-color: #f3ded7;
}
.seed-item-cover {
width: 100px;
- height: 140px;
+ height: auto;
object-fit: cover;
border-radius: 6px;
- flex-shrink: 0;
+ margin-right: 12px;
+ box-shadow: 0 3px 6px rgb(107 79 59 / 0.2);
}
.seed-item-title {
width: 100%;
text-align: center;
-}
-
-.seed-title-row {
- display: flex;
- flex-direction: column;
- align-items: center;
- gap: 8px;
-}
-
-.seed-title {
+ font-weight: 600;
font-size: 1.1rem;
- margin: 0;
- font-weight: bold;
+ color: #4e342e;
}
.seed-tags {
@@ -141,81 +149,64 @@
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,
-.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;
+ color: #5d4037;
margin-bottom: 8px;
}
.tag-label {
- background-color: #eee;
+ background-color: #fffaf7;
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;
+ color: #6b4f3b;
+ font-weight: 500;
}
.btn-primary {
- background-color: #007bff;
- color: white;
+ background-color: #6b4f3b;
+ color: #fffaf7;
+ border-radius: 6px;
+ padding: 6px 12px;
+ cursor: pointer;
+ transition: background-color 0.3s ease;
+ font-weight: 600;
}
.btn-primary:hover {
- background-color: #0056b3;
+ background-color: #4b3325;
}
.btn-secondary {
- background-color: #28a745;
- color: white;
+ background-color: #eecfc1;
+ color: #6b4f3b;
+ border-radius: 6px;
+ padding: 6px 12px;
+ cursor: pointer;
+ transition: background-color 0.3s ease;
+ font-weight: 600;
}
.btn-secondary:hover {
- background-color: #218838;
+ background-color: #f3ded7;
}
.btn-outline {
background-color: transparent;
- border: 1px solid #ccc;
- color: #333;
+ border: 1px solid #6b4f3b;
+ color: #6b4f3b;
+ border-radius: 6px;
+ padding: 6px 12px;
+ cursor: pointer;
+ transition: background-color 0.3s ease;
}
.btn-outline:hover {
- background-color: #f8f9fa;
+ background-color: #fffaf7;
+ color: #4b3325;
}
.seed-cover {
@@ -224,11 +215,5 @@
object-fit: cover;
border-radius: 8px;
margin-bottom: 12px;
-}
-.seed-item-cover {
- width: 100px;
- height: auto;
- object-fit: cover;
- border-radius: 4px;
- margin-right: 12px;
-}
+ box-shadow: 0 4px 12px rgb(107 79 59 / 0.2);
+}
\ No newline at end of file