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