修改个人中心、发布种子、兴趣小组
Change-Id: I73caa8ef511ad9ae12a0cc49fc0edb5ccb0b2a74
diff --git a/src/pages/PublishSeed/PublishSeed.css b/src/pages/PublishSeed/PublishSeed.css
index 61b1405..5f83d89 100644
--- a/src/pages/PublishSeed/PublishSeed.css
+++ b/src/pages/PublishSeed/PublishSeed.css
@@ -1,145 +1,81 @@
+.pub-card {
+ /* background-color: #e9ded2;
+ border-radius: 16px;
+ margin-top: 10%;
+ margin-left: 10%;
+ margin-right: 10%;
+ padding: 5% 10%; */
+ background-color: #e9ded2;
+ border-radius: 16px;
+ max-width: 70%;
+ max-height: 100%;
+ /* 卡片居中 */
+ margin: 0 auto;
+ margin-top: 40px;
+ /* padding: 24px 32px; */
+ padding: 3% 3%
+}
+
+.pub-categoty select {
+ padding: 1%;
+ width: 20%;
+ border-radius: 6px;
+ border: 1px solid #e0c4a1; /* 浅棕色 */
+ background-color: #fff5f5; /* 浅粉色 */
+ color: #5F4437;
+ font-size: 1rem;
+ margin-bottom: 2%;
+}
+
+.title-tag input {
+ padding: 1%;
+ width: 100%;
+ border-radius: 6px;
+ border: 1px solid #e0c4a1;
+ background-color: #fff5f5;
+ color: #5F4437;
+ font-size: 1rem;
+ margin-bottom: 2%;
+}
+.discription textarea {
+ padding: 1%;
+ width: 100%;
+ border-radius: 6px;
+ border: 1px solid #e0c4a1;
+ background-color: #fff5f5;
+ color: #5F4437;
+ font-size: 1rem;
+ margin-bottom: 2%;
+}
+.seed-file input {
+ /* padding: 1%; */
+ width: 100%;
+ /* border-radius: 6px; */
+ /* border: 1px solid #e0c4a1; */
+ /* background-color: #fff5f5; */
+ color: #5F4437;
+ font-size: 1rem;
+ margin-bottom: 2%;
+}
+
+.cover-image input {
+ padding: 1%;
+ width: 100%;
+ border-radius: 6px;
+ border: 1px solid #e0c4a1;
+ background-color: #fff5f5;
+ color: #5F4437;
+ font-size: 1rem;
+ margin-bottom: 2%;
+}
+
.publish-seed-container {
- background-color: #5c3f31;
- color: white;
- padding: 20px;
- border-radius: 12px;
- box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
- }
-
- h2 {
- text-align: center;
- font-size: 1.8rem;
- margin-bottom: 20px;
- color: #fff;
- }
-
- .message {
- text-align: center;
- margin-bottom: 20px;
- color: #ff6f61;
- font-weight: bold;
- }
-
- .form-group {
- margin-bottom: 20px;
- }
-
- label {
- font-size: 1rem;
- margin-bottom: 8px;
- display: block;
- }
-
- input[type="text"],
- textarea,
- select,
- input[type="url"],
- input[type="file"] {
- width: 100%;
- padding: 8px 12px;
- border-radius: 6px;
- border: 1px solid #ddd;
- background-color: #f9f9f9;
- color: #333;
- font-size: 1rem;
- }
-
- textarea {
- height: 100px;
- resize: none;
- }
-
- input[type="file"] {
- padding: 6px;
- }
-
- input[type="url"] {
- padding: 8px 12px;
- }
-
- input[type="text"]:focus,
- textarea:focus,
- select:focus,
- input[type="url"]:focus,
- input[type="file"]:focus {
- outline: none;
- border-color: #b38867;
- }
-
- button[type="submit"] {
- padding: 12px 20px;
- border: none;
- background-color: #007bff;
- color: white;
- font-size: 1rem;
- border-radius: 6px;
- cursor: pointer;
- width: 100%;
- transition: background-color 0.2s ease;
- }
-
- button[type="submit"]:disabled {
- background-color: #d6d6d6;
- cursor: not-allowed;
- }
-
- button[type="submit"]:hover {
- background-color: #0056b3;
- }
-
- input[type="text"],
- input[type="url"],
- select {
- margin-bottom: 10px;
- }
-
- input[type="file"] {
- margin-bottom: 10px;
- }
-
- .publish-seed-container .form-group:last-child {
- margin-bottom: 0;
- }
-
- .publish-seed-container .form-group label {
- color: #ddd;
- font-size: 1rem;
- }
-
- .publish-seed-container .form-group input,
- .publish-seed-container .form-group select,
- .publish-seed-container .form-group textarea {
- background-color: #4e3b30;
- color: white;
- }
-
- .publish-seed-container .form-group input:focus,
- .publish-seed-container .form-group select:focus,
- .publish-seed-container .form-group textarea:focus {
- border-color: #b38867;
- outline: none;
- }
-
- input[type="file"] {
- border: none;
- background-color: #4e3b30;
- }
-
- input[type="file"]:focus {
- outline: none;
- }
-
- .form-group button {
- background-color: #5c3f31;
- color: #fff;
- padding: 12px;
- font-size: 1rem;
- border-radius: 8px;
- cursor: pointer;
- width: 100%;
- }
-
- .form-group button:hover {
- background-color: #b38867;
- }
-
\ No newline at end of file
+ background-color: #5F4437;
+ color: white;
+ border-radius: 12px;
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+}
+
+.upload-button {
+ width: 100%;
+}
\ No newline at end of file
diff --git a/src/pages/PublishSeed/PublishSeed.jsx b/src/pages/PublishSeed/PublishSeed.jsx
index 7ead11d..c61440f 100644
--- a/src/pages/PublishSeed/PublishSeed.jsx
+++ b/src/pages/PublishSeed/PublishSeed.jsx
@@ -1,6 +1,7 @@
import React, { useState } from 'react';
import axios from 'axios';
import Header from '../../components/Header'; // 导入 Header 组件
+import './PublishSeed.css'
const API_BASE = process.env.REACT_APP_API_BASE;
@@ -58,9 +59,10 @@
return (
<div className="publish-seed-container">
<Header /> {/* 在这里插入导航栏 */}
+ <div className="pub-card">
{message && <div className="message">{message}</div>}
<form onSubmit={handleSubmit} encType="multipart/form-data">
- <div className="form-group">
+ <div className="title-tag">
<label>标题</label>
<input
type="text"
@@ -70,7 +72,7 @@
/>
</div>
- <div className="form-group">
+ <div className="discription">
<label>描述</label>
<textarea
value={description}
@@ -79,7 +81,7 @@
/>
</div>
- <div className="form-group">
+ <div className="title-tag">
<label>标签 (逗号分隔)</label>
<input
type="text"
@@ -90,7 +92,7 @@
/>
</div>
- <div className="form-group">
+ <div className="pub-categoty">
<label>分类</label>
<select
value={category}
@@ -103,7 +105,7 @@
</select>
</div>
- <div className="form-group">
+ <div className="seed-file">
<label>种子文件</label>
<input
type="file"
@@ -120,15 +122,24 @@
onChange={(e) => setImageUrl(e.target.value)}
placeholder="例如：http://example.com/images/cover.jpg"
required
+ style={{ padding: '1%',
+ width: '100%',
+ borderRadius: '6px',
+ border: '1px solid #e0c4a1',
+ backgroundColor: '#fff5f5',
+ color: '#5F4437',
+ fontSize: '1rem',
+ marginBottom: '2%'}}
/>
</div>
- <div className="form-group">
+ <div className="upload-button">
<button type="submit" disabled={isLoading}>
{isLoading ? '正在上传...' : '上传种子'}
</button>
</div>
</form>
+ </div>
</div>
);
};