基础信息

src/views/resume/components/basicInfo.vue

@@ -28,7 +28,7 @@
             <span v-else class="mdi mdi-gender-female" style="color: red"></span>
           </span>
           <div class="mt-3 d-flex">
-            <div class="listBox">
+            <div class="listBox" :style="{ height: isExpand ? 'auto' : '68px' }">
               <div>
                 <span class="mdi mdi-account-outline"></span>
                 <span>{{ info.name }}</span>
@@ -53,23 +53,23 @@
                 <span class="mdi mdi-school-outline"></span>
                 <span>{{ info.edu }}</span>
               </div>
+              <div>
+                <span class="mdi mdi-school-outline"></span>
+                <span>测试收起、展开</span>
+              </div>
             </div>
-            <div>
-              <v-btn variant="text" color="primary" v-if="isExpand" @click="expand">收起</v-btn>
-              <v-btn variant="text" color="primary" v-else @click="expand">展开</v-btn>
+            <div class="ml-3">
+              <v-btn variant="text" color="primary" v-if="isExpand" @click="isExpand = false">收起</v-btn>
+              <v-btn variant="text" color="primary" v-else @click="isExpand = true">展开</v-btn>
             </div>
           </div>
-          <div class="mt-5">
+          <div class="mt-4">
             <span style="font-size: 15px;">个人画像：</span>
             <v-chip size="small" label v-for="(k, i) in welfareList.slice(0, 8)" :key="i" class="mr-2" color="primary">{{ k }}</v-chip>
           </div>
         </div>
       </div>
     </div>
-    <!-- <div class="d-flex justify-center">
-      <v-btn variant="text" color="primary" v-if="isExpand" @click="expand">收起</v-btn>
-      <v-btn variant="text" color="primary" v-else @click="expand">展开</v-btn>
-    </div> -->
   </div>
 </template>
 
@@ -79,6 +79,7 @@ import CtForm from '@/components/CtForm'
 import { ref } from 'vue';
 
 defineOptions({name: 'resume-components-basicInfo'})
+const isEdit = ref(false)
 const showIcon = ref(false)
 const isExpand = ref(false)
 // const defaultYearMonthValue = ref(getYearMonth20YearsAgo())
@@ -416,7 +417,7 @@ const expand = () => {
   display: flex;
   flex-wrap: wrap; /* 允许换行 */
   width: 100%; /* 设置容器宽度 */
-  height: 64px;
+  // height: 68px;
   overflow: hidden;
   div {
     margin-right: 50px;