lcw
This commit is contained in:
21072
package-lock.json
generated
21072
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
11
src/assets/recruitment/plghlhsg.svg
Normal file
11
src/assets/recruitment/plghlhsg.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 292 KiB |
11
src/assets/recruitment/plghlhsg3.svg
Normal file
11
src/assets/recruitment/plghlhsg3.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 559 KiB |
11
src/assets/recruitment/plghlhsg4.svg
Normal file
11
src/assets/recruitment/plghlhsg4.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 376 KiB |
11
src/assets/recruitment/plghlhsg5.svg
Normal file
11
src/assets/recruitment/plghlhsg5.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 1.0 MiB |
441
src/views/recruitment/card/ListView.vue
Normal file
441
src/views/recruitment/card/ListView.vue
Normal file
@ -0,0 +1,441 @@
|
|||||||
|
<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">
|
||||||
|
仁寿县劳务合作社联合送工5
|
||||||
|
</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">
|
||||||
|
批量化规模化送工现场1
|
||||||
|
</div>
|
||||||
|
<div style="height:10vw;">
|
||||||
|
<img src="@/assets/recruitment/plghlhsg3.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/plghlhsg5.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>
|
||||||
@ -45,26 +45,7 @@
|
|||||||
:style="{ right: isOpen_R ? '1vw' : '-22.369vw' }"
|
:style="{ right: isOpen_R ? '1vw' : '-22.369vw' }"
|
||||||
>
|
>
|
||||||
<!-- 右1 -->
|
<!-- 右1 -->
|
||||||
<enterprise-employment-card
|
<enterprise-employment-card
|
||||||
:title="cardThreeInfo.title"
|
|
||||||
:description="cardThreeInfo.description"
|
|
||||||
:type1="cardThreeInfo.type1"
|
|
||||||
:type2="cardThreeInfo.type2"
|
|
||||||
>
|
|
||||||
<el-carousel
|
|
||||||
:interval="8000"
|
|
||||||
type="card"
|
|
||||||
height="17vw"
|
|
||||||
indicator-position="none"
|
|
||||||
:autoplay="true"
|
|
||||||
>
|
|
||||||
<el-carousel-item><CollegeTalentsOne /></el-carousel-item>
|
|
||||||
<el-carousel-item><CollegeTalentsTwo /></el-carousel-item>
|
|
||||||
<!-- <el-carousel-item><CollegeTalentsThree /></el-carousel-item> -->
|
|
||||||
</el-carousel>
|
|
||||||
</enterprise-employment-card>
|
|
||||||
<!-- 右2 -->
|
|
||||||
<enterprise-employment-card
|
|
||||||
:title="cardFourInfo.title"
|
:title="cardFourInfo.title"
|
||||||
:description="cardFourInfo.description"
|
:description="cardFourInfo.description"
|
||||||
:type1="cardFourInfo.type1"
|
:type1="cardFourInfo.type1"
|
||||||
@ -84,6 +65,18 @@
|
|||||||
<!-- <el-carousel-item><LaborSystemFour /></el-carousel-item> -->
|
<!-- <el-carousel-item><LaborSystemFour /></el-carousel-item> -->
|
||||||
</el-carousel>
|
</el-carousel>
|
||||||
</enterprise-employment-card>
|
</enterprise-employment-card>
|
||||||
|
<enterprise-employment-card
|
||||||
|
:title="cardThreeInfo.title"
|
||||||
|
:description="cardThreeInfo.description"
|
||||||
|
:type1="cardThreeInfo.type1"
|
||||||
|
:type2="cardThreeInfo.type2"
|
||||||
|
>
|
||||||
|
<ListView/>
|
||||||
|
|
||||||
|
|
||||||
|
</enterprise-employment-card>
|
||||||
|
<!-- 右2 -->
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="last_icon"></div>
|
<div class="last_icon"></div>
|
||||||
<!-- 弹窗 -->
|
<!-- 弹窗 -->
|
||||||
@ -109,7 +102,8 @@ import Carousel from "@/views/recruitment/components/carousel.vue";
|
|||||||
import EnterpriseEmploymentOne from "./card/EnterpriseEmploymentOne.vue";
|
import EnterpriseEmploymentOne from "./card/EnterpriseEmploymentOne.vue";
|
||||||
import EnterpriseEmploymentTwo from "./card/EnterpriseEmploymentTwo.vue";
|
import EnterpriseEmploymentTwo from "./card/EnterpriseEmploymentTwo.vue";
|
||||||
import EnterpriseEmploymentThree from "./card/EnterpriseEmploymentThree.vue";
|
import EnterpriseEmploymentThree from "./card/EnterpriseEmploymentThree.vue";
|
||||||
import CollegeTalentsOne from "./card/CollegeTalentsOne.vue";
|
// import CollegeTalentsOne from "./card/CollegeTalentsOne.vue";
|
||||||
|
import ListView from "./card/ListView.vue";
|
||||||
import CollegeTalentsTwo from "./card/CollegeTalentsTwo.vue";
|
import CollegeTalentsTwo from "./card/CollegeTalentsTwo.vue";
|
||||||
import CollegeTalentsThree from "./card/CollegeTalentsThree.vue";
|
import CollegeTalentsThree from "./card/CollegeTalentsThree.vue";
|
||||||
import LaborSystemOne from "./card/LaborSystemOne.vue";
|
import LaborSystemOne from "./card/LaborSystemOne.vue";
|
||||||
@ -163,16 +157,16 @@ const cardTwoInfo = {
|
|||||||
// }
|
// }
|
||||||
};
|
};
|
||||||
const cardThreeInfo = {
|
const cardThreeInfo = {
|
||||||
title: "高校人才供给能力",
|
title: "重点企业保供案例(比亚迪)",
|
||||||
description: "4000+毕业生",
|
// description: "4000+毕业生",
|
||||||
type1: {
|
type1: {
|
||||||
title: "学校数",
|
title: "招募总人数",
|
||||||
count: "7",
|
count: "9775",
|
||||||
class: "modelItem2"
|
class: "modelItem2"
|
||||||
},
|
},
|
||||||
type2: {
|
type2: {
|
||||||
title: "促就业人数",
|
title: "企业总人数",
|
||||||
count: "2980",
|
count: "38448",
|
||||||
class: "modelItem2"
|
class: "modelItem2"
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user