| /* 推荐页整体容器 */ |
| .recommendation-page { |
| padding: 24px 32px; |
| background-color: #f8f3ef; /* 米棕底色 */ |
| min-height: 100vh; |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; |
| color: #4e342e; /* 深米棕文字 */ |
| } |
| |
| /* 各个版块标题 */ |
| .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; |
| 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: 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: 130px; |
| object-fit: cover; |
| border-bottom: 1px solid #e2cfc3; /* 米棕分割线 */ |
| border-radius: 10px 10px 0 0; |
| } |
| |
| .paid-title { |
| font-size: 1.1rem; |
| font-weight: 600; |
| padding: 12px 10px; |
| color: #6b4f3b; /* 深米棕文字 */ |
| white-space: nowrap; |
| overflow: hidden; |
| 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(-6px); |
| box-shadow: 0 12px 24px rgba(78, 52, 46, 0.15); |
| } |
| |
| .seed-card img { |
| width: 100%; |
| height: 210px; |
| object-fit: cover; |
| border-radius: 12px 12px 0 0; |
| border-bottom: 1px solid #e2cfc3; |
| } |
| |
| .seed-card .title { |
| padding: 10px 8px; |
| font-size: 1rem; |
| color: #6b4f3b; /* 深米棕文字 */ |
| text-align: center; |
| 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: 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; |
| } |