职位面板和搜索提取到公共部分

src/components/headSearch/index.vue

@@ -23,11 +23,11 @@
 
 <script setup>
 import { useSharedState } from '@/store/sharedState'
-import jobTypeCard from './jobTypeCard.vue'
+import jobTypeCard from '@/components/jobTypeCard'
 
 import { ref, watch } from 'vue';
 
-defineOptions({ name:'personal-search'})
+defineOptions({ name:'common-components-headSearch'})
 
 const value = ref('')
 let drawer = ref(false)

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

@@ -65,7 +65,7 @@ import { getDict } from '@/hooks/web/useDictionaries'
 
 import { reactive, ref } from 'vue';
 
-defineOptions({ name:'personal-jobTypeCard'})
+defineOptions({ name:'common-components-jobTypeCard'})
 
 const props = defineProps({
   page: { // 是否分页

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

@@ -1,76 +0,0 @@
-<template>
-  <div class="search d-flex align-center">
-    <div style="position: relative;">
-      <div class="jobBox d-flex pl-5" :class="{'drawer': drawer}" @click.stop="drawer = !drawer">
-        <span>职位类型</span>
-        <span class="mdi mdi-chevron-down px-2" style="font-size: 18px;"></span>
-      </div>
-      <jobTypeCard class="jobTypeCardBox" v-if="drawer" @click.stop=""></jobTypeCard>
-    </div>
-    <v-text-field
-      v-model="value"
-      placeholder="搜索职位/公司"
-      color="primary"
-      variant="plain"
-      density="compact"
-      :hide-details="true"
-      class="px-2"
-      style="height: 100%; line-height: 100%;"
-    ></v-text-field>
-    <div class="searchBtn">搜索</div>
-  </div>
-</template>
-
-<script setup>
-import { useSharedState } from '@/store/sharedState'
-import jobTypeCard from './jobTypeCard.vue'
-
-import { ref, watch } from 'vue';
-
-defineOptions({ name:'personal-search'})
-
-const value = ref('')
-let drawer = ref(false)
-
-// 点击外部关闭职位下拉
-const sharedState = useSharedState()
-
-// 监听 layoutClickCount 变化
-watch(() => sharedState.layoutClickCount, () => {
-  // console.log('layoutClickCount', newValue)
-  if (drawer.value) drawer.value = false
-});
-
-</script>
-
-<style lang="scss" scoped>
-.search {
-  height: 50px;
-  width: 800px;
-  margin: 0 auto;
-  border: 2px solid var(--v-primary-base);
-  border-radius: 5px;
-  .jobBox {
-    cursor: pointer;
-    &:hover {
-      color: var(--v-primary-base);
-    }
-  }
-  .drawer {
-    color: var(--v-primary-base);
-  }
-  .searchBtn {
-    width: 100px;
-    height: 50px; line-height: 48px;
-    text-align: center;
-    font-size: 18px;
-    color: #fff;
-    background-color: var(--v-primary-base);
-  }
-  .jobTypeCardBox {
-    position: absolute;
-    top: 42px;
-    left: 0;
-  }
-}
-</style>

src/views/Home/personal/index.vue

@@ -15,9 +15,9 @@
 
 <script setup>
 import headCarousel from './components/headCarousel.vue'
-import headSearch from './components/search.vue'
+import headSearch from '@/components/headSearch'
 import hotJobs from './components/hotJobs.vue'
-import jobTypeCard from './components/jobTypeCard.vue'
+import jobTypeCard from '@/components/jobTypeCard'
 import hotPromotedPositions from './components/hotPromotedPositions.vue'
 import PopularEnterprises from './components/popularEnterprises.vue'
 defineOptions({ name:'personal-index'})

src/views/recruit/position/index.vue

@@ -1,14 +1,16 @@
 <!-- 检索列表页 - 职位检索 -->
 <template>
-  <div>
-    检索
-  </div>
-  <div>筛选条件</div>
-  <div>
+  <div class="default-width">
+    <div>
+      检索
+    </div>
+    <div>筛选条件</div>
     <div>
-      左侧列表
+      <div>
+        左侧列表
+      </div>
+      <div>右侧列表</div>
     </div>
-    <div>右侧列表</div>
   </div>
 </template>
 <script setup>