修改提示框样式、完成付费片单、推荐跳转
Change-Id: Ie84c53d4e306435144b1f26ceb39cc182e99d57a
diff --git a/src/pages/SeedList/Recommend/Recommend.css b/src/pages/SeedList/Recommend/Recommend.css
index cf46b86..f1e34da 100644
--- a/src/pages/SeedList/Recommend/Recommend.css
+++ b/src/pages/SeedList/Recommend/Recommend.css
@@ -1,90 +1,153 @@
-/* .recommend-wrapper {
- padding: 20px;
- background-color: #fff;
+/* 推荐页整体容器 */
+.recommendation-page {
+ padding: 24px 32px;
+ background-color: #f8f3ef; /* 米棕底色 */
+ min-height: 100vh;
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+ color: #4e342e; /* 深米棕文字 */
}
-.recommend-section-title {
- font-size: 20px;
- font-weight: bold;
- margin-bottom: 15px;
+/* 各个版块标题 */
+.recommendation-page h2 {
+ font-size: 1.75rem;
+ font-weight: 700;
+ margin-bottom: 18px;
+ border-left: 6px solid #eecfc1; /* 粉米色强调条 */
+ padding-left: 12px;
+ color: #4e342e; /* 标题米棕色 */
+ user-select: none;
}
+/* 付费片单 - 横向滚动行 */
.recommend-paid-row {
display: flex;
gap: 20px;
- flex-wrap: nowrap;
overflow-x: auto;
+ padding-bottom: 12px;
+ width: 100%;
+ scroll-behavior: smooth;
}
+.recommend-paid-row::-webkit-scrollbar {
+ height: 8px;
+}
+.recommend-paid-row::-webkit-scrollbar-thumb {
+ background-color: rgba(0, 0, 0, 0.3);
+ border-radius: 4px;
+}
+
+/* 付费片单卡片 */
.paid-card {
- width: 200px;
- flex-shrink: 0;
- border: 1px solid #eee;
- border-radius: 8px;
- overflow: hidden;
- background-color: #f9f9f9;
- text-align: center;
+ width: 450px; /* 固定宽度 */
+ flex-shrink: 0; /* 不允许缩小 */
+ border-radius: 10px;
+ /* overflow: hidden; */
+ overflow: visible;
+ background: #fffaf7; /* 粉米背景 */
+ box-shadow: 0 10px 20px rgba(78, 52, 46, 0.1); /* 柔和阴影 */
+ cursor: pointer;
+ transition: transform 0.25s ease, box-shadow 0.25s ease;
+}
+
+.paid-card:hover {
+ transform: translateY(-6px);
+ box-shadow: 0 14px 28px rgba(78, 52, 46, 0.2);
}
.paid-cover {
width: 100%;
- height: 120px;
+ height: 130px;
object-fit: cover;
+ border-bottom: 1px solid #e2cfc3; /* 米棕分割线 */
+ border-radius: 10px 10px 0 0;
}
.paid-title {
- font-size: 16px;
- padding: 10px;
-} */
-
-
-.recommendation-page {
- padding: 20px;
- background-color: #f8f9fa;
-}
-
-.recommendation-page h2 {
- font-size: 1.5rem;
- margin-bottom: 10px;
- color: #333;
-}
-
-.seed-list {
- display: flex;
- flex-wrap: wrap;
- gap: 16px;
- margin-bottom: 32px;
-}
-
-.seed-card {
- width: 160px;
- background: white;
- border-radius: 12px;
- box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
+ font-size: 1.1rem;
+ font-weight: 600;
+ padding: 12px 10px;
+ color: #6b4f3b; /* 深米棕文字 */
+ white-space: nowrap;
overflow: hidden;
- transition: transform 0.2s ease;
- cursor: pointer;
+ text-overflow: ellipsis;
}
+/* 热门资源 - 一行横向滚动 */
+.seed-list.popular-row {
+ display: flex;
+ overflow-x: auto;
+ white-space: nowrap;
+ gap: 16px;
+ padding-bottom: 12px;
+ scrollbar-width: none;
+}
+.seed-list.popular-row::-webkit-scrollbar {
+ display: none;
+}
+
+/* 热门资源卡片 */
+.seed-card {
+ width: 150px;
+ flex-shrink: 0;
+ background: #fffaf7; /* 粉米背景 */
+ border-radius: 12px;
+ box-shadow: 0 8px 16px rgba(78, 52, 46, 0.08);
+ overflow: hidden;
+ transition: transform 0.3s ease, box-shadow 0.3s ease;
+ cursor: pointer;
+ user-select: none;
+}
.seed-card:hover {
- transform: translateY(-4px);
+ transform: translateY(-6px);
+ box-shadow: 0 12px 24px rgba(78, 52, 46, 0.15);
}
.seed-card img {
width: 100%;
- height: 220px;
+ height: 210px;
object-fit: cover;
+ border-radius: 12px 12px 0 0;
+ border-bottom: 1px solid #e2cfc3;
}
.seed-card .title {
- padding: 8px;
- font-size: 0.95rem;
+ padding: 10px 8px;
+ font-size: 1rem;
+ color: #6b4f3b; /* 深米棕文字 */
text-align: center;
- color: #333;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
}
+/* 猜你喜欢 - 多行换行排列 */
+.seed-list {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 18px;
+ margin-bottom: 32px;
+ user-select: none;
+}
+
+/* 登录提醒 */
.login-reminder {
- font-size: 1rem;
- color: #888;
- padding: 10px;
+ font-size: 1.1rem;
+ color: #a1887f; /* 柔和棕色 */
+ padding: 14px 0;
+ text-align: center;
+ font-style: italic;
+ user-select: none;
+}
+
+/* 统一h2的上下间距 */
+.recommendation-page h2 {
+ margin-top: 36px;
+ margin-bottom: 18px;
+}
+
+
+/* 给滚动区域内种子卡片添加最小宽度避免缩得太小 */
+.seed-list.popular-row .seed-card,
+.recommend-paid-row .paid-card {
+ min-width: 150px;
}