From ca5e60c58bede7c3be61da99f230e62a8f78b3e9 Mon Sep 17 00:00:00 2001
From: lcw <1878680531@qq.com>
Date: Thu, 23 Oct 2025 01:25:22 +0800
Subject: [PATCH] lcw

---
 src/views/recruitment/card/ListView.vue | 102 ++++++++++++------------
 1 file changed, 52 insertions(+), 50 deletions(-)

diff --git a/src/views/recruitment/card/ListView.vue b/src/views/recruitment/card/ListView.vue
index 60a1870..a550c70 100644
--- a/src/views/recruitment/card/ListView.vue
+++ b/src/views/recruitment/card/ListView.vue
@@ -13,7 +13,7 @@
     <div class="scroll_parent_box" @mouseenter="mEnter" @mouseleave="mLeave">
       <div class="scroll_list" :style="{ transform: `translate(0vw,-${scrollTop}px)` }">
         <div ref="scrollItemBox">
-          <li v-for="(item, index) in pieData" :key="index" @click="visible=true"
+          <li v-for="(item, index) in pieData" :key="index" @click="visible = true"
             :class="{ 'singleBackground': index % 2 == 0, 'evenBackground': index % 2 == 1 }">
             <div>{{ `${index + 1 >= 10 ? index + 1 : '0' + (index + 1)}` }}</div>
             <div>{{ item.zone }}</div>
@@ -28,44 +28,44 @@
   </div>
   <div class="carousel-modal-container" v-if="visible">
     <el-carousel :interval="4000" indicator-position="none" :autoplay="false" height="14vw">
-       <el-carousel-item>
+      <el-carousel-item>
         <div class="carousel-item-content">
           <div class="carousel-item-title">
-        仁寿县劳务合作社联合送工
+            仁寿县劳务合作社联合送工
           </div>
           <div style="height:10vw;">
-          <img src="@/assets/recruitment/plghlhsg5.svg" class="carousel-image">
+            <img src="@/assets/recruitment/plghlhsg5.svg" class="carousel-image">
           </div>
         </div>
       </el-carousel-item>
 
-           <el-carousel-item >
+      <el-carousel-item>
         <div class="carousel-item-content">
           <div class="carousel-item-title">
-          批量化规模化送工现场1
+            批量化规模化送工现场1
           </div>
           <div style="height:10vw;">
-          <img src="@/assets/recruitment/plghlhsg.svg" class="carousel-image">
+            <img src="@/assets/recruitment/plghlhsg.svg" class="carousel-image">
           </div>
         </div>
       </el-carousel-item>
-           <el-carousel-item>
+      <el-carousel-item>
         <div class="carousel-item-content">
           <div class="carousel-item-title">
-        批量化规模化送工现场2
+            批量化规模化送工现场2
           </div>
           <div style="height:10vw;">
-          <img src="@/assets/recruitment/plghlhsg4.svg" class="carousel-image">
+            <img src="@/assets/recruitment/plghlhsg4.svg" class="carousel-image">
           </div>
         </div>
       </el-carousel-item>
-    <el-carousel-item>
-        <div class="carousel-item-content" >
+      <el-carousel-item>
+        <div class="carousel-item-content">
           <div class="carousel-item-title">
-           仁寿县劳务合作社联合送工
+            仁寿县劳务合作社联合送工
           </div>
           <div style="height:10vw;">
-          <img src="@/assets/recruitment/plghlhsg3.svg" class="carousel-image">
+            <img src="@/assets/recruitment/plghlhsg3.svg" class="carousel-image">
           </div>
         </div>
       </el-carousel-item>
@@ -237,7 +237,7 @@ function startScroll() {
 // 关闭弹窗
 function closeModal() {
   visible.value = false;
-    startScroll();
+  startScroll();
 }
 
 </script>
@@ -381,61 +381,63 @@ function closeModal() {
 
 /* 轮播弹窗容器样式 */
 .carousel-modal-container {
- position: fixed;
-    top: 54%;
-    left: 71%;
-    transform: translate(-50%, -50%);
-    width: 14vw;
-    border-radius: 4px 4px 4px 4px;
-    z-index: 100;
-    border-radius: 0.104vw;
-    padding: 0.26vw;
-    height: 14vw;
+  position: fixed;
+  top: 54%;
+  left: 71%;
+  transform: translate(-50%, -50%);
+  width: 14vw;
+  border-radius: 4px 4px 4px 4px;
+  z-index: 100;
+  border-radius: 0.104vw;
+  padding: 0.26vw;
+  height: 14vw;
 
-    .close-btn {
-      position: absolute;
-    top: 14.5vw;
+  .close-btn {
+    position: absolute;
+    top: 13.5vw;
     right: 5.5vw;
-      width: 2vw;
-      height: 2vw;
-      background-color: #171E22;
-      border: 1px solid rgba(203, 242, 250, 0.2);
-      border-radius: 50%;
-      color: #C4F3FE;
-      font-size: 1vw;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      cursor: pointer;
-      z-index: 101;
-
-      // &:hover {
-      //   background-color: #1E262A;
-      //   border-color: rgba(203, 242, 250, 0.4);
-      // }
-    }
+    width: 2vw;
+    height: 2vw;
+    background-color: #171E22;
+    border: 1px solid rgba(203, 242, 250, 0.2);
+    border-radius: 50%;
+    color: #C4F3FE;
+    font-size: 1vw;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    z-index: 101;
+    // &:hover {
+    //   background-color: #1E262A;
+    //   border-color: rgba(203, 242, 250, 0.4);
+    // }
+  }
 
   .carousel-item-content {
     border-radius: 5px 5px 5px 5px;
     background-color: #171E22;
-        padding: 0.001vw 0.4vw 1vw;
+    padding: 0.001vw 0.4vw 1vw;
+
     .carousel-item-title {
       background: linear-gradient(90deg, rgba(203, 242, 250, 0) 0%, rgba(203, 242, 250, 0.43) 58%, rgba(203, 242, 250, 0) 100%);
-      border-radius: 0px 0px 0px 0px;
       opacity: 0.5;
       width: 100%;
-      height: 0.5vw;
+      height: 1.1vw;
       margin-top: 1vw;
-      line-height: 0.5vw;
+      font-size: 0.8vw;
+      line-height: 1.1vw;
       text-align: center;
       border-radius: 4px 4px 4px 4px;
     }
+
     img {
       width: 100%;
       height: 100%;
     }
   }
 }
+
 ::deep(.el-carousel__container) {
   height: 14vw !important;
 }