修改促销、优化页面布局
Change-Id: Iae813b5b6557efa7059fe6d94bc32e96c984e4ea
diff --git a/src/pages/SeedList/Recommend/PlaylistDetailPage.css b/src/pages/SeedList/Recommend/PlaylistDetailPage.css
index 78e7068..f9c09e6 100644
--- a/src/pages/SeedList/Recommend/PlaylistDetailPage.css
+++ b/src/pages/SeedList/Recommend/PlaylistDetailPage.css
@@ -12,7 +12,7 @@
font-weight: 700;
}
-.cover-image {
+.cover-img {
width: 100%;
max-height: 400px;
object-fit: cover;
diff --git a/src/pages/SeedList/Recommend/PlaylistDetailPage.jsx b/src/pages/SeedList/Recommend/PlaylistDetailPage.jsx
index 07558d6..54380e1 100644
--- a/src/pages/SeedList/Recommend/PlaylistDetailPage.jsx
+++ b/src/pages/SeedList/Recommend/PlaylistDetailPage.jsx
@@ -72,7 +72,7 @@
src={detail.coverUrl || '/default-cover.jpg'}
alt={detail.title}
onError={e => { e.target.src = '/default-cover.jpg'; }}
- className="cover-image"
+ className="cover-img"
/>
<p>{detail.description}</p>
diff --git a/src/pages/SeedList/Recommend/Recommend.jsx b/src/pages/SeedList/Recommend/Recommend.jsx
index f58c73d..2229bb1 100644
--- a/src/pages/SeedList/Recommend/Recommend.jsx
+++ b/src/pages/SeedList/Recommend/Recommend.jsx
@@ -7,6 +7,7 @@
import CreatePlaylistModal from './CreatePlaylistModal';
import { confirmAlert } from 'react-confirm-alert';
import 'react-confirm-alert/src/react-confirm-alert.css';
+import AuthButton from '../../../components/AuthButton';
const Recommend = () => {
const { user } = useUser();
@@ -160,15 +161,18 @@
/>
<div className="paid-title">{list.title}</div>
- {user && user.role === 'admin' ? (
- <div className="admin-actions">
- <button onClick={() => handleDelete(list.id)}>删除</button>
- </div>
- ) : list.isPaid ? (
- <button onClick={() => navigate(`/playlist/${list.id}`)}>详情</button>
- ) : (
- <button onClick={() => handlePurchase(list.id)}>购买</button>
- )}
+ {user && user.role === 'admin' ? (
+ <div className="admin-actions">
+ <button onClick={() => handleDelete(list.id)}>删除</button>
+ </div>
+ ) : list.isPaid ? (
+ <button onClick={() => navigate(`/playlist/${list.id}`)}>详情</button>
+ ) : (
+ <AuthButton roles={['chocolate', 'ice-cream']} onClick={() => handlePurchase(list.id)}>
+ 购买
+ </AuthButton>
+ )}
+
</div>
))}
</div>