Переглянути джерело

style(pms): 统一项目配置与任务表单卡片样式

- 参照巡检项新增弹窗重新设计表单卡片
- 统一卡片圆角、边框及内容区域内边距
- 将卡片标题调整为紧凑的浅色标题栏
- 使用蓝色竖条统一标题视觉标识
- 将卡片说明文字调整到标题栏右侧
- 补充小屏状态下说明文字的隐藏处理
- 移除项目配置卡片原有的彩色图标和渐变背景
- 统一项目信息、任务详情、附件及平台井区域风格
Zimo 1 тиждень тому
батько
коміт
f0b1df6cb2

+ 35 - 41
src/views/pms/iotprojectinfo/IotProjectInfoForm.vue

@@ -27,13 +27,11 @@
       class="project-form">
       <ContentWrap class="project-form-card">
         <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>
-            <p>客户、合同及项目周期信息</p>
           </div>
+          <span class="form-card-hint">客户、合同及项目周期信息</span>
         </div>
         <div class="form-card-body">
           <el-row :gutter="24">
@@ -92,13 +90,11 @@
 
       <ContentWrap class="project-form-card">
         <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>
-            <p>归属部门、责任人与项目属性</p>
           </div>
+          <span class="form-card-hint">归属部门、责任人与项目属性</span>
         </div>
         <div class="form-card-body">
           <el-row :gutter="24">
@@ -1005,11 +1001,13 @@ const handleSelect = (item: any) => {
   display: flex;
   flex-direction: column;
   flex: 1;
-  gap: 12px;
+  gap: 14px;
 }
 
 .project-form-card {
   margin-bottom: 0;
+  overflow: hidden;
+  border-radius: 8px;
 }
 
 .project-form-card :deep(.el-card__body) {
@@ -1019,51 +1017,43 @@ const handleSelect = (item: any) => {
 .form-card-header {
   display: flex;
   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);
 }
 
+.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 {
   margin: 0;
   font-size: 15px;
-  font-weight: 700;
+  font-weight: 600;
   line-height: 22px;
   color: var(--el-text-color-primary);
 }
 
-.form-card-header p {
-  margin: 2px 0 0;
+.form-card-hint {
   font-size: 12px;
-  line-height: 18px;
   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 {
-  padding: 18px 20px 0;
+  padding: 18px 18px 2px;
 }
 
 .project-form :deep(.el-select),
@@ -1212,6 +1202,10 @@ const handleSelect = (item: any) => {
     display: none;
   }
 
+  .form-card-hint {
+    display: none;
+  }
+
   .form-card-body {
     padding-right: 12px;
     padding-left: 12px;

+ 10 - 6
src/views/pms/iotprojecttask/IotProjectTaskForm.vue

@@ -3236,6 +3236,8 @@ onMounted(async () => {
 .attachment-section,
 .platform-well-section {
   margin-bottom: 0;
+  overflow: hidden;
+  border-radius: 8px;
 }
 
 .page-header :deep(.el-card__body) {
@@ -3293,14 +3295,15 @@ onMounted(async () => {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  min-height: 46px;
+  height: 42px;
   padding: 0 16px;
+  background: var(--el-fill-color-extra-light);
   border-bottom: 1px solid var(--el-border-color-lighter);
 }
 
 .section-heading__title {
   position: relative;
-  padding-left: 12px;
+  padding-left: 13px;
   font-size: 15px;
   font-weight: 600;
   line-height: 22px;
@@ -3309,13 +3312,14 @@ onMounted(async () => {
 
 .section-heading__title::before {
   position: absolute;
-  top: 3px;
-  bottom: 3px;
+  top: 50%;
   left: 0;
-  width: 3px;
+  width: 4px;
+  height: 17px;
   background: var(--el-color-primary);
   border-radius: 2px;
   content: '';
+  transform: translateY(-50%);
 }
 
 .section-heading__hint {
@@ -3325,7 +3329,7 @@ onMounted(async () => {
 
 .project-summary-form,
 .task-edit-form {
-  padding: 18px 20px 0;
+  padding: 18px 18px 2px;
 }
 
 .project-summary-form :deep(.el-select),