DEV_ZZ/rsxm-master
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

13屏幕

Browse Source
This commit is contained in:
13684185576
2025-10-22 22:42:42 +08:00
parent 83245c833c
commit e2b3e3b287
18 changed files with 1785 additions and 21152 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/views/recruitment/components/costomCaed.vue
View File

@ -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
View 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>

28
src/views/recruitment/components/enterpriseEmploymentCard.vue
View File

@ -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 {