首页职位类型样式调整

src/components/PositionLongStrip/item.vue

@@ -109,7 +109,7 @@ const handleEnterprise = (item) => {
 <style lang="scss" scoped>
 .title1 {
   position: relative;
-  max-width: 440px;
+  max-width: 420px;
   margin-right: 8px;
   overflow: hidden;
   text-overflow: ellipsis;

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

@@ -1,7 +1,7 @@
 <!-- 主页职业类型面板 -->
 <template>
   <div class="hasPageCard d-flex" @mouseleave="handleMouseLeave">
-    <v-card class="card">
+    <v-card class="leftBox">
       <div class="leftCard d-flex flex-column flex-wrap pt-3 pr-2">
         <div
           v-for="(item, index) in items" :key="item.id"
@@ -32,7 +32,7 @@
         </div> -->
       </div>
     </v-card>
-    <v-card v-if="rightObj.show" class="card rightCardBox">
+    <v-card v-if="rightObj.show" class="right-item-box elevation-5" :style="{'left': itemLeft + 'px'}">
       <div class="rightCard">
         <div class="rightContent">
           <div
@@ -50,7 +50,7 @@
         </div>
       </div>
     </v-card>
-    <v-card height="392px" v-if="!rightObj.show" class="card rightCardBox">
+    <v-card height="392px" class="card rightCardBox">
       <v-carousel show-arrows="hover" cycle>
         <v-carousel-item v-for="(item, i) in carouselList" :key="i">
           <div style="height: 392px; overflow: hidden;">
@@ -109,21 +109,31 @@ getDict('positionTreeData', null, 'positionTreeData').then(({ data }) => {
 })
 
 // 翻页按钮
-const previous = () => { if (pageInfo.current > 1) pageInfo.current--; getPageItems() }
-const nextPage = () => { if (pageInfo.current < pageCount.value) pageInfo.current++; getPageItems() }
+// const previous = () => { if (pageInfo.current > 1) pageInfo.current--; getPageItems() }
+// const nextPage = () => { if (pageInfo.current < pageCount.value) pageInfo.current++; getPageItems() }
 
 // 右侧职位信息
 const leftIndex = ref(null)
 const rightObj = reactive({ show: false, data: {} })
-
-const handleMouseOver = (val, index) => { // 鼠标移入
+const itemLeft = ref(0)
+const container = document.getElementsByClassName('leftBox')
+// 鼠标移入
+const handleMouseOver = (val, index) => {
   leftIndex.value = index
   rightObj.data = val
+
+  // 弹窗位置
+  const div = document.getElementsByClassName('leftCardItem')[index]
+  const rect = div.getBoundingClientRect()
+  const containerRect = container[0].getBoundingClientRect()
+  itemLeft.value = rect.right - containerRect.x + 20
+
   rightObj.show = true
 }
 const handleMouseLeave = () => { // 鼠标移出
   rightObj.show = false // true false
   leftIndex.value = null
+  itemLeft.value = 0
 }
 // 轮播图片
 const carouselList = ref([
@@ -136,6 +146,9 @@ const carouselList = ref([
 </script>
 
 <style lang="scss" scoped>
+.leftBox {
+  border-radius: 12px;
+}
 .active {
   color: var(--v-primary-base) !important;
   font-weight: 700;
@@ -143,14 +156,23 @@ const carouselList = ref([
 :deep(.v-window) {
   height: 392px !important;
 }
+.right-item-box {
+  position: absolute;
+  z-index: 999; 
+  width: 500px;
+  border-radius: 12px;
+}
 .hasPageCard {
   width: 100%;
-  .card { border-radius: 12px; }
+  height: 392px;
+  position: relative;
+  .card { 
+    border-radius: 12px;
+  }
   .leftIndexAct {
     height: 48px;
     margin: 0 4px;
     border-radius: 12px;
-    // background-color: var(--v-primary-base);
   }
   justify-content: center; // 后面的flex会继承
   .leftCard {
@@ -191,7 +213,10 @@ const carouselList = ref([
       }
     }
   }
-  .rightCardBox { flex: 1; margin-left: 12px;}
+  .rightCardBox { 
+    flex: 1; 
+    margin-left: 12px;
+  }
   .rightCard {
     height: 384px;
     // min-width: 786px;

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

@@ -6,7 +6,7 @@
       <headSearch @handleSearch="handleSearch"></headSearch>
     </div>
     <hotJobs></hotJobs>
-    <div class="advertise">
+    <div class="advertise" :style="{'width': showFullAdvertise ? '180px' : '20px'}">
       <div v-if="showFullAdvertise">
         <div class="advertise-title d-inline-block">
           <span>广告</span>
@@ -117,7 +117,6 @@ const adClick = () => {
   position: sticky;
   top: 128px;
   z-index: 999;
-  width: 180px; 
   height: 360px;
   &-box {
     position: relative;
@@ -127,7 +126,6 @@ const adClick = () => {
     &::after {  
       content: "";  
       position: absolute;  
-      // right: -50px;
       top: 50%;
       margin-left: 3px;
       transform: translateY(-50%);