兴蜀大屏轮播组件部分提交
This commit is contained in:
17
src/views/manpowerScreen/index.vue
Normal file
17
src/views/manpowerScreen/index.vue
Normal file
@ -0,0 +1,17 @@
|
||||
<template>
|
||||
<div style="color: #fff">额哥几个金额几个经二路佳乐家饿了就</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import {
|
||||
ref,
|
||||
reactive,
|
||||
onMounted,
|
||||
onUnmounted,
|
||||
getCurrentInstance,
|
||||
onBeforeUnmount
|
||||
} from "vue";
|
||||
onMounted(() => {});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import "@/assets/css/manpowerScreen.scss";
|
||||
</style>
|
||||
109
src/views/recruitment/card/CollegeTalentsOne.vue
Normal file
109
src/views/recruitment/card/CollegeTalentsOne.vue
Normal file
@ -0,0 +1,109 @@
|
||||
<template>
|
||||
<!-- 页面的 HTML 模板部分 -->
|
||||
<div class="custom-slide">
|
||||
<div class="custom-slide-inner">
|
||||
<div class="custom-slide-content tc">
|
||||
<div>第一产业需求</div>
|
||||
<div class="flex just-between align-center col">
|
||||
<div class="">
|
||||
<div class="title">岗位种类数</div>
|
||||
<div>480人</div>
|
||||
</div>
|
||||
<div class="">
|
||||
<div class="title">岗位人员数</div>
|
||||
<div>480人</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="custom-slide-inner">
|
||||
<div class="custom-slide-content tc">
|
||||
<div>第二产业需求</div>
|
||||
<div class="flex just-between align-center col">
|
||||
<div class="">
|
||||
<div class="title">岗位种类数</div>
|
||||
<div>480人</div>
|
||||
</div>
|
||||
<div class="">
|
||||
<div class="title">岗位人员数</div>
|
||||
<div>480人</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="custom-slide-inner">
|
||||
<div class="custom-slide-content tc">
|
||||
<div>第三产业需求</div>
|
||||
<div class="flex just-between align-center col">
|
||||
<div class="">
|
||||
<div class="title">岗位种类数</div>
|
||||
<div>480人</div>
|
||||
</div>
|
||||
<div class="">
|
||||
<div class="title">岗位人员数</div>
|
||||
<div>480人</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// Vue 3 Composition API 的 setup 语法糖
|
||||
// 在这里直接编写响应式数据和方法，无需返回
|
||||
import { ref, reactive, computed, onMounted } from "vue";
|
||||
|
||||
// 响应式数据
|
||||
const count = ref(0);
|
||||
const state = reactive({
|
||||
name: "Vue 3"
|
||||
});
|
||||
|
||||
// 计算属性
|
||||
const doubledCount = computed(() => count.value * 2);
|
||||
|
||||
// 方法
|
||||
const increment = () => {
|
||||
count.value++;
|
||||
};
|
||||
|
||||
// 生命周期钩子
|
||||
onMounted(() => {
|
||||
console.log("组件已挂载");
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.custom-slide {
|
||||
padding: 0.9vw 0.521vw;
|
||||
|
||||
.custom-slide-inner {
|
||||
width: 15.99vw;
|
||||
height: 4.323vw;
|
||||
background: url("~@/assets/recruitment/card_item_bg.svg") no-repeat center
|
||||
center;
|
||||
background-size: cover;
|
||||
margin-bottom: 1.042vw;
|
||||
|
||||
.custom-slide-content {
|
||||
color: #cbf2fa;
|
||||
font-size: 0.625vw;
|
||||
height: 4.323vw;
|
||||
padding: 0.417vw 1.25vw 0 5.677vw;
|
||||
|
||||
.title {
|
||||
margin-bottom: 0.26vw;
|
||||
}
|
||||
|
||||
.col {
|
||||
margin-top: 0.78125vw;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
124
src/views/recruitment/card/CollegeTalentsThree.vue
Normal file
124
src/views/recruitment/card/CollegeTalentsThree.vue
Normal file
@ -0,0 +1,124 @@
|
||||
<template>
|
||||
<div ref="enterpriseThreeRef" style="width: 17vw; height: 17vw"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// Vue 3 Composition API 的 setup 语法糖
|
||||
// 在这里直接编写响应式数据和方法，无需返回
|
||||
import { ref, reactive, computed, onMounted } from "vue";
|
||||
import * as echarts from "echarts";
|
||||
const enterpriseThreeRef = ref(null);
|
||||
const option = {
|
||||
// 设置图形位置
|
||||
grid: {
|
||||
top: "17%",
|
||||
left: "15%",
|
||||
right: "5%",
|
||||
bottom: "10%"
|
||||
},
|
||||
// 设置图例
|
||||
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: {
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#CBF2FA" // 文字颜色
|
||||
}
|
||||
},
|
||||
|
||||
type: "category",
|
||||
data: ["制造业", "服务业", "建筑业", "批发和零售业"]
|
||||
},
|
||||
yAxis: {
|
||||
//网格线
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: ["#A1C7CD"], // 线颜色
|
||||
opacity: 0.2 // 透明度
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#CBF2FA" // 文字颜色
|
||||
}
|
||||
},
|
||||
type: "value"
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "岗位种类数",
|
||||
type: "line",
|
||||
showBackground: true,
|
||||
barWidth: 8,
|
||||
data: [70, 62, 52, 41],
|
||||
// 设置柱状图的数值
|
||||
label: {
|
||||
show: true,
|
||||
position: "top",
|
||||
color: "#30DCFF"
|
||||
},
|
||||
itemStyle: {
|
||||
//渐变色
|
||||
color: {
|
||||
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: "line",
|
||||
showBackground: true,
|
||||
barWidth: 8,
|
||||
data: [54, 32, 45, 18],
|
||||
// 设置柱状图的数值
|
||||
label: {
|
||||
show: true,
|
||||
position: "top",
|
||||
color: "#CBF2FA"
|
||||
},
|
||||
itemStyle: {
|
||||
//渐变色
|
||||
color: {
|
||||
type: "linear",
|
||||
x: 1,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{ offset: 0, color: "rgba(178, 217, 223, 1)" }
|
||||
// { offset: 1, color: "rgba(203, 242, 250, 0.08)" }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
// 生命周期钩子
|
||||
onMounted(() => {
|
||||
if (enterpriseThreeRef.value) {
|
||||
const chart = echarts.init(enterpriseThreeRef.value);
|
||||
// 设置option
|
||||
chart.setOption(option);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
124
src/views/recruitment/card/CollegeTalentsTwo.vue
Normal file
124
src/views/recruitment/card/CollegeTalentsTwo.vue
Normal file
@ -0,0 +1,124 @@
|
||||
<template>
|
||||
<div ref="enterpriseTwoRef" style="width: 17vw; height: 17vw"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// Vue 3 Composition API 的 setup 语法糖
|
||||
// 在这里直接编写响应式数据和方法，无需返回
|
||||
import { ref, reactive, computed, onMounted } from "vue";
|
||||
import * as echarts from "echarts";
|
||||
const enterpriseTwoRef = ref(null);
|
||||
const option = {
|
||||
// 设置图形位置
|
||||
grid: {
|
||||
top: "15%",
|
||||
left: "15%",
|
||||
right: "5%",
|
||||
bottom: "10%"
|
||||
},
|
||||
// 设置图例
|
||||
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: {
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#CBF2FA" // 文字颜色
|
||||
}
|
||||
},
|
||||
|
||||
type: "category",
|
||||
data: ["微型企业", "小型企业", "中型企业", "大型企业"]
|
||||
},
|
||||
yAxis: {
|
||||
//网格线
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: ["#A1C7CD"], // 线颜色
|
||||
opacity: 0.2 // 透明度
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#CBF2FA" // 文字颜色
|
||||
}
|
||||
},
|
||||
type: "value"
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "岗位种类数",
|
||||
type: "bar",
|
||||
showBackground: true,
|
||||
barWidth: 8,
|
||||
data: [76, 32, 87, 65],
|
||||
// 设置柱状图的数值
|
||||
label: {
|
||||
show: true,
|
||||
position: "top",
|
||||
color: "#30DCFF"
|
||||
},
|
||||
itemStyle: {
|
||||
//渐变色
|
||||
color: {
|
||||
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: [34, 15, 45, 24],
|
||||
// 设置柱状图的数值
|
||||
label: {
|
||||
show: true,
|
||||
position: "top",
|
||||
color: "#CBF2FA"
|
||||
},
|
||||
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)" }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
// 生命周期钩子
|
||||
onMounted(() => {
|
||||
if (enterpriseTwoRef.value) {
|
||||
const chart = echarts.init(enterpriseTwoRef.value);
|
||||
// 设置option
|
||||
chart.setOption(option);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
109
src/views/recruitment/card/EnterpriseEmploymentOne.vue
Normal file
109
src/views/recruitment/card/EnterpriseEmploymentOne.vue
Normal file
@ -0,0 +1,109 @@
|
||||
<template>
|
||||
<!-- 页面的 HTML 模板部分 -->
|
||||
<div class="custom-slide">
|
||||
<div class="custom-slide-inner">
|
||||
<div class="custom-slide-content tc">
|
||||
<div>第一产业需求</div>
|
||||
<div class="flex just-between align-center col">
|
||||
<div class="">
|
||||
<div class="title">岗位种类数</div>
|
||||
<div>480人</div>
|
||||
</div>
|
||||
<div class="">
|
||||
<div class="title">岗位人员数</div>
|
||||
<div>480人</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="custom-slide-inner">
|
||||
<div class="custom-slide-content tc">
|
||||
<div>第二产业需求</div>
|
||||
<div class="flex just-between align-center col">
|
||||
<div class="">
|
||||
<div class="title">岗位种类数</div>
|
||||
<div>480人</div>
|
||||
</div>
|
||||
<div class="">
|
||||
<div class="title">岗位人员数</div>
|
||||
<div>480人</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="custom-slide-inner">
|
||||
<div class="custom-slide-content tc">
|
||||
<div>第三产业需求</div>
|
||||
<div class="flex just-between align-center col">
|
||||
<div class="">
|
||||
<div class="title">岗位种类数</div>
|
||||
<div>480人</div>
|
||||
</div>
|
||||
<div class="">
|
||||
<div class="title">岗位人员数</div>
|
||||
<div>480人</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// Vue 3 Composition API 的 setup 语法糖
|
||||
// 在这里直接编写响应式数据和方法，无需返回
|
||||
import { ref, reactive, computed, onMounted } from "vue";
|
||||
|
||||
// 响应式数据
|
||||
const count = ref(0);
|
||||
const state = reactive({
|
||||
name: "Vue 3"
|
||||
});
|
||||
|
||||
// 计算属性
|
||||
const doubledCount = computed(() => count.value * 2);
|
||||
|
||||
// 方法
|
||||
const increment = () => {
|
||||
count.value++;
|
||||
};
|
||||
|
||||
// 生命周期钩子
|
||||
onMounted(() => {
|
||||
console.log("组件已挂载");
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.custom-slide {
|
||||
padding: 0.9vw 0.521vw;
|
||||
|
||||
.custom-slide-inner {
|
||||
width: 15.99vw;
|
||||
height: 4.323vw;
|
||||
background: url("~@/assets/recruitment/card_item_bg.svg") no-repeat center
|
||||
center;
|
||||
background-size: cover;
|
||||
margin-bottom: 1.042vw;
|
||||
|
||||
.custom-slide-content {
|
||||
color: #cbf2fa;
|
||||
font-size: 0.625vw;
|
||||
height: 4.323vw;
|
||||
padding: 0.417vw 1.25vw 0 5.677vw;
|
||||
|
||||
.title {
|
||||
margin-bottom: 0.26vw;
|
||||
}
|
||||
|
||||
.col {
|
||||
margin-top: 0.78125vw;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
124
src/views/recruitment/card/EnterpriseEmploymentThree.vue
Normal file
124
src/views/recruitment/card/EnterpriseEmploymentThree.vue
Normal file
@ -0,0 +1,124 @@
|
||||
<template>
|
||||
<div ref="enterpriseThreeRef" style="width: 17vw; height: 17vw"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// Vue 3 Composition API 的 setup 语法糖
|
||||
// 在这里直接编写响应式数据和方法，无需返回
|
||||
import { ref, reactive, computed, onMounted } from "vue";
|
||||
import * as echarts from "echarts";
|
||||
const enterpriseThreeRef = ref(null);
|
||||
const option = {
|
||||
// 设置图形位置
|
||||
grid: {
|
||||
top: "17%",
|
||||
left: "15%",
|
||||
right: "5%",
|
||||
bottom: "10%"
|
||||
},
|
||||
// 设置图例
|
||||
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: {
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#CBF2FA" // 文字颜色
|
||||
}
|
||||
},
|
||||
|
||||
type: "category",
|
||||
data: ["制造业", "服务业", "建筑业", "批发和零售业"]
|
||||
},
|
||||
yAxis: {
|
||||
//网格线
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: ["#A1C7CD"], // 线颜色
|
||||
opacity: 0.2 // 透明度
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#CBF2FA" // 文字颜色
|
||||
}
|
||||
},
|
||||
type: "value"
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "岗位种类数",
|
||||
type: "line",
|
||||
showBackground: true,
|
||||
barWidth: 8,
|
||||
data: [70, 62, 52, 41],
|
||||
// 设置柱状图的数值
|
||||
label: {
|
||||
show: true,
|
||||
position: "top",
|
||||
color: "#30DCFF"
|
||||
},
|
||||
itemStyle: {
|
||||
//渐变色
|
||||
color: {
|
||||
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: "line",
|
||||
showBackground: true,
|
||||
barWidth: 8,
|
||||
data: [54, 32, 45, 18],
|
||||
// 设置柱状图的数值
|
||||
label: {
|
||||
show: true,
|
||||
position: "top",
|
||||
color: "#CBF2FA"
|
||||
},
|
||||
itemStyle: {
|
||||
//渐变色
|
||||
color: {
|
||||
type: "linear",
|
||||
x: 1,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{ offset: 0, color: "rgba(178, 217, 223, 1)" }
|
||||
// { offset: 1, color: "rgba(203, 242, 250, 0.08)" }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
// 生命周期钩子
|
||||
onMounted(() => {
|
||||
if (enterpriseThreeRef.value) {
|
||||
const chart = echarts.init(enterpriseThreeRef.value);
|
||||
// 设置option
|
||||
chart.setOption(option);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
124
src/views/recruitment/card/EnterpriseEmploymentTwo.vue
Normal file
124
src/views/recruitment/card/EnterpriseEmploymentTwo.vue
Normal file
@ -0,0 +1,124 @@
|
||||
<template>
|
||||
<div ref="enterpriseTwoRef" style="width: 17vw; height: 17vw"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// Vue 3 Composition API 的 setup 语法糖
|
||||
// 在这里直接编写响应式数据和方法，无需返回
|
||||
import { ref, reactive, computed, onMounted } from "vue";
|
||||
import * as echarts from "echarts";
|
||||
const enterpriseTwoRef = ref(null);
|
||||
const option = {
|
||||
// 设置图形位置
|
||||
grid: {
|
||||
top: "15%",
|
||||
left: "15%",
|
||||
right: "5%",
|
||||
bottom: "10%"
|
||||
},
|
||||
// 设置图例
|
||||
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: {
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#CBF2FA" // 文字颜色
|
||||
}
|
||||
},
|
||||
|
||||
type: "category",
|
||||
data: ["微型企业", "小型企业", "中型企业", "大型企业"]
|
||||
},
|
||||
yAxis: {
|
||||
//网格线
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: ["#A1C7CD"], // 线颜色
|
||||
opacity: 0.2 // 透明度
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#CBF2FA" // 文字颜色
|
||||
}
|
||||
},
|
||||
type: "value"
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "岗位种类数",
|
||||
type: "bar",
|
||||
showBackground: true,
|
||||
barWidth: 8,
|
||||
data: [76, 32, 87, 65],
|
||||
// 设置柱状图的数值
|
||||
label: {
|
||||
show: true,
|
||||
position: "top",
|
||||
color: "#30DCFF"
|
||||
},
|
||||
itemStyle: {
|
||||
//渐变色
|
||||
color: {
|
||||
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: [34, 15, 45, 24],
|
||||
// 设置柱状图的数值
|
||||
label: {
|
||||
show: true,
|
||||
position: "top",
|
||||
color: "#CBF2FA"
|
||||
},
|
||||
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)" }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
// 生命周期钩子
|
||||
onMounted(() => {
|
||||
if (enterpriseTwoRef.value) {
|
||||
const chart = echarts.init(enterpriseTwoRef.value);
|
||||
// 设置option
|
||||
chart.setOption(option);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
@ -1,68 +1,62 @@
|
||||
<template>
|
||||
<div class="swiper-container">
|
||||
<div class="swiper-wrapper">
|
||||
<div
|
||||
class="swiper-slide"
|
||||
:class="getSlideClass(index)"
|
||||
v-for="(slide, index) in slides"
|
||||
:key="index"
|
||||
:style="getSlideStyle(index)"
|
||||
>
|
||||
<div class="swiper-slide">
|
||||
<!-- 使用具名插槽传递每个slide的内容和索引 -->
|
||||
<div class="slide-content">
|
||||
<div class="slide-image">
|
||||
<slot name="slide" :slide="slide" :index="index" />
|
||||
<slot name="slide" />
|
||||
</div>
|
||||
<!-- <div class="slide-text">-->
|
||||
<!-- <h3>{{ slide.title }}</h3>-->
|
||||
<!-- <p>{{ slide.description }}</p>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="slide-text">
|
||||
<h3>{{ slide.title }}</h3>
|
||||
<p>{{ slide.description }}</p>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <div class="swiper-controls">-->
|
||||
<!-- <button class="swiper-button" @click="prevSlide">←</button>-->
|
||||
<!-- <button class="swiper-button" @click="nextSlide">→</button>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="swiper-controls">
|
||||
<button class="swiper-button" @click="prevSlide">←</button>
|
||||
<button class="swiper-button" @click="nextSlide">→</button>
|
||||
</div> -->
|
||||
|
||||
<!-- <div class="swiper-pagination">-->
|
||||
<!-- <div-->
|
||||
<!-- class="pagination-bullet"-->
|
||||
<!-- v-for="(slide, index) in slides"-->
|
||||
<!-- :key="index"-->
|
||||
<!-- :class="{ active: currentIndex === index }"-->
|
||||
<!-- @click="goToSlide(index)"-->
|
||||
<!-- ></div>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="swiper-pagination">
|
||||
<div
|
||||
class="pagination-bullet"
|
||||
v-for="(slide, index) in slides"
|
||||
:key="index"
|
||||
:class="{ active: currentIndex === index }"
|
||||
@click="goToSlide(index)"
|
||||
></div>
|
||||
</div> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { defineComponent, onMounted, onBeforeUnmount, ref } from 'vue'
|
||||
import { defineComponent, onMounted, onBeforeUnmount, ref } from "vue";
|
||||
|
||||
export default defineComponent({
|
||||
name: 'Carousel',
|
||||
name: "Carousel",
|
||||
props: {
|
||||
slides: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => [
|
||||
{
|
||||
title: '左侧卡片',
|
||||
description: '淡入效果从左侧进入',
|
||||
image: 'https://via.placeholder.com/600x400/3498db/ffffff?text=Left'
|
||||
},
|
||||
{
|
||||
title: '中间卡片',
|
||||
description: '淡入效果居中放大',
|
||||
image: 'https://via.placeholder.com/600x400/e74c3c/ffffff?text=Center'
|
||||
},
|
||||
{
|
||||
title: '右侧卡片',
|
||||
description: '淡入效果从右侧进入',
|
||||
image: 'https://via.placeholder.com/600x400/2ecc71/ffffff?text=Right'
|
||||
title: "左侧卡片",
|
||||
description: "淡入效果从左侧进入",
|
||||
image: "https://via.placeholder.com/600x400/3498db/ffffff?text=Left"
|
||||
}
|
||||
// {
|
||||
// title: "中间卡片",
|
||||
// description: "淡入效果居中放大",
|
||||
// image: "https://via.placeholder.com/600x400/e74c3c/ffffff?text=Center"
|
||||
// },
|
||||
// {
|
||||
// title: "右侧卡片",
|
||||
// description: "淡入效果从右侧进入",
|
||||
// image: "https://via.placeholder.com/600x400/2ecc71/ffffff?text=Right"
|
||||
// }
|
||||
]
|
||||
},
|
||||
autoPlayInterval: {
|
||||
@ -71,62 +65,71 @@ export default defineComponent({
|
||||
}
|
||||
},
|
||||
setup(props) {
|
||||
const currentIndex = ref(0)
|
||||
const autoPlayTimer = ref(null)
|
||||
const currentIndex = ref(0);
|
||||
const autoPlayTimer = ref(null);
|
||||
|
||||
const getSlideClass = (index) => {
|
||||
const diff = index - currentIndex.value
|
||||
if (diff === 0) return 'center'
|
||||
if (diff === -1 || (currentIndex.value === 0 && index === props.slides.length - 1)) return 'left'
|
||||
if (diff === 1 || (currentIndex.value === props.slides.length - 1 && index === 0)) return 'right'
|
||||
return ''
|
||||
}
|
||||
const diff = index - currentIndex.value;
|
||||
if (diff === 0) return "center";
|
||||
if (
|
||||
diff === -1 ||
|
||||
(currentIndex.value === 0 && index === props.slides.length - 1)
|
||||
)
|
||||
return "left";
|
||||
if (
|
||||
diff === 1 ||
|
||||
(currentIndex.value === props.slides.length - 1 && index === 0)
|
||||
)
|
||||
return "right";
|
||||
return "";
|
||||
};
|
||||
|
||||
const getSlideStyle = (index) => {
|
||||
const diff = index - currentIndex.value
|
||||
const diff = index - currentIndex.value;
|
||||
if (
|
||||
Math.abs(diff) > 1 &&
|
||||
!(currentIndex.value === 0 && index === props.slides.length - 1) &&
|
||||
!(currentIndex.value === props.slides.length - 1 && index === 0)
|
||||
) {
|
||||
return { display: 'none' }
|
||||
return { display: "none" };
|
||||
}
|
||||
return {}
|
||||
}
|
||||
return {};
|
||||
};
|
||||
|
||||
const prevSlide = () => {
|
||||
currentIndex.value = (currentIndex.value - 1 + props.slides.length) % props.slides.length
|
||||
resetAutoPlay()
|
||||
}
|
||||
currentIndex.value =
|
||||
(currentIndex.value - 1 + props.slides.length) % props.slides.length;
|
||||
resetAutoPlay();
|
||||
};
|
||||
|
||||
const nextSlide = () => {
|
||||
currentIndex.value = (currentIndex.value + 1) % props.slides.length
|
||||
resetAutoPlay()
|
||||
}
|
||||
currentIndex.value = (currentIndex.value + 1) % props.slides.length;
|
||||
resetAutoPlay();
|
||||
};
|
||||
|
||||
const goToSlide = (index) => {
|
||||
currentIndex.value = index
|
||||
resetAutoPlay()
|
||||
}
|
||||
currentIndex.value = index;
|
||||
resetAutoPlay();
|
||||
};
|
||||
|
||||
const startAutoPlay = () => {
|
||||
pauseAutoPlay()
|
||||
pauseAutoPlay();
|
||||
autoPlayTimer.value = window.setInterval(() => {
|
||||
nextSlide()
|
||||
}, props.autoPlayInterval)
|
||||
}
|
||||
nextSlide();
|
||||
}, props.autoPlayInterval);
|
||||
};
|
||||
|
||||
const pauseAutoPlay = () => {
|
||||
if (autoPlayTimer.value) {
|
||||
clearInterval(autoPlayTimer.value)
|
||||
autoPlayTimer.value = null
|
||||
clearInterval(autoPlayTimer.value);
|
||||
autoPlayTimer.value = null;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const resetAutoPlay = () => {
|
||||
pauseAutoPlay()
|
||||
startAutoPlay()
|
||||
}
|
||||
pauseAutoPlay();
|
||||
startAutoPlay();
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
// const container = document.querySelector('.swiper-container')
|
||||
@ -135,16 +138,16 @@ export default defineComponent({
|
||||
// container.addEventListener('mouseleave', startAutoPlay)
|
||||
// }
|
||||
// startAutoPlay()
|
||||
})
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
const container = document.querySelector('.swiper-container')
|
||||
const container = document.querySelector(".swiper-container");
|
||||
if (container) {
|
||||
container.removeEventListener('mouseenter', pauseAutoPlay)
|
||||
container.removeEventListener('mouseleave', startAutoPlay)
|
||||
container.removeEventListener("mouseenter", pauseAutoPlay);
|
||||
container.removeEventListener("mouseleave", startAutoPlay);
|
||||
}
|
||||
pauseAutoPlay()
|
||||
})
|
||||
pauseAutoPlay();
|
||||
});
|
||||
|
||||
return {
|
||||
currentIndex,
|
||||
@ -153,9 +156,9 @@ export default defineComponent({
|
||||
prevSlide,
|
||||
nextSlide,
|
||||
goToSlide
|
||||
}
|
||||
};
|
||||
}
|
||||
})
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@ -168,13 +171,13 @@ export default defineComponent({
|
||||
.swiper-container {
|
||||
width: 17.03125vw;
|
||||
position: relative;
|
||||
//padding: 2.083vw 0;
|
||||
/* padding: 2.083vw 0; */
|
||||
}
|
||||
|
||||
.swiper-wrapper {
|
||||
display: flex;
|
||||
position: relative;
|
||||
//height: 400px;
|
||||
/* height: 400px; */
|
||||
}
|
||||
|
||||
.swiper-slide {
|
||||
|
||||
@ -1,95 +1,95 @@
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { ref, reactive, onMounted } from "vue";
|
||||
|
||||
const state = reactive({
|
||||
tabs: [
|
||||
'公共服务站点 300', '培训机构 130', '咨询机构 220',
|
||||
'教育中心 150', '职业介绍所 180', '就业服务中心 210'
|
||||
"公共服务站点 300",
|
||||
"培训机构 130",
|
||||
"咨询机构 220",
|
||||
"教育中心 150",
|
||||
"职业介绍所 180",
|
||||
"就业服务中心 210"
|
||||
],
|
||||
activeIndex: 0
|
||||
})
|
||||
});
|
||||
|
||||
const scrollContainer = ref(null)
|
||||
const canScrollLeft = ref(false)
|
||||
const canScrollRight = ref(false)
|
||||
const scrollContainer = ref(null);
|
||||
const canScrollLeft = ref(false);
|
||||
const canScrollRight = ref(false);
|
||||
|
||||
// 检查滚动状态
|
||||
const checkScroll = () => {
|
||||
if (scrollContainer.value) {
|
||||
const { scrollLeft, scrollWidth, clientWidth } = scrollContainer.value
|
||||
canScrollLeft.value = scrollLeft > 0
|
||||
canScrollRight.value = scrollLeft < scrollWidth - clientWidth - 1
|
||||
const { scrollLeft, scrollWidth, clientWidth } = scrollContainer.value;
|
||||
canScrollLeft.value = scrollLeft > 0;
|
||||
canScrollRight.value = scrollLeft < scrollWidth - clientWidth - 1;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 滚动到指定位置
|
||||
const scrollTo = (direction) => {
|
||||
if (!scrollContainer.value) return
|
||||
if (!scrollContainer.value) return;
|
||||
|
||||
const container = scrollContainer.value
|
||||
const scrollAmount = 300 // 每次滚动量
|
||||
const container = scrollContainer.value;
|
||||
const scrollAmount = 300; // 每次滚动量
|
||||
|
||||
if (direction === 'left') {
|
||||
container.scrollBy({ left: -scrollAmount, behavior: 'smooth' })
|
||||
if (direction === "left") {
|
||||
container.scrollBy({ left: -scrollAmount, behavior: "smooth" });
|
||||
} else {
|
||||
container.scrollBy({ left: scrollAmount, behavior: 'smooth' })
|
||||
container.scrollBy({ left: scrollAmount, behavior: "smooth" });
|
||||
}
|
||||
|
||||
// 滚动结束后检查状态
|
||||
setTimeout(checkScroll, 300)
|
||||
}
|
||||
setTimeout(checkScroll, 300);
|
||||
};
|
||||
|
||||
// 点击标签
|
||||
const selectTab = (index) => {
|
||||
state.activeIndex = index
|
||||
state.activeIndex = index;
|
||||
// 可选：自动滚动到选中标签
|
||||
scrollToTab(index)
|
||||
}
|
||||
scrollToTab(index);
|
||||
};
|
||||
|
||||
// 滚动到指定标签
|
||||
const scrollToTab = (index) => {
|
||||
if (!scrollContainer.value) return
|
||||
if (!scrollContainer.value) return;
|
||||
|
||||
const container = scrollContainer.value
|
||||
const tab = container.children[index]
|
||||
if (!tab) return
|
||||
const container = scrollContainer.value;
|
||||
const tab = container.children[index];
|
||||
if (!tab) return;
|
||||
|
||||
const containerWidth = container.clientWidth
|
||||
const tabLeft = tab.offsetLeft
|
||||
const tabWidth = tab.offsetWidth
|
||||
const containerWidth = container.clientWidth;
|
||||
const tabLeft = tab.offsetLeft;
|
||||
const tabWidth = tab.offsetWidth;
|
||||
|
||||
container.scrollTo({
|
||||
left: tabLeft - (containerWidth - tabWidth) / 2,
|
||||
behavior: 'smooth'
|
||||
})
|
||||
}
|
||||
behavior: "smooth"
|
||||
});
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
checkScroll()
|
||||
window.addEventListener('resize', checkScroll)
|
||||
})
|
||||
checkScroll();
|
||||
window.addEventListener("resize", checkScroll);
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="costomCaedWrapper">
|
||||
<div class="horizontal-scroll-container">
|
||||
<!-- 左侧滚动按钮 -->
|
||||
<!-- <button-->
|
||||
<!-- class="scroll-button left"-->
|
||||
<!-- :class="{ visible: canScrollLeft }"-->
|
||||
<!-- @click="scrollTo('left')"-->
|
||||
<!-- >-->
|
||||
<!-- <svg viewBox="0 0 24 24">-->
|
||||
<!-- <path d="M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41z"/>-->
|
||||
<!-- </svg>-->
|
||||
<!-- </button>-->
|
||||
<!-- <button-->
|
||||
<!-- class="scroll-button left"-->
|
||||
<!-- :class="{ visible: canScrollLeft }"-->
|
||||
<!-- @click="scrollTo('left')"-->
|
||||
<!-- >-->
|
||||
<!-- <svg viewBox="0 0 24 24">-->
|
||||
<!-- <path d="M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41z"/>-->
|
||||
<!-- </svg>-->
|
||||
<!-- </button>-->
|
||||
|
||||
<!-- 横向滚动区域 -->
|
||||
<div
|
||||
ref="scrollContainer"
|
||||
class="scroll-area"
|
||||
@scroll="checkScroll"
|
||||
>
|
||||
<div ref="scrollContainer" class="scroll-area" @scroll="checkScroll">
|
||||
<div
|
||||
v-for="(tab, index) in state.tabs"
|
||||
:key="index"
|
||||
@ -102,24 +102,23 @@ onMounted(() => {
|
||||
</div>
|
||||
|
||||
<!-- 右侧滚动按钮 -->
|
||||
<!-- <button-->
|
||||
<!-- class="scroll-button right"-->
|
||||
<!-- :class="{ visible: canScrollRight }"-->
|
||||
<!-- @click="scrollTo('right')"-->
|
||||
<!-- >-->
|
||||
<!-- <svg viewBox="0 0 24 24">-->
|
||||
<!-- <path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/>-->
|
||||
<!-- </svg>-->
|
||||
<!-- </button>-->
|
||||
<!-- <button-->
|
||||
<!-- class="scroll-button right"-->
|
||||
<!-- :class="{ visible: canScrollRight }"-->
|
||||
<!-- @click="scrollTo('right')"-->
|
||||
<!-- >-->
|
||||
<!-- <svg viewBox="0 0 24 24">-->
|
||||
<!-- <path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/>-->
|
||||
<!-- </svg>-->
|
||||
<!-- </button>-->
|
||||
</div>
|
||||
|
||||
<img class="echart" src="~@/assets/recruitment/echart.svg" alt="">
|
||||
<img class="echart" src="~@/assets/recruitment/echart.svg" alt="" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
<style lang="scss" scoped>
|
||||
.costomCaedWrapper {
|
||||
|
||||
.echart {
|
||||
margin-top: 1.5vw;
|
||||
width: 100%;
|
||||
|
||||
@ -1,5 +1,9 @@
|
||||
<script setup>
|
||||
import { defineProps } from 'vue';
|
||||
import { defineProps } from "vue";
|
||||
import { ref, reactive, onMounted, getCurrentInstance } from "vue";
|
||||
onMounted(() => {
|
||||
console.log(props.type1, "ceshi");
|
||||
});
|
||||
import Carousel from "@/views/recruitment/components/carousel.vue";
|
||||
const props = defineProps({
|
||||
title: {
|
||||
@ -13,8 +17,24 @@ const props = defineProps({
|
||||
description: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
type1: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
title: "",
|
||||
count: "",
|
||||
class: ""
|
||||
})
|
||||
},
|
||||
type2: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
title: "",
|
||||
count: "",
|
||||
class: ""
|
||||
})
|
||||
}
|
||||
})
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@ -25,19 +45,19 @@ const props = defineProps({
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="modelItem1">
|
||||
<div class="title">岗位种类数</div>
|
||||
<div class="count">200.000</div>
|
||||
<div :class="type1.class">
|
||||
<div class="title">{{ type1.title }}</div>
|
||||
<div class="count">{{ type1.count }}</div>
|
||||
</div>
|
||||
<div class="modelItem2">
|
||||
<div class="title">岗位人员数</div>
|
||||
<div class="count">1246</div>
|
||||
<div :class="type2.class">
|
||||
<div class="title">{{ type2.title }}</div>
|
||||
<div class="count">{{ type2.count }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cardWrapper">
|
||||
<slot name="card">
|
||||
<carousel />
|
||||
<slot>
|
||||
<!-- <carousel /> -->
|
||||
</slot>
|
||||
</div>
|
||||
</div>
|
||||
@ -53,13 +73,8 @@ const props = defineProps({
|
||||
|
||||
.cardWrapper {
|
||||
position: relative;
|
||||
left: 50%;
|
||||
top: 0.78125vw;
|
||||
transform: translateX(-50%);
|
||||
//background: url("~@/assets/recruitment/card_bg.svg") no-repeat;
|
||||
//background-size: 100% 100%;
|
||||
width: 17.03125vw;
|
||||
height: 16.615vw;
|
||||
height: calc(100% - 6.2vw);
|
||||
margin: 0 1vw;
|
||||
}
|
||||
|
||||
.row {
|
||||
@ -68,31 +83,32 @@ const props = defineProps({
|
||||
|
||||
.count {
|
||||
font-size: 1.042vw;
|
||||
color: #48FAFC;
|
||||
color: #48fafc;
|
||||
}
|
||||
|
||||
.title {
|
||||
color: #FFFFFF;
|
||||
color: #ffffff;
|
||||
margin-bottom: 0.46875vw;
|
||||
font-size: 0.729vw;
|
||||
}
|
||||
|
||||
.modelItem1 {
|
||||
padding-top: 1.09375vw;
|
||||
text-align: right;
|
||||
padding-left: 4vw;
|
||||
text-align: left;
|
||||
background: url("~@/assets/recruitment/model1.svg") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
width: 7.823vw;
|
||||
background-size: auto 100%;
|
||||
width: 9.823vw;
|
||||
height: 4.167vw;
|
||||
margin-right: 3.021vw;
|
||||
}
|
||||
|
||||
.modelItem2 {
|
||||
padding-top: 1.09375vw;
|
||||
text-align: right;
|
||||
padding-left: 4vw;
|
||||
text-align: left;
|
||||
background: url("~@/assets/recruitment/model2.svg") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
width: 6.823vw;
|
||||
background-size: auto 100%;
|
||||
width: 9.823vw;
|
||||
height: 4.167vw;
|
||||
}
|
||||
}
|
||||
@ -110,12 +126,12 @@ const props = defineProps({
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
color: #A9F0FF;
|
||||
color: #a9f0ff;
|
||||
}
|
||||
|
||||
.right {
|
||||
margin-right: 1.042vw;
|
||||
color: #A9F0FF;
|
||||
color: #a9f0ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,97 +2,103 @@
|
||||
<div class="bigScrenn">
|
||||
<!-- 头部 -->
|
||||
<Head title="兴蜀人力数据概览"></Head>
|
||||
<div class="asidemodel transition modelImgleft " :style="{ left: isOpen_L ? '1vw' : '-22.369vw' }">
|
||||
<enterprise-employment-card title="企业用工结构分布" description="200.000 家企业注册">
|
||||
<template #card>
|
||||
<carousel>
|
||||
<!-- 自定义slide内容 -->
|
||||
<template #slide="{ slide, index }">
|
||||
<div class="custom-slide">
|
||||
<div class="custom-slide-inner">
|
||||
<div class="custom-slide-content tc">
|
||||
<div>第一产业需求</div>
|
||||
<div class="flex just-between align-center col">
|
||||
<div class="">
|
||||
<div class="title">岗位种类数</div>
|
||||
<div>480人</div>
|
||||
</div>
|
||||
<div class="">
|
||||
<div class="title">岗位人员数</div>
|
||||
<div>480人</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="custom-slide-inner">
|
||||
<div class="custom-slide-content tc">
|
||||
<div>第二产业需求</div>
|
||||
<div class="flex just-between align-center col">
|
||||
<div class="">
|
||||
<div class="title">岗位种类数</div>
|
||||
<div>480人</div>
|
||||
</div>
|
||||
<div class="">
|
||||
<div class="title">岗位人员数</div>
|
||||
<div>480人</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="custom-slide-inner">
|
||||
<div class="custom-slide-content tc">
|
||||
<div>第三产业需求</div>
|
||||
<div class="flex just-between align-center col">
|
||||
<div class="">
|
||||
<div class="title">岗位种类数</div>
|
||||
<div>480人</div>
|
||||
</div>
|
||||
<div class="">
|
||||
<div class="title">岗位人员数</div>
|
||||
<div>480人</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</carousel>
|
||||
</template>
|
||||
<div
|
||||
class="asidemodel transition modelImgleft"
|
||||
:style="{ left: isOpen_L ? '1vw' : '-22.369vw' }"
|
||||
>
|
||||
<!-- 左1 -->
|
||||
<enterprise-employment-card
|
||||
:title="cardOneInfo.title"
|
||||
:description="cardOneInfo.description"
|
||||
:type1="cardOneInfo.type1"
|
||||
:type2="cardOneInfo.type2"
|
||||
>
|
||||
<el-carousel
|
||||
:interval="4000"
|
||||
type="card"
|
||||
height="17vw"
|
||||
indicator-position="none"
|
||||
:autoplay="true"
|
||||
>
|
||||
<el-carousel-item><EnterpriseEmploymentOne /></el-carousel-item>
|
||||
<el-carousel-item><EnterpriseEmploymentTwo /></el-carousel-item>
|
||||
<el-carousel-item><EnterpriseEmploymentThree /></el-carousel-item>
|
||||
</el-carousel>
|
||||
</enterprise-employment-card>
|
||||
<!-- 左2 -->
|
||||
<enterprise-employment-card
|
||||
:title="cardTwoInfo.title"
|
||||
:description="cardTwoInfo.description"
|
||||
:type1="cardTwoInfo.type1"
|
||||
:type2="cardTwoInfo.type2"
|
||||
style="margin-top: 0.625vw"
|
||||
>
|
||||
<costom-caed />
|
||||
</enterprise-employment-card>
|
||||
<div style="margin-top: 0.625vw">
|
||||
<enterprise-employment-card title="服务网络覆盖情况" description="5000 家人力资源行业机构">
|
||||
<template #card>
|
||||
<costom-caed />
|
||||
</template>
|
||||
</enterprise-employment-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 中间 -->
|
||||
<CenterModel></CenterModel>
|
||||
|
||||
<div class="asidemodel asidemodelR transition modelImgright" :style="{ right: isOpen_R ? '1vw' : '-22.369vw' }">
|
||||
<enterprise-employment-card title="高校人才供给能力" description="10,000 毕业生" />
|
||||
<div style="margin-top: 0.625vw">
|
||||
<enterprise-employment-card title="三级劳务体系建设" description="10,000 名平台劳务经纪人" />
|
||||
</div>
|
||||
<div
|
||||
class="asidemodel asidemodelR transition modelImgright"
|
||||
: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="4000"
|
||||
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"
|
||||
:description="cardFourInfo.description"
|
||||
:type1="cardFourInfo.type1"
|
||||
:type2="cardFourInfo.type2"
|
||||
style="margin-top: 0.625vw"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="last_icon"></div>
|
||||
<!-- 弹窗 -->
|
||||
<HomeDialogInfo v-model="dialogShow" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
components: {
|
||||
EnterpriseEmploymentCard
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<script setup>
|
||||
import Head from './layout/headHome.vue'
|
||||
import CenterModel from './layout/centerModel.vue'
|
||||
import Head from "./layout/headHome.vue";
|
||||
import CenterModel from "./layout/centerModel.vue";
|
||||
import HomeDialogInfo from "@/components/homeDialogInfo/index.vue";
|
||||
import openWebSocket from "@/utils/webSocket.js";
|
||||
import { ref, reactive, onMounted, getCurrentInstance } from "vue";
|
||||
import EnterpriseEmploymentCard from "@/views/recruitment/components/enterpriseEmploymentCard.vue";
|
||||
import CostomCaed from "@/views/recruitment/components/costomCaed.vue";
|
||||
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 CollegeTalentsTwo from "./card/CollegeTalentsTwo.vue";
|
||||
import CollegeTalentsThree from "./card/CollegeTalentsThree.vue";
|
||||
|
||||
const { proxy } = getCurrentInstance();
|
||||
const isOpen_L = ref(true); //展开菜单-左边
|
||||
@ -102,18 +108,74 @@ const asideMeun = reactive({
|
||||
leftMeun: [
|
||||
{ mkMc: "产业产值、岗位缺口趋势", mkLydz: "cycz_gwqk_card" },
|
||||
{ mkMc: "重点保供企业分布", mkLydz: "zdbgqy_card" },
|
||||
{ mkMc: "缺口岗位TOP10", mkLydz: "zdqyqkxq_card" },
|
||||
{ mkMc: "缺口岗位TOP10", mkLydz: "zdqyqkxq_card" }
|
||||
],
|
||||
rightMeun: [
|
||||
{ mkMc: "用工供需风险预警", mkLydz: "yggxfxyj_card" },
|
||||
{ mkMc: "劳务市场异常预警", mkLydz: "lwscycyj_card" },
|
||||
{ mkMc: "合规监管预警", mkLydz: "hgjgyj_card" },
|
||||
{ mkMc: "服务质量预警", mkLydz: "fwzlyj_card" }
|
||||
],
|
||||
})
|
||||
]
|
||||
});
|
||||
const cardOneInfo = {
|
||||
title: "企业用工结构分布",
|
||||
description: "200.000 家企业注册",
|
||||
type1: {
|
||||
title: "岗位种类数",
|
||||
count: "200",
|
||||
class: "modelItem1"
|
||||
},
|
||||
type2: {
|
||||
title: "岗位人员数",
|
||||
count: "200",
|
||||
class: "modelItem2"
|
||||
}
|
||||
};
|
||||
const cardTwoInfo = {
|
||||
title: "服务网络覆盖情况",
|
||||
description: "5000 家人力资源行业机构",
|
||||
type1: {
|
||||
title: "公共服务站点",
|
||||
count: "200",
|
||||
class: "modelItem1"
|
||||
},
|
||||
type2: {
|
||||
title: "其他服务机构",
|
||||
count: "200",
|
||||
class: "modelItem1"
|
||||
}
|
||||
};
|
||||
const cardThreeInfo = {
|
||||
title: "高校人才供给能力",
|
||||
description: "10000 毕业生",
|
||||
type1: {
|
||||
title: "高校数",
|
||||
count: "23",
|
||||
class: "modelItem2"
|
||||
},
|
||||
type2: {
|
||||
title: "促就业人数",
|
||||
count: "100000",
|
||||
class: "modelItem2"
|
||||
}
|
||||
};
|
||||
const cardFourInfo = {
|
||||
title: "三级劳务体系建设",
|
||||
description: "10000 名平台劳务经纪人",
|
||||
type1: {
|
||||
title: "合作社",
|
||||
count: "400",
|
||||
class: "modelItem2"
|
||||
},
|
||||
type2: {
|
||||
title: "劳务经纪人",
|
||||
count: "100000",
|
||||
class: "modelItem2"
|
||||
}
|
||||
};
|
||||
onMounted(() => {
|
||||
getWebSocketData()
|
||||
})
|
||||
getWebSocketData();
|
||||
});
|
||||
// 获取WebSocket数据
|
||||
function getWebSocketData() {
|
||||
let dws = openWebSocket.getInstance();
|
||||
@ -121,7 +183,7 @@ function getWebSocketData() {
|
||||
// 接收发送消息
|
||||
dws.ws.onmessage = (e) => {
|
||||
let dataInfo = JSON.parse(e.data).data;
|
||||
console.log(dataInfo, 'dataInfo');
|
||||
console.log(dataInfo, "dataInfo");
|
||||
if (dataInfo == 1) {
|
||||
dialogShow.value = true;
|
||||
} else {
|
||||
@ -135,37 +197,6 @@ function getWebSocketData() {
|
||||
<style lang="scss" scoped>
|
||||
@import "components/recruitment.scss";
|
||||
|
||||
.custom-slide {
|
||||
padding: 0.521vw;
|
||||
|
||||
.custom-slide-inner {
|
||||
width: 15.99vw;
|
||||
height: 4.323vw;
|
||||
background: url("~@/assets/recruitment/card_item_bg.svg") no-repeat center center;
|
||||
background-size: cover;
|
||||
margin-bottom: 1.042vw;
|
||||
|
||||
.custom-slide-content {
|
||||
color: #CBF2FA;
|
||||
font-size: 0.625vw;
|
||||
height: 4.323vw;
|
||||
padding: 0.417vw 1.25vw 0 5.677vw;
|
||||
|
||||
.title {
|
||||
margin-bottom: 0.26vw;
|
||||
}
|
||||
|
||||
.col {
|
||||
margin-top: 0.78125vw;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.last_icon {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
@ -179,4 +210,19 @@ function getWebSocketData() {
|
||||
.transition {
|
||||
transition: all 0.5s;
|
||||
}
|
||||
.el-carousel {
|
||||
margin-top: 0.5vw;
|
||||
}
|
||||
.el-carousel__item {
|
||||
height: 100%;
|
||||
background: url("~@/assets/images/recruitment/card-bg.png") no-repeat #000;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.el-carousel__item.is-active {
|
||||
width: 17vw;
|
||||
margin-left: -3.85vw;
|
||||
}
|
||||
:deep(.el-carousel__mask) {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -19,34 +19,38 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { ref } from "vue";
|
||||
|
||||
const modelContentList = ref([
|
||||
{
|
||||
num: '780,000',
|
||||
label: '户籍人口',
|
||||
num: "780,000",
|
||||
label: "户籍人口"
|
||||
},
|
||||
{
|
||||
num: '780,000',
|
||||
label: '流动人口',
|
||||
num: "780,000",
|
||||
label: "流动人口"
|
||||
},
|
||||
{
|
||||
num: '780,000',
|
||||
label: '就业人群',
|
||||
num: "780,000",
|
||||
label: "就业人群"
|
||||
},
|
||||
{
|
||||
num: '780,000',
|
||||
label: '待就业人群',
|
||||
num: "780,000",
|
||||
label: "待就业人群"
|
||||
},
|
||||
{
|
||||
num: '780,000',
|
||||
label: '新增就业群体',
|
||||
num: "780,000",
|
||||
label: "新增就业群体"
|
||||
},
|
||||
{
|
||||
num: '780,000',
|
||||
label: '灵活就业群体',
|
||||
num: "780,000",
|
||||
label: "灵活就业群体"
|
||||
},
|
||||
{
|
||||
num: "780,000",
|
||||
label: "领金人员"
|
||||
}
|
||||
])
|
||||
]);
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@ -77,7 +81,7 @@ const modelContentList = ref([
|
||||
.num {
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-size: 2.667vw;
|
||||
color: #30DCFF;
|
||||
color: #30dcff;
|
||||
}
|
||||
|
||||
.label {
|
||||
@ -85,7 +89,7 @@ const modelContentList = ref([
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 0.833vw;
|
||||
color: #CBF2FA;
|
||||
color: #cbf2fa;
|
||||
}
|
||||
}
|
||||
|
||||
@ -93,7 +97,6 @@ const modelContentList = ref([
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
|
||||
.modelContent {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -104,11 +107,12 @@ const modelContentList = ref([
|
||||
width: 10.729vw;
|
||||
height: 6.667vw;
|
||||
padding: 0.625vw 0;
|
||||
margin: 0 0.7vw 1.2vw;
|
||||
|
||||
.num {
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-size: 1.667vw;
|
||||
color: #30DCFF;
|
||||
color: #30dcff;
|
||||
}
|
||||
|
||||
.label {
|
||||
@ -116,17 +120,15 @@ const modelContentList = ref([
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 0.833vw;
|
||||
color: #CBF2FA;
|
||||
color: #cbf2fa;
|
||||
}
|
||||
|
||||
&:nth-last-child(-n+1) {
|
||||
margin-top: 2.34375vw;
|
||||
margin-right: 13.8vw;
|
||||
&:nth-last-child(1) {
|
||||
margin-right: 8vw;
|
||||
}
|
||||
|
||||
&:nth-last-child(2) {
|
||||
margin-top: 2.34375vw;
|
||||
margin-left: 13.8vw;
|
||||
&:nth-last-child(3) {
|
||||
margin-left: 8vw;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user