13屏幕
This commit is contained in:
13684185576
@ -30,43 +30,49 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
const dataItems = ref([
|
||||
{
|
||||
label: '岗位需求数',
|
||||
value: 120000,
|
||||
icon: require('@/assets/images/30.png'),
|
||||
dw: '个'
|
||||
},
|
||||
// {
|
||||
// label: '岗位需求数',
|
||||
// value: 120000,
|
||||
// icon: require('@/assets/images/30.png'),
|
||||
// dw: '个'
|
||||
// },
|
||||
{
|
||||
label: '培训机构',
|
||||
value: 5,
|
||||
icon: require('@/assets/images/31.png'),
|
||||
icon: require('@/assets/images/30.png'),
|
||||
dw: '家'
|
||||
},
|
||||
{
|
||||
label: '上架培训项目数',
|
||||
value: 23,
|
||||
label: '培训项目',
|
||||
value: 39,
|
||||
icon: require('@/assets/images/31.png'),
|
||||
dw: '个'
|
||||
},
|
||||
{
|
||||
label: '培训课程数',
|
||||
value: 141,
|
||||
icon: require('@/assets/images/32.png'),
|
||||
dw: '个'
|
||||
},
|
||||
{
|
||||
label: '学员入职率',
|
||||
value: 93.80,
|
||||
label: '培训人次',
|
||||
icon: require('@/assets/images/33.png'),
|
||||
dw: '%'
|
||||
value: 5153,
|
||||
dw: '人次',
|
||||
// data: [
|
||||
// { label: '培训项目', value: 53, dw: '个' },
|
||||
// { label: '培训课程数', value: 114, dw: '个' },
|
||||
// { label: '报名人次', value: 925, dw: '次' },
|
||||
// { label: '签到人数', value: 886, dw: '人' },
|
||||
// { label: '培训完结', value: 879, dw: '人' },
|
||||
// { label: '证书颁发', value: 870, dw: '人' },
|
||||
// ]
|
||||
},
|
||||
{
|
||||
label: '培训成效',
|
||||
label: '领证人数',
|
||||
value: 870,
|
||||
icon: require('@/assets/images/34.png'),
|
||||
value: 3727,
|
||||
dw: '次',
|
||||
data: [
|
||||
{ label: '培训项目', value: 53, dw: '个' },
|
||||
{ label: '培训课程数', value: 114, dw: '个' },
|
||||
{ label: '报名人次', value: 925, dw: '次' },
|
||||
{ label: '签到人数', value: 886, dw: '人' },
|
||||
{ label: '培训完结', value: 879, dw: '人' },
|
||||
{ label: '证书颁发', value: 870, dw: '人' },
|
||||
]
|
||||
dw: '人'
|
||||
},
|
||||
|
||||
]);
|
||||
|
||||
@ -21,7 +21,7 @@
|
||||
<ul class="child-Box" v-for="(itemchild, iex) in item.data.list" :key="iex">
|
||||
<li class="child-item flex align-center">
|
||||
<span class="mr20 ml50">0{{ iex + 1 }}、{{ itemchild.mc }}</span>
|
||||
<span class="nums">{{ itemchild.num }} <span>{{ itemchild.dw }}</span></span>
|
||||
<!-- <span class="nums">{{ itemchild.num }} <span>{{ itemchild.dw }}</span></span> -->
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@ -34,37 +34,35 @@ import { ref } from 'vue';
|
||||
const dataItems = ref([
|
||||
{
|
||||
label: '用人单位数',
|
||||
value: 233,
|
||||
value: 628,
|
||||
dw:'家',
|
||||
icon:require('@/assets/images/1.png')
|
||||
},
|
||||
{
|
||||
label: '发布岗位数',
|
||||
dw:'个',
|
||||
dw:'万个',
|
||||
icon:require('@/assets/images/2.png'),
|
||||
value: 9637,
|
||||
value: 7.9,
|
||||
data: {
|
||||
label: '招聘热门岗位',
|
||||
icon:require('@/assets/images/35.png'),
|
||||
list: [
|
||||
{ mc: '制造业普工', num: 4000, dw: '岗位' },
|
||||
{ mc: '光伏业务员', num: 1400, dw: '岗位'},
|
||||
{ mc: '软件开发', num: 800, dw: '岗位' },
|
||||
{ mc: '操作工', num: 4000, dw: '岗位' },
|
||||
{ mc: '机修工', num: 1400, dw: '岗位'},
|
||||
{ mc: '工程师', num: 800, dw: '岗位' },
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '匹配入职人数',
|
||||
value: 1300,
|
||||
icon: require('@/assets/images/3.png'),
|
||||
dw:'人',
|
||||
label: '入职热门岗位',
|
||||
icon: require('@/assets/images/36.png'),
|
||||
data: {
|
||||
label: '入职热门岗位',
|
||||
icon:require('@/assets/images/36.png'),
|
||||
// label: '入职热门岗位',
|
||||
// icon:require('@/assets/images/36.png'),
|
||||
list: [
|
||||
{ mc: '普工', num: 680, dw: '岗位', },
|
||||
{ mc: '销售', num: 230, dw: '岗位' },
|
||||
{ mc: '操作工', num: 103, dw: '岗位' },
|
||||
{ mc: '质检', num: 680, dw: '岗位', },
|
||||
{ mc: '研发工程师', num: 230, dw: '岗位' },
|
||||
{ mc: '库管员', num: 103, dw: '岗位' },
|
||||
]
|
||||
}
|
||||
}
|
||||
@ -79,7 +77,7 @@ const dataItems = ref([
|
||||
}
|
||||
|
||||
.box-container {
|
||||
padding: 2vw 20px;
|
||||
padding: 2vw 20px 7vw;
|
||||
border-radius: 8px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
|
||||
@ -31,37 +31,24 @@
|
||||
import { ref } from 'vue';
|
||||
const dataItems = ref([
|
||||
{
|
||||
label: '帮扶就业困难人员',
|
||||
value: 55,
|
||||
label: '崇州市政府统筹就业岗位',
|
||||
value: 654,
|
||||
icon: require('@/assets/images/41.png'),
|
||||
dw: '人',
|
||||
dw: '个',
|
||||
data: [
|
||||
{ label: '城镇零就业家庭成员', value: 0, dw: '人' },
|
||||
{ label: '城镇低保家庭', value: 5175, dw: '人' },
|
||||
{ label: '残疾人', value: 18000, dw: '人' },
|
||||
{ label: '现役军人配偶', value: 8970, dw: '人' },
|
||||
{ label: '烈士家属', value: 48, dw: '人' },
|
||||
{ label: '脱贫劳动力', value: 119000, dw: '人' },
|
||||
{ label: '农村低收入群体', value: 11200, dw: '人' },
|
||||
{ label: '公务员岗位', value: 52, dw: '个' },
|
||||
{ label: '事业人才引进岗位', value: 306, dw: '个' },
|
||||
{ label: '服务基层项目', value: 146, dw: '个' },
|
||||
{ label: '政府购买服务岗位', value: 150, dw: '个' },
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '困难毕业生',
|
||||
label: '见习岗位情况',
|
||||
icon: require('@/assets/images/29.png'),
|
||||
value: 1434,
|
||||
dw: '人'
|
||||
},
|
||||
{
|
||||
label: '退役军人',
|
||||
value: 25700,
|
||||
icon: require('@/assets/images/39.png'),
|
||||
dw: '人'
|
||||
},
|
||||
{
|
||||
label: '长期失业人员',
|
||||
icon: require('@/assets/images/40.png'),
|
||||
value: 2208,
|
||||
dw: '人'
|
||||
data: [
|
||||
{ label: '毕业生见习单位', value: 32, dw: '家' },
|
||||
{ label: '毕业生见习岗位数', value: 525, dw: '个' },
|
||||
]
|
||||
},
|
||||
|
||||
]);
|
||||
@ -81,7 +68,7 @@ const dataItems = ref([
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
// justify-content: space-between;
|
||||
}
|
||||
|
||||
.data-item {
|
||||
@ -89,6 +76,7 @@ const dataItems = ref([
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 5vw;
|
||||
}
|
||||
|
||||
.data-content {
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<div class="bigScrenn cppBox">
|
||||
<!-- 第一部分 -->
|
||||
<div class="none-Cont" >
|
||||
<Head title='兴蜀来了人力资源搓配服务平台'></Head>
|
||||
<Head title='三级劳务体系布局'></Head>
|
||||
<div class="conttent">
|
||||
<echartsMap></echartsMap>
|
||||
</div>
|
||||
@ -46,7 +46,7 @@
|
||||
</div>
|
||||
</li>
|
||||
<li class="childOne">
|
||||
<div class="title-small">重点人群</div>
|
||||
<div class="title-small">重点人群（大学生）</div>
|
||||
<div class="childCnt">
|
||||
<zdrq></zdrq>
|
||||
</div>
|
||||
|
||||
@ -13,7 +13,7 @@
|
||||
<!-- </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"
|
||||
@ -23,7 +23,7 @@
|
||||
>
|
||||
{{ tab }}
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<!-- 右侧滚动按钮 -->
|
||||
<!-- <button-->
|
||||
@ -35,13 +35,15 @@
|
||||
<!-- <path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/>-->
|
||||
<!-- </svg>-->
|
||||
<!-- </button>-->
|
||||
<Cygjbl></Cygjbl>
|
||||
</div>
|
||||
|
||||
<NetworkMap />
|
||||
<!-- <NetworkMap /> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Cygjbl from "./cygjbl.vue";
|
||||
import { ref, reactive, onMounted } from "vue";
|
||||
import NetworkMap from "../card/NetworkMap.vue";
|
||||
const state = reactive({
|
||||
|
||||
188
src/views/recruitment/components/cygjbl.vue
Normal file
188
src/views/recruitment/components/cygjbl.vue
Normal file
@ -0,0 +1,188 @@
|
||||
<template>
|
||||
<div class="seconent">
|
||||
<div class="inbox flex space-between">
|
||||
<ul class="inLeft items">
|
||||
<li class="child left_child" v-for="it in data.left" :key="it">
|
||||
<div class="text">{{ it.label }}</div>
|
||||
<div class="num">{{ it.per }}</div>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="inright items tc">
|
||||
<li class="child relative right_child" v-for="it in data.right" :key="it">
|
||||
<div class="text">{{ it.label }}</div>
|
||||
<div class="num">{{ it.per }}</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, ref } from "vue";
|
||||
const data = reactive({
|
||||
left: [
|
||||
{ label: "岗位需求人数", per: "12%" },
|
||||
{ label: "就业意向人数", per: "80%" },
|
||||
],
|
||||
right: [
|
||||
{ label: "岗位需求增幅", per: "78.3%" },
|
||||
{ label: "求职人员增幅", per: "23.1%" },
|
||||
]
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@mixin textColor($color1, $color2) {
|
||||
background-image: linear-gradient(to top, $color1 0%, $color2 70%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.seconent {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.inbox {
|
||||
width: 19vw;
|
||||
height: 100%;
|
||||
margin-top: 2vw;
|
||||
background: url("~@/assets/recruitment/jy.png") no-repeat;
|
||||
background-size:100% 100%;
|
||||
img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
|
||||
.items {
|
||||
width: 50%;
|
||||
height: 70%;
|
||||
|
||||
.child {
|
||||
height: 100px;
|
||||
background-size: 100% 100%;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.left_child {
|
||||
// width: 439px;
|
||||
background-size: 100% 100%;
|
||||
|
||||
.text {
|
||||
margin-left: 1.6vw;
|
||||
margin-top: -0.2vw;
|
||||
white-space: nowrap;
|
||||
font-size: 0.8vw;
|
||||
font-family: "YSBTH";
|
||||
@include textColor(#5cb2f7, #ffffff);
|
||||
}
|
||||
|
||||
.num {
|
||||
margin-left: 1.5vw;
|
||||
font-family: "YSBTH";
|
||||
white-space: nowrap;
|
||||
font-size: 1vw;
|
||||
@include textColor(#5cb2f7, #48FAFC);
|
||||
}
|
||||
|
||||
&:nth-child(1) {
|
||||
margin-left: 3vw;
|
||||
background: url("~@/assets/recruitment/left-one.svg") no-repeat;
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
background: url("~@/assets/recruitment/left-two.svg") no-repeat;
|
||||
}
|
||||
}
|
||||
|
||||
.right_child {
|
||||
background-size: 100% 100%;
|
||||
|
||||
.text {
|
||||
margin-right: 1.5vw;
|
||||
margin-top: -0.2vw;
|
||||
white-space: nowrap;
|
||||
font-size: 0.8vw;
|
||||
font-family: "YSBTH";
|
||||
@include textColor(#5cb2f7, #ffffff);
|
||||
}
|
||||
|
||||
.num {
|
||||
margin-right: 1.5vw;
|
||||
font-family: "YSBTH";
|
||||
white-space: nowrap;
|
||||
font-size: 1vw;
|
||||
@include textColor(#5cb2f7, #ffffff);
|
||||
}
|
||||
|
||||
&:nth-child(1) {
|
||||
margin-right: 3vw;
|
||||
background: url("~@/assets/recruitment/right-one.svg") no-repeat right center;
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
background: url("~@/assets/recruitment/right-two.svg") no-repeat right center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.inLeft,
|
||||
.inright {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.inLeft {
|
||||
// margin-left: -2vw;
|
||||
}
|
||||
|
||||
.inright {
|
||||
.num {
|
||||
margin-left: 40px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.ohher {
|
||||
position: absolute;
|
||||
top: 60px;
|
||||
left: 162px;
|
||||
font-family: "YSBTH";
|
||||
font-size: 16px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.incenter {
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
top: 73%;
|
||||
left: 50%;
|
||||
transform: translateX(-54%);
|
||||
width: 60%;
|
||||
|
||||
.hedbt {
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
|
||||
.text {
|
||||
white-space: nowrap;
|
||||
font-size: 2vw;
|
||||
font-family: "YSBTH";
|
||||
@include textColor(#5cb2f7, #ffffff);
|
||||
margin-left: 70px;
|
||||
}
|
||||
}
|
||||
|
||||
.ctbox {
|
||||
justify-content: space-around;
|
||||
padding-left: 30px;
|
||||
font-size: 3vw;
|
||||
font-family: "YSBTH";
|
||||
@include textColor(#5cb2f7, #ffffff);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -43,7 +43,7 @@ const props = defineProps({
|
||||
<div class="left">{{ title }}</div>
|
||||
<div class="right">{{ description }}</div>
|
||||
</div>
|
||||
|
||||
<slot name="header"></slot>
|
||||
<div class="row">
|
||||
<div :class="type1.class">
|
||||
<div class="title">{{ type1.title }}</div>
|
||||
@ -53,6 +53,10 @@ const props = defineProps({
|
||||
<div class="title">{{ type2.title }}</div>
|
||||
<div class="count">{{ type2.count }}</div>
|
||||
</div>
|
||||
<div :class="type2.class">
|
||||
<div class="title">{{ type2.title }}</div>
|
||||
<div class="count">{{ type2.count }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cardWrapper">
|
||||
@ -79,6 +83,7 @@ const props = defineProps({
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
justify-content:space-between;
|
||||
margin: 0.521vw 0.573vw 0;
|
||||
|
||||
.count {
|
||||
@ -111,6 +116,27 @@ const props = defineProps({
|
||||
width: 9.823vw;
|
||||
height: 4.167vw;
|
||||
}
|
||||
.modelItem3 {
|
||||
padding-top: 0.8vw;
|
||||
padding-left: 3.2vw;
|
||||
text-align: left;
|
||||
// background: url("~@/assets/recruitment/model2.svg") no-repeat;
|
||||
// background-size: auto 100%;
|
||||
width: 7vw;
|
||||
height: 4.167vw;
|
||||
}
|
||||
.first{
|
||||
background: url("~@/assets/recruitment/first.svg") no-repeat;
|
||||
background-size: auto 100%;
|
||||
}
|
||||
.seconed{
|
||||
background: url("~@/assets/recruitment/seconed.svg") no-repeat;
|
||||
background-size: auto 100%;
|
||||
}
|
||||
.third{
|
||||
background: url("~@/assets/recruitment/third.svg") no-repeat;
|
||||
background-size: auto 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.titleWrapper {
|
||||
|
||||
@ -26,6 +26,7 @@
|
||||
</el-carousel>
|
||||
</enterprise-employment-card>
|
||||
<!-- 左2 -->
|
||||
|
||||
<enterprise-employment-card
|
||||
:title="cardTwoInfo.title"
|
||||
:description="cardTwoInfo.description"
|
||||
@ -33,6 +34,10 @@
|
||||
:type2="cardTwoInfo.type2"
|
||||
style="margin-top: 0.625vw"
|
||||
>
|
||||
<template v-slot:header>
|
||||
<div style="margin-top:1vw" class="header_bg">产业求人倍率</div>
|
||||
</template>
|
||||
<div class="header_bg">就业生态数据</div>
|
||||
<costom-caed />
|
||||
</enterprise-employment-card>
|
||||
</div>
|
||||
@ -69,6 +74,7 @@
|
||||
:description="cardFourInfo.description"
|
||||
:type1="cardFourInfo.type1"
|
||||
:type2="cardFourInfo.type2"
|
||||
:type3="cardFourInfo.type3"
|
||||
style="margin-top: 0.625vw"
|
||||
>
|
||||
<el-carousel
|
||||
@ -149,18 +155,22 @@ const cardOneInfo = {
|
||||
}
|
||||
};
|
||||
const cardTwoInfo = {
|
||||
title: "服务网络覆盖情况",
|
||||
description: "17家人力资源机构",
|
||||
title: "兴蜀就业生态数据",
|
||||
type1: {
|
||||
title: "公共服务站点",
|
||||
count: "40",
|
||||
class: "modelItem1"
|
||||
title: "第一产业",
|
||||
count: "1.2",
|
||||
class: "modelItem3 first"
|
||||
},
|
||||
type2: {
|
||||
title: "第二产业",
|
||||
count: "1.6",
|
||||
class: "modelItem3 seconed"
|
||||
},
|
||||
type3: {
|
||||
title: "第三产业",
|
||||
count: "1.4",
|
||||
class: "modelItem3 third"
|
||||
}
|
||||
// type2: {
|
||||
// title: "其他服务机构",
|
||||
// count: "200",
|
||||
// class: "modelItem1"
|
||||
// }
|
||||
};
|
||||
const cardThreeInfo = {
|
||||
title: "高校人才供给能力",
|
||||
@ -242,4 +252,16 @@ function getWebSocketData() {
|
||||
:deep(.el-carousel__mask) {
|
||||
display: none;
|
||||
}
|
||||
.header_bg {
|
||||
height: 17px;
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: 600;
|
||||
font-size: 0.729vw;;
|
||||
color: #c4f3fe;
|
||||
line-height: 19px;
|
||||
letter-spacing: 1px;
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user