行业类型、职位类型

src/views/recruit/position/components/conditionFilter.vue

@@ -1,9 +1,11 @@
 <template>
-  <div>
-    筛选
+  <div class="d-flex">
+    <companyIndustry></companyIndustry>
+    <positionType></positionType>
   </div>
 </template>
 <script setup>
-
+import companyIndustry from './conditionFilter/companyIndustry.vue'
+import positionType from './conditionFilter/positionType.vue'
 defineOptions({name: 'retrieval-components-conditionFilter'})
 </script>

src/views/recruit/position/components/conditionFilter/JobSearchType.vue

@@ -0,0 +1,14 @@
+<template>
+  <commonStyle btnTitle="求职类型">
+    <div>
+      求职类型
+    </div>
+  </commonStyle>
+</template>
+<script setup>
+import commonStyle from './commonStyle.vue'
+
+defineOptions({name: 'conditionFilter-company-industry'})
+</script>
+<style lang="scss" scoped>
+</style>

src/views/recruit/position/components/conditionFilter/commonStyle.vue

@@ -0,0 +1,41 @@
+<template>
+  <v-menu open-on-hover>
+    <template v-slot:activator="{ props }">
+      <div class="d-flex align-center" v-bind="props">
+        <div class="btn" @mouseover="drawer = true" @mouseleave="drawer = false">
+          <span class="mr-2">{{ defineProps.btnTitle }}</span>
+          <span v-if="drawer" class="mdi mdi-menu-up"></span>
+          <span v-if="!drawer" class="mdi mdi-menu-down"></span>
+        </div>
+      </div>
+    </template>
+    <!-- <jobTypeCard @click.stop=""></jobTypeCard> -->
+    <slot></slot>
+  </v-menu>
+</template>
+<script setup>
+import { ref } from 'vue';
+
+defineOptions({name: 'conditionFilter-index-page'})
+const defineProps = defineProps({
+  btnTitle: {
+    type: String,
+    default: 'Text'
+  }
+})
+const drawer = ref(false)
+</script>
+<style lang="scss" scoped>
+.btn {
+  color: #333333;
+  background-color: var(--default-bgc);
+  padding: 4px 12px 4px 12px;
+  border-radius: 4px;
+  margin-right: 20px;
+  margin-bottom: 4px;
+  &:hover {
+    color: var(--v-primary-base);
+    background-color: #d5e6e8;
+  }
+}
+</style>

src/views/recruit/position/components/conditionFilter/companyIndustry.vue

@@ -0,0 +1,13 @@
+<template>
+  <commonStyle btnTitle="行业类型">
+    <jobTypeCard></jobTypeCard>
+  </commonStyle>
+</template>
+<script setup>
+import commonStyle from './commonStyle.vue'
+import jobTypeCard from '@/components/jobTypeCard'
+
+defineOptions({name: 'conditionFilter-company-industry'})
+</script>
+<style lang="scss" scoped>
+</style>

src/views/recruit/position/components/conditionFilter/positionType.vue

@@ -0,0 +1,13 @@
+<template>
+  <commonStyle btnTitle="职位类型">
+    <jobTypeCard></jobTypeCard>
+  </commonStyle>
+</template>
+<script setup>
+import commonStyle from './commonStyle.vue'
+import jobTypeCard from '@/components/jobTypeCard'
+
+defineOptions({name: 'conditionFilter-company-industry'})
+</script>
+<style lang="scss" scoped>
+</style>

src/views/recruit/position/index.vue

@@ -2,11 +2,11 @@
 <template>
   <div class="default-width">
     <div style="width: 100%; height: 20px;"></div>
-    <v-card>
+    <v-card style="z-index: 998">
       <div class="stickyBox my-5">
         <headSearch></headSearch>
       </div>
-      <cityFilter class="mx-5 mb-5"></cityFilter>
+      <cityFilter class="mx-5 mb-3"></cityFilter>
       <conditionFilter class="mx-5 mb-5"></conditionFilter>
     </v-card>
     <div>