Merge branch 'dev' of https://git.citupro.com/zhengnaiwen_citu/menduner into dev

src/views/Home/personal/components/jobTypeCard.vue

@@ -1,34 +1,41 @@
 <template>
-  <div class="d-flex" :style="{ 'z-index': props.search ? 9999: '' }" @mouseleave="handleMouseLeave">
-    <v-card>
-      <div class="leftCard" :class="props.search ? 'searchCard' : 'cardBox'">
-        <div v-for="(item, index) in items" :key="index" @mouseover="handleMouseOver(item, index)" :class="{'leftIndexAct': index === leftIndex}">
-          <div class="rowItem d-flex justify-space-between align-center">
-            <div v-if="!search">
-              <span>h3</span>
-              <span>h5</span>
+  <div class="d-flex" :style="{ 'z-index': isFloat ? 9999: '' }" :class="isFloat ? 'floatCard' : 'labelCard'" @mouseleave="handleMouseLeave">
+    <v-card class="card">
+      <div class="leftCard">
+        <div
+          class="leftCardItem" :class="{'leftIndexAct': index === leftIndex, 'elevation-5': (index === leftIndex && !isFloat)}"
+          v-for="(item, index) in items" :key="index"
+          @mouseover="handleMouseOver(item, index)"
+        >
+          <div class="rowItem d-flex">
+            <span class="categoryName">{{ item.title }}</span>
+            <div class="jobItemsBox" v-if="!isFloat && item.children?.length && item.children[0]?.data?.length">
+              <div class="outerCovering">
+                <div class="jobItems" v-for="(val, index1) in item.children[0].data" :key="index1+'index1'">{{ val }}</div>
+              </div>
             </div>
-            <span v-else>{{ item.title }}</span>
             <span class="mdi mdi-menu-right"></span>
           </div>
         </div>
       </div>
     </v-card>
-    <v-card v-if="card2Data.show" class="ml-1">
-      <div :class="props.search ? 'searchCard2' : 'cardBox2'">
-        <div class="title1">{{ card2Data.data.title }}</div>
-
+    <v-card v-if="card2Data.show" class="card rightCardBox ml-1">
+      <div class="rightCard">
+        <div class="categoryName">{{ card2Data.data.title }}</div>
         <div v-for="(item, index) in card2Data.data.children" :key="index+'index'">
           <v-divider v-if="index" class="divider"></v-divider>
           <div class="rowItem d-flex">
-            <div class="title2">{{ item.title }}</div>
+            <div class="categoryName2">{{ item.title }}</div>
             <div class="rightContent">
-              <div class="title3" v-for="(val, index1) in item.data" :key="index1+'index1'">{{ val }}</div>
+              <div class="jobItem" v-for="(val, index1) in item.data" :key="index1+'index1'">{{ val }}</div>
             </div>
           </div>
         </div>
       </div>
     </v-card>
+    <v-card v-if="!isFloat && !card2Data.show" class="card ml-1">
+      <div class="rightCard rightCardBox" style="color: red;">轮播</div>
+    </v-card>
   </div>
 </template>
 
