人才库样式

src/views/archives/personnel/details.vue

 <template>
   <div class="app-container" style="padding: 20px 50px">
-    <div class="basic-info">
-      基本信息
-    </div>
-    <div class="submitForm">
-      <el-form :model="form" label-width="120px">
-        <el-row :gutter="80" type="flex">
-          <el-col :span="6">
-            <el-form-item label="姓名">
-              {{ form.name }}
-            </el-form-item>
-          </el-col>
-
-          <el-col :span="6">
-            <el-form-item label="证件号码">
-              {{ form.id_no }}
-            </el-form-item>
-          </el-col>
-
-          <el-col :span="6">
-            <el-form-item label="性别">
-              {{ form.sex }}
-            </el-form-item>
-          </el-col>
-        </el-row>
-        <el-row :gutter="80" type="flex">
-          <el-col :span="6">
-            <el-form-item label="年龄">
-              {{ form.age }}
-            </el-form-item>
-          </el-col>
-          <el-col :span="6">
-            <el-form-item label="籍贯">
-              {{ form.register }}
-            </el-form-item>
-          </el-col>
-          <el-col :span="6">
-            <el-form-item label="联系电话">
-              {{ form.phone_number }}
-            </el-form-item>
-          </el-col>
-        </el-row>
-        <el-row :gutter="80" type="flex">
-          <el-col :span="6">
-            <el-form-item label="在职状态">
-              {{ form.state }}
-            </el-form-item>
-          </el-col>
-        </el-row>
-      </el-form>
-    </div>
-
-    <div class="basic-info">
-      履历
-    </div>
-    <div class="submitForm timeline-container">
-      <el-timeline>
-        <el-timeline-item
-            v-for="(item, index) in records"
-            :key="index"
-            :timestamp="getTimestamp(item,index)"
-            placement="top"
-        >
-          <el-card>
+    <el-card style="margin-bottom: 20px">
+      <div class="basic-info">
+        基本信息
+      </div>
+      <div class="submitForm">
+        <el-form :model="form" label-width="120px">
+          <el-row :gutter="80" type="flex">
+            <el-col :span="6">
+              <el-form-item label="姓名">
+                {{ form.name }}
+              </el-form-item>
+            </el-col>
+
+            <el-col :span="6">
+              <el-form-item label="证件号码">
+                {{ form.id_no }}
+              </el-form-item>
+            </el-col>
+
+            <el-col :span="6">
+              <el-form-item label="性别">
+                {{ form.sex }}
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="80" type="flex">
+            <el-col :span="6">
+              <el-form-item label="年龄">
+                {{ form.age }}
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="籍贯">
+                {{ form.register }}
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="联系电话">
+                {{ form.phone_number }}
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="80" type="flex">
+            <el-col :span="6">
+              <el-form-item label="在职状态">
+                {{ form.state }}
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+      </div>
+    </el-card>
+    <el-card>
+      <div class="basic-info">
+        履历
+      </div>
+      <div class="submitForm timeline-container">
+        <el-timeline>
+          <el-timeline-item
+              v-for="(item, index) in records"
+              :key="index"
+              :timestamp="getTimestamp(item,index)"
+              placement="top"
+          >
             <el-form :model="form" label-width="120px">
               <el-row :gutter="80" type="flex">
-                <el-col :span="8">
+                <el-col :span="6">
                   <el-form-item label="所在单位">
                     {{ item.manufacturer }}
                   </el-form-item>
                 </el-col>
 
-                <el-col :span="8">
+                <el-col :span="6">
                   <el-form-item label="所属派遣公司">
                     {{ item.dispatch }}
                   </el-form-item>
                 </el-col>
 
-                <el-col :span="8">
+                <el-col :span="12">
                   <el-form-item label="所属渠道">
                     {{ item.channel }}
                   </el-form-item>
                 </el-col>
               </el-row>
               <el-row :gutter="80" type="flex">
-                <el-col :span="8">
+                <el-col :span="6">
                   <el-form-item label="岗位">
                     {{ item.post }}
                   </el-form-item>
                 </el-col>
 
-                <el-col :span="8">
+                <el-col :span="6">
                   <el-form-item label="宿舍">
                     {{ item.dormitory }}
                   </el-form-item>
                 </el-col>
 
-                <el-col :span="8">
+                <el-col :span="12">
                   <el-form-item label="车间">
                     {{ item.workshop }}
                   </el-form-item>
                 </el-col>
               </el-row>
             </el-form>
-          </el-card>
+          </el-timeline-item>
+        </el-timeline>
 
-        </el-timeline-item>
-      </el-timeline>
-
-    </div>
+      </div>
+    </el-card>
   </div>
 
 </template>
@@ -135,7 +135,7 @@ function getDetails(){
   loading.value = true;
   details({id:proxy.$route.query.id}).then(response => {
     form.value=response.data
-    records.value = response.data.record;
+    records.value = [...response.data.record,...response.data.record];
     loading.value = false;
   });
 }
@@ -159,6 +159,10 @@ function getTimestamp(item,idx){
 .submitForm{
   padding: 20px;
 }
-
+.timeline-container{
+  .el-form-item{
+    margin-bottom: 0;
+  }
+}
 
 </style>