feat: 基础信息样式修改

src/views/Project/ProjectSetting/BaseInfo/index.module.css

 .loadingBox {
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 300px;
+	width: 100%;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	height: 300px;
 }
 .projectInfoList {
-  background-color: #fff;
-  position: relative;
+	background-color: #fff;
+	position: relative;
 }
 .projectInfoListLi {
-  margin-bottom: 24px;
+	margin-bottom: 24px;
 }
 .projectInfoListLiLabel {
-  color: #1e2633;
-  line-height: 22px;
-  font-size: 14px;
-  font-weight: 550;
-  margin-bottom: 8px;
+	color: #1e2633;
+	line-height: 22px;
+	font-size: 14px;
+	font-weight: 550;
+	margin-bottom: 8px;
 }
 .projectInfoName::after {
-  content: "*";
-  color: red;
+	content: "*";
+	color: red;
 }
 .projectInfoListLiValue {
-  width: 560px;
-  height: 36px;
-  border: 1px solid #e6e8eb;
-  border-radius: 4px;
-  color: #565c66;
-  padding: 0 12px;
-  box-sizing: border-box;
-  outline: none;
+	width: 560px;
+	height: 36px;
+	border: 1px solid #e6e8eb;
+	border-radius: 4px;
+	color: #565c66;
+	padding: 0 12px;
+	box-sizing: border-box;
+	outline: none;
 }
 .projectInfoListLiValue:focus {
-  border: 2px solid #136efa;
+	border: 2px solid #136efa;
 }
 .projectInfoTextarea {
-  line-height: 22px;
-  height: 82px;
-  padding: 7px 12px;
-  resize: none;
-  font-size: 14px;
+	position: relative;
+	width: 560px;
 }
 .projectInfoSelect {
-  width: 560px;
-  padding: 0 12px;
+	width: 560px;
+	padding: 0 12px;
 }
 .disable {
-  background: #f7f8fa;
+	background: #f7f8fa;
 }
 .projectInfoListLiText {
-  margin-bottom: 16px;
-  color: #8a9099;
-  font-size: 12px;
-  line-height: 20px;
+	margin-bottom: 16px;
+	color: #8a9099;
+	font-size: 12px;
+	line-height: 20px;
 }
 
 .deleteBox {
-  width: 380px;
+	width: 380px;
 }
 .deleteText1 {
-  font-size: 14px;
-  line-height: 22px;
-  color: #ff4e4e;
-  margin-bottom: 20px;
+	font-size: 14px;
+	line-height: 22px;
+	color: #ff4e4e;
+	margin-bottom: 20px;
 }
 .deleteText2 {
-  color: #1e2633;
-  font-size: 14px;
-  line-height: 22px;
-  margin-bottom: 8px;
+	color: #1e2633;
+	font-size: 14px;
+	line-height: 22px;
+	margin-bottom: 8px;
 }
 .deleteText3 {
-  color: #1e2633;
-  font-size: 14px;
-  line-height: 22px;
-  margin-bottom: 20px;
+	color: #1e2633;
+	font-size: 14px;
+	line-height: 22px;
+	margin-bottom: 20px;
 }
 .deleteProjectName {
-  color: #1370ff;
+	color: #1370ff;
 }
 .deleteProjectInput {
-  width: 100%;
-  height: 36px;
-  border: 1px solid #e6e8eb;
-  border-radius: 4px;
-  color: #565c66;
-  padding: 0 12px;
-  box-sizing: border-box;
-  outline: none;
+	width: 100%;
+	height: 36px;
+	border: 1px solid #e6e8eb;
+	border-radius: 4px;
+	color: #565c66;
+	padding: 0 12px;
+	box-sizing: border-box;
+	outline: none;
 }
 .deleteProjectInput:focus {
-  border: 1px solid #136efa;
+	border: 1px solid #136efa;
 }

src/views/Project/ProjectSetting/BaseInfo/index.tsx

@@ -184,10 +184,12 @@ const BaseInfo = observer(() => {
 	};
 
 	const descChange = (e: any) => {
-		setProjectInfo({
-			...projectInfo,
-			desc: e.target.value,
-		});
+		if (e.target.value.length <= 100) {
+			setProjectInfo({
+				...projectInfo,
+				desc: e.target.value,
+			});
+		}
 	};
 
 	const checkBudget = (budget: string, showMessage = false) => {
@@ -335,18 +337,32 @@ const BaseInfo = observer(() => {
 						style={{ width: "560px" }}
 					/>
 				</div>
-				<div className={style.projectInfoListLi} style={{marginBottom: '20px'}}>
+				<div className={style.projectInfoListLi}>
 					<div className={style.projectInfoListLiLabel}>项目描述</div>
-					<textarea
-						value={projectInfo.desc}
+					<div
 						className={classnames({
-							[style.projectInfoListLiValue]: true,
 							[style.projectInfoTextarea]: true,
 						})}
-						onChange={descChange}
-						placeholder="项目描述限制300字以内"
-						maxLength={300}
-					></textarea>
+					>
+						<MyInput
+							value={projectInfo.desc}
+							id="desc"
+							placeholder="项目描述限制100字以内"
+							onChange={descChange}
+							multiline
+							rows={4}
+						/>
+						<span
+							style={{
+								position: "absolute",
+								bottom: "7px",
+								right: "12px",
+								color: projectInfo.desc.length >= 100 ? "#d32f2f" : "#C2C6CC",
+							}}
+						>
+							{projectInfo.desc.length}/100
+						</span>
+					</div>
 				</div>
 				<div className={style.projectInfoListLi}>
 					<div className={style.projectInfoListLiLabel}>计算区</div>