职位

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

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <v-carousel height="80" show-arrows="hover" hide-delimiters cycle>
+    <v-carousel height="80" :show-arrows="false" hide-delimiters cycle>
       <!-- <template v-slot:prev="{ props }">
         <v-btn
           tonal
@@ -22,26 +22,31 @@
         ></v-btn>
       </template> -->
       <v-carousel-item
+        src="@/assets/headerBg.png"
+        cover
+      >
+      </v-carousel-item>
+      <!-- <v-carousel-item
         v-for="(item,i) in items"
         :key="i"
         :src="item.src"
         cover
-      ></v-carousel-item>
+      ></v-carousel-item> -->
     </v-carousel>
   </div>
 </template>
 
 <script setup>
-import { ref } from 'vue'
+// import { ref } from 'vue'
 
 defineOptions({ name:'personal-headCarousel'})
 
-const items = ref([
-  { src: 'https://cdn.vuetifyjs.com/images/carousel/squirrel.jpg', },
-  { src: 'https://cdn.vuetifyjs.com/images/carousel/sky.jpg', },
-  { src: 'https://cdn.vuetifyjs.com/images/carousel/bird.jpg', },
-  { src: 'https://cdn.vuetifyjs.com/images/carousel/planet.jpg', },
-])
+// const items = ref([
+//   // { src: 'https://cdn.vuetifyjs.com/images/carousel/squirrel.jpg', },
+//   // { src: 'https://cdn.vuetifyjs.com/images/carousel/sky.jpg', },
+//   // { src: 'https://cdn.vuetifyjs.com/images/carousel/bird.jpg', },
+//   { src: 'https://cdn.vuetifyjs.com/images/carousel/planet.jpg', },
+// ])
 </script>
 
 <style lang="scss" scoped>

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

@@ -1,22 +1,43 @@
 <template>
-  <div>
-    <v-navigation-drawer
-      v-model="value"
-      right absolute floating app
-      @change="drawerChange"
-    >
-      <v-list density="compact" nav>
-        <v-list-item prepend-icon="mdi-view-dashboard" title="Home" value="home"></v-list-item>
-        <v-list-item prepend-icon="mdi-forum" title="About" value="about"></v-list-item>
-      </v-list>
-    </v-navigation-drawer>
+  <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>
+            <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>
+
+        <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="rightContent">
+              <div class="title3" v-for="(val, index1) in item.data" :key="index1+'index1'">{{ val }}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </v-card>
   </div>
 </template>
 
 <script setup>
