修改促销、优化页面布局
Change-Id: Iae813b5b6557efa7059fe6d94bc32e96c984e4ea
diff --git a/src/pages/SeedList/SeedDetail/SeedDetail.jsx b/src/pages/SeedList/SeedDetail/SeedDetail.jsx
index 4ab9274..705368a 100644
--- a/src/pages/SeedList/SeedDetail/SeedDetail.jsx
+++ b/src/pages/SeedList/SeedDetail/SeedDetail.jsx
@@ -5,6 +5,7 @@
import './SeedDetail.css';
import { useUser } from '../../../context/UserContext';
import SeedRating from './SeedRating';
+import AuthButton from '../../../components/AuthButton';
const SeedDetail = () => {
const params = useParams();
@@ -213,12 +214,16 @@
</div>
<div className="action-buttons">
- <button className="btn" onClick={() => handleDownload(seed.id)}>下载</button>
- <button className="btn-outline" onClick={handleCollect}>收藏</button>
- {/* <button className="btn" onClick={handleCollect}>收藏</button> */}
+ <AuthButton roles={["cookie", "chocolate", "ice-cream"]} onClick={() => handleDownload(seed.id)}>
+ 下载
+ </AuthButton>
+ <AuthButton roles={["cookie", "chocolate", "ice-cream"]} onClick={handleCollect}>
+ 收藏
+ </AuthButton>
<SeedRating seedId={seed.id} />
</div>
+
<hr className="divider" />
<h3>评论区</h3>
<div className="comments-section">
diff --git a/src/pages/SeedList/SeedDetail/SeedRating.css b/src/pages/SeedList/SeedDetail/SeedRating.css
index e40c055..f62131c 100644
--- a/src/pages/SeedList/SeedDetail/SeedRating.css
+++ b/src/pages/SeedList/SeedDetail/SeedRating.css
@@ -20,4 +20,8 @@
margin-left: 10px;
font-size: 14px;
color: rgba(222, 91, 111, 0.982);
+}
+.star.hover {
+ color: rgba(240, 184, 62, 0.916); /* 亮黄色 */
}
+
diff --git a/src/pages/SeedList/SeedDetail/SeedRating.jsx b/src/pages/SeedList/SeedDetail/SeedRating.jsx
index 1841443..8e2d3f0 100644
--- a/src/pages/SeedList/SeedDetail/SeedRating.jsx
+++ b/src/pages/SeedList/SeedDetail/SeedRating.jsx
@@ -63,6 +63,7 @@
import axios from 'axios';
import './SeedRating.css';
import { useUser } from '../../../context/UserContext';
+import AuthButton from '../../../components/AuthButton';
const SeedRating = ({ seedId }) => {
const { user } = useUser();
@@ -105,17 +106,28 @@
return (
<div className="seed-rating">
- <span>评分：</span>
+ <span style={{color: '#333'}}>评分：</span>
{[1, 2, 3, 4, 5].map((star) => (
- <span
- key={star}
- className={`star ${star <= (hoverScore || score) ? 'active' : ''}`}
- onMouseEnter={() => !submitted && setHoverScore(star)}
- onMouseLeave={() => !submitted && setHoverScore(0)}
- onClick={() => handleRating(star)}
- >
- ★
- </span>
+ <AuthButton
+ key={star}
+ roles={["cookie", "chocolate", "ice-cream"]}
+ style={{
+ backgroundColor: 'inherit',
+ margin: 0,
+ // color: '#ccc',
+ padding: 0,
+ outline: 'none',
+ border: 'none',
+ cursor: 'pointer'
+ }}
+ className={`star ${(star <= (hoverScore || score) ? 'active' : '')} ${hoverScore >= star ? 'hover' : ''}`}
+ onMouseEnter={() => !submitted && setHoverScore(star)}
+ onMouseLeave={() => !submitted && setHoverScore(0)}
+ onClick={() => handleRating(star)}
+ >
+ ★
+ </AuthButton>
+
))}
{submitted && <span className="thank-you">感谢您的评分！</span>}
</div>