热门企业

package-lock.json

@@ -11,8 +11,10 @@
         "@mdi/font": "7.0.96",
         "axios": "^1.6.8",
         "js-cookie": "^3.0.5",
+        "nprogress": "^0.2.0",
         "pinia": "^2.1.7",
         "pinia-plugin-persistedstate": "^3.2.1",
+        "pnpm": "^9.1.0",
         "qs": "^6.12.1",
         "roboto-fontface": "*",
         "vue": "^3.4.0",
@@ -2308,6 +2310,11 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/nprogress": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmmirror.com/nprogress/-/nprogress-0.2.0.tgz",
+      "integrity": "sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA=="
+    },
     "node_modules/nth-check": {
       "version": "2.1.1",
       "resolved": "https://registry.npmmirror.com/nth-check/-/nth-check-2.1.1.tgz",
@@ -2479,6 +2486,21 @@
         "pinia": "^2.0.0"
       }
     },
+    "node_modules/pnpm": {
+      "version": "9.1.1",
+      "resolved": "https://registry.npmmirror.com/pnpm/-/pnpm-9.1.1.tgz",
+      "integrity": "sha512-FOkVdZwR936sB/q6TQGcGT7IY3Ip5i7Jnu+3zzw7dcZER4grfEhRQkUe46a0CAWc37e3+gNBuXXxLQ92KccRlQ==",
+      "bin": {
+        "pnpm": "bin/pnpm.cjs",
+        "pnpx": "bin/pnpx.cjs"
+      },
+      "engines": {
+        "node": ">=18.12"
+      },
+      "funding": {
+        "url": "https://opencollective.com/pnpm"
+      }
+    },
     "node_modules/postcss": {
       "version": "8.4.38",
       "resolved": "https://registry.npmmirror.com/postcss/-/postcss-8.4.38.tgz",

src/components/Enterprise/hotPromoted.vue

@@ -0,0 +1,243 @@
+<template>
+  <div class="hot-box">
+    <div class="sub-li" v-for="(item, index) in list" :key="index">
+      <!-- 公司信息 -->
+      <div class="company-info-top">
+        <div class="float-left">
+          <v-img :src="item.enterpriseImg" :alt="item.enterpriseName" :width="40" style="height: 40px;border-radius: 4px;"/>
+        </div>
+        <div class="company-info">
+          <h3>{{ item.enterpriseName }}</h3>
+          <p>{{ item.enterpriseNature }}<span class="vline"></span>{{ item.scale }}<span class="vline"></span>{{ item.industry }}</p>
+        </div>
+      </div>
+      <!-- 职位列表 -->
+      <ul class="company-job-list">
+        <li class="company-job-item" v-for="(k, i) in item.positions" :key="i">
+          <div class="job-info">
+            <div class="mb-2 d-flex">
+              <p class="name">{{ k.recruitName }}</p>
+              <v-icon size="20" class="message">mdi-message-processing</v-icon>
+              <span class="salary">{{ k.salary }}</span>
+            </div>
+            <v-chip size="x-small" label class="mr-1" color="#666" v-for="j in k.tags" :key="j">{{ j }}</v-chip>
+          </div>
+        </li>
+      </ul>
+      <div class="text-center">
+        <v-btn class="buttons" color="primary" variant="outlined">查看更多职位</v-btn>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup name="hotPromoted">
+const list = [
+  {
+    enterpriseImg: 'https://img.bosszhipin.com/beijin/upload/com/workfeel/20231212/7bf6f160950405e90671d208831c3be24a7230ff916830a84f48ca3d2af0604795d2582973667498.png',
+    enterpriseName: '博彦科技',
+    enterpriseNature: '私营企业',
+    scale: '100000人以上',
+    industry: '计算机软件',
+    positions: [
+      {
+        recruitName: '跨境电商运营跨境电商运营跨境电商运营跨境电商运营',
+        salary: '7-9K',
+        tags: ['广州番禺南浦', '本科', '1-3年']
+      },
+      {
+        recruitName: '跨境电商运营',
+        salary: '7-9K',
+        tags: ['广州番禺南浦', '本科', '1-3年']
+      },
+      {
+        recruitName: '跨境电商运营',
+        salary: '7-9K',
+        tags: ['广州番禺南浦', '本科', '1-3年']
+      }
+    ]
+  },
+  {
+    enterpriseImg: 'https://img.bosszhipin.com/beijin/upload/com/workfeel/20231212/7bf6f160950405e90671d208831c3be24a7230ff916830a84f48ca3d2af0604795d2582973667498.png',
+    enterpriseName: '博彦科技',
+    enterpriseNature: '私营企业',
+    scale: '100000人以上',
+    industry: '计算机软件',
+    positions: [
+      {
+        recruitName: '跨境电商运营',
+        salary: '7-9K',
+        tags: ['广州番禺南浦', '本科', '1-3年']
+      },
+      {
+        recruitName: '跨境电商运营',
+        salary: '7-9K',
+        tags: ['广州番禺南浦', '本科', '1-3年']
+      },
+      {
+        recruitName: '跨境电商运营',
+        salary: '7-9K',
+        tags: ['广州番禺南浦', '本科', '1-3年']
+      }
+    ]
+  },
+  {
+    enterpriseImg: 'https://img.bosszhipin.com/beijin/upload/com/workfeel/20231212/7bf6f160950405e90671d208831c3be24a7230ff916830a84f48ca3d2af0604795d2582973667498.png',
+    enterpriseName: '博彦科技',
+    enterpriseNature: '私营企业',
+    scale: '100000人以上',
+    industry: '计算机软件',
+    positions: [
+      {
+        recruitName: '跨境电商运营',
+        salary: '7-9K',
+        tags: ['广州番禺南浦', '本科', '1-3年']
+      },
+      {
+        recruitName: '跨境电商运营',
+        salary: '7-9K',
+        tags: ['广州番禺南浦', '本科', '1-3年']
+      },
+      {
+        recruitName: '跨境电商运营',
+        salary: '7-9K',
+        tags: ['广州番禺南浦', '本科', '1-3年']
+      }
+    ]
+  },
+  {
+    enterpriseImg: 'https://img.bosszhipin.com/beijin/upload/com/workfeel/20231212/7bf6f160950405e90671d208831c3be24a7230ff916830a84f48ca3d2af0604795d2582973667498.png',
+    enterpriseName: '博彦科技',
+    enterpriseNature: '私营企业',
+    scale: '100000人以上',
+    industry: '计算机软件',
+    positions: [
+      {
+        recruitName: '跨境电商运营',
+        salary: '7-9K',
+        tags: ['广州番禺南浦', '本科', '1-3年']
+      },
+      {
+        recruitName: '跨境电商运营',
+        salary: '7-9K',
+        tags: ['广州番禺南浦', '本科', '1-3年']
+      },
+      {
+        recruitName: '跨境电商运营',
+        salary: '7-9K',
+        tags: ['广州番禺南浦', '本科', '1-3年']
+      }
+    ]
+  }
+]
+</script>
+
+<style lang="scss" scoped>
+.hot-box {
+  display: flex;
+  flex-wrap: wrap;
+}
+.sub-li {
+  width: calc((100% - 24px) / 3);
+  min-width: calc((100% - 24px) / 3);
+  max-width: calc((100% - 24px) / 3);
+  margin: 0 12px 12px 0;
+  height: 388px;
+  border-radius: 12px;
+  padding: 0;
+  overflow: hidden;
+  transition: all .2s linear;
+  background-color: #fff;
+  cursor: pointer;
+  &:nth-child(3n) {
+    margin-right: 0;
+  }
+}
+.company-info {
+  float: left;
+  margin-left: 16px;
+  width: 282px;
+}
+.company-info-top {
+  display: flex;
+  height: 76px;
+  padding: 16px 20px;
+  overflow: hidden;
+  background: linear-gradient(90deg, #f2fafa 0, #fcfbfa 100%);
+}
+.company-info h3 {
+  height: 22px;
+  font-size: 16px;
+  font-weight: 400;
+  color: #222;
+  line-height: 22px;
+  margin: 0 0 4px 0;
+  padding: 0;
+  max-width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.company-info p {
+  height: 18px;
+  font-size: 13px;
+  font-weight: 400;
+  color: #999;
+  line-height: 18px;
+}
+.vline {
+  display: inline-block;
+  width: 1px;
+  height: 10px;
+  vertical-align: middle;
+  background-color: #e0e0e0;
+  margin: 0 10px;
+}
+.company-job-list {
+  display: block;
+  padding: 4px 20px 12px;
+  margin-right: -16px;
+  overflow: hidden;
+}
+ul li {
+  list-style: none
+}
+.company-job-item {
+  display: block;
+  height: auto;
+  width: 344px;
+  padding: 12px 0;
+  margin: 0;
+}
+.salary {
+  font-size: 16px;
+  float: right;
+  font-weight: 700;
+  color: #fe574a;
+  line-height: 22px;
+  max-width: none;
+  text-align: right;
+  flex: 1;
+}
+.name {
+  position: relative;
+  max-width: 200px;
+  line-height: 22px;
+  font-weight: 500;
+  color: #222;
+  margin-right: 8px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  transition: all linear .2s;
+  &:hover {
+    color: var(--v-primary-base);
+  }
+}
+.message {
+  color: #bfc1c9;
+  &:hover {
+    color: var(--v-primary-base);
+  }
+}
+</style>

src/components/Position/item.vue

@@ -93,11 +93,15 @@ const list = [
   border-radius: 12px;
   padding: 0;
   overflow: hidden;
+  cursor: pointer;
   transition: all .2s linear;
   background-color: #fff;
   &:nth-child(3n) {
     margin-right: 0;
   }
+  &:hover {
+    box-shadow: 0 16px 40px 0 rgba(153, 153, 153, .3);
+  }
 }
 .job-info {
   padding: 16px 20px;
@@ -140,6 +144,9 @@ const list = [
   text-overflow: ellipsis;
   white-space: nowrap;
   font-weight: 600;
+  &:hover {
+    color: var(--v-primary-base);
+  }
 }
 .sub-li-bottom {
   background: linear-gradient(90deg, #f5fcfc 0, #fcfbfa 100%);

src/layout/index.vue

@@ -4,25 +4,24 @@
     <div>
       <router-view></router-view>
     </div>
-    <!-- <Footers class="footer"></Footers> -->
+    <Footers class="footer mt-10"></Footers>
   </div>
 </template>
 
 <script setup>
 import Headers from './personal/navBar.vue'
-// import Footers from './personal/footer.vue'
+import Footers from './personal/footer.vue'
 defineOptions({ name: 'layout-index' })
 </script>
 
 <style lang="scss" scoped>
 .parent {
   background-color: #eaf4fe;
-  height: 100vh;
-  position: relative;
+  // position: relative;
 }
 .footer {
-  position: absolute;
-  bottom: 0;
-  left: 0;
+  // position: absolute;
+  // bottom: 0;
+  // left: 0;
 }
 </style>

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

@@ -16,6 +16,9 @@
         <PositionCard></PositionCard>
       </v-window-item>
     </v-window>
+    <div class="text-center">
+      <v-btn class="buttons" color="primary">查看更多职位</v-btn>
+    </div>
   </div>
 </template>
 

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

@@ -0,0 +1,12 @@
+<template>
+  <div>
+    <HotPromoted></HotPromoted>
+    <div class="text-center">
+      <v-btn class="buttons" color="primary">查看更多企业</v-btn>
+    </div>
+  </div>
+</template>
+
+<script setup name="popularEnterprises">
+import HotPromoted from '@/components/Enterprise/hotPromoted.vue'
+</script>

src/views/Home/personal/index.vue

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