+import { reactive, ref } from 'vue';
+
 defineOptions({ name:'personal-jobTypeCard'})
 const props = defineProps({
-  value: {
+  search: {
     type: Boolean,
     default: false
   },
@@ -29,15 +50,389 @@ const props = defineProps({
     default: 400
   }
 })
-const value = props.value
-const emit = defineEmits(['update:modelValue'])
-const drawerChange = (val) => {
-  emit('update:modelValue', value)
-  console.log('val', val)
-  console.log('value', value)
-}
 
+const items = [
+  { title: '互联网/Al',
+    value: '1',
+    children: [
+      { 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', '其他后端开发'] },
+      { title: '前端/移动开发', data: ['Java3','C/C++','Java','Java','语音/视频/图形开发','Java','Python','Java','Node.js', '语音/视频/图形开发','Java','Python','Java', '其他后端开发'] },
+      { title: '测试', data: ['Java3'] },
+      { title: '测试', data: ['Java3'] },
+      { title: '测试', data: ['Java3'] },
+      { title: '测试', data: ['Java5757','C/C++','Java','Java','语音/视频/图形开发','Java','Python','Java','Node.js', '语音/视频/图形开发','Java','Python','Java', '其他后端开发'] },
+      { title: '前端/移动开发', data: ['Javafedfeff','C/C++','Java','Java','语音/视频/图形开发','Java','Python','Java','Node.js', '语音/视频/图形开发','Java','Python','Java', '其他后端开发'] },
+      { title: '测试', data: ['Java85683','C/C++','Java','Java','语音/视频/图形开发','Java','Python','Java','Node.js', '语音/视频/图形开发','Java','Python','Java', '其他后端开发'] },
+      { title: '前端/移动开发', data: ['Javasd','C/C++','Java','Java','语音/视频/图形开发','Java','Python','Java','Node.js', '语音/视频/图形开发','Java','Python','Java', '其他后端开发'] },
+      { title: '测试', data: ['Java;i,lu','C/C++','Java','Java','语音/视频/图形开发','Java','Python','Java','Node.js', '语音/视频/图形开发','Java','Python','Java', '其他后端开发'] },
+    ]
+  },
+  { 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: '客服/运营',
+    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',
+    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', '其他后端开发'] },
+    ]
+  },
+]
+const leftIndex = ref(null)
+
+// card2
+const card2Data = reactive({ show: false, data: {} })
+
+const handleMouseOver = (val, index) => { // 鼠标移入
+  leftIndex.value = index
+  card2Data.data = val
+  card2Data.show = true
+}
+const handleMouseLeave = () => { // 鼠标移出
+  // card2Data.show = false
+  card2Data.show = true
+}
 </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;
+    }
+  }
+}
+.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;
+  }
+  .divider {
+    margin-left: 100px;
+  }
+  .rightContent {
+    flex: 1;
+    div {
+      margin: 2px 4px;
+      float: left;
+      cursor: pointer;
+      color: #333333;
+      &:hover {
+        color: var(--v-primary-base);
+      }
+    }
+  }
+}
+::v-deep {
+  ::-webkit-scrollbar {
+    width: 4px;
+    height: 10px;
+    // display: none;
+  }
+  ::-webkit-scrollbar-thumb, .temporaryAdd ::-webkit-scrollbar-thumb, .details_edit ::-webkit-scrollbar-thumb {
+    // 滚动条-颜色
+    background: #c3c3c379;
+  }
+  ::-webkit-scrollbar-track, .temporaryAdd ::-webkit-scrollbar-track, .details_edit ::-webkit-scrollbar-track {
+    // 滚动条-底色
+    background: #e5e5e58f;
+  }
+}
 </style>

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

@@ -1,14 +1,12 @@
 <template>
   <div class="search d-flex align-center">
     <div style="position: relative;">
-      <div class="jobBox d-flex pl-5" :class="{'drawer': drawer}" @click="showJobTypeCard">
+      <div class="jobBox d-flex pl-5" :class="{'drawer': drawer}" @click="drawer = !drawer">
         <span>职位类型</span>
         <span class="mdi mdi-chevron-down px-2" style="font-size: 18px;"></span>
       </div>
       <!-- <jobTypeCard v-if="drawer" style="position: absolute; top: 42px; left: 250px; height: 300px; width: 250px;"></jobTypeCard> -->
-      <!-- <div style="position: absolute; top: 42px; left: 250px; height: 300px; width: 250px;"> -->
-      <div>
-      </div>
+      <jobTypeCard class="jobTypeCardBox" v-if="drawer" search></jobTypeCard>
     </div>
     <v-text-field
       v-model="value"
@@ -21,20 +19,11 @@
       style="height: 100%; line-height: 100%;"
     ></v-text-field>
     <div class="searchBtn">搜索</div>
-    <v-navigation-drawer
-      v-model="drawer"
-      right absolute floating app
-    >
-      <v-list density="compact" nav>
-        <v-list-item prepend-icon="mdi-view-dashboard" title="Home" value="home"></v-list-item>
-        <v-list-item prepend-icon="mdi-forum" title="About" value="about"></v-list-item>
-      </v-list>
-    </v-navigation-drawer>
   </div>
 </template>
 
 <script setup>
-// import jobTypeCard from './jobTypeCard.vue'
+import jobTypeCard from './jobTypeCard.vue'
 
 import { ref } from 'vue';
 
@@ -43,10 +32,6 @@ defineOptions({ name:'personal-search'})
 const value = ref('')
 let drawer = ref(false)
 
-const showJobTypeCard = () => {
-  drawer.value = !drawer.value
-  console.log('drawer.value', drawer.value)
-}
 </script>
 
 <style lang="scss" scoped>
@@ -73,5 +58,10 @@ const showJobTypeCard = () => {
     color: #fff;
     background-color: var(--v-primary-base);
   }
+  .jobTypeCardBox {
+    position: absolute;
+    top: 42px;
+    left: 0;
+  }
 }
 </style>