Skip to content

B
bkunyun
Commit 0808d488 authored by chenshouchao's avatar chenshouchao
Browse files
Options

feat: 基础信息样式修改

parent 44852b8d
Hide whitespace changes
Inline Side-by-side
Showing with 84 additions and 71 deletions
src/views/Project/ProjectSetting/BaseInfo/index.module.css
View file @ 0808d488
.loadingBox { .loadingBox {
width: 100%; width: 100%;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
height: 300px; height: 300px;
} }
.projectInfoList { .projectInfoList {
background-color: #fff; background-color: #fff;
position: relative; position: relative;
} }
.projectInfoListLi { .projectInfoListLi {
margin-bottom: 24px; margin-bottom: 24px;
} }
.projectInfoListLiLabel { .projectInfoListLiLabel {
color: #1e2633; color: #1e2633;
line-height: 22px; line-height: 22px;
font-size: 14px; font-size: 14px;
font-weight: 550; font-weight: 550;
margin-bottom: 8px; margin-bottom: 8px;
} }
.projectInfoName::after { .projectInfoName::after {
content: "*"; content: "*";
color: red; color: red;
} }
.projectInfoListLiValue { .projectInfoListLiValue {
width: 560px; width: 560px;
height: 36px; height: 36px;
border: 1px solid #e6e8eb; border: 1px solid #e6e8eb;
border-radius: 4px; border-radius: 4px;
color: #565c66; color: #565c66;
padding: 0 12px; padding: 0 12px;
box-sizing: border-box; box-sizing: border-box;
outline: none; outline: none;
} }
.projectInfoListLiValue:focus { .projectInfoListLiValue:focus {
border: 2px solid #136efa; border: 2px solid #136efa;
} }
.projectInfoTextarea { .projectInfoTextarea {
line-height: 22px; position: relative;
height: 82px; width: 560px;
padding: 7px 12px;
resize: none;
font-size: 14px;
} }
.projectInfoSelect { .projectInfoSelect {
width: 560px; width: 560px;
padding: 0 12px; padding: 0 12px;
} }
.disable { .disable {
background: #f7f8fa; background: #f7f8fa;
} }
.projectInfoListLiText { .projectInfoListLiText {
margin-bottom: 16px; margin-bottom: 16px;
color: #8a9099; color: #8a9099;
font-size: 12px; font-size: 12px;
line-height: 20px; line-height: 20px;
} }
.deleteBox { .deleteBox {
width: 380px; width: 380px;
} }
.deleteText1 { .deleteText1 {
font-size: 14px; font-size: 14px;
line-height: 22px; line-height: 22px;
color: #ff4e4e; color: #ff4e4e;
margin-bottom: 20px; margin-bottom: 20px;
} }
.deleteText2 { .deleteText2 {
color: #1e2633; color: #1e2633;
font-size: 14px; font-size: 14px;
line-height: 22px; line-height: 22px;
margin-bottom: 8px; margin-bottom: 8px;
} }
.deleteText3 { .deleteText3 {
color: #1e2633; color: #1e2633;
font-size: 14px; font-size: 14px;
line-height: 22px; line-height: 22px;
margin-bottom: 20px; margin-bottom: 20px;
} }
.deleteProjectName { .deleteProjectName {
color: #1370ff; color: #1370ff;
} }
.deleteProjectInput { .deleteProjectInput {
width: 100%; width: 100%;
height: 36px; height: 36px;
border: 1px solid #e6e8eb; border: 1px solid #e6e8eb;
border-radius: 4px; border-radius: 4px;
color: #565c66; color: #565c66;
padding: 0 12px; padding: 0 12px;
box-sizing: border-box; box-sizing: border-box;
outline: none; outline: none;
} }
.deleteProjectInput:focus { .deleteProjectInput:focus {
border: 1px solid #136efa; border: 1px solid #136efa;
} }
src/views/Project/ProjectSetting/BaseInfo/index.tsx
View file @ 0808d488
...@@ -184,10 +184,12 @@ const BaseInfo = observer(() => { ...@@ -184,10 +184,12 @@ const BaseInfo = observer(() => {
}; };
const descChange = (e: any) => { const descChange = (e: any) => {
setProjectInfo({ if (e.target.value.length <= 100) {
...projectInfo, setProjectInfo({
desc: e.target.value, ...projectInfo,
}); desc: e.target.value,
});
}
}; };
const checkBudget = (budget: string, showMessage = false) => { const checkBudget = (budget: string, showMessage = false) => {
...@@ -335,18 +337,32 @@ const BaseInfo = observer(() => { ...@@ -335,18 +337,32 @@ const BaseInfo = observer(() => {
style={{ width: "560px" }} style={{ width: "560px" }}
/> />
</div> </div>
<div className={style.projectInfoListLi} style={{marginBottom: '20px'}}> <div className={style.projectInfoListLi}>
<div className={style.projectInfoListLiLabel}>项目描述</div> <div className={style.projectInfoListLiLabel}>项目描述</div>
<textarea <div
value={projectInfo.desc}
className={classnames({ className={classnames({
[style.projectInfoListLiValue]: true,
[style.projectInfoTextarea]: true, [style.projectInfoTextarea]: true,
})} })}
onChange={descChange} >
placeholder="项目描述限制300字以内" <MyInput
maxLength={300} value={projectInfo.desc}
></textarea> 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>
<div className={style.projectInfoListLi}> <div className={style.projectInfoListLi}>
<div className={style.projectInfoListLiLabel}>计算区</div> <div className={style.projectInfoListLiLabel}>计算区</div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment