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' }"
|
||||
>
|
||||
<!-- 右1 -->
|
||||
<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
|
||||
<enterprise-employment-card
|
||||
:title="cardFourInfo.title"
|
||||
:description="cardFourInfo.description"
|
||||
:type1="cardFourInfo.type1"
|
||||
@ -84,6 +65,18 @@
|
||||
<!-- <el-carousel-item><LaborSystemFour /></el-carousel-item> -->
|
||||
</el-carousel>
|
||||
</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 class="last_icon"></div>
|
||||
<!-- 弹窗 -->
|
||||
@ -109,7 +102,8 @@ import Carousel from "@/views/recruitment/components/carousel.vue";
|
||||
import EnterpriseEmploymentOne from "./card/EnterpriseEmploymentOne.vue";
|
||||
import EnterpriseEmploymentTwo from "./card/EnterpriseEmploymentTwo.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 CollegeTalentsThree from "./card/CollegeTalentsThree.vue";
|
||||
import LaborSystemOne from "./card/LaborSystemOne.vue";
|
||||
@ -163,16 +157,16 @@ const cardTwoInfo = {
|
||||
// }
|
||||
};
|
||||
const cardThreeInfo = {
|
||||
title: "高校人才供给能力",
|
||||
description: "4000+毕业生",
|
||||
title: "重点企业保供案例(比亚迪)",
|
||||
// description: "4000+毕业生",
|
||||
type1: {
|
||||
title: "学校数",
|
||||
count: "7",
|
||||
title: "招募总人数",
|
||||
count: "9775",
|
||||
class: "modelItem2"
|
||||
},
|
||||
type2: {
|
||||
title: "促就业人数",
|
||||
count: "2980",
|
||||
title: "企业总人数",
|
||||
count: "38448",
|
||||
class: "modelItem2"
|
||||
}
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user