首页广告

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

@@ -7,10 +7,16 @@
     </div>
     <hotJobs></hotJobs>
     <div class="advertise">
-      <div class="advertise-title">广告</div>
-      <img class="advertise-img cursor-pointer" :src="advertiseUrl" @click="handleOpenAdvertise">
+      <div v-if="showFullAdvertise">
+        <div class="advertise-title">
+          <span>广告</span>
+          <v-icon class="float-right cursor-pointer pb-1" color="primary" size="28" @click="showFullAdvertise = false">mdi-close</v-icon>
+        </div>
+        <img class="advertise-img cursor-pointer" :src="advertiseUrl" @click="handleOpenAdvertise">
+      </div>
+      <div v-else class="advertise-box cursor-pointer" @mouseenter="showFullAdvertise = true"></div>
     </div>
-    <div class="common-width">
+    <div class="default-width">
       <homeJobTypeCard class="content-box"></homeJobTypeCard>
       <advertisementPage class="my-3"></advertisementPage>
       <hotPromotedPositions></hotPromotedPositions>
@@ -35,6 +41,7 @@ import { nextTick, ref } from 'vue'
 import { useUserStore } from '@/store/user'
 import { getToken } from '@/utils/auth'
 
+const showFullAdvertise = ref(true)
 const advertiseUrl = 'https://www.mendunerhr.com/images/userfiles/d8e0b0cc911c47788e54a5ca5d5a1cc3/images/recruitment/adImages/2024/09/%E5%8F%B3%E4%BE%A7%E5%B9%BF%E5%91%8A%E5%9B%BE%E5%88%B6%E4%BD%9C%E6%A8%A1%E6%9D%BF.png'
 
 const store = useUserStore()
@@ -80,14 +87,19 @@ const handleOpenAdvertise = () => {
   position: sticky;
   top: 128px;
   z-index: 999;
-  width: 120px; 
-  height: 310px;
+  width: 180px; 
+  height: 360px;
+  &-box {
+    width: 15px;
+    height: 100%;
+    background-color: #00897B;
+  }
   &-title {
     color: #000;
     font-size: 14px;
     background-color: #d5d5d5;
     border-left: 3px solid #00897B;
-    padding: 8px 16px;
+    padding: 8px 5px 8px 16px;
     border-radius: 4px 4px 0 0;
   }
   &-img {