修改需求大厅

src/views/AAAFont/demandHall/detail/detail.data.ts

@@ -28,3 +28,33 @@ export const formSchema = [
     label: '预计金额',
   },
 ];
+export const FormSchemaDetail = [
+  {
+    field: 'name',
+    label: '需求名称',
+  },
+  {
+    field: 'type',
+    label: '类型',
+  },
+  {
+    field: 'person',
+    label: '联系人',
+  },
+  {
+    field: 'phone',
+    label: '联系电话',
+  },
+  {
+    field: 'company',
+    label: '公司',
+  },
+  {
+    field: 'des',
+    label: '需求描述',
+  },
+  {
+    field: 'amount',
+    label: '预计金额',
+  },
+];

src/views/AAAFont/demandHall/detail/index.vue

@@ -2,9 +2,9 @@
   <div class="d-detail">
     <div class="d-title"> 需求详情 </div>
     <div class="d-card1">
-      <div class="w-2/3 d-left">
+      <div class="w-1/1 d-left">
         <div>
-          <Icon icon="ant-design:line-chart-outlined" style="font-size: 50px; color: #7295fe" />
+          <Icon icon="ant-design:line-chart-outlined" style="color: #7295fe; font-size: 50px" />
         </div>
         <div class="d-des">
           <div class="d-hd">
@@ -39,10 +39,10 @@
           </div>
         </div>
       </div>
-      <div class="w-1/3 d-right">
+      <!-- <div class="w-1/3 d-right">
         <div class="dr-hd">
           <div>
-            <Icon icon="ant-design:heart-outlined" style="font-size: 20px; color: #4475fe" />
+            <Icon icon="ant-design:heart-outlined" style="color: #4475fe; font-size: 20px" />
           </div>
           <div class="hd-title"> 需求信息 </div>
         </div>
@@ -58,6 +58,82 @@
             <div style="color: #4e80f8"> {{ data.tab }} </div>
           </div>
         </div>
+      </div> -->
+    </div>
+    <div class="d-card1 d-card3">
+      <div class="cd-header">
+        <div class="h-left">
+          <div class="title"> </div>
+          <!-- <div class="tab"> 简单&nbsp;&nbsp;·&nbsp;&nbsp;高效&nbsp;&nbsp;·&nbsp;&nbsp;安全 </div> -->
+        </div>
+      </div>
+      <div class="formWrapper">
+        <el-form :model="formData" :rules="rules" ref="form2" label-width="80px">
+          <el-row :gutter="20" style="margin-bottom: 20px">
+            <el-col :span="12">
+              <el-form-item prop="company" label="所属公司" class="formItemWrapper">
+                <el-textarea v-model="formData.company" placeholder="请输入用户名" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item prop="publishDate" label="发布日期" class="formItemWrapper">
+                <el-textarea v-model="formData.publishDate" placeholder="请输入密码" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="20" style="margin-bottom: 20px">
+            <el-col :span="12">
+              <el-form-item prop="requirementCategory" label="需求类别" class="formItemWrapper">
+                <el-textarea v-model="formData.requirementCategory" placeholder="请输入邮箱" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item prop="budgetAmount" label="预算金额" class="formItemWrapper">
+                <el-textarea v-model="formData.budgetAmount" placeholder="请输入手机号" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="20" style="margin-bottom: 20px">
+            <el-col :span="12">
+              <el-form-item prop="contact" label="联系人" class="formItemWrapper">
+                <el-textarea v-model="formData.contact" placeholder="请输入地址" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item prop="phone" label="联系方式" class="formItemWrapper">
+                <el-textarea v-model="formData.phone" placeholder="请输入公司名称" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="20" style="margin-bottom: 20px">
+            <el-col :span="12">
+              <el-form-item prop="dataFormat" label="数据格式" class="formItemWrapper">
+                <el-textarea v-model="formData.dataFormat" placeholder="请输入部门名称" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item prop="updateTime" label="更新时间" class="formItemWrapper">
+                <el-textarea v-model="formData.updateTime" placeholder="请输入职位名称" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="20" style="margin-bottom: 20px">
+            <el-col :span="24">
+              <el-form-item
+                prop="dataTimeliness"
+                label="数据时效性"
+                class="formItemWrapper"
+                style="white-space: nowrap"
+              >
+                <el-textarea
+                  v-model="formData.dataTimeliness"
+                  placeholder="请输入职位名称"
+                  readonly
+                />
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
       </div>
     </div>
     <div class="d-card1 d-card2">
@@ -67,7 +143,7 @@
           <div class="tab"> 简单&nbsp;&nbsp;·&nbsp;&nbsp;高效&nbsp;&nbsp;·&nbsp;&nbsp;安全 </div>
         </div>
         <div class="h-right">
-          <el-button type="text" style="padding: 0; height: 14px">查看详细流程></el-button>
+          <!-- <el-button type="text" style="height: 14px; padding: 0">查看详细流程></el-button> -->
         </div>
       </div>
       <div class="h-img">
@@ -166,6 +242,8 @@
   import { Row, Col } from 'ant-design-vue';
   import { nextTick } from 'vue';
 
