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

src/layout/index.vue

@@ -4,24 +4,28 @@
     <div>
       <router-view></router-view>
     </div>
-    <Footers class="footer mt-10"></Footers>
+    <Footers class="mt-10"></Footers>
+    <Slider class="slider"></Slider>
   </div>
 </template>
 
 <script setup>
 import Headers from './personal/navBar.vue'
 import Footers from './personal/footer.vue'
+import Slider from './personal/slider.vue'
 defineOptions({ name: 'layout-index' })
 </script>
 
 <style lang="scss" scoped>
 .parent {
   background-color: var(--default-bgc);
-  // position: relative;
+  position: relative;
 }
-.footer {
-  // position: absolute;
-  // bottom: 0;
-  // left: 0;
+.slider {
+  position: fixed;
+  bottom: 50%;
+  right: 24px;
+  translate: 0 50%;
+  z-index: 999;
 }
 </style>

src/layout/personal/footer.vue

@@ -19,7 +19,7 @@
       </div>
       <div class="right size d-flex">
         <div>
-          <v-img :width="100" cover aspect-ratio="16/9" src="https://minio.citupro.com/dev/static/qrcode.png" style="height: 100px;"></v-img>
+          <v-img :width="100" cover aspect-ratio="16/9" src="https://minio.citupro.com/dev/static/mendunerCode.jpg" style="height: 100px;"></v-img>
           <div class="mt-2" style="text-align: center;">微信公众号</div>
         </div>
         <div class="ml-5">

src/layout/personal/slider.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="slider-box">
+    <div v-for="item in list" :key="item.mdi" class="slider-box-item">
+      <v-tooltip :text="item.tips" location="start">
+        <template v-slot:activator="{ props }">
+          <v-icon size="30" class="icons" v-bind="props">{{ item.mdi }}</v-icon>
+        </template>
+        <template #default>
+          <div v-if="item.showImg" class="ma-3" style="text-align: center">
+            <v-img cover aspect-ratio="1/1" src="https://minio.citupro.com/dev/static/mendunerCode.jpg" :width="170" style="height: 170px;"></v-img>
+            <span class="tips-text">关注门墩儿直聘微信公众号</span>
+          </div>
+          <span v-else>{{ item.tips }}</span>
+        </template>
+      </v-tooltip>
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineOptions({ name: 'personalSlider' })
+const list = [
+  { mdi: 'mdi-arrow-up-bold', tips: '返回顶部' },
+  { mdi: 'mdi-qrcode', tips: '微信公众号', showImg: 'https://minio.citupro.com/dev/static/mendunerCode.jpg' },
+  { mdi: 'mdi-face-agent', tips: '客服' },
+  { mdi: 'mdi-list-box-outline', tips: '个人简历' }
+]
+</script>
+
+<style lang="scss" scoped>
+.slider-box {
+  width: 44px;
+  height: 180px;
+  background-color: #fff;
+  border-radius: 22px;
+  box-shadow: 0 4px 20px 0 rgba(0,0,0,.06);
+}
+.slider-box-item {
+  width: 44px;
+  height: 44px;
+  padding: 6px 0;
+  text-align: center;
+}
+.icons {
+  color: #ccc;
+  &:hover {
+    color: var(--v-primary-base);
+  }
+}
+.tip-text {
+  font-size: 14px;
+  color: #222;
+}
+</style>

src/router/modules/remaining.js

@@ -9,10 +9,6 @@ const routeArray = [
 ]
 const items = routeArray[type]
 const remainingRouter = [
-  // {
-  //   path: '',
-  //   redirect: '/home'
-  // },
   {
     path: '/login',
     component: () => import('@/views/login/index'),
@@ -40,15 +36,6 @@ const remainingRouter = [
       title: '隐私政策'
     }
   },
-  // {
-  //   path: '/home',
-  //   component: () => import('@/views/Home/index'),
-  //   name: 'home',
-  //   meta: {
-  //     hidden: true,
-  //     title: '首页'
-  //   }
-  // },
   {
     path: '',
     component: Layout,

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>