大屏处理
This commit is contained in:
maojiacai
218
src/views/recruitment/components/costomCaed.vue
Normal file
218
src/views/recruitment/components/costomCaed.vue
Normal file
@ -0,0 +1,218 @@
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
|
||||
const state = reactive({
|
||||
tabs: [
|
||||
'公共服务站点 300', '培训机构 130', '咨询机构 220',
|
||||
'教育中心 150', '职业介绍所 180', '就业服务中心 210'
|
||||
],
|
||||
activeIndex: 0
|
||||
})
|
||||
|
||||
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 scrollTo = (direction) => {
|
||||
if (!scrollContainer.value) return
|
||||
|
||||
const container = scrollContainer.value
|
||||
const scrollAmount = 300 // 每次滚动量
|
||||
|
||||
if (direction === 'left') {
|
||||
container.scrollBy({ left: -scrollAmount, behavior: 'smooth' })
|
||||
} else {
|
||||
container.scrollBy({ left: scrollAmount, behavior: 'smooth' })
|
||||
}
|
||||
|
||||
// 滚动结束后检查状态
|
||||
setTimeout(checkScroll, 300)
|
||||
}
|
||||
|
||||
// 点击标签
|
||||
const selectTab = (index) => {
|
||||
state.activeIndex = index
|
||||
// 可选：自动滚动到选中标签
|
||||
scrollToTab(index)
|
||||
}
|
||||
|
||||
// 滚动到指定标签
|
||||
const scrollToTab = (index) => {
|
||||
if (!scrollContainer.value) 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
|
||||
|
||||
container.scrollTo({
|
||||
left: tabLeft - (containerWidth - tabWidth) / 2,
|
||||
behavior: 'smooth'
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
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>-->
|
||||
|
||||
<!-- 横向滚动区域 -->
|
||||
<div
|
||||
ref="scrollContainer"
|
||||
class="scroll-area"
|
||||
@scroll="checkScroll"
|
||||
>
|
||||
<div
|
||||
v-for="(tab, index) in state.tabs"
|
||||
:key="index"
|
||||
class="tab-item"
|
||||
:class="{ active: state.activeIndex === index }"
|
||||
@click="selectTab(index)"
|
||||
>
|
||||
{{ tab }}
|
||||
</div>
|
||||
</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>-->
|
||||
</div>
|
||||
|
||||
<img class="echart" src="~@/assets/recruitment/echart.svg" alt="">
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.costomCaedWrapper {
|
||||
|
||||
.echart {
|
||||
margin-top: 1.5vw;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.horizontal-scroll-container {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.scroll-area {
|
||||
display: flex;
|
||||
overflow-x: auto;
|
||||
scroll-behavior: smooth;
|
||||
scrollbar-width: none; /* Firefox */
|
||||
-ms-overflow-style: none; /* IE/Edge */
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.scroll-area::-webkit-scrollbar {
|
||||
display: none; /* Chrome/Safari */
|
||||
}
|
||||
|
||||
.tab-item {
|
||||
flex: 0 0 auto;
|
||||
margin: 0 8px;
|
||||
width: 6.771vw;
|
||||
height: 1.875vw;
|
||||
text-align: center;
|
||||
font-size: 0.729vw;
|
||||
line-height: 1.875vw;
|
||||
background: url("~@/assets/recruitment/tabs_bg.svg") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.tab-item.active {
|
||||
background-image: url("~@/assets/recruitment/tabs_bg_active.svg");
|
||||
color: white;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.tab-item:hover {
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.scroll-button {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 1.875vw;
|
||||
height: 1.875vw;
|
||||
border-radius: 50%;
|
||||
background: #0b1318;
|
||||
border: 1px solid #0b1318;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.scroll-button.visible {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.scroll-button.left {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.scroll-button.right {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.scroll-button svg {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
fill: #666;
|
||||
}
|
||||
|
||||
.scroll-button:hover {
|
||||
background: #f0f0f0;
|
||||
}
|
||||
</style>
|
||||
122
src/views/recruitment/components/enterpriseEmploymentCard.vue
Normal file
122
src/views/recruitment/components/enterpriseEmploymentCard.vue
Normal file
@ -0,0 +1,122 @@
|
||||
<script setup>
|
||||
import { defineProps } from 'vue';
|
||||
import Carousel from "@/views/recruitment/components/carousel.vue";
|
||||
const props = defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
default: "标题"
|
||||
},
|
||||
info: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
description: {
|
||||
type: String,
|
||||
default: ""
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="enterpriseEmploymentWrapper">
|
||||
<div class="titleWrapper">
|
||||
<div class="left">{{ title }}</div>
|
||||
<div class="right">{{ description }}</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="modelItem1">
|
||||
<div class="title">岗位种类数</div>
|
||||
<div class="count">200.000</div>
|
||||
</div>
|
||||
<div class="modelItem2">
|
||||
<div class="title">岗位人员数</div>
|
||||
<div class="count">1246</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cardWrapper">
|
||||
<slot name="card">
|
||||
<carousel />
|
||||
</slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.enterpriseEmploymentWrapper {
|
||||
position: relative;
|
||||
width: 20.729vw;
|
||||
height: 24.6875vw;
|
||||
background: url("~@/assets/recruitment/module_bg.svg") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
margin: 0.521vw 0.573vw 0;
|
||||
|
||||
.count {
|
||||
font-size: 1.042vw;
|
||||
color: #48FAFC;
|
||||
}
|
||||
|
||||
.title {
|
||||
color: #FFFFFF;
|
||||
margin-bottom: 0.46875vw;
|
||||
font-size: 0.729vw;
|
||||
}
|
||||
|
||||
.modelItem1 {
|
||||
padding-top: 1.09375vw;
|
||||
text-align: right;
|
||||
background: url("~@/assets/recruitment/model1.svg") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
width: 7.823vw;
|
||||
height: 4.167vw;
|
||||
margin-right: 3.021vw;
|
||||
}
|
||||
|
||||
.modelItem2 {
|
||||
padding-top: 1.09375vw;
|
||||
text-align: right;
|
||||
background: url("~@/assets/recruitment/model2.svg") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
width: 6.823vw;
|
||||
height: 4.167vw;
|
||||
}
|
||||
}
|
||||
|
||||
.titleWrapper {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: 1.5625vw;
|
||||
line-height: 1.5625vw;
|
||||
font-size: 0.833vw;
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
.left {
|
||||
margin-left: 2.917vw;
|
||||
font-weight: 600;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
color: #A9F0FF;
|
||||
}
|
||||
|
||||
.right {
|
||||
margin-right: 1.042vw;
|
||||
color: #A9F0FF;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
176
src/views/recruitment/components/recruitment.scss
Normal file
176
src/views/recruitment/components/recruitment.scss
Normal file
@ -0,0 +1,176 @@
|
||||
@mixin textColor($color1, $color2) {
|
||||
background-image: linear-gradient(to top, $color1 0%, $color2 50%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.bigScrenn {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
position: relative;
|
||||
background: url('~@/assets/recruitment/bg.svg') no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
color: #fff;
|
||||
|
||||
// 头部
|
||||
.homeHead,.homeHeadsmall {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 8;
|
||||
height: 4.896vw !important;
|
||||
background: url('~@/assets/recruitment/header_bg.svg') no-repeat;
|
||||
background-size: 100%;
|
||||
|
||||
.left_Head {
|
||||
position: absolute;
|
||||
left: 1vw;
|
||||
top: 2.135vw;
|
||||
font-family: "DigifaceWide";
|
||||
}
|
||||
|
||||
.center_head {
|
||||
position: absolute;
|
||||
top: 2vw;
|
||||
left: 50%;
|
||||
transform: translateX(-56%);
|
||||
font-size: 4vw;
|
||||
font-family: "YSBTH";
|
||||
letter-spacing: 0.104vw;
|
||||
font-weight: 400;
|
||||
white-space: nowrap;
|
||||
|
||||
span {
|
||||
background-image: linear-gradient(to top, #165493 10%, #ffffff 50%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: attr(text);
|
||||
position: absolute;
|
||||
z-index: -2;
|
||||
}
|
||||
}
|
||||
|
||||
.right_head {
|
||||
position: absolute;
|
||||
right: 1.875vw;
|
||||
top: 2.135vw;
|
||||
|
||||
.setting {
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
left: -78px;
|
||||
width: 1.8vw;
|
||||
height: 1.8vw;
|
||||
}
|
||||
}
|
||||
}
|
||||
.homeHeadsmall{
|
||||
// background: url('~@/assets/images/home_head_small.png') no-repeat center center;
|
||||
height: 6.771vw;
|
||||
.center_head {
|
||||
position: absolute;
|
||||
top: 0.5vw;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
font-size: 2.292vw;
|
||||
font-family: "YSBTH";
|
||||
letter-spacing: 0.104vw;
|
||||
font-weight: 400;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
// 侧边
|
||||
.asidemodel {
|
||||
position: absolute;
|
||||
top: 5.888vw;
|
||||
//width: 22.396vw;
|
||||
//height: calc(100vh - 13.75vw);
|
||||
//transform: perspective(6.25vw) rotateY(2deg);
|
||||
|
||||
.asideHead {
|
||||
position: relative;
|
||||
height: 2.083vw;
|
||||
line-height: 2.083vw;
|
||||
margin-bottom: 1.042vw;
|
||||
padding-left: 0.729vw;
|
||||
padding-right: 0.729vw;
|
||||
box-sizing: border-box;
|
||||
|
||||
span {
|
||||
font-size: 1.458vw;
|
||||
@include textColor(#499FF2, #ffffff);
|
||||
font-family: "HANYILINGXINTIJIAN";
|
||||
}
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
width: 8.594vw;
|
||||
height: 1.146vw;
|
||||
left: 0.104vw;
|
||||
top: 1.823vw;
|
||||
background: url('~@/assets/images/bg_03.png') no-repeat left bottom;
|
||||
background-size: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.asideHeadR {
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
width: 8.594vw;
|
||||
height: 1.146vw;
|
||||
left: 13.333vw;
|
||||
top: 1.823vw;
|
||||
background: url('~@/assets/images/bg_03.png') no-repeat left bottom;
|
||||
background-size: 100%;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
.modelBox {
|
||||
height: calc(100% - 3.125vw);
|
||||
}
|
||||
|
||||
.asideItem {
|
||||
flex: 1 0 0;
|
||||
// margin: 0px 0.052vw;
|
||||
margin: 0 0.052vw 1.5vh;
|
||||
overflow: hidden;
|
||||
// margin-bottom: 0.26vw;
|
||||
background: url('~@/assets/images/bg_04.png') no-repeat left bottom;
|
||||
background-size: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.asidemodelR {
|
||||
//transform: perspective(6.25vw) rotateY(-2deg);
|
||||
}
|
||||
|
||||
// 展开-关闭按钮
|
||||
.showNeun {
|
||||
position: absolute;
|
||||
top: 47%;
|
||||
transform: translateY(-50%);
|
||||
width: 4.313vw;
|
||||
height: 22.802vw;
|
||||
background: url('~@/assets/images/home_left.png') no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.showNeunR {
|
||||
background: url('~@/assets/images/home_right.png') no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
}
|
||||
182
src/views/recruitment/index.vue
Normal file
182
src/views/recruitment/index.vue
Normal file
@ -0,0 +1,182 @@
|
||||
<template>
|
||||
<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>
|
||||
</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>
|
||||
|
||||
<div class="last_icon"></div>
|
||||
<!-- 弹窗 -->
|
||||
<HomeDialogInfo v-model="dialogShow" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
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";
|
||||
|
||||
const { proxy } = getCurrentInstance();
|
||||
const isOpen_L = ref(true); //展开菜单-左边
|
||||
const isOpen_R = ref(true); //展开菜单 - 右边
|
||||
const dialogShow = ref(false);
|
||||
const asideMeun = reactive({
|
||||
leftMeun: [
|
||||
{ mkMc: "产业产值、岗位缺口趋势", mkLydz: "cycz_gwqk_card" },
|
||||
{ mkMc: "重点保供企业分布", mkLydz: "zdbgqy_card" },
|
||||
{ mkMc: "缺口岗位TOP10", mkLydz: "zdqyqkxq_card" },
|
||||
],
|
||||
rightMeun: [
|
||||
{ mkMc: "用工供需风险预警", mkLydz: "yggxfxyj_card" },
|
||||
{ mkMc: "劳务市场异常预警", mkLydz: "lwscycyj_card" },
|
||||
{ mkMc: "合规监管预警", mkLydz: "hgjgyj_card" },
|
||||
{ mkMc: "服务质量预警", mkLydz: "fwzlyj_card" }
|
||||
],
|
||||
})
|
||||
onMounted(() => {
|
||||
getWebSocketData()
|
||||
})
|
||||
// 获取WebSocket数据
|
||||
function getWebSocketData() {
|
||||
let dws = openWebSocket.getInstance();
|
||||
dws.connect((res) => {
|
||||
// 接收发送消息
|
||||
dws.ws.onmessage = (e) => {
|
||||
let dataInfo = JSON.parse(e.data).data;
|
||||
console.log(dataInfo, 'dataInfo');
|
||||
if (dataInfo == 1) {
|
||||
dialogShow.value = true;
|
||||
} else {
|
||||
dialogShow.value = false;
|
||||
}
|
||||
};
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<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;
|
||||
right: 0;
|
||||
height: 4.667vw;
|
||||
bottom: 0;
|
||||
background: url("~@/assets/recruitment/botton_bg.svg") no-repeat center center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.transition {
|
||||
transition: all 0.5s;
|
||||
}
|
||||
</style>
|
||||
134
src/views/recruitment/layout/centerModel.vue
Normal file
134
src/views/recruitment/layout/centerModel.vue
Normal file
@ -0,0 +1,134 @@
|
||||
<template>
|
||||
<div class="contentWrapper">
|
||||
<div class="rowContent">
|
||||
<div class="modelWrapper">
|
||||
<template v-for="(item, index) in modelContentList" :key="index">
|
||||
<div class="modelContent">
|
||||
<div class="num">{{ item.num }}</div>
|
||||
<div class="label">{{ item.label }}</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<div class="num">780,000</div>
|
||||
<div class="label">人口总数</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
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: '灵活就业群体',
|
||||
}
|
||||
])
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.contentWrapper {
|
||||
position: absolute;
|
||||
top: 9.53125vw;
|
||||
left: 23.58vw;
|
||||
width: 52.46vw;
|
||||
|
||||
.rowContent {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
padding-bottom: 9.46875vw;
|
||||
|
||||
margin-top: 10.90625vw;
|
||||
background: url("~@/assets/recruitment/content_bg.svg") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
width: 52.46vw;
|
||||
height: 31.667vw;
|
||||
|
||||
.num {
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-size: 2.667vw;
|
||||
color: #30DCFF;
|
||||
}
|
||||
|
||||
.label {
|
||||
margin-top: 0.521vw;
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 0.833vw;
|
||||
color: #CBF2FA;
|
||||
}
|
||||
}
|
||||
|
||||
.modelWrapper {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
|
||||
.modelContent {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
background: url("~@/assets/recruitment/model_bg.svg") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
width: 10.729vw;
|
||||
height: 6.667vw;
|
||||
padding: 0.625vw 0;
|
||||
|
||||
.num {
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-size: 1.667vw;
|
||||
color: #30DCFF;
|
||||
}
|
||||
|
||||
.label {
|
||||
margin-top: 0.521vw;
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 0.833vw;
|
||||
color: #CBF2FA;
|
||||
}
|
||||
|
||||
&:nth-last-child(-n+1) {
|
||||
margin-top: 2.34375vw;
|
||||
margin-right: 13.8vw;
|
||||
}
|
||||
|
||||
&:nth-last-child(2) {
|
||||
margin-top: 2.34375vw;
|
||||
margin-left: 13.8vw;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
66
src/views/recruitment/layout/head.vue
Normal file
66
src/views/recruitment/layout/head.vue
Normal file
@ -0,0 +1,66 @@
|
||||
<template>
|
||||
<div class="homeHead">
|
||||
<!-- <div class="left_Head">
|
||||
<el-icon style="top:5px" color="#0DE7EE" :size="20"><Cloudy/></el-icon>
|
||||
<span class="head_text ml5 mr5">阴</span>
|
||||
<span class="head_text ml5 mr5">空气质量：良</span>
|
||||
<span class="head_text ml5">8 ~ 13°C</span>
|
||||
</div> -->
|
||||
<div class="center_head" :text="props.title">
|
||||
<span>{{props.title}}</span>
|
||||
</div>
|
||||
<!-- <div class="right_head">
|
||||
<img src="@/assets/images/icon_01.png" alt="" class="setting">
|
||||
<span class="head_text ml5 mr5">{{ hour + ":" + minute + ":" + second }}</span>
|
||||
<span class="head_text ml5 mr5">{{weekenday}} </span>
|
||||
<span class="head_text ml5">{{ datatime }}</span>
|
||||
</div> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { timeValidate ,weekValidate} from "@/utils/tools.js";
|
||||
import { qcckPost, qcckGet } from "@/api/qcckApi.js";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import { ref, reactive, onMounted, onUnmounted, getCurrentInstance ,onBeforeUnmount} from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const minute = ref("00"); //分
|
||||
const second = ref("00"); //秒
|
||||
const hour = ref("00"); //时
|
||||
const day = ref();
|
||||
const weekenday = weekValidate() //星期几
|
||||
const datatime = ref(timeValidate(null,'ymd'));
|
||||
const timersfm = ref(null);
|
||||
const props = defineProps({
|
||||
title:{
|
||||
type:String,
|
||||
default:'兴蜀数智化驾驶舱'
|
||||
}
|
||||
})
|
||||
onMounted(() => {
|
||||
timersfm.value = setInterval(() => {
|
||||
CurrentTime();
|
||||
}, 1000);
|
||||
});
|
||||
// 获取时分秒
|
||||
function CurrentTime() {
|
||||
const date = new Date();
|
||||
hour.value = date.getHours();
|
||||
minute.value = date.getMinutes();
|
||||
second.value = date.getSeconds();
|
||||
day.value = day.value < 10 ? "0" + day.value : day.value;
|
||||
hour.value = hour.value < 10 ? "0" + hour.value : hour.value;
|
||||
minute.value = minute.value < 10 ? "0" + minute.value : minute.value;
|
||||
second.value = second.value < 10 ? "0" + second.value : second.value;
|
||||
}
|
||||
onUnmounted(() => {
|
||||
clearInterval(timersfm.value)
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/assets/css/homeScreen.scss";
|
||||
.head_text{
|
||||
font-size: 1.8vw;
|
||||
}
|
||||
</style>
|
||||
65
src/views/recruitment/layout/headHome.vue
Normal file
65
src/views/recruitment/layout/headHome.vue
Normal file
@ -0,0 +1,65 @@
|
||||
<template>
|
||||
<div class="homeHeadsmall">
|
||||
<div class="left_Head">
|
||||
<el-icon style="top:5px" color="#0DE7EE" :size="20"><Cloudy/></el-icon>
|
||||
<span class="head_text ml5 mr5">小雨</span>
|
||||
<span class="head_text ml5">13°C</span>
|
||||
</div>
|
||||
<div class="center_head" :text="props.title">
|
||||
<span>{{props.title}}</span>
|
||||
</div>
|
||||
<div class="right_head">
|
||||
<!-- <img src="@/assets/images/icon_01.png" alt="" class="setting">-->
|
||||
<span class="head_text ml5 mr5">{{ hour + ":" + minute + ":" + second }}</span>
|
||||
<span class="head_text ml5 mr5">{{weekenday}} </span>
|
||||
<span class="head_text ml5">{{ datatime }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { timeValidate ,weekValidate} from "@/utils/tools.js";
|
||||
import { qcckPost, qcckGet } from "@/api/qcckApi.js";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import { ref, reactive, onMounted, onUnmounted, getCurrentInstance ,onBeforeUnmount} from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const minute = ref("00"); //分
|
||||
const second = ref("00"); //秒
|
||||
const hour = ref("00"); //时
|
||||
const day = ref();
|
||||
const weekenday = weekValidate() //星期几
|
||||
const datatime = ref(timeValidate(null,'ymd'));
|
||||
const timersfm = ref(null);
|
||||
const props = defineProps({
|
||||
title:{
|
||||
type:String,
|
||||
default:'兴蜀数智化驾驶舱'
|
||||
}
|
||||
})
|
||||
onMounted(() => {
|
||||
timersfm.value = setInterval(() => {
|
||||
CurrentTime();
|
||||
}, 1000);
|
||||
});
|
||||
// 获取时分秒
|
||||
function CurrentTime() {
|
||||
const date = new Date();
|
||||
hour.value = date.getHours();
|
||||
minute.value = date.getMinutes();
|
||||
second.value = date.getSeconds();
|
||||
day.value = day.value < 10 ? "0" + day.value : day.value;
|
||||
hour.value = hour.value < 10 ? "0" + hour.value : hour.value;
|
||||
minute.value = minute.value < 10 ? "0" + minute.value : minute.value;
|
||||
second.value = second.value < 10 ? "0" + second.value : second.value;
|
||||
}
|
||||
onUnmounted(() => {
|
||||
clearInterval(timersfm.value)
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../components/recruitment.scss";
|
||||
.head_text{
|
||||
font-size: 0.729vw;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user