根据UI修改样式

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

@@ -1,12 +1,12 @@
 <!-- 主页职业类型面板 -->
 <template>
-  <div class="hasPageCard d-flex" @mouseleave="handleMouseLeave">
-    <v-card class="leftBox">
-      <div class="leftCard d-flex flex-column flex-wrap pt-3 pr-2">
+  <v-card class="hasPageCard d-flex" elevation="0">
+    <div class="leftBox">
+      <div class="leftCard d-flex flex-column flex-wrap pt-3">
         <div
           v-for="(item, index) in items" :key="item.id"
-          class="leftCardItem" :class="{'leftIndexAct': index === leftIndex, 'elevation-5': (index === leftIndex)}"
-          @mouseover="handleMouseOver(item, index)"
+          class="leftCardItem" :class="{'leftIndexAct': index === leftIndex, 'elevation-0': (index === leftIndex)}"
+          @click.stop="handleMouseOver(item, index)"
         >
           <div class="rowItem d-flex">
             <div class="categoryName" style="width: 100%; text-align: center; cursor: pointer;">{{ item.nameCn }}</div>
@@ -15,7 +15,7 @@
                 <div class="jobItems" v-for="val in item.children[0].children" :key="val.id" @click="handleJobClick(val)">{{ val.nameCn }}</div>
               </div>
             </div> -->
-            <span class="mdi mdi-menu-right"></span>
+            <!-- <span class="mdi mdi-menu-right"></span> -->
           </div>
         </div>
         <!-- 分页选择器 -->
@@ -31,9 +31,15 @@
           </div>
         </div> -->
       </div>
-    </v-card>
-    <v-card v-if="rightObj.show" class="right-item-box elevation-5" :style="{'left': itemLeft + 'px'}">
-      <div class="rightCard d-flex">
+    </div>
+    <div v-if="rightObj.show" class="right-item-box elevation-0" >
+      <div class="rightCard">
+        <div class="d-flex align-center justify-space-between">
+          <span style="font-weight: bold;">{{ rightObj?.data?.nameCn }}</span>
+          <div>
+            <v-icon color="primary" size="40" @click.stop="handleMouseLeave">mdi-close-circle-outline</v-icon>
+          </div>
+        </div>
         <div class="rightContent">
           <div
             v-if="!rightObj.data.children?.length"
@@ -48,12 +54,9 @@
           >
           {{ val.nameCn }}</div>
         </div>
-        <div class="px-3 pt-2">
-          <v-icon color="primary" size="40" @click.stop="handleMouseLeave">mdi-close-circle-outline</v-icon>
-        </div>
       </div>
-    </v-card>
-    <v-card height="392px" class="card rightCardBox">
+    </div>
+    <div height="392px" class="rightCardBox">
       <v-carousel show-arrows="hover" cycle :model-value="0">
         <v-carousel-item v-for="(item, i) in carouselList" :key="i" @click.stop="handleClick(item)">
           <div style="height: 392px; overflow: hidden;" :class="{'cursor-pointer': item.link}">
@@ -67,8 +70,8 @@
           </div>
         </v-carousel-item>
       </v-carousel>
-    </v-card>
-  </div>
+    </div>
+  </v-card>
 </template>
 
 <script setup>
@@ -135,25 +138,25 @@ getDict('positionTreeData', null, 'positionTreeData').then(({ data }) => {
 // 右侧职位信息
 const leftIndex = ref(null)
 const rightObj = reactive({ show: false, data: {} })
-const itemLeft = ref(0)
-const container = document.getElementsByClassName('leftBox')
+// 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
+  // // 弹窗位置
+  // const div = document.getElementsByClassName('leftCardItem')[index]
+  // const rect = div.getBoundingClientRect()
+  // const containerRect = container[0].getBoundingClientRect()
+  // itemLeft.value = rect.right - containerRect.x
 
   rightObj.show = true
 }
 const handleMouseLeave = () => { // 鼠标移出
   rightObj.show = false // true false
   leftIndex.value = null
-  itemLeft.value = 0
+  // itemLeft.value = 0
 }
 
 // 轮播图点击
@@ -183,18 +186,21 @@ const handleClick = (item) => {
   z-index: 999; 
   width: 500px;
   border-radius: 12px;
+  top: 10px;
+  left: 390px;
+  background-color: rgba(255, 255, 255 , .8);
 }
 .hasPageCard {
   width: 100%;
   height: 392px;
   position: relative;
-  .card { 
-    border-radius: 12px;
-  }
+  border-radius: 12px;
+  // .card { 
+  //   border-radius: 12px;
+  // }
   .leftIndexAct {
-    height: 48px;
-    margin: 0 4px;
-    border-radius: 12px;
+    color: #fff;
+    background-color: var(--v-primary-base);
   }
   justify-content: center; // 后面的flex会继承
   .leftCard {
@@ -204,10 +210,12 @@ const handleClick = (item) => {
     overflow-x: hidden;
     overflow-y: auto;
     .leftCardItem {
-      width: 50%;
-      height: 42px;
-      line-height: 42px;
-      padding: 0 16px;
+      width: calc(50% - 40px);
+      height: 52px;
+      line-height: 52px;
+      margin: 0 20px;
+      // padding: 0 16px;
+      border-radius: none;
       .title { font-size: 14px; }
       .mdi-menu-right { font-size: 20px; }
     }
@@ -237,16 +245,15 @@ const handleClick = (item) => {
   }
   .rightCardBox { 
     flex: 1; 
-    margin-left: 12px;
+    // margin-left: 12px;
   }
   .rightCard {
-    height: 384px;
-    margin: 4px 0;
+    height: 372px;
     padding: 12px;
     overflow-y: auto;
     .categoryName { font-size: 16px; line-height: 28px; margin-top: 6px; color: var(--v-primary-base)}
     .categoryName2 { font-size: 14px; color: var(--color-666); width: 110px; margin-right: 4px;}
-    .jobItem { font-size: 14px; color: var(--color-333); }
+    .jobItem { font-size: 14px; color: #000; font-weight: 500; }
     .rowItem {
       padding: 8px 0;
     }
@@ -259,7 +266,7 @@ const handleClick = (item) => {
         margin: 4px 28px 2px 0;
         float: left;
         cursor: pointer;
-        color: var(--color-333);
+        color: #000;
         &:hover {
           color: var(--v-primary-base);
         }