广告位置

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

@@ -7,22 +7,28 @@
     </div>
     <hotJobs></hotJobs>
     <div v-if="leftAdvertise.length" class="advertiseBox">
-      <div v-for="val in leftAdvertise" :key="val.mark" class="advertise" :style="{'width': val.show ? '180px' : '20px'}">
-        <div v-if="val.show">
-          <div class="advertise-title d-inline-block">
-            <span>广告</span>
-            <v-icon class="float-right cursor-pointer pb-1" color="primary" size="28" @click="val.show = false">mdi-close</v-icon>
+        <div v-for="val in leftAdvertise" :key="val.mark" class="advertise" :style="{'width': '20px'}">
+          <div v-if="!val.show" class=" advertise-box cursor-pointer" @mouseenter="val.show = true"></div>
+        </div>
+      </div>
+    <div class="default-width mb-5" :style="`margin-top: ${leftAdvertise.length * (-372)}px;`">
+      <div v-if="leftAdvertise.length" class="advertiseBox">
+        <div v-for="val in leftAdvertise" :key="val.mark" class="advertise" :style="{'width':'180px'}">
+          <div v-if="val.show">
+            <div class="advertise-title d-inline-block">
+              <span>广告</span>
+              <v-icon class="float-right cursor-pointer pb-1" color="primary" size="28" @click="val.show = false">mdi-close</v-icon>
+            </div>
+            <img class="advertise-img cursor-pointer" :src="val.img" @click.stop="handleLeftClick(val)">
           </div>
-          <img class="advertise-img cursor-pointer" :src="val.img" @click.stop="handleLeftClick(val)">
         </div>
-        <div v-else class="advertise-box cursor-pointer" @mouseenter="val.show = true"></div>
       </div>
-    </div>
-    <div class="default-width mb-5" :style="{'margin-top': leftAdvertise.length * (-372) + 'px'}">
-      <homeJobTypeCard></homeJobTypeCard>
-      <advertisementPage v-if="preferred.length" :list="preferred" :content="preferredContent" class="my-3"></advertisementPage>
-      <hotPromotedPositions :class="{'mt-10': !preferred.length}"></hotPromotedPositions>
-      <PopularEnterprises class="mt-10"></PopularEnterprises>
+      <div :style="`margin-top: ${leftAdvertise.length * (-372)}px;`">
+        <homeJobTypeCard></homeJobTypeCard>
+        <advertisementPage v-if="preferred.length" :list="preferred" :content="preferredContent" class="my-3"></advertisementPage>
+        <hotPromotedPositions :class="!preferred.length ? 'mt-10' : ''"></hotPromotedPositions>
+        <PopularEnterprises class="mt-10"></PopularEnterprises>
+      </div>
     </div>
   </div>
   <!-- 快速填写简易人才信息-弹窗 -->
@@ -146,9 +152,11 @@ onMounted(async () => {
 .advertiseBox {
   position: sticky;
   top: 128px;
+  left: 0;
   z-index: 999;
   width: 15px;
   max-width: 180px;
+  margin-left: -200px;
 }
 .advertise {
   // position: sticky;
@@ -157,6 +165,7 @@ onMounted(async () => {
   height: 372px;
   &-box {
     position: relative;
+    // left: 0;
     width: 15px;
     height: 100%;
     background-color: #00897B;