基础信息左右间隔

src/views/resume/components/basicInfo.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="resume-box d-flex align-center">
+    <!-- <div class="resume-title">{{ $t('resume.basicInfo') }}</div> -->
     <!-- 头像 -->
     <div class="avatarsBox" @mouseover="showIcon = true" @mouseleave="showIcon = false">
       <v-img class="img" cover src="https://cdn.vuetifyjs.com/images/john.jpg"></v-img>
@@ -7,13 +8,13 @@
     </div>
     <!-- 基础信息 -->
     <div style="flex: 1;" class="mr-8 mt-5">
+      <CtForm :items="items" style="width: 100%;">
+        <template v-slot:phoneNum>
+          <v-btn variant="text" class="ml-2" color="primary">更改</v-btn>
+        </template>
+      </CtForm>
       <div class="d-flex justify-space-between">
-        <div v-for="(val, index) in itemsArr" :key="index" style="width: calc(50% - 12px);">
-          <CtForm :items="val.items" style="width: 100%;">
-            <template v-slot:phoneNum>
-              <v-btn variant="text" class="ml-2" color="primary">更改</v-btn>
-            </template>
-          </CtForm>
+        <div v-for="(val, index) in items" :key="index" style="width: calc(50% - 12px);">
         </div>
       </div>
       <div class="d-flex justify-center">
@@ -29,7 +30,7 @@ import CtForm from '@/components/CtForm'
 // import { getYearMonth20YearsAgo, generateYearMonthDataArray } from './../../utils/generateYearMonthData'
 import { ref } from 'vue';
 
-defineOptions({name: 'resume-components-right-basicInfo'})
+defineOptions({name: 'resume-components-basicInfo'})
 const showIcon = ref(false)
 const isExpand = ref(false)
 // const defaultYearMonthValue = ref(getYearMonth20YearsAgo())
@@ -42,6 +43,7 @@ const items = ref({
       value: '陈芊芊',
       default: null,
       label: '姓名 *',
+      col: 6,
       outlined: true,
       rules: [v => !!v || '请输入姓名']
     },
@@ -51,6 +53,7 @@ const items = ref({
       value: true,
       default: true,
       label: '性别',
+      col: 6,
       width: 70,
       items: [{ label: '男', value: true }, { label: '女', value: false }],
     },
@@ -60,6 +63,7 @@ const items = ref({
       value: '2021年05月03日',
       default: null,
       label: '出生日期',
+      col: 6,
       outlined: true,
       disabled: true,
     },
@@ -69,6 +73,7 @@ const items = ref({
     //   value: defaultYearMonthValue,
     //   default: null,
     //   label: '请选择出生年月 *',
+    //   col: 6,
     //   outlined: true,
     //   // dense: true,
     //   itemText: 'label',
@@ -82,6 +87,7 @@ const items = ref({
       value: '18466958635',
       default: null,
       label: '电话号码',
+      col: 6,
       outlined: true,
       disabled: true,
       slotName: 'phoneNum',
@@ -93,6 +99,7 @@ const items = ref({
       value: '01111',
       default: null,
       label: '所在城市 *',
+      col: 6,
       outlined: true,
       itemText: 'label',
       itemValue: 'value',
@@ -105,6 +112,7 @@ const items = ref({
       value: '69852936@qq.com',
       default: null,
       label: '常用邮箱',
+      col: 6,
       outlined: true,
       rules: [v => !!v || '请输入常用邮箱']
     },
@@ -114,6 +122,7 @@ const items = ref({
       value: '4',
       default: null,
       label: '工作经验 *',
+      col: 6,
       outlined: true,
       itemText: 'label',
       itemValue: 'value',
@@ -167,6 +176,7 @@ const items = ref({
       value: '4',
       default: null,
       label: '最高学历 *',
+      col: 6,
       outlined: true,
       itemText: 'label',
       itemValue: 'value',
@@ -216,16 +226,9 @@ const items = ref({
     },
   ]
 })
-
-const itemsArr = ref([])
-const getItemsArr = () => {
-  // arr = arr ? arr : items.value
-  itemsArr.value = [
-    { items: { options: [ ...items.value.options.filter((_, index) => (index + 2) % 2 === 0) ] } },
-    { items: { options: [ ...items.value.options.filter((_, index) => (index + 2) % 2 === 1) ] } }
-  ]
-}
-getItemsArr()
+items.value.options.forEach((_e, index) => {
+  if ((index + 2) % 2 === 0) _e.flexStyle = 'mr-3'
+})
 
 const expand = () => {
   if (isExpand.value) {
@@ -238,6 +241,7 @@ const expand = () => {
         value: '0',
         default: null,
         label: '求职类型 *',
+        col: 6,
         outlined: true,
         itemText: 'label',
         itemValue: 'value',
@@ -272,6 +276,7 @@ const expand = () => {
         value: '5',
         default: null,
         label: '薪资要求 *',
+        col: 6,
         outlined: true,
         itemText: 'label',
         itemValue: 'value',
@@ -321,6 +326,7 @@ const expand = () => {
         value: '酒店经理',
         default: null,
         label: '期望职位',
+        col: 6,
         outlined: true
       },
       {
@@ -329,12 +335,15 @@ const expand = () => {
         value: '行业不限',
         default: null,
         label: '期望行业',
+        col: 6,
         outlined: true
       }
     ]
     items.value.options = [...items.value.options, ...expandArr]
   }
-  getItemsArr()
+  items.value.options.forEach((_e, index) => {
+    if ((index + 2) % 2 === 0) _e.flexStyle = 'mr-3'
+  })
   isExpand.value = !isExpand.value
 }