|
@@ -27,13 +27,11 @@
|
|
|
class="project-form">
|
|
class="project-form">
|
|
|
<ContentWrap class="project-form-card">
|
|
<ContentWrap class="project-form-card">
|
|
|
<div class="form-card-header">
|
|
<div class="form-card-header">
|
|
|
- <span class="form-card-icon form-card-icon--blue">
|
|
|
|
|
- <Icon icon="ep:document" />
|
|
|
|
|
- </span>
|
|
|
|
|
- <div>
|
|
|
|
|
|
|
+ <div class="form-card-title">
|
|
|
|
|
+ <span></span>
|
|
|
<h3>合同信息</h3>
|
|
<h3>合同信息</h3>
|
|
|
- <p>客户、合同及项目周期信息</p>
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
+ <span class="form-card-hint">客户、合同及项目周期信息</span>
|
|
|
</div>
|
|
</div>
|
|
|
<div class="form-card-body">
|
|
<div class="form-card-body">
|
|
|
<el-row :gutter="24">
|
|
<el-row :gutter="24">
|
|
@@ -92,13 +90,11 @@
|
|
|
|
|
|
|
|
<ContentWrap class="project-form-card">
|
|
<ContentWrap class="project-form-card">
|
|
|
<div class="form-card-header">
|
|
<div class="form-card-header">
|
|
|
- <span class="form-card-icon form-card-icon--green">
|
|
|
|
|
- <Icon icon="ep:setting" />
|
|
|
|
|
- </span>
|
|
|
|
|
- <div>
|
|
|
|
|
|
|
+ <div class="form-card-title">
|
|
|
|
|
+ <span></span>
|
|
|
<h3>项目配置</h3>
|
|
<h3>项目配置</h3>
|
|
|
- <p>归属部门、责任人与项目属性</p>
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
+ <span class="form-card-hint">归属部门、责任人与项目属性</span>
|
|
|
</div>
|
|
</div>
|
|
|
<div class="form-card-body">
|
|
<div class="form-card-body">
|
|
|
<el-row :gutter="24">
|
|
<el-row :gutter="24">
|
|
@@ -1005,11 +1001,13 @@ const handleSelect = (item: any) => {
|
|
|
display: flex;
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
flex-direction: column;
|
|
|
flex: 1;
|
|
flex: 1;
|
|
|
- gap: 12px;
|
|
|
|
|
|
|
+ gap: 14px;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.project-form-card {
|
|
.project-form-card {
|
|
|
margin-bottom: 0;
|
|
margin-bottom: 0;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+ border-radius: 8px;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.project-form-card :deep(.el-card__body) {
|
|
.project-form-card :deep(.el-card__body) {
|
|
@@ -1019,51 +1017,43 @@ const handleSelect = (item: any) => {
|
|
|
.form-card-header {
|
|
.form-card-header {
|
|
|
display: flex;
|
|
display: flex;
|
|
|
align-items: center;
|
|
align-items: center;
|
|
|
- gap: 12px;
|
|
|
|
|
- min-height: 64px;
|
|
|
|
|
- padding: 14px 18px;
|
|
|
|
|
- background: linear-gradient(90deg, #f7faff 0%, var(--el-bg-color) 78%);
|
|
|
|
|
|
|
+ justify-content: space-between;
|
|
|
|
|
+ height: 42px;
|
|
|
|
|
+ padding: 0 16px;
|
|
|
|
|
+ background: var(--el-fill-color-extra-light);
|
|
|
border-bottom: 1px solid var(--el-border-color-lighter);
|
|
border-bottom: 1px solid var(--el-border-color-lighter);
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
+.form-card-title {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ min-width: 0;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.form-card-title > span {
|
|
|
|
|
+ width: 4px;
|
|
|
|
|
+ height: 17px;
|
|
|
|
|
+ margin-right: 9px;
|
|
|
|
|
+ background: var(--el-color-primary);
|
|
|
|
|
+ border-radius: 2px;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
.form-card-header h3 {
|
|
.form-card-header h3 {
|
|
|
margin: 0;
|
|
margin: 0;
|
|
|
font-size: 15px;
|
|
font-size: 15px;
|
|
|
- font-weight: 700;
|
|
|
|
|
|
|
+ font-weight: 600;
|
|
|
line-height: 22px;
|
|
line-height: 22px;
|
|
|
color: var(--el-text-color-primary);
|
|
color: var(--el-text-color-primary);
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-.form-card-header p {
|
|
|
|
|
- margin: 2px 0 0;
|
|
|
|
|
|
|
+.form-card-hint {
|
|
|
font-size: 12px;
|
|
font-size: 12px;
|
|
|
- line-height: 18px;
|
|
|
|
|
color: var(--el-text-color-secondary);
|
|
color: var(--el-text-color-secondary);
|
|
|
-}
|
|
|
|
|
-
|
|
|
|
|
-.form-card-icon {
|
|
|
|
|
- display: inline-flex;
|
|
|
|
|
- flex: 0 0 auto;
|
|
|
|
|
- align-items: center;
|
|
|
|
|
- justify-content: center;
|
|
|
|
|
- width: 36px;
|
|
|
|
|
- height: 36px;
|
|
|
|
|
- font-size: 18px;
|
|
|
|
|
- border-radius: 9px;
|
|
|
|
|
-}
|
|
|
|
|
-
|
|
|
|
|
-.form-card-icon--blue {
|
|
|
|
|
- color: #3478f6;
|
|
|
|
|
- background: #eaf2ff;
|
|
|
|
|
-}
|
|
|
|
|
-
|
|
|
|
|
-.form-card-icon--green {
|
|
|
|
|
- color: #20a36a;
|
|
|
|
|
- background: #e7f8f0;
|
|
|
|
|
|
|
+ white-space: nowrap;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.form-card-body {
|
|
.form-card-body {
|
|
|
- padding: 18px 20px 0;
|
|
|
|
|
|
|
+ padding: 18px 18px 2px;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.project-form :deep(.el-select),
|
|
.project-form :deep(.el-select),
|
|
@@ -1212,6 +1202,10 @@ const handleSelect = (item: any) => {
|
|
|
display: none;
|
|
display: none;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
+ .form-card-hint {
|
|
|
|
|
+ display: none;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
.form-card-body {
|
|
.form-card-body {
|
|
|
padding-right: 12px;
|
|
padding-right: 12px;
|
|
|
padding-left: 12px;
|
|
padding-left: 12px;
|