广告

src/views/recruit/personal/home/components/advertisement.vue

@@ -0,0 +1,73 @@
+<template>
+  <div class="white-bgc contentBox py-10 px-3">
+    <div class="d-flex align-center justify-center">
+      <span class="link"></span>
+      <span class="title">优质企业</span>
+      <span class="link"></span>
+    </div>
+
+    <div no-gutters class="mt-5 d-flex flex-wrap" style="width: 100%;">
+      <v-card v-for="(k, i) in list" :key="i" class="col-item">
+        <img :src="k.url" alt="" style="width: 100%; height: 190px;border-radius: 4px;display: block;">
+      </v-card>
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineOptions({ name: 'advertisementPage'})
+
+const list = [
+  { url: 'https://admin.61hr.com/admin/uploads/images/ad/202407/345bf4c8ea3f439f9f8bdfee16ff5dfd.gif' },
+  { url: 'https://admin.61hr.com/admin/uploads/images/ad/202407/345bf4c8ea3f439f9f8bdfee16ff5dfd.gif' },
+  { url: 'https://admin.61hr.com/admin/uploads/images/ad/202407/345bf4c8ea3f439f9f8bdfee16ff5dfd.gif' },
+  { url: 'https://admin.61hr.com/admin/uploads/images/ad/202407/e684374c0ff349b4945bc0c7a4a2713f.gif' },
+  { url: 'https://admin.61hr.com/admin/uploads/images/ad/202407/e684374c0ff349b4945bc0c7a4a2713f.gif' },
+  { url: 'https://admin.61hr.com/admin/uploads/images/ad/202407/e684374c0ff349b4945bc0c7a4a2713f.gif' }
+]
+</script>
+
+<style scoped lang="scss">
+.contentBox {
+  border-radius: 8px;
+}
+.link {
+  top: 10px;
+  position: relative;
+  width: 100px;
+  height: 1px;
+  display: inline-block;
+  background-image: linear-gradient(170deg, #00897B, rgba(255, 133, 0, 0));
+  &::before {
+    width: 4px;
+    height: 4px;
+    background: var(--v-primary-base);
+    content: '';
+    position: absolute;
+    top: -2px;
+    right: 0;
+  }
+  &:first-child::before {
+    left: 0;
+  }
+}
+.title {
+  font-size: 24px;
+  font-weight: 600;
+  color: var(--v-primary-base);
+  margin: 0 15px;
+}
+.col-item {
+  cursor: pointer;
+  width: calc((100% - 24px) / 3);
+  min-width: calc((100% - 24px) / 3);
+  max-width: calc((100% - 24px) / 3);
+  margin: 0 12px 12px 0;
+  &:nth-child(3n) {
+    margin-right: 0;
+  }
+  &:hover {
+    box-shadow: 0 16px 40px 0 rgba(153, 153, 153, .3);
+  }
+}
+</style>

src/views/recruit/personal/home/index.vue

@@ -7,7 +7,8 @@
     <hotJobs></hotJobs>
     <div class="default-width">
       <!-- <jobTypeCard class="mb-5" page @handleJobClick="handleJobClick" isSingle></jobTypeCard> -->
-      <homeJobTypeCard class="mb-5"></homeJobTypeCard>
+      <homeJobTypeCard></homeJobTypeCard>
+      <advertisementPage class="my-3"></advertisementPage>
       <hotPromotedPositions></hotPromotedPositions>
       <PopularEnterprises class="mt-10"></PopularEnterprises>
     </div>
@@ -23,6 +24,7 @@ import hotJobs from './components/hotJobs.vue'
 import homeJobTypeCard from './components/homeJobTypeCard'
 import hotPromotedPositions from './components/hotPromotedPositions.vue'
 import PopularEnterprises from './components/popularEnterprises.vue'
+import advertisementPage from './components/advertisement.vue'
 import { useRouter } from 'vue-router'
 
 const router = useRouter()