热门职位

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

@@ -0,0 +1,19 @@
+<template>
+  <div class="box text-center">
+    <span class="mr-2">热门职位:</span>
+    <v-btn v-for="(item, index) in jobs" :key="index" size="small" class="ml-2" color="primary" variant="tonal">{{ item }}</v-btn>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+defineOptions({ name:'personal-hotJobs-list'})
+
+const jobs = ref(['Java','PHP','Python','C#','.NET','GIS工程师','区块链工程师','测试', 'Python','C#','.NET'])
+</script>
+
+<style lang="scss" scoped>
+.box {
+  margin-bottom: 24px;
+}
+</style>

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

@@ -47,7 +47,7 @@ watch(() => sharedState.layoutClickCount, () => {
 .search {
   height: 50px;
   width: 800px;
-  margin: 16px auto 8px auto;
+  margin: 20px auto;
   border: 2px solid var(--v-primary-base);
   border-radius: 5px;
   .jobBox {

src/views/Home/personal/index.vue

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