88 lines
2.5 KiB
TypeScript
88 lines
2.5 KiB
TypeScript
"use client";
|
||
|
||
import { COMPARE_ITEMS } from "@/app/data/vip.mock";
|
||
import styles from "../vip.module.css";
|
||
|
||
export function CompareSection() {
|
||
return (
|
||
<section className={styles.section}>
|
||
<h2 className={styles.sectionTitle}>单品 vs 会员</h2>
|
||
<p className={styles.sectionDesc}>一次付费，全部解锁</p>
|
||
<div
|
||
className="animate__animated animate__fadeInUp"
|
||
style={{
|
||
overflow: "hidden",
|
||
borderRadius: "12px",
|
||
border: "1px solid var(--border)",
|
||
animationDelay: "0.25s",
|
||
animationFillMode: "both",
|
||
}}
|
||
>
|
||
<table
|
||
style={{
|
||
width: "100%",
|
||
borderCollapse: "collapse",
|
||
fontSize: "0.9rem",
|
||
}}
|
||
>
|
||
<thead>
|
||
<tr style={{ background: "var(--muted)" }}>
|
||
<th
|
||
style={{
|
||
padding: "0.75rem 1rem",
|
||
textAlign: "left",
|
||
fontWeight: 600,
|
||
color: "var(--foreground)",
|
||
}}
|
||
>
|
||
权益
|
||
</th>
|
||
<th
|
||
style={{
|
||
padding: "0.75rem 1rem",
|
||
textAlign: "center",
|
||
fontWeight: 600,
|
||
color: "var(--muted-foreground)",
|
||
}}
|
||
>
|
||
单品
|
||
</th>
|
||
<th
|
||
style={{
|
||
padding: "0.75rem 1rem",
|
||
textAlign: "center",
|
||
fontWeight: 600,
|
||
color: "var(--accent)",
|
||
}}
|
||
>
|
||
会员
|
||
</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{COMPARE_ITEMS.map((row, i) => (
|
||
<tr
|
||
key={i}
|
||
style={{
|
||
borderTop: "1px solid var(--border)",
|
||
background: i % 2 === 1 ? "var(--muted)" : "transparent",
|
||
}}
|
||
>
|
||
<td style={{ padding: "0.75rem 1rem", color: "var(--foreground)" }}>
|
||
{row.feature}
|
||
</td>
|
||
<td style={{ padding: "0.75rem 1rem", textAlign: "center", color: "var(--muted-foreground)" }}>
|
||
{row.single}
|
||
</td>
|
||
<td style={{ padding: "0.75rem 1rem", textAlign: "center", color: "var(--accent)" }}>
|
||
{row.member}
|
||
</td>
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|