DEV_ZZ/rsxm-master
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

lcw

Browse Source
This commit is contained in:
lcw
2025-10-23 01:25:22 +08:00
parent cf87c2c5e2
commit ca5e60c58b
1 changed files with 52 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

102
src/views/recruitment/card/ListView.vue
View File

@ -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;
}