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:
Esacpe
2025-10-23 11:30:09 +08:00
parent c33cd17372
commit ca5e9c6122
8 changed files with 96 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/ms/fxww.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 418 KiB

BIN
src/assets/images/ms/scxc2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 785 KiB

BIN
src/assets/images/ms/sgxc.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 218 KiB

BIN
src/assets/images/ms/sgxc1.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 281 KiB

9
src/views/portraitScreen/components/xxrcgw.vue
View File

@ -7,7 +7,7 @@
<div class="label">
<span class="order mr4" :style="{ color: indx < 3 ? '#01d0db' : '' }">TOP.{{ indx + 1 }}</span>
<img src="@/assets/images/icon_03.png" alt="">
<span class="ml4 text one_text_detail" :style="{ color: indx < 3 ? '#01d0db' : '' }">{{ it.mc }}</span>
<span class="ml4 text one_text_detail" :style="{ color: '#48FAFC' }">{{ it.mc }}</span>
</div>
<div class="flex align-center just-around">
<div class="line">
@ -15,7 +15,7 @@
<div class="persont" :style="{ width: it.persont }"></div>
</div>
</div>
<div class="num">{{ it.num }}</div>
<!-- <div class="num">{{ it.num }}</div> -->
</div>
</li>
</ul>
@ -78,6 +78,11 @@ onUnmounted(() => {
display: inline-block;
white-space: nowrap;
}
img {
width: 10.6vw; // 原字号 1.8vw 的两倍
height: 10.6vw;
}
}
.line {

2
src/views/portraitScreen/index.vue
View File

@ -65,7 +65,7 @@
<div class="chartsMian"><Jgrzcgl></Jgrzcgl></div>
</li>
<li>
<div class="info">新兴人才岗位需求</div>
<div class="info">新兴人才岗位</div>
<div class="chartsMian"><Xxrcgw /></div>
</li>
<li>

129
src/views/recruitment/card/ListView.vue
View File

@ -4,23 +4,29 @@
<!-- 表头保持固定 -->
<ul class="header-list">
<li class="singleBackground topLi">
<!-- <div> 序号</div>-->
<div>区域</div>
<div>入职人数</div>
<div>占比</div>
</li>
</ul>
<!-- 固定的“眉山”数据行，不随滚动 -->
<ul class="header-list" v-if="pinnedItem">
<li class="singleBackground" @click="visible = true">
<div>{{ pinnedItem.zone }}</div>
<div>{{ pinnedItem.count }}人</div>
<div>{{ pinnedItem.proportion }}%</div>
</li>
</ul>
<!-- 滚动区域 -->
<div class="scroll_parent_box" @mouseenter="mEnter" @mouseleave="mLeave">
<div class="scroll_list" :style="{ transform: `translate(0vw,-${scrollTop}px)` }">
<div ref="scrollItemBox">
<li v-for="(item, index) in pieData" :key="index" @click="visible = true"
<li v-for="(item, index) in scrollData" :key="index"
:class="{ 'singleBackground': index % 2 == 0, 'evenBackground': index % 2 == 1 }">
<!-- <div>{{ `${index + 1 >= 10 ? index + 1 : '0' + (index + 1)}` }}</div>-->
<div>{{ item.zone }}</div>
<div>{{ item.count }}人</div>
<div>{{ item.proportion }}</div>
<div></div>
<div>{{ item.proportion }}%</div>
</li>
</div>
<!-- 复制一份数据用于无缝滚动 -->
@ -29,14 +35,14 @@
</div>
</div>
<div class="carousel-modal-container" v-if="visible">
<el-carousel :interval="4000" indicator-position="none" :autoplay="false" height="14vw">
<el-carousel ref="carouselRef" :interval="4000" indicator-position="outside" :autoplay="true" :pause-on-hover="false" arrow="always" height="28vw">
<el-carousel-item>
<div class="carousel-item-content">
<div class="carousel-item-title">
仁寿县劳务合作社联合送工
</div>
<div style="height:10vw;">
<img src="@/assets/recruitment/plghlhsg5.svg" class="carousel-image">
<div style="height:20vw;">
<img src="@/assets/images/ms/scxc2.png" class="carousel-image">
</div>
</div>
</el-carousel-item>
@ -46,8 +52,8 @@
<div class="carousel-item-title">
批量化规模化送工现场1
</div>
<div style="height:10vw;">
<img src="@/assets/recruitment/plghlhsg.svg" class="carousel-image">
<div style="height:20vw;">
<img src="@/assets/images/ms/sgxc.jpg" class="carousel-image">
</div>
</div>
</el-carousel-item>
@ -56,8 +62,8 @@
<div class="carousel-item-title">
批量化规模化送工现场2
</div>
<div style="height:10vw;">
<img src="@/assets/recruitment/plghlhsg4.svg" class="carousel-image">
<div style="height:20vw;">
<img src="@/assets/images/ms/sgxc1.jpg" class="carousel-image">
</div>
</div>
</el-carousel-item>
@ -66,12 +72,14 @@
<div class="carousel-item-title">
仁寿县劳务合作社联合送工
</div>
<div style="height:10vw;">
<img src="@/assets/recruitment/plghlhsg3.svg" class="carousel-image">
<div style="height:20vw;">
<img src="@/assets/images/ms/fxww.jpg" class="carousel-image">
</div>
</div>
</el-carousel-item>
</el-carousel>
<div class="nav-btn prev" @click="prevSlide">‹</div>
<div class="nav-btn next" @click="nextSlide">›</div>
<div class="close-btn" @click="closeModal">X</div>
</div>
@ -81,6 +89,9 @@
import { ref, reactive, computed, onMounted, onUnmounted } from "vue";
import * as echarts from "echarts";
const pieRef = ref(null);
const carouselRef = ref(null);
function prevSlide() { if (carouselRef.value) carouselRef.value.prev(); }
function nextSlide() { if (carouselRef.value) carouselRef.value.next(); }
const pieData = [
{
"zone": "四川 - 成都",
@ -194,9 +205,19 @@ const pieData = [
}
]
const visible = ref(false);
// 固定在顶部的市州（眉山）
const pinnedZone = "四川 - 眉山";
const pinnedIndex = computed(() => pieData.findIndex(i => i.zone === pinnedZone));
const pinnedItem = computed(() => (pinnedIndex.value >= 0 ? pieData[pinnedIndex.value] : null));
// 滚动区域数据（去除固定项）
const scrollData = computed(() => pieData.filter(i => i.zone !== pinnedZone));
// 格式化序号
function formattedIndex(i) {
return `${i + 1 >= 10 ? i + 1 : '0' + (i + 1)}`;
}
// 滚动相关变量
const scrollTop = ref(0); // 列表滚动高度
const speed = ref(120); // 滚动速度
const speed = ref(60); // 滚动速度
const copyHtml = ref(''); // 复制的HTML内容
const scrollItemBox = ref(null); // 滚动项容器引用
let timer = null;
@ -343,15 +364,10 @@ function closeModal() {
}
>div:nth-child(3) {
width: 30%;
width: 25%;
text-align: right;
font-weight: bold;
}
>div:nth-child(4) {
display: none;
/* 隐藏多余的div */
}
}
/* 数据行的悬停效果 */
@ -406,42 +422,40 @@ function closeModal() {
/* 轮播弹窗容器样式 */
.carousel-modal-container {
position: fixed;
top: 54%;
left: 71%;
top: 66%;
left: 64%;
transform: translate(-50%, -50%);
width: 14vw;
width: 28vw;
border-radius: 4px 4px 4px 4px;
z-index: 100;
border-radius: 0.104vw;
padding: 0.26vw;
height: 14vw;
height: 28vw;
.close-btn {
position: absolute;
top: 13.5vw;
right: 5.5vw;
width: 2vw;
height: 2vw;
background-color: #171E22;
border: 1px solid rgba(203, 242, 250, 0.2);
border-radius: 50%;
color: #C4F3FE;
font-size: 1vw;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
z-index: 101;
// &:hover {
// background-color: #1E262A;
// border-color: rgba(203, 242, 250, 0.4);
// }
}
position: absolute;
bottom: 0.6vw;
left: 50%;
transform: translateX(-50%);
width: 2vw;
height: 2vw;
background-color: #171E22;
border: 1px solid rgba(203, 242, 250, 0.2);
border-radius: 50%;
color: #C4F3FE;
font-size: 1vw;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
z-index: 101;
}
.carousel-item-content {
border-radius: 5px 5px 5px 5px;
background-color: #171E22;
padding: 0.001vw 0.4vw 1vw;
position: relative;
.carousel-item-title {
background: linear-gradient(90deg, rgba(203, 242, 250, 0) 0%, rgba(203, 242, 250, 0.43) 58%, rgba(203, 242, 250, 0) 100%);
@ -453,16 +467,39 @@ function closeModal() {
line-height: 1.1vw;
text-align: center;
border-radius: 4px 4px 4px 4px;
color: #48FAFC;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
}
/* 手动切换按钮样式 */
.nav-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 1.6vw;
height: 1.6vw;
background-color: rgba(23, 30, 34, 0.9);
border: 1px solid rgba(203, 242, 250, 0.2);
border-radius: 50%;
color: #C4F3FE;
font-size: 1.2vw;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
z-index: 101;
}
.nav-btn.prev { left: 0.3vw; }
.nav-btn.next { right: 0.3vw; }
::deep(.el-carousel__container) {
height: 14vw !important;
height: 28vw !important;
}
</style>

8
src/views/recruitment/layout/centerModel.vue
View File

@ -204,7 +204,7 @@
</div>
<ul class="cooperateOrgList">
<li v-for="(item, index) in topCoops" :key="index">
<img :src="coopIcon" alt="合作社" class="coopIcon" />
<img :src="coopIcon" alt="合作区县" class="coopIcon" />
<div class="coopName">{{ item.name }}</div>
</li>
</ul>
@ -256,7 +256,7 @@ const onacitve = (index, label) => {
// 兴蜀工作视图的弹窗映射：合作学校TOP5、合作社TOP5
if (label === "合作学校") {
isactive.value = 5;
} else if (label === "合作社") {
} else if (label === "合作区县") {
isactive.value = 6;
} else {
isactive.value = -1;
@ -280,7 +280,7 @@ const modelSets = {
work: [
{ num: "628个", label: "服务企业" },
{ num: "36所", label: "合作学校" },
{ num: "19个", label: "合作社" },
{ num: "19个", label: "合作区县" },
{ num: "17期", label: "培训课程" },
{ num: "870人", label: "领证人数" }
]
@ -360,7 +360,7 @@ const topSchools = ref([
{ name: "四川矿产机电技师学院", name1: '成都职业技术学院' },
]);
const topCoops = ref([
{ name: "绵阳市游仙区鑫众达劳务信息咨询农民专业合作社" },
{ name: "绵阳市游仙区鑫众送劳务信息咨询农民专业合作社" },
{ name: "成都市成华青业劳务信息咨询农民专业合作社" },
{ name: "崇州市蜀洲聚力劳务信息咨询农民专业合作社" },
{ name: "成都市蜀州兴蜀农民劳务信息咨询专业合作社" },