Merge remote-tracking branch 'origin/master'
# Conflicts: # src/views/recruitment/card/LaborSystemTwo.vue
This commit is contained in:
28
package-lock.json
generated
28
package-lock.json
generated
@ -15010,6 +15010,34 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
<<<<<<< HEAD
|
||||||
|
"vue-loader-v16": {
|
||||||
|
"version": "npm:vue-loader@16.8.3",
|
||||||
|
"resolved": "https://registry.npmmirror.com/vue-loader/-/vue-loader-16.8.3.tgz",
|
||||||
|
"integrity": "sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==",
|
||||||
|
"dev": true,
|
||||||
|
"optional": true,
|
||||||
|
"requires": {
|
||||||
|
"chalk": "^4.1.0",
|
||||||
|
"hash-sum": "^2.0.0",
|
||||||
|
"loader-utils": "^2.0.0"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"chalk": {
|
||||||
|
"version": "4.1.2",
|
||||||
|
"resolved": "https://registry.npmmirror.com/chalk/-/chalk-4.1.2.tgz",
|
||||||
|
"integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
|
||||||
|
"dev": true,
|
||||||
|
"optional": true,
|
||||||
|
"requires": {
|
||||||
|
"ansi-styles": "^4.1.0",
|
||||||
|
"supports-color": "^7.1.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
=======
|
||||||
|
>>>>>>> ac9e27d045b841a3a3a2a3dca10cce199d7f3c77
|
||||||
"vue-router": {
|
"vue-router": {
|
||||||
"version": "4.5.1",
|
"version": "4.5.1",
|
||||||
"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.5.1.tgz",
|
"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.5.1.tgz",
|
||||||
|
|||||||
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 |
@ -9,114 +9,84 @@ import { ref, reactive, computed, onMounted } from "vue";
|
|||||||
import * as echarts from "echarts";
|
import * as echarts from "echarts";
|
||||||
const enterpriseTwoRef = ref(null);
|
const enterpriseTwoRef = ref(null);
|
||||||
const option = {
|
const option = {
|
||||||
|
// 添加标题
|
||||||
|
title: {
|
||||||
|
text: '重点保供企业分布',
|
||||||
|
left: 'center',
|
||||||
|
top: '5%',
|
||||||
|
textStyle: {
|
||||||
|
color: '#30DCFF',
|
||||||
|
fontSize: 16,
|
||||||
|
fontWeight: 'normal'
|
||||||
|
}
|
||||||
|
},
|
||||||
// 设置图形位置
|
// 设置图形位置
|
||||||
grid: {
|
grid: {
|
||||||
top: "15%",
|
top: '20%',
|
||||||
left: "15%",
|
left: '15%',
|
||||||
right: "5%",
|
right: '5%',
|
||||||
bottom: "20%"
|
bottom: '25%'
|
||||||
},
|
|
||||||
// 设置图例
|
|
||||||
legend: {
|
|
||||||
itemWidth: 10, // 方块宽度
|
|
||||||
itemHeight: 10, // 方块高度
|
|
||||||
textStyle: {
|
|
||||||
color: "#B2D9DF" // 文字颜色
|
|
||||||
},
|
|
||||||
x: "center", // 图例在左（left）、右（right）、居中（center）、100px
|
|
||||||
y: "top", // 图例在上（top）、下（bottom）、居中（center、100px）、100px
|
|
||||||
padding: [15, 50, 0, 0] // 图例[距上右下左方距离
|
|
||||||
},
|
},
|
||||||
xAxis: {
|
xAxis: {
|
||||||
axisLine: {
|
show: true,
|
||||||
|
|
||||||
|
axisTick: {
|
||||||
|
show: true,
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
color: "#CBF2FA" // 文字颜色
|
color: '#CBF2FA'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
fontSize: 22, // 设置 x 轴文字大小
|
fontSize: 14,
|
||||||
color: "#CBF2FA", // 可以同时设置文字颜色
|
color: '#CBF2FA',
|
||||||
rotate: 20, // 文字倾斜45度
|
rotate: 0,
|
||||||
margin: 20 // 增加文字与轴线的距离
|
margin: 15
|
||||||
},
|
},
|
||||||
type: "category",
|
type: "category",
|
||||||
data: ["微型企业", "小型企业", "中型企业", "大型企业"]
|
data: ["第一产业", "第二产业", "第三产业"]
|
||||||
},
|
},
|
||||||
yAxis: {
|
yAxis: {
|
||||||
//网格线
|
interval: 50, // 设置刻度间隔
|
||||||
|
//显示网格线
|
||||||
splitLine: {
|
splitLine: {
|
||||||
show: true,
|
show: true,
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
color: ["#A1C7CD"], // 线颜色
|
color: ['#A1C7CD'],
|
||||||
opacity: 0.2 // 透明度
|
opacity: 0.2,
|
||||||
|
type: 'solid'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
axisLine: {
|
axisLine: {
|
||||||
lineStyle: {
|
show: false
|
||||||
color: "#CBF2FA" // 文字颜色
|
},
|
||||||
}
|
axisTick: {
|
||||||
|
show: false
|
||||||
},
|
},
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
fontSize: 20, // 设置 x 轴文字大小
|
show: false
|
||||||
color: "#CBF2FA" // 可以同时设置文字颜色
|
|
||||||
},
|
},
|
||||||
type: "value"
|
type: "value"
|
||||||
},
|
},
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
name: "岗位种类数",
|
name: "企业数",
|
||||||
type: "bar",
|
type: "bar",
|
||||||
showBackground: true,
|
showBackground: false,
|
||||||
barWidth: 8,
|
barWidth: 25,
|
||||||
data: [93, 231, 413, 451],
|
data: [6, 581, 41],
|
||||||
// 设置柱状图的数值
|
// 设置柱状图的数值
|
||||||
label: {
|
label: {
|
||||||
show: true,
|
show: true,
|
||||||
position: "top",
|
position: "top",
|
||||||
color: "#30DCFF",
|
color: '#30DCFF',
|
||||||
fontSize: 22
|
fontSize: 14,
|
||||||
|
formatter: function(params) {
|
||||||
|
return params.value + '家';
|
||||||
|
}
|
||||||
},
|
},
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
//渐变色
|
//纯色
|
||||||
color: {
|
color: '#30DCFF'
|
||||||
type: "linear",
|
|
||||||
x: 1,
|
|
||||||
y: 0,
|
|
||||||
x2: 0,
|
|
||||||
y2: 1,
|
|
||||||
colorStops: [
|
|
||||||
{ offset: 0, color: "rgba(48, 220, 255, 1)" },
|
|
||||||
{ offset: 1, color: "rgba(48, 220, 255, 0.06)" }
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "岗位人员数",
|
|
||||||
type: "bar",
|
|
||||||
showBackground: true,
|
|
||||||
barWidth: 8,
|
|
||||||
data: [451, 2110, 19356, 57083],
|
|
||||||
// 设置柱状图的数值
|
|
||||||
label: {
|
|
||||||
show: true,
|
|
||||||
position: "top",
|
|
||||||
color: "#CBF2FA",
|
|
||||||
fontSize: 22
|
|
||||||
},
|
|
||||||
itemStyle: {
|
|
||||||
//渐变色
|
|
||||||
color: {
|
|
||||||
type: "linear",
|
|
||||||
x: 1,
|
|
||||||
y: 0,
|
|
||||||
x2: 0,
|
|
||||||
y2: 1,
|
|
||||||
colorStops: [
|
|
||||||
{ offset: 0, color: "rgba(203, 242, 250, 1)" },
|
|
||||||
{ offset: 1, color: "rgba(203, 242, 250, 0.08)" }
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|||||||
442
src/views/recruitment/card/ListView.vue
Normal file
442
src/views/recruitment/card/ListView.vue
Normal file
@ -0,0 +1,442 @@
|
|||||||
|
<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>
|
||||||
@ -20,9 +20,10 @@
|
|||||||
indicator-position="none"
|
indicator-position="none"
|
||||||
:autoplay="true"
|
:autoplay="true"
|
||||||
>
|
>
|
||||||
<el-carousel-item><EnterpriseEmploymentOne /></el-carousel-item>
|
|
||||||
<el-carousel-item><EnterpriseEmploymentTwo /></el-carousel-item>
|
<el-carousel-item><EnterpriseEmploymentTwo /></el-carousel-item>
|
||||||
<el-carousel-item><EnterpriseEmploymentThree /></el-carousel-item>
|
<el-carousel-item><EnterpriseEmploymentOne /></el-carousel-item>
|
||||||
|
|
||||||
|
<!-- <el-carousel-item><EnterpriseEmploymentThree /></el-carousel-item> -->
|
||||||
</el-carousel>
|
</el-carousel>
|
||||||
</enterprise-employment-card>
|
</enterprise-employment-card>
|
||||||
<!-- 左2 -->
|
<!-- 左2 -->
|
||||||
@ -51,26 +52,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"
|
||||||
@ -90,6 +72,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>
|
||||||
<!-- 弹窗 -->
|
<!-- 弹窗 -->
|
||||||
@ -115,7 +109,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";
|
||||||
@ -141,8 +136,8 @@ const asideMeun = reactive({
|
|||||||
]
|
]
|
||||||
});
|
});
|
||||||
const cardOneInfo = {
|
const cardOneInfo = {
|
||||||
title: "企业用工结构分布",
|
title: "服务企业用工机构分布",
|
||||||
description: "7万家企业(含个体工商户)",
|
description: "",
|
||||||
type1: {
|
type1: {
|
||||||
title: "岗位种类数",
|
title: "岗位种类数",
|
||||||
count: "765个",
|
count: "765个",
|
||||||
@ -173,16 +168,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