@@ -37,24 +44,18 @@ import { reactive, ref } from 'vue';
 
 defineOptions({ name:'personal-jobTypeCard'})
 const props = defineProps({
-  search: {
+  float: { // 搜索浮动
     type: Boolean,
     default: false
   },
-  height: {
-    type: [String, Number],
-    default: 400
-  },
-  width: {
-    type: [String, Number],
-    default: 400
-  }
 })
+const isFloat = props.float
 
 const items = [
   { title: '互联网/Al',
     value: '1',
     children: [
+      { title: '后端开发', data: ['Java1','C/C++','Java','Java','Java','Java1234156164146146'] },
       { title: '后端开发', data: ['Java1','C/C++','Java','Java','语音/视频/图形开发','Java','Python','Java','Node.js', '语音/视频/图形开发','Java','Python','Java', '其他后端开发'] },
       { title: '前端/移动开发移动开发移动开发', data: ['Java2','C/C++','Java','Java','语音/视频/图形开发','Java','Python','Java','Node.js', '语音/视频/图形开发','Java','Python','Java', '其他后端开发'] },
       { title: '测试', data: ['Java75247','C/C++','Java','Java','语音/视频/图形开发','Java','Python','Java','Node.js', '语音/视频/图形开发','Java','Python','Java', '其他后端开发'] },
@@ -71,290 +72,53 @@ const items = [
   },
   { title: '电子/电气/通信',
     value: '2',
-    children: [
-      { title: '后端开发', data: ['Java','C/C++','Java','Java','语音/视频/图形开发','Java','Python','Java','Node.js', '语音/视频/图形开发','Java','Python','Java', '其他后端开发'] },
-    ]
   },
   { title: '产品',
     value: '3',
     children: [
-      { title: '后端开发', data: ['Java','C/C++','Java','Java','语音/视频/图形开发','Java','Python','Java','Node.js', '语音/视频/图形开发','Java','Python','Java', '其他后端开发'] },
-    ]
-  },
-  { title: '客服/运营',
-    value: '4',
-    children: [
-      { title: '后端开发', data: ['Java','C/C++','Java','Java','语音/视频/图形开发','Java','Python','Java','Node.js', '语音/视频/图形开发','Java','Python','Java', '其他后端开发'] },
-    ]
-  },
-  { title: '客服/运营',
-    value: '4',
-    children: [
-      { title: '后端开发', data: ['Java','C/C++','Java','Java','语音/视频/图形开发','Java','Python','Java','Node.js', '语音/视频/图形开发','Java','Python','Java', '其他后端开发'] },
-    ]
-  },
-  { title: '客服/运营',
-    value: '4',
-    children: [
-      { title: '后端开发', data: ['Java','C/C++','Java','Java','语音/视频/图形开发','Java','Python','Java','Node.js', '语音/视频/图形开发','Java','Python','Java', '其他后端开发'] },
-    ]
-  },
-  { title: '客服/运营',
-    value: '4',
-    children: [
-      { title: '后端开发', data: ['Java','C/C++','Java','Java','语音/视频/图形开发','Java','Python','Java','Node.js', '语音/视频/图形开发','Java','Python','Java', '其他后端开发'] },
-    ]
-  },
-  { title: '客服/运营',
-    value: '4',
-    children: [
-      { title: '后端开发', data: ['Java','C/C++','Java','Java','语音/视频/图形开发','Java','Python','Java','Node.js', '语音/视频/图形开发','Java','Python','Java', '其他后端开发'] },
-    ]
-  },
-  { title: '客服/运营',
-    value: '4',
-    children: [
-      { title: '后端开发', data: ['Java','C/C++','Java','Java','语音/视频/图形开发','Java','Python','Java','Node.js', '语音/视频/图形开发','Java','Python','Java', '其他后端开发'] },
-    ]
-  },
-  { title: '客服/运营',
-    value: '4',
-    children: [
-      { title: '后端开发', data: ['Java','C/C++','Java','Java','语音/视频/图形开发','Java','Python','Java','Node.js', '语音/视频/图形开发','Java','Python','Java', '其他后端开发'] },
-    ]
-  },
-  { title: '客服/运营',
-    value: '4',
-    children: [
-      { title: '后端开发', data: ['Java','C/C++','Java','Java','语音/视频/图形开发','Java','Python','Java','Node.js', '语音/视频/图形开发','Java','Python','Java', '其他后端开发'] },
-    ]
-  },
-  { title: '客服/运营',
-    value: '4',
-    children: [
-      { title: '后端开发', data: ['Java','C/C++','Java','Java','语音/视频/图形开发','Java','Python','Java','Node.js', '语音/视频/图形开发','Java','Python','Java', '其他后端开发'] },
-    ]
-  },
-  { title: '客服/运营',
-    value: '4',
-    children: [
-      { title: '后端开发', data: ['Java','C/C++','Java','Java','语音/视频/图形开发','Java','Python','Java','Node.js', '语音/视频/图形开发','Java','Python','Java', '其他后端开发'] },
+      { title: '后端开发', data: ['Java3'] }
     ]
   },
-  { title: '客服/运营',
-    value: '4',
-    children: [
-      { title: '后端开发', data: ['Java','C/C++','Java','Java','语音/视频/图形开发','Java','Python','Java','Node.js', '语音/视频/图形开发','Java','Python','Java', '其他后端开发'] },
-    ]
-  },
-  { title: '客服/运营',
-    value: '4',
-    children: [
-      { title: '后端开发', data: ['Java','C/C++','Java','Java','语音/视频/图形开发','Java','Python','Java','Node.js', '语音/视频/图形开发','Java','Python','Java', '其他后端开发'] },
-    ]
-  },
-  { title: '客服/运营',
-    value: '4',
-    children: [
-      { title: '后端开发', data: ['Java','C/C++','Java','Java','语音/视频/图形开发','Java','Python','Java','Node.js', '语音/视频/图形开发','Java','Python','Java', '其他后端开发'] },
-    ]
-  },
-  { title: '客服/运营',
-    value: '4',
-    children: [
-      { title: '后端开发', data: ['Java','C/C++','Java','Java','语音/视频/图形开发','Java','Python','Java','Node.js', '语音/视频/图形开发','Java','Python','Java', '其他后端开发'] },
-    ]
-  },
-  { title: '客服/运营',
-    value: '4',
-    children: [
-      { title: '后端开发', data: ['Java','C/C++','Java','Java','语音/视频/图形开发','Java','Python','Java','Node.js', '语音/视频/图形开发','Java','Python','Java', '其他后端开发'] },
-    ]
-  },
-  { title: '客服/运营',
-    value: '4',
-    children: [
-      { title: '后端开发', data: ['Java','C/C++','Java','Java','语音/视频/图形开发','Java','Python','Java','Node.js', '语音/视频/图形开发','Java','Python','Java', '其他后端开发'] },
-    ]
-  },
-  { title: '客服/运营',
-    value: '4',
-    children: [
-      { title: '后端开发', data: ['Java','C/C++','Java','Java','语音/视频/图形开发','Java','Python','Java','Node.js', '语音/视频/图形开发','Java','Python','Java', '其他后端开发'] },
-    ]
-  },
-  { title: '客服/运营',
-    value: '4',
-    children: [
-      { title: '后端开发', data: ['Java','C/C++','Java','Java','语音/视频/图形开发','Java','Python','Java','Node.js', '语音/视频/图形开发','Java','Python','Java', '其他后端开发'] },
-    ]
-  },
-  { title: '客服/运营',
-    value: '4',
-    children: [
-      { title: '后端开发', data: ['Java','C/C++','Java','Java','语音/视频/图形开发','Java','Python','Java','Node.js', '语音/视频/图形开发','Java','Python','Java', '其他后端开发'] },
-    ]
-  },
-  { title: '客服/运营',
-    value: '4',
-    children: [
-      { title: '后端开发', data: ['Java','C/C++','Java','Java','语音/视频/图形开发','Java','Python','Java','Node.js', '语音/视频/图形开发','Java','Python','Java', '其他后端开发'] },
-    ]
-  },
-  { title: '客服/运营',
-    value: '4',
-    children: [
-      { title: '后端开发', data: ['Java','C/C++','Java','Java','语音/视频/图形开发','Java','Python','Java','Node.js', '语音/视频/图形开发','Java','Python','Java', '其他后端开发'] },
-    ]
-  },
-  { title: '客服/运营',
-    value: '4',
-    children: [
-      { title: '后端开发', data: ['Java','C/C++','Java','Java','语音/视频/图形开发','Java','Python','Java','Node.js', '语音/视频/图形开发','Java','Python','Java', '其他后端开发'] },
-    ]
-  },
-  { title: '客服/运营',
-    value: '4',
-    children: [
-      { title: '后端开发', data: ['Java','C/C++','Java','Java','语音/视频/图形开发','Java','Python','Java','Node.js', '语音/视频/图形开发','Java','Python','Java', '其他后端开发'] },
-    ]
-  },
-  { title: '客服/运营',
-    value: '4',
-    children: [
-      { title: '后端开发', data: ['Java','C/C++','Java','Java','语音/视频/图形开发','Java','Python','Java','Node.js', '语音/视频/图形开发','Java','Python','Java', '其他后端开发'] },
-    ]
-  },
-  { title: '客服/运营',
-    value: '4',
-    children: [
-      { title: '后端开发', data: ['Java','C/C++','Java','Java','语音/视频/图形开发','Java','Python','Java','Node.js', '语音/视频/图形开发','Java','Python','Java', '其他后端开发'] },
-    ]
-  },
-  { title: '客服/运营',
-    value: '4',
-    children: [
-      { title: '后端开发', data: ['Java','C/C++','Java','Java','语音/视频/图形开发','Java','Python','Java','Node.js', '语音/视频/图形开发','Java','Python','Java', '其他后端开发'] },
-    ]
-  },
-  { title: '客服/运营',
-    value: '4',
-    children: [
-      { title: '后端开发', data: ['Java','C/C++','Java','Java','语音/视频/图形开发','Java','Python','Java','Node.js', '语音/视频/图形开发','Java','Python','Java', '其他后端开发'] },
-    ]
-  },
-  { title: '客服/运营',
-    value: '4',
-    children: [
-      { title: '后端开发', data: ['Java','C/C++','Java','Java','语音/视频/图形开发','Java','Python','Java','Node.js', '语音/视频/图形开发','Java','Python','Java', '其他后端开发'] },
-    ]
-  },
-  { title: '客服/运营',
-    value: '4',
-    children: [
-      { title: '后端开发', data: ['Java','C/C++','Java','Java','语音/视频/图形开发','Java','Python','Java','Node.js', '语音/视频/图形开发','Java','Python','Java', '其他后端开发'] },
-    ]
-  },
-  { title: '客服/运营',
-    value: '4',
-    children: [
-      { title: '后端开发', data: ['Java','C/C++','Java','Java','语音/视频/图形开发','Java','Python','Java','Node.js', '语音/视频/图形开发','Java','Python','Java', '其他后端开发'] },
-    ]
-  },
-  { title: '客服/运营',
-    value: '4',
-    children: [
-      { title: '后端开发', data: ['Java','C/C++','Java','Java','语音/视频/图形开发','Java','Python','Java','Node.js', '语音/视频/图形开发','Java','Python','Java', '其他后端开发'] },
-    ]
-  },
-  { title: '客服/运营',
-    value: '4',
-    children: [
-      { title: '后端开发', data: ['Java','C/C++','Java','Java','语音/视频/图形开发','Java','Python','Java','Node.js', '语音/视频/图形开发','Java','Python','Java', '其他后端开发'] },
-    ]
-  },
-  { title: '客服/运营',
-    value: '4',
-    children: [
-      { title: '后端开发', data: ['Java','C/C++','Java','Java','语音/视频/图形开发','Java','Python','Java','Node.js', '语音/视频/图形开发','Java','Python','Java', '其他后端开发'] },
-    ]
-  },
-  { title: '客服/运营',
-    value: '4',
-    children: [
-      { title: '后端开发', data: ['Java','C/C++','Java','Java','语音/视频/图形开发','Java','Python','Java','Node.js', '语音/视频/图形开发','Java','Python','Java', '其他后端开发'] },
-    ]
-  },
-  { title: '客服/运营',
-    value: '4',
-    children: [
-      { title: '后端开发', data: ['Java','C/C++','Java','Java','语音/视频/图形开发','Java','Python','Java','Node.js', '语音/视频/图形开发','Java','Python','Java', '其他后端开发'] },
-    ]
-  },
-  { title: '客服/运营',
-    value: '4',
-    children: [
-      { title: '后端开发', data: ['Java','C/C++','Java','Java','语音/视频/图形开发','Java','Python','Java','Node.js', '语音/视频/图形开发','Java','Python','Java', '其他后端开发'] },
-    ]
-  },
-  { title: '客服/运营',
-    value: '4',
-    children: [
-      { title: '后端开发', data: ['Java','C/C++','Java','Java','语音/视频/图形开发','Java','Python','Java','Node.js', '语音/视频/图形开发','Java','Python','Java', '其他后端开发'] },
-    ]
-  },
-  { title: '客服/运营',
-    value: '4',
-    children: [
-      { title: '后端开发', data: ['Java','C/C++','Java','Java','语音/视频/图形开发','Java','Python','Java','Node.js', '语音/视频/图形开发','Java','Python','Java', '其他后端开发'] },
-    ]
-  },
-  { title: '客服/运营',
-    value: '4',
-    children: [
-      { title: '后端开发', data: ['Java','C/C++','Java','Java','语音/视频/图形开发','Java','Python','Java','Node.js', '语音/视频/图形开发','Java','Python','Java', '其他后端开发'] },
-    ]
-  },
-  { title: '客服/运营',
-    value: '4',
+  { title: '互联网/Al',
+    value: '3',
     children: [
-      { title: '后端开发', data: ['Java','C/C++','Java','Java','语音/视频/图形开发','Java','Python','Java','Node.js', '语音/视频/图形开发','Java','Python','Java', '其他后端开发'] },
+      { title: '后端开发', data: ['Java3'] }
     ]
   },
-  { title: '客服/运营',
-    value: '4',
+  { title: '产品',
+    value: '3',
     children: [
-      { title: '后端开发', data: ['Java','C/C++','Java','Java','语音/视频/图形开发','Java','Python','Java','Node.js', '语音/视频/图形开发','Java','Python','Java', '其他后端开发'] },
+      { title: '后端开发', data: ['Java3'] }
     ]
   },
   { title: '客服/运营',
     value: '4',
     children: [
-      { title: '后端开发', data: ['Java','C/C++','Java','Java','语音/视频/图形开发','Java','Python','Java','Node.js', '语音/视频/图形开发','Java','Python','Java', '其他后端开发'] },
+      { title: '后端开发', data: ['Python','PHP','Python','C#','.NET','GIS工程师','区块链工程师','测试','PHP','Python','C#','.NET','GIS工程师','区块链工程师','测试','PHP','Python','C#','.NET','GIS工程师','区块链工程师','测试', 'Python','C#','.NET'] },
     ]
   },
   { title: '客服/运营',
     value: '4',
     children: [
-      { title: '后端开发', data: ['Java','C/C++','Java','Java','语音/视频/图形开发','Java','Python','Java','Node.js', '语音/视频/图形开发','Java','Python','Java', '其他后端开发'] },
+      { title: '后端开发', data: ['Python','PHP','Python','C#','.NET','GIS工程师','区块链工程师','测试', 'Python','C#','.NET'] },
     ]
   },
   { title: '客服/运营',
     value: '4',
     children: [
-      { title: '后端开发', data: ['Java','C/C++','Java','Java','语音/视频/图形开发','Java','Python','Java','Node.js', '语音/视频/图形开发','Java','Python','Java', '其他后端开发'] },
+      { title: '后端开发', data: ['Python','PHP','Python','C#','.NET','GIS工程师','区块链工程师','测试', 'Python','C#','.NET'] },
     ]
   },
   { title: '客服/运营',
     value: '4',
     children: [
-      { title: '后端开发', data: ['Java','C/C++','Java','Java','语音/视频/图形开发','Java','Python','Java','Node.js', '语音/视频/图形开发','Java','Python','Java', '其他后端开发'] },
+      { title: '后端开发', data: ['Python','PHP','Python','C#','.NET','GIS工程师','区块链工程师','测试', 'Python','C#','.NET'] },
     ]
   },
   { title: '客服/运营',
     value: '4',
     children: [
-      { title: '后端开发', data: ['Java','C/C++','Java','Java','语音/视频/图形开发','Java','Python','Java','Node.js', '语音/视频/图形开发','Java','Python','Java', '其他后端开发'] },
+      { title: '后端开发', data: ['Python','PHP','Python','C#','.NET','GIS工程师','区块链工程师','测试', 'Python','C#','.NET'] },
     ]
   },
 ]
@@ -369,54 +133,138 @@ const handleMouseOver = (val, index) => { // 鼠标移入
   card2Data.show = true
 }
 const handleMouseLeave = () => { // 鼠标移出
-  card2Data.show = false
-  // card2Data.show = true
+  card2Data.show = true // true false
+  leftIndex.value = null
 }
+// defineExpose({
+//   handleMouseLeave
+// })
 
 </script>
 
 <style lang="scss" scoped>
-.leftIndexAct { color: var(--v-primary-base); }
-.searchCard {
-  height: 242px;
-  width: 172px;
-  margin: 4px 0;
-  overflow-y: auto;
-  div {
-    height: 36px;
-    line-height: 36px;
-    padding: 0 4px 0 6px;
-    cursor: pointer;
-    &:hover {
-      color: var(--v-primary-base);
-      background-color: #f8f8f8;
+.floatCard {
+  .leftIndexAct { color: var(--v-primary-base); }
+  .leftCard {
+    height: 242px;
+    width: 172px;
+    margin: 4px 0;
+    overflow-y: auto;
+    .leftCardItem {
+      height: 36px;
+      line-height: 36px;
+      padding: 0 16px;
+      cursor: pointer;
+      &:hover {
+        color: var(--v-primary-base);
+        background-color: #f8f8f8;
+      }
+      .categoryName { font-size: 14px; }
+    }
+    .rowItem { justify-content: space-between; }
+  }
+  .rightCard {
+    height: 242px;
+    width: 525px;
+    margin: 4px 0;
+    padding: 0 16px;
+    overflow-y: auto;
+    .categoryName { font-size: 16px; line-height: 28px; margin-top: 6px;}
+    .categoryName2 { font-size: 14px; color: #666666; width: 100px; margin-right: 4px;}
+    .jobItem { font-size: 14px; color: #333333;}
+    .rowItem {
+      padding: 8px 0;
+    }
+    .divider {
+      margin-left: 100px;
+    }
+    .rightContent {
+      flex: 1;
+      div {
+        margin: 2px 4px;
+        float: left;
+        cursor: pointer;
+        color: #333333;
+        &:hover {
+          color: var(--v-primary-base);
+        }
+      }
     }
   }
 }
-.searchCard2 {
-  height: 242px;
-  width: 525px;
-  margin: 4px 0;
-  padding: 0 12px;
-  overflow-y: auto;
-  .title1 { font-size: 16px; line-height: 40px; margin-top: 6px;}
-  .title2 { font-size: 14px; color: #666666; width: 100px; margin-right: 4px;}
-  .title3 { font-size: 14px; color: #333333;}
-  .rowItem {
-    padding: 8px 0;
+.labelCard {
+  width: 100%;
+  .card { border-radius: 12px; }
+  .leftIndexAct {
+    height: 48px;
+    margin: 0 4px;
+    border-radius: 12px;
+    // background-color: var(--v-primary-base);
   }
-  .divider {
-    margin-left: 100px;
+  justify-content: center; // 后面的flex会继承
+  .leftCard {
+    height: 384px;
+    width: 380px;
+    // min-width: 380px;
+    // max-width: 380px;
+    margin: 4px 0;
+    overflow-x: hidden;
+    overflow-y: auto;
+    .leftCardItem {
+      height: 42px;
+      line-height: 42px;
+      padding: 0 16px;
+      .title { font-size: 14px; }
+      .mdi-menu-right { font-size: 20px; }
+    }
+    .jobItemsBox {
+      flex: 1;
+      padding:0 8px;
+      .outerCovering {
+        display: flex;
+        flex-wrap: wrap; /* 允许换行 */
+        width: 100%; /* 设置容器宽度 */
+        height: 42px;
+        overflow: hidden;
+        // border: 1px solid red; /* 可视化边界 */
+        .jobItems {
+          font-size: 14px;
+          margin-left: 12px;
+          cursor: pointer;
+          &:hover {
+            color: var(--v-primary-base);
+            // background-color: #f8f8f8;
+          }
+        }
+      }
+    }
   }
-  .rightContent {
-    flex: 1;
-    div {
-      margin: 2px 4px;
-      float: left;
-      cursor: pointer;
-      color: #333333;
-      &:hover {
-        color: var(--v-primary-base);
+  .rightCardBox { flex: 1; }
+  .rightCard {
+    height: 340px;
+    min-width: 786px;
+    margin: 4px 0;
+    padding: 0 16px;
+    overflow-y: auto;
+    .categoryName { font-size: 16px; line-height: 28px; margin-top: 6px; color: var(--v-primary-base)}
+    .categoryName2 { font-size: 14px; color: #666666; width: 100px; margin-right: 4px;}
+    .jobItem { font-size: 14px; color: #333333;}
+    .rowItem {
+      padding: 8px 0;
+    }
+    .divider {
+      margin-left: 100px;
+    }
+    .rightContent {
+      flex: 1;
+      div {
+        margin: 2px 4px;
+        float: left;
+        cursor: pointer;
+        color: #333333;
+        &:hover {
+          color: var(--v-primary-base);
+        }
       }
     }
   }

src/views/Home/personal/components/search.vue

@@ -5,7 +5,7 @@
         <span>职位类型</span>
         <span class="mdi mdi-chevron-down px-2" style="font-size: 18px;"></span>
       </div>
-      <jobTypeCard class="jobTypeCardBox" v-if="drawer" search @click.stop=""></jobTypeCard>
+      <jobTypeCard class="jobTypeCardBox" v-if="drawer" float @click.stop=""></jobTypeCard>
     </div>
     <v-text-field
       v-model="value"

src/views/Home/personal/index.vue

@@ -4,6 +4,7 @@
     <headSearch></headSearch>
     <hotJobs></hotJobs>
     <div class="default-width mt-3">
+      <jobTypeCard class="mb-3"></jobTypeCard>
       <hotPromotedPositions></hotPromotedPositions>
       <PopularEnterprises class="mt-10"></PopularEnterprises>
     </div>
@@ -14,6 +15,7 @@
 import headCarousel from './components/headCarousel.vue'
 import headSearch from './components/search.vue'
 import hotJobs from './components/hotJobs.vue'
+import jobTypeCard from './components/jobTypeCard.vue'
 import hotPromotedPositions from './components/hotPromotedPositions.vue'
 import PopularEnterprises from './components/popularEnterprises.vue'
 defineOptions({ name:'personal-index'})