+  import { FormSchemaDetail } from './detail.data';
+
   export default {
     components: { Icon, Row, Col },
     data() {
@@ -186,6 +264,27 @@
         //     },
         //   ],
         // },
+        formData: {
+          phone: 'ad',
+          company: 'ad',
+          requirementCategory: 'ad',
+          publishDate: 'asd',
+          budgetAmount: 'sd',
+          contact: 'ds',
+          dataFormat: 'sa',
+          updateTime: 'as',
+          dataTimeliness: 'ds',
+        },
+        // rules: {
+        //   username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
+        //   password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
+        //   email: [{ required: true, message: '请输入邮箱', trigger: 'blur' }],
+        //   phone: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
+        //   address: [{ required: true, message: '请输入地址', trigger: 'blur' }],
+        //   company: [{ required: true, message: '请输入公司名称', trigger: 'blur' }],
+        //   department: [{ required: true, message: '请输入部门名称', trigger: 'blur' }],
+        //   jobTitle: [{ required: true, message: '请输入职位名称', trigger: 'blur' }],
+        // },
         form: {},
         typeOptions: [
           {
@@ -264,11 +363,28 @@
         ],
       };
     },
+    mounted() {
+      this.formData = {
+        ...this.formData,
+        phone: '12312413123123',
+        company: '1312312312213',
+        requirementCategory: '',
+        publishDate: '',
+        budgetAmount: '',
+        contact: '',
+        dataFormat: '',
+        updateTime: '',
+        dataTimeliness: '',
+      };
+      console.log(this.formData, '1');
+      this.$refs.form2.resetFields();
+    },
     methods: {
       handleCloseConnect() {
         this.connectVisible = false;
         this.similar = false;
       },
+
       handleSubmitC() {},
       handleOpenConnect() {
         this.connectVisible = true;
@@ -290,91 +406,107 @@
   };
 </script>
 
-<style scoped>
+<style scoped lang="scss">
   .d-detail {
-    padding-top: 30px;
     display: flex;
     flex-direction: column;
     align-items: center;
+    padding-top: 30px;
     gap: 20px;
   }
+
   .d-title {
+    width: 70%;
+    margin-bottom: 20px;
     float: left;
     color: #081546;
     font-size: 30px;
-    width: 70%;
-    margin-bottom: 20px;
   }
+
   .d-card1 {
     display: flex;
-    box-shadow: 3px 2px 15px rgba(0, 0, 0, 0.2);
-    border: 2px solid #eff1f6;
     width: 70%;
     padding: 40px;
+    border: 2px solid #eff1f6;
+    box-shadow: 3px 2px 15px rgb(0 0 0 / 20%);
+
     .d-left {
       display: flex;
       gap: 30px;
+
       .d-des {
-        flex: 1;
         display: flex;
+        flex: 1;
         flex-direction: column;
         justify-content: center;
         gap: 80px;
+
         .d-hd {
           display: flex;
           flex-direction: column;
           gap: 15px;
+
           .d-row {
             display: flex;
             gap: 15px;
           }
+
           .title {
             font-size: 20px;
             font-weight: bolder;
           }
+
           .tab {
-            font-size: 12px;
+            padding: 4px 10px;
             background-color: #fff3ef;
             color: #fe9693;
-            padding: 4px 10px;
+            font-size: 12px;
           }
         }
+
         .d-ft {
-          flex: 1;
           display: flex;
+          flex: 1;
           justify-content: space-between;
           padding-right: 10%;
+
           .ft-left {
             display: flex;
             gap: 10px;
+
             .money {
-              font-size: 22px;
-              color: #f5413f;
               display: flex;
               align-items: center;
+              color: #f5413f;
+              font-size: 22px;
             }
+
             .status {
-              font-size: 14px;
               display: flex;
               align-items: center;
               color: #f9c331;
+              font-size: 14px;
             }
           }
         }
       }
     }
+
     .d-right {
-      background-color: #f8f9fc;
       padding: 15px;
+      background-color: #f8f9fc;
+
       .dr-hd {
         display: flex;
         gap: 10px;
       }
+
       .dr-list {
         display: flex;
         flex-direction: column;
         gap: 18px;
         padding: 25px 5px;
+
         .list-item {
           display: flex;
           gap: 20px;
@@ -383,43 +515,87 @@
       }
     }
   }
+
   .d-card2 {
     flex-direction: column;
     gap: 40px;
     margin-bottom: 130px;
+
     .cd-header {
       display: flex;
-      justify-content: space-between;
       flex: 1;
+      justify-content: space-between;
+
       .h-left {
         display: flex;
         gap: 20px;
+
         .title {
           font-size: 18px;
         }
+
         .tab {
-          font-size: 14px;
           padding: 4px 8px;
           background-color: #eff1f6;
           color: #777e91;
+          font-size: 14px;
         }
       }
     }
+
     .h-img > img {
       width: 100%;
     }
   }
+
   .col-item {
     display: flex;
     gap: 10px;
+
     .item-label {
       width: 100px;
     }
   }
+
   .modal-detail {
     padding: 40px 80px;
   }
+
   .form-item {
     width: 90%;
   }
+
+  .d-card3 {
+    flex-direction: column;
+    gap: 40px;
+    margin-bottom: 0;
+
+    .cd-header {
+      display: flex;
+      flex: 1;
+      justify-content: space-between;
+
+      .h-left {
+        display: flex;
+        gap: 20px;
+
+        .title {
+          font-size: 18px;
+        }
+
+        .tab {
+          padding: 4px 8px;
+          background-color: #eff1f6;
+          color: #777e91;
+          font-size: 14px;
+        }
+      }
+    }
+  }
+
+  .formItemWrapper {
+    :deep(.el-input__inner) {
+      border: none !important;
+    }
+  }
 </style>