443 lines
9.2 KiB
Vue
443 lines
9.2 KiB
Vue
<template>
|
|
<!-- 页面的 HTML 模板部分 -->
|
|
<div>
|
|
<!-- 表头保持固定 -->
|
|
<ul class="header-list">
|
|
<li class="singleBackground topLi">
|
|
<div> 序号</div>
|
|
<div>区域</div>
|
|
<div>入职人数</div>
|
|
</li>
|
|
</ul>
|
|
<!-- 滚动区域 -->
|
|
<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"
|
|
:class="{ 'singleBackground': index % 2 == 0, 'evenBackground': index % 2 == 1 }">
|
|
<div>{{ `${index + 1 >= 10 ? index + 1 : '0' + (index + 1)}` }}</div>
|
|
<div>{{ item.zone }}</div>
|
|
<div>{{ item.count }}人</div>
|
|
<div></div>
|
|
</li>
|
|
</div>
|
|
<!-- 复制一份数据用于无缝滚动 -->
|
|
<div v-html="copyHtml"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="carousel-modal-container" v-if="visible">
|
|
<el-carousel :interval="4000" indicator-position="none" :autoplay="false" height="14vw">
|
|
<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">
|
|
</div>
|
|
</div>
|
|
</el-carousel-item>
|
|
|
|
<el-carousel-item >
|
|
<div class="carousel-item-content">
|
|
<div class="carousel-item-title">
|
|
批量化规模化送工现场1
|
|
</div>
|
|
<div style="height:10vw;">
|
|
<img src="@/assets/recruitment/plghlhsg.svg" class="carousel-image">
|
|
</div>
|
|
</div>
|
|
</el-carousel-item>
|
|
<el-carousel-item>
|
|
<div class="carousel-item-content">
|
|
<div class="carousel-item-title">
|
|
批量化规模化送工现场2
|
|
</div>
|
|
<div style="height:10vw;">
|
|
<img src="@/assets/recruitment/plghlhsg4.svg" class="carousel-image">
|
|
</div>
|
|
</div>
|
|
</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/plghlhsg3.svg" class="carousel-image">
|
|
</div>
|
|
</div>
|
|
</el-carousel-item>
|
|
</el-carousel>
|
|
<div class="close-btn" @click="closeModal">X</div>
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, reactive, computed, onMounted, onUnmounted } from "vue";
|
|
import * as echarts from "echarts";
|
|
const pieRef = ref(null);
|
|
const pieData = [
|
|
{
|
|
zone: "四川 - 成都",
|
|
count: 2920
|
|
},
|
|
{
|
|
zone: "省外",
|
|
count: 1490
|
|
},
|
|
{
|
|
zone: "四川 - 南充",
|
|
count: 598
|
|
},
|
|
{
|
|
zone: "四川 - 内江",
|
|
count: 473
|
|
},
|
|
{
|
|
zone: "四川 - 乐山",
|
|
count: 421
|
|
},
|
|
{
|
|
zone: "四川 - 眉山",
|
|
count: 386
|
|
},
|
|
{
|
|
zone: "四川 - 巴中",
|
|
count: 373
|
|
},
|
|
{
|
|
zone: "四川 - 宜宾",
|
|
count: 313
|
|
},
|
|
{
|
|
zone: "四川 - 达州",
|
|
count: 313
|
|
},
|
|
{
|
|
zone: "四川 - 广元",
|
|
count: 300
|
|
},
|
|
{
|
|
zone: "四川 - 泸州",
|
|
count: 294
|
|
},
|
|
{
|
|
zone: "四川 - 遂宁",
|
|
count: 278
|
|
},
|
|
{
|
|
zone: "四川 - 自贡",
|
|
count: 276
|
|
},
|
|
{
|
|
zone: "四川 - 资阳",
|
|
count: 272
|
|
},
|
|
{
|
|
zone: "四川 - 绵阳",
|
|
count: 231
|
|
},
|
|
{
|
|
zone: "四川 - 德阳",
|
|
count: 222
|
|
},
|
|
{
|
|
zone: "四川 - 凉山",
|
|
count: 177
|
|
},
|
|
{
|
|
zone: "四川 - 雅安",
|
|
count: 166
|
|
},
|
|
{
|
|
zone: "四川 - 广安",
|
|
count: 162
|
|
},
|
|
{
|
|
zone: "四川 - 攀枝花",
|
|
count: 54
|
|
},
|
|
{
|
|
zone: "四川 - 阿坝",
|
|
count: 47
|
|
},
|
|
{
|
|
zone: "四川 - 甘孜",
|
|
count: 9
|
|
}
|
|
]
|
|
const visible = ref(false);
|
|
// 滚动相关变量
|
|
const scrollTop = ref(0); // 列表滚动高度
|
|
const speed = ref(15); // 滚动速度
|
|
const copyHtml = ref(''); // 复制的HTML内容
|
|
const scrollItemBox = ref(null); // 滚动项容器引用
|
|
let timer = null;
|
|
|
|
// 生命周期钩子
|
|
onMounted(() => {
|
|
if (pieRef.value) {
|
|
const chart = echarts.init(pieRef.value);
|
|
chart.setOption(option);
|
|
}
|
|
|
|
// 初始化滚动
|
|
initScroll();
|
|
});
|
|
|
|
// 组件卸载时清除定时器
|
|
onUnmounted(() => {
|
|
if (timer) {
|
|
clearInterval(timer);
|
|
}
|
|
});
|
|
|
|
// 初始化滚动
|
|
function initScroll() {
|
|
setTimeout(() => {
|
|
if (scrollItemBox.value) {
|
|
copyHtml.value = scrollItemBox.value.innerHTML;
|
|
startScroll();
|
|
}
|
|
}, 100);
|
|
}
|
|
|
|
// 鼠标移入停止滚动
|
|
function mEnter() {
|
|
if (timer) {
|
|
clearInterval(timer);
|
|
timer = null;
|
|
}
|
|
}
|
|
|
|
// 鼠标移出继续滚动
|
|
function mLeave() {
|
|
startScroll();
|
|
}
|
|
|
|
// 开始滚动
|
|
function startScroll() {
|
|
if (timer) return;
|
|
timer = setInterval(() => {
|
|
scrollTop.value++;
|
|
// 获取需要滚动的盒子的高度
|
|
if (scrollItemBox.value) {
|
|
const scrollHeight = scrollItemBox.value.offsetHeight;
|
|
// 当滚动高度大于等于盒子高度时，从头开始滚动
|
|
if (scrollTop.value >= scrollHeight) {
|
|
scrollTop.value = 0;
|
|
}
|
|
}
|
|
}, speed.value);
|
|
}
|
|
|
|
// 关闭弹窗
|
|
function closeModal() {
|
|
visible.value = false;
|
|
startScroll();
|
|
}
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.carcTitle {
|
|
height: 1.4vw;
|
|
line-height: 1.4vw;
|
|
font-size: 0.8vw;
|
|
text-align: center;
|
|
color: #c4f3fe;
|
|
background: url("~@/assets/images/recruitment/card-title@2x.png") no-repeat center;
|
|
background-size: auto 100%;
|
|
margin-top: 0.7vw;
|
|
}
|
|
|
|
.pieMain {
|
|
position: relative;
|
|
|
|
.pieBox {
|
|
margin: 0 auto;
|
|
width: 7.6vw;
|
|
height: 7.6vw;
|
|
// border: 1px solid #fff;
|
|
margin-top: 0.5vw;
|
|
background: url("~@/assets/images/recruitment/pie-bg@2x.png") no-repeat center;
|
|
background-size: 100%;
|
|
}
|
|
|
|
.pieTitle {
|
|
position: absolute;
|
|
top: 50%;
|
|
width: 100%;
|
|
text-align: center;
|
|
z-index: 10;
|
|
margin-top: -0.5vw;
|
|
}
|
|
}
|
|
|
|
/* 通用列表样式 - 适用于表头和数据行 */
|
|
.header-list,
|
|
.scroll_list>div {
|
|
margin: 0;
|
|
padding: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
/* 统一的列表项基础样式 */
|
|
.header-list li,
|
|
.scroll_list li {
|
|
font-size: 0.9vw;
|
|
color: #C4F3FE;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
width: 100%;
|
|
height: 2vw;
|
|
padding: 0 0.8vw;
|
|
border-radius: 0.104vw;
|
|
transition: all 0.2s ease;
|
|
list-style: none;
|
|
margin: 0;
|
|
|
|
>div {
|
|
height: 100%;
|
|
line-height: 2vw;
|
|
padding: 0 0.2vw;
|
|
}
|
|
|
|
>div:first-child {
|
|
width: 20%;
|
|
text-align: left;
|
|
font-weight: bold;
|
|
}
|
|
|
|
>div:nth-child(2) {
|
|
width: 50%;
|
|
text-align: center;
|
|
}
|
|
|
|
>div:nth-child(3) {
|
|
width: 30%;
|
|
text-align: right;
|
|
font-weight: bold;
|
|
}
|
|
|
|
>div:nth-child(4) {
|
|
display: none;
|
|
/* 隐藏多余的div */
|
|
}
|
|
}
|
|
|
|
/* 数据行的悬停效果 */
|
|
.scroll_list li {
|
|
&:hover {
|
|
background-color: rgba(203, 242, 250, 0.1);
|
|
}
|
|
}
|
|
|
|
/* 滚动容器样式 */
|
|
.scroll_parent_box {
|
|
width: 100%;
|
|
height: 15vw;
|
|
/* 减去表头高度 */
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
/* 滚动列表容器 */
|
|
.scroll_list {
|
|
transition: all 0ms ease-in 0s;
|
|
width: 100%;
|
|
}
|
|
|
|
.singleBackground {
|
|
background-color: rgba(22, 65, 85, 0.5);
|
|
}
|
|
|
|
.evenBackground {
|
|
background-color: rgba(22, 65, 85, 0.9);
|
|
}
|
|
|
|
.topLi {
|
|
/* 保留表头特有的样式，但使用与数据行一致的基础样式 */
|
|
border: 0.026vw solid;
|
|
border-image: linear-gradient(180deg, rgba(203, 242, 250, 0), rgba(203, 242, 250, 0.8)) 1 1;
|
|
}
|
|
|
|
/* 统一背景色样式 - 表头和数据行使用相同的背景色机制 */
|
|
.singleBackground {
|
|
background-color: rgba(22, 65, 85, 0.5);
|
|
}
|
|
|
|
.evenBackground {
|
|
background-color: rgba(22, 65, 85, 0.9);
|
|
}
|
|
|
|
::deep(.el-dialog__header) {
|
|
display: none !important;
|
|
}
|
|
|
|
/* 轮播弹窗容器样式 */
|
|
.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;
|
|
|
|
.close-btn {
|
|
position: absolute;
|
|
top: 14.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);
|
|
// }
|
|
}
|
|
|
|
.carousel-item-content {
|
|
border-radius: 5px 5px 5px 5px;
|
|
background-color: #171E22;
|
|
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;
|
|
margin-top: 1vw;
|
|
line-height: 0.5vw;
|
|
text-align: center;
|
|
border-radius: 4px 4px 4px 4px;
|
|
}
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
::deep(.el-carousel__container) {
|
|
height: 14vw !important;
|
|
}
|
|
</style>
|