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

兴蜀人力数据概览大屏

Browse Source
This commit is contained in:
王捷
2025-10-12 14:25:12 +08:00
parent 2ed80d527d
commit ff7d9b1f31
10 changed files with 171 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,3 +1,46 @@
<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>
<NetworkMap />
</div>
</template>
<script setup>
import { ref, reactive, onMounted } from "vue";
import NetworkMap from "../card/NetworkMap.vue";
@ -6,9 +49,10 @@ const state = reactive({
"公共服务站点 300",
"培训机构 130",
"咨询机构 220",
"教育中心 150",
"职业介绍所 180",
"就业服务中心 210"
"劳务公司 300",
"招聘与猎头机构 300",
"⼈⼒资源服务外包机构（HRO）300",
"职业中介与公共就业服务机构 300"
],
activeIndex: 0
});
@ -74,49 +118,6 @@ onMounted(() => {
});
</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>
<NetworkMap />
</div>
</template>
<style lang="scss" scoped>
.costomCaedWrapper {
.echart {
@ -150,22 +151,61 @@ onMounted(() => {
}
.tab-item {
position: relative;
flex: 0 0 auto;
margin: 0 8px;
width: 6.771vw;
padding: 0 0.5vw;
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%;
border: 1px solid rgba(203, 242, 250, 0.2);
border-radius: 4px;
background: linear-gradient(
90deg,
rgba(203, 242, 250, 0) 0%,
rgba(203, 242, 250, 0.19) 51%,
rgba(203, 242, 250, 0) 100%
);
cursor: pointer;
transition: all 0.3s ease;
white-space: nowrap;
&.active::before {
transform: rotate(180deg);
position: absolute;
content: "";
background: url("~@/assets/images/recruitment/network-tabs-arrow.svg")
no-repeat;
background-size: auto 100%;
width: 0.6vw;
height: 0.6vw;
left: 0;
top: 50%;
margin: -0.3vw 0 0 -0.5vw;
}
&.active::after {
position: absolute;
content: "";
background: url("~@/assets/images/recruitment/network-tabs-arrow.svg")
no-repeat;
background-size: auto 100%;
width: 0.6vw;
height: 0.6vw;
right: 0;
top: 50%;
margin: -0.3vw -0.45vw 0 0;
}
}
.tab-item.active {
background-image: url("~@/assets/recruitment/tabs_bg_active.svg");
border: 1px solid rgba(203, 242, 250, 0.2);
border-radius: 4px;
background: linear-gradient(
90deg,
rgba(48, 220, 255, 0.12) 0%,
rgba(48, 220, 255, 0.84) 51%,
rgba(48, 220, 255, 0.12) 100%
);
color: white;
font-weight: 500;
}