diff --git a/front/src/BegSeedPage.js b/front/src/BegSeedPage.js
index 0854535..0c1a0bb 100644
--- a/front/src/BegSeedPage.js
+++ b/front/src/BegSeedPage.js
@@ -1,7 +1,12 @@
 import React, { useState, useEffect } from "react";
 import HelpIcon from "@mui/icons-material/Help";
+import PeopleIcon from "@mui/icons-material/People";
+import MonetizationOnIcon from "@mui/icons-material/MonetizationOn";
+import AccessTimeIcon from "@mui/icons-material/AccessTime";
+import CheckCircleIcon from "@mui/icons-material/CheckCircle";
 import { useNavigate } from "react-router-dom";
 import { API_BASE_URL } from "./config";
+import "./BegSeedPage.css";
 
 export default function BegSeedPage() {
     const navigate = useNavigate();
@@ -153,195 +158,142 @@
     };
 
     return (
-        <div className="container">
-            <h1 style={{ margin: "24px 0 32px 0", color: "#1976d2" }}>
-                <HelpIcon style={{ verticalAlign: "middle", marginRight: 8 }} />
-                求种列表
-            </h1>
-            
-            {/* 加载状态 */}
-            {loading && (
-                <div style={{ textAlign: "center", margin: "40px 0", color: "#666" }}>
-                    正在加载求种列表...
+        <div className="begseed-container">
+            <div className="begseed-content">
+                <h1 className="begseed-title">
+                    <HelpIcon className="begseed-title-icon" style={{ fontSize: 42 }} />
+                    求种列表
+                </h1>
+                
+                {/* 加载状态 */}
+                {loading && (
+                    <div className="begseed-loading">
+                        正在加载求种列表...
+                    </div>
+                )}
+                
+                {/* 错误状态 */}
+                {error && (
+                    <div className="begseed-error">
+                        加载失败: {error} (已显示默认数据)
+                    </div>
+                )}
+                
+                <div className="begseed-publish-section">
+                    <button
+                        onClick={() => setShowForm(true)}
+                        disabled={loading}
+                        className="begseed-publish-btn"
+                    >
+                        发布求种任务
+                    </button>
                 </div>
-            )}
-            
-            {/* 错误状态 */}
-            {error && (
-                <div style={{ 
-                    textAlign: "center", 
-                    margin: "20px 0", 
-                    padding: "10px", 
-                    background: "#ffebee", 
-                    color: "#c62828", 
-                    borderRadius: "4px" 
-                }}>
-                    加载失败: {error} (已显示默认数据)
-                </div>
-            )}
-            
-            <div style={{ margin: "0 0 32px 0", textAlign: "center" }}>
-                <button
-                    onClick={() => setShowForm(true)}
-                    disabled={loading}
-                    style={{
-                        fontSize: 18,
-                        padding: "12px 36px",
-                        background: loading ? "#ccc" : "linear-gradient(90deg, #42a5f5 0%, #1976d2 100%)",
-                        color: "#fff",
-                        border: "none",
-                        borderRadius: 8,
-                        fontWeight: 600,
-                        boxShadow: "0 2px 8px #b2d8ea",
-                        cursor: loading ? "not-allowed" : "pointer",
-                        transition: "background 0.2s",
-                    }}
-                >
-                    发布求种任务
-                </button>
-            </div>
-            {showForm && (
-                <div
-                    style={{
-                        background: "#fff",
-                        border: "1.5px solid #b2d8ea",
-                        borderRadius: 12,
-                        padding: 24,
-                        maxWidth: 480,
-                        margin: "0 auto 32px auto",
-                        boxShadow: "0 2px 8px #e0e7ff",
-                    }}
-                >
-                    <h3 style={{ color: "#1976d2", marginBottom: 18 }}>发布求种任务</h3>
-                    <form onSubmit={handleSubmit}>
-                        <div style={{ marginBottom: 16 }}>
-                            <label style={{ display: "inline-block", width: 80 }}>求种信息：</label>
-                            <input
-                                type="text"
-                                name="info"
-                                value={formData.info}
-                                onChange={handleFormChange}
-                                required
-                                style={{
-                                    padding: "6px 12px",
-                                    borderRadius: 6,
-                                    border: "1px solid #b2d8ea",
-                                    width: 260,
-                                }}
-                            />
-                        </div>
-                        <div style={{ marginBottom: 16 }}>
-                            <label style={{ display: "inline-block", width: 80 }}>悬赏魔力值：</label>
-                            <input
-                                type="number"
-                                name="reward_magic"
-                                value={formData.reward_magic}
-                                onChange={handleFormChange}
-                                required
-                                min={1}
-                                style={{
-                                    padding: "6px 12px",
-                                    borderRadius: 6,
-                                    border: "1px solid #b2d8ea",
-                                    width: 120,
-                                }}
-                            />
-                        </div>
-                        <div style={{ marginBottom: 16 }}>
-                            <label style={{ display: "inline-block", width: 80 }}>截止日期：</label>
-                            <input
-                                type="datetime-local"
-                                name="deadline"
-                                value={formData.deadline}
-                                onChange={handleFormChange}
-                                required
-                                style={{
-                                    padding: "6px 12px",
-                                    borderRadius: 6,
-                                    border: "1px solid #b2d8ea",
-                                    width: 200,
-                                }}
-                            />
-                        </div>
-                        <div style={{ marginTop: 18 }}>
-                            <button
-                                type="submit"
-                                style={{
-                                    background: "#1976d2",
-                                    color: "#fff",
-                                    border: "none",
-                                    borderRadius: 6,
-                                    padding: "8px 28px",
-                                    fontWeight: 500,
-                                    fontSize: 16,
-                                    marginRight: 18,
-                                    cursor: "pointer",
-                                }}
+                
+                {showForm && (
+                    <div className="begseed-form-container">
+                        <h3 className="begseed-form-title">发布求种任务</h3>
+                        <form onSubmit={handleSubmit}>
+                            <div className="begseed-form-group">
+                                <label className="begseed-form-label">求种信息：</label>
+                                <input
+                                    type="text"
+                                    name="info"
+                                    value={formData.info}
+                                    onChange={handleFormChange}
+                                    required
+                                    className="begseed-form-input"
+                                    placeholder="请输入您要求种的资源信息"
+                                />
+                            </div>
+                            <div className="begseed-form-group">
+                                <label className="begseed-form-label">悬赏魔力值：</label>
+                                <input
+                                    type="number"
+                                    name="reward_magic"
+                                    value={formData.reward_magic}
+                                    onChange={handleFormChange}
+                                    required
+                                    min={1}
+                                    className="begseed-form-input"
+                                    placeholder="请输入悬赏的魔力值"
+                                />
+                            </div>
+                            <div className="begseed-form-group">
+                                <label className="begseed-form-label">截止日期：</label>
+                                <input
+                                    type="datetime-local"
+                                    name="deadline"
+                                    value={formData.deadline}
+                                    onChange={handleFormChange}
+                                    required
+                                    className="begseed-form-input"
+                                />
+                            </div>
+                            <div className="begseed-form-actions">
+                                <button type="submit" className="begseed-form-btn begseed-form-btn-primary">
+                                    提交
+                                </button>
+                                <button
+                                    type="button"
+                                    onClick={() => setShowForm(false)}
+                                    className="begseed-form-btn begseed-form-btn-secondary"
+                                >
+                                    取消
+                                </button>
+                            </div>
+                        </form>
+                    </div>
+                )}
+                
+                <div key={refreshKey} className="begseed-list">
+                    {begSeedList.map((beg) => {
+                        const isExpired = new Date(beg.deadline) < now || beg.has_match === 1;
+                        const isCompleted = beg.has_match === 1;
+                        const isActive = !isExpired && !isCompleted;
+                        
+                        return (
+                            <div
+                                key={beg.beg_id}
+                                className={`begseed-card ${isExpired ? 'begseed-card-expired' : ''}`}
+                                onClick={() => navigate(`/begseed/${beg.beg_id}`)}
                             >
-                                提交
-                            </button>
-                            <button
-                                type="button"
-                                onClick={() => setShowForm(false)}
-                                style={{
-                                    background: "#b0b0b0",
-                                    color: "#fff",
-                                    border: "none",
-                                    borderRadius: 6,
-                                    padding: "8px 28px",
-                                    fontWeight: 500,
-                                    fontSize: 16,
-                                    cursor: "pointer",
-                                }}
-                            >
-                                取消
-                            </button>
-                        </div>
-                    </form>
+                                <div className="begseed-card-content">
+                                    <div className="begseed-card-title">
+                                        {beg.info}
+                                    </div>
+                                    
+                                    <div className="begseed-card-info">
+                                        <PeopleIcon className="begseed-card-info-icon" />
+                                        求种人数：{beg.beg_count}
+                                    </div>
+                                    
+                                    <div className="begseed-card-info">
+                                        <MonetizationOnIcon className="begseed-card-info-icon" />
+                                        悬赏魔力值：{beg.reward_magic}
+                                    </div>
+                                    
+                                    <div className="begseed-card-info">
+                                        <AccessTimeIcon className="begseed-card-info-icon" />
+                                        截止时间：{new Date(beg.deadline).toLocaleString()}
+                                    </div>
+                                    
+                                    <div className="begseed-card-info">
+                                        <CheckCircleIcon className="begseed-card-info-icon" />
+                                        <span 
+                                            className={`begseed-card-status ${
+                                                isCompleted ? 'begseed-status-completed' : 
+                                                isExpired ? 'begseed-status-expired' : 
+                                                'begseed-status-active'
+                                            }`}
+                                        >
+                                            {isCompleted ? "已完成" : isExpired ? "已过期" : "进行中"}
+                                        </span>
+                                    </div>
+                                </div>
+                            </div>
+                        );
+                    })}
                 </div>
-            )}
-            <div key={refreshKey} style={{ display: "flex", flexWrap: "wrap", gap: 24 }}>
-                {begSeedList.map((beg) => {
-                    const isExpired =
-                        new Date(beg.deadline) < now || beg.has_match === 1;
-                    return (
-                        <div
-                            key={beg.beg_id}
-                            style={{
-                                background: isExpired ? "#f0f0f0" : "#e3f7e7",
-                                color: isExpired ? "#b0b0b0" : "#222",
-                                border: "1.5px solid #b2d8ea",
-                                borderRadius: 12,
-                                padding: 18,
-                                minWidth: 320,
-                                maxWidth: 420,
-                                boxShadow: "0 2px 8px #e0e7ff",
-                                opacity: isExpired ? 0.6 : 1,
-                                cursor: "pointer",
-                                marginBottom: 12,
-                                transition: "box-shadow 0.2s",
-                            }}
-                            onClick={() => navigate(`/begseed/${beg.beg_id}`)}
-                        >
-                            <div style={{ fontWeight: 600, fontSize: 18, marginBottom: 8 }}>
-                                {beg.info}
-                            </div>
-                            <div>求种人数：{beg.beg_count}</div>
-                            <div>悬赏魔力值：{beg.reward_magic}</div>
-                            <div>
-                                截止时间：{new Date(beg.deadline).toLocaleString()}
-                            </div>
-                            <div>
-                                状态：
-                                {beg.has_match === 1
-                                    ? "已完成"
-                                    : new Date(beg.deadline) < now
-                                        ? "已过期"
-                                        : "进行中"}
-                            </div>
-                        </div>
-                    );
-                })}
             </div>
         </div>
     );