Compare commits
10 Commits
5bba56800a
...
master
| Author | SHA1 | Date | |
|---|---|---|---|
| ae04a588a0 | |||
| 210231ada4 | |||
| 47ef3fcac8 | |||
| 89439528df | |||
| b9ad571738 | |||
| ddea6d7c97 | |||
| 35583f52d4 | |||
| f63bb358d4 | |||
| c7158482c6 | |||
| 314b2f566d |
BIN
src/assets/images/ms/quanGuo.png
Normal file
BIN
src/assets/images/ms/quanGuo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.0 MiB |
33
src/assets/recruitment/bjtl.svg
Normal file
33
src/assets/recruitment/bjtl.svg
Normal file
@ -0,0 +1,33 @@
|
||||
<svg width="1920" height="1080" viewBox="0 0 1920 1080" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_9_2545)">
|
||||
<rect width="1920" height="1080" fill="url(#paint0_linear_9_2545)" fill-opacity="0.75"/>
|
||||
<rect width="1920" height="1080" fill="url(#paint1_linear_9_2545)" fill-opacity="0.75"/>
|
||||
</g>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_9_2545" x1="960" y1="0" x2="960" y2="1080" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#0078A4"/>
|
||||
<stop offset="0.120509" stop-color="#0078A4" stop-opacity="0.545518"/>
|
||||
<stop offset="0.179314" stop-color="#0078A4" stop-opacity="0.268142"/>
|
||||
<stop offset="0.286458" stop-color="#0078A4" stop-opacity="0.0154769"/>
|
||||
<stop offset="0.671875" stop-color="#0078A4" stop-opacity="0"/>
|
||||
<stop offset="0.790323" stop-color="#0078A4" stop-opacity="0.221651"/>
|
||||
<stop offset="0.863472" stop-color="#0078A4" stop-opacity="0.503942"/>
|
||||
<stop offset="1" stop-color="#0078A4"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint1_linear_9_2545" x1="1920" y1="592.5" x2="3.32107e-06" y2="592.5" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#0078A4"/>
|
||||
<stop offset="0.0924192" stop-color="#0078A4" stop-opacity="0.441093"/>
|
||||
<stop offset="0.147393" stop-color="#0078A4" stop-opacity="0.212322"/>
|
||||
<stop offset="0.194418" stop-color="#0078A4" stop-opacity="0.0732132"/>
|
||||
<stop offset="0.249495" stop-color="#0078A4" stop-opacity="0"/>
|
||||
<stop offset="0.756487" stop-color="#0078A4" stop-opacity="0"/>
|
||||
<stop offset="0.815023" stop-color="#0078A4" stop-opacity="0.0812947"/>
|
||||
<stop offset="0.870659" stop-color="#0078A4" stop-opacity="0.224653"/>
|
||||
<stop offset="0.92232" stop-color="#0078A4" stop-opacity="0.463412"/>
|
||||
<stop offset="1" stop-color="#0078A4"/>
|
||||
</linearGradient>
|
||||
<clipPath id="clip0_9_2545">
|
||||
<rect width="1920" height="1080" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.8 KiB |
@ -76,7 +76,7 @@ export const publicRoutes = [
|
||||
name: "/platformBusinessData",
|
||||
component: () => import("@/views/platformBusinessData/index"),
|
||||
meta: {}
|
||||
}
|
||||
},
|
||||
];
|
||||
|
||||
const router = createRouter({
|
||||
|
||||
@ -3,33 +3,54 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// Vue 3 Composition API 的 setup 语法糖
|
||||
// 在这里直接编写响应式数据和方法，无需返回
|
||||
import { ref, reactive, computed, onMounted } from "vue";
|
||||
import { ref, onMounted, onUnmounted, nextTick } from "vue";
|
||||
import * as echarts from "echarts";
|
||||
|
||||
const enterpriseTwoRef = ref(null);
|
||||
const option = {
|
||||
// 添加标题
|
||||
let chart = null;
|
||||
|
||||
// 响应式设计稿配置
|
||||
const designConfig = {
|
||||
designWidth: 1920,
|
||||
designHeight: 1080
|
||||
};
|
||||
|
||||
// 计算实际的像素值（基于设计稿比例）
|
||||
function calcResponsivePX(pxValue) {
|
||||
const screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
|
||||
return (pxValue / designConfig.designWidth) * screenWidth;
|
||||
}
|
||||
|
||||
// 计算 vw 单位值（真正的 vw）
|
||||
function calcVW(pxValue) {
|
||||
return (pxValue / designConfig.designWidth) * 100;
|
||||
}
|
||||
|
||||
// 计算 vh 单位值
|
||||
function calcVH(pxValue) {
|
||||
return (pxValue / designConfig.designHeight) * 100;
|
||||
}
|
||||
|
||||
// 图表配置
|
||||
const getChartOption = () => ({
|
||||
title: {
|
||||
text: '重点保供企业分布',
|
||||
left: 'center',
|
||||
top: '5%',
|
||||
textStyle: {
|
||||
color: '#30DCFF',
|
||||
fontSize: 16,
|
||||
fontSize: calcResponsivePX(16),
|
||||
fontWeight: 'normal'
|
||||
}
|
||||
},
|
||||
// 设置图形位置
|
||||
grid: {
|
||||
top: '20%',
|
||||
left: '15%',
|
||||
right: '5%',
|
||||
bottom: '25%'
|
||||
top: `${calcVH(210)}%`, // 使用 vh 确保垂直方向也响应式
|
||||
left: `${calcVW(130)}%`,
|
||||
right: `${calcVW(120)}%`,
|
||||
bottom: `${calcVH(170)}%`
|
||||
},
|
||||
xAxis: {
|
||||
show: true,
|
||||
|
||||
axisTick: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
@ -37,17 +58,19 @@ const option = {
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
fontSize: 14,
|
||||
fontSize: calcResponsivePX(12),
|
||||
color: '#CBF2FA',
|
||||
rotate: 0,
|
||||
margin: 15
|
||||
show: true,
|
||||
interval: 0,
|
||||
hideOverlap: false,
|
||||
margin: calcResponsivePX(14)
|
||||
},
|
||||
type: "category",
|
||||
data: ["第一产业", "第二产业", "第三产业"]
|
||||
},
|
||||
yAxis: {
|
||||
interval: 50, // 设置刻度间隔
|
||||
//显示网格线
|
||||
interval: 50,
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
@ -72,34 +95,54 @@ const option = {
|
||||
name: "企业数",
|
||||
type: "bar",
|
||||
showBackground: false,
|
||||
barWidth: 25,
|
||||
barWidth: calcResponsivePX(25), // 柱状图宽度也要响应式
|
||||
data: [6, 581, 41],
|
||||
// 设置柱状图的数值
|
||||
label: {
|
||||
show: true,
|
||||
position: "top",
|
||||
color: '#30DCFF',
|
||||
fontSize: 14,
|
||||
fontSize: calcResponsivePX(14),
|
||||
formatter: function(params) {
|
||||
return params.value + '家';
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
//纯色
|
||||
color: '#30DCFF'
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
// 处理图表重绘
|
||||
const handleChartResize = () => {
|
||||
if (chart) {
|
||||
chart.resize();
|
||||
// 重新设置选项以更新所有响应式尺寸
|
||||
chart.setOption(getChartOption(), true); // true 表示不合并，完全替换
|
||||
}
|
||||
};
|
||||
|
||||
// 初始化图表
|
||||
const initChart = () => {
|
||||
if (!enterpriseTwoRef.value) return;
|
||||
|
||||
chart = echarts.init(enterpriseTwoRef.value);
|
||||
chart.setOption(getChartOption());
|
||||
};
|
||||
|
||||
// 生命周期钩子
|
||||
onMounted(() => {
|
||||
if (enterpriseTwoRef.value) {
|
||||
const chart = echarts.init(enterpriseTwoRef.value);
|
||||
// 设置option
|
||||
chart.setOption(option);
|
||||
nextTick(() => {
|
||||
initChart();
|
||||
});
|
||||
window.addEventListener('resize', handleChartResize);
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('resize', handleChartResize);
|
||||
if (chart) {
|
||||
chart.dispose();
|
||||
chart = null;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
|
||||
@ -1,48 +1,88 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="carcTitle">省内区域劳务协作撒点</div>
|
||||
<div ref="map" style="width: 17vw; height: 14.5vw"></div>
|
||||
<div ref="map" style="width: 19vw; height: 16vw"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, computed, onMounted } from "vue";
|
||||
// 引入Echarts
|
||||
import { ref, onMounted, onUnmounted, nextTick } from "vue";
|
||||
import * as echarts from "echarts";
|
||||
import 'echarts-gl';
|
||||
// 引入崇州市地图json数据
|
||||
import { debounce } from 'lodash';
|
||||
|
||||
// 引入地图数据
|
||||
import sichuanJSON from "@/assets/json/sichuan.json";
|
||||
// 引入本地撒点图片
|
||||
import pointImage from "@/assets/images/recruitment/map-point1.png";
|
||||
// 获取地图DOM元素
|
||||
let map = ref();
|
||||
// 注册崇州地图
|
||||
|
||||
// DOM 引用
|
||||
const map = ref();
|
||||
let myMap = null;
|
||||
|
||||
// 注册地图
|
||||
echarts.registerMap("sichuan", sichuanJSON);
|
||||
|
||||
// 响应式设计配置
|
||||
const designConfig = {
|
||||
designWidth: 1920,
|
||||
designHeight: 1080
|
||||
};
|
||||
|
||||
// 计算响应式尺寸
|
||||
const calcResponsivePX = (pxValue) => {
|
||||
const screenWidth = window.innerWidth || document.documentElement.clientWidth;
|
||||
return (pxValue / designConfig.designWidth) * screenWidth;
|
||||
};
|
||||
|
||||
// 初始点位数据
|
||||
const initialPoints = [
|
||||
{ name: "攀枝花", value: [101.718, 26.582, 0], count: 0 },
|
||||
{ name: "雅安", value: [103.009, 29.988, 0], count: 0 },
|
||||
{ name: "眉山", value: [103.848, 30.082, 0], count: 0 },
|
||||
{ name: "自贡", value: [104.777, 29.350, 0], count: 0 },
|
||||
{ name: "泸州", value: [105.442, 28.871, 0], count: 0 },
|
||||
{ name: "资阳", value: [104.628, 30.122, 0], count: 0 },
|
||||
{ name: "遂宁", value: [105.576, 30.523, 0], count: 0 },
|
||||
{ name: "广安", value: [106.636, 30.463, 0], count: 0 },
|
||||
{ name: "德阳", value: [104.399, 31.130, 0], count: 0 },
|
||||
{ name: "绵阳", value: [104.684185, 31.473263, 0], count: 0 },
|
||||
{ name: "广元", value: [105.834, 32.435, 0], count: 0 },
|
||||
{ name: "巴中", value: [106.753, 31.857, 0], count: 0 },
|
||||
{ name: "达州", value: [107.467, 31.209, 0], count: 0 },
|
||||
{ name: "南充", value: [106.110, 30.837, 0], count: 0 }
|
||||
{ name: "绵阳市", value: [104.69,31.47, 0], count: 0 },
|
||||
{ name: "广元市昭化区", value: [105.97,32.33, 0], count: 0 },
|
||||
{ name: "巴中市恩阳区", value: [106.64,31.80, 0], count: 0 },
|
||||
{ name: "达州市渠县", value: [106.98,30.84, 0], count: 0 },
|
||||
{ name: "达州市开江县", value: [107.88,31.09, 0], count: 0 },
|
||||
{ name: "达州市大竹县", value: [107.21,30.74, 0], count: 0 },
|
||||
{ name: "广安市", value: [106.64,30.46, 0], count: 0 },
|
||||
{ name: "广安市岳池县", value: [106.45,30.54, 0], count: 0 },
|
||||
{ name: "广安华蓥市", value: [106.79,30.40, 0], count: 0 },
|
||||
{ name: "南充顺庆区", value: [106.10,30.80, 0], count: 0 },
|
||||
{ name: "遂宁市大英县", value: [105.24,30.60, 0], count: 0 },
|
||||
{ name: "德阳市中江县", value: [104.69,31.04, 0], count: 0 },
|
||||
{ name: "资阳市雁江区", value: [104.68,30.11, 0], count: 0 },
|
||||
{ name: "雅安市荥经县", value: [102.85,29.80, 0], count: 0 },
|
||||
{ name: "雅安市天全县", value: [102.76,30.07, 0], count: 0 },
|
||||
{ name: "眉山市青神县", value: [103.85,29.84, 0], count: 0 },
|
||||
{ name: "自贡贡井区", value: [104.72,29.35, 0], count: 0 },
|
||||
{ name: "泸州市", value: [105.45,28.88, 0], count: 0 },
|
||||
{ name: "攀枝花市", value: [101.73,26.59, 0], count: 0 },
|
||||
];
|
||||
// 地图参数设置
|
||||
let option = {
|
||||
|
||||
// 生成随机高度值函数
|
||||
const generateRandomHeights = (points, minHeight = 10, maxHeight = 25) => {
|
||||
return points.map(point => ({
|
||||
...point,
|
||||
value: [point.value[0], point.value[1], Math.random() * (maxHeight - minHeight) + minHeight]
|
||||
}));
|
||||
};
|
||||
|
||||
// 获取动态配置
|
||||
const getChartOption = () => {
|
||||
const pointsWithRandomHeights = generateRandomHeights(initialPoints);
|
||||
|
||||
return {
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
formatter: function (params) {
|
||||
formatter: (params) => {
|
||||
if (params.seriesType === "scatter3D") {
|
||||
return `${params.name}<br/>合作社数量：${params.data.count || 0}`;
|
||||
}
|
||||
return params.name;
|
||||
},
|
||||
backgroundColor: "rgba(0, 0, 0, 0.8)",
|
||||
borderColor: "#30DCFF",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 12
|
||||
}
|
||||
},
|
||||
geo3D: {
|
||||
@ -50,55 +90,125 @@ let option = {
|
||||
map: "sichuan",
|
||||
regionHeight: 6,
|
||||
boxHeight: 2,
|
||||
roam: false,
|
||||
roam: true,
|
||||
label: {
|
||||
show: true,
|
||||
color: "#CBF2FA",
|
||||
fontSize: 12,
|
||||
show: false,
|
||||
color: "#fff",
|
||||
fontSize: 10,
|
||||
fontWeight: "bold"
|
||||
},
|
||||
itemStyle: {
|
||||
color: "rgba(27, 129, 150, 0.4)",
|
||||
color: "rgba(27,129,150,0.18)",
|
||||
borderColor: "#61cfff",
|
||||
borderWidth: 2,
|
||||
opacity: 0.75
|
||||
opacity: 0.3
|
||||
},
|
||||
emphasis: {
|
||||
itemStyle: { color: "rgba(27, 129, 150, 0.65)", opacity: 0.85 },
|
||||
label: { color: "#ffff00" }
|
||||
itemStyle: {
|
||||
color: "rgba(27, 129, 150, 0.3)",
|
||||
opacity: 0.5
|
||||
},
|
||||
label: { show: false }
|
||||
},
|
||||
light: {
|
||||
main: { intensity: 1.6, shadow: true, shadowQuality: "high", alpha: 35, beta: 15 },
|
||||
main: {
|
||||
intensity: 1.6,
|
||||
shadow: true,
|
||||
shadowQuality: "high",
|
||||
alpha: 35,
|
||||
beta: 15
|
||||
},
|
||||
ambient: { intensity: 0.35 }
|
||||
},
|
||||
shading: "lambert",
|
||||
viewControl: { distance: 110, alpha: 45, beta: 10 },
|
||||
groundPlane: { show: false },
|
||||
postEffect: { enable: true, bloom: { enable: true, bloomIntensity: 0.25 } }
|
||||
viewControl: {
|
||||
distance: 110,
|
||||
alpha: 45,
|
||||
beta: 10
|
||||
},
|
||||
groundPlane: { show: false }
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "城市点位(3D)",
|
||||
type: "scatter3D",
|
||||
coordinateSystem: "geo3D",
|
||||
data: initialPoints.map(p => ({
|
||||
data: pointsWithRandomHeights.map(p => ({
|
||||
name: p.name,
|
||||
value: [p.value[0], p.value[1], 6],
|
||||
count: p.count
|
||||
value: p.value,
|
||||
count: p.count,
|
||||
// 关键：使用正确的 label 配置方式
|
||||
label: {
|
||||
show: true,
|
||||
formatter: p.name,
|
||||
position: [p.value[2] + 5, p.value[2] + 5, p.value[2] + 5], // [x, y, z] - 在点上方固定偏移
|
||||
distance: 0, // 重要：设置为0，使用绝对位置
|
||||
textStyle: {
|
||||
backgroundColor: 'rgba(0,0,0,0.7)',
|
||||
borderWidth: 1,
|
||||
borderColor: '#30dcff',
|
||||
padding: [4, 8],
|
||||
borderRadius: 4,
|
||||
color: '#fff',
|
||||
fontSize: 10
|
||||
}
|
||||
}
|
||||
})),
|
||||
symbol: "triangle",
|
||||
symbolSize: 12,
|
||||
symbol: "triangle", // 改为圆形，更明显
|
||||
symbolSize: calcResponsivePX(12), // 增大符号尺寸
|
||||
itemStyle: { color: "#FFBE34" },
|
||||
label: { show: false }
|
||||
label: {
|
||||
textStyle: {
|
||||
backgroundColor: 'rgba(255,190,52,0.9)',
|
||||
color: '#000',
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
// 处理图表重绘（防抖优化）
|
||||
const handleChartResize = debounce(() => {
|
||||
if (myMap) {
|
||||
myMap.resize();
|
||||
// 重新设置配置以更新响应式尺寸
|
||||
myMap.setOption(getChartOption(), true);
|
||||
}
|
||||
}, 300);
|
||||
|
||||
// 初始化图表
|
||||
const initChart = () => {
|
||||
if (!map.value) return;
|
||||
|
||||
myMap = echarts.init(map.value);
|
||||
myMap.setOption(getChartOption());
|
||||
|
||||
// 添加点击事件（可选）
|
||||
myMap.on('click', (params) => {
|
||||
if (params.componentType === 'series' && params.seriesType === 'scatter3D') {
|
||||
console.log('点击了城市:', params.name);
|
||||
// 可以在这里添加点击后的业务逻辑
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 生命周期钩子
|
||||
onMounted(() => {
|
||||
let myMap = echarts.init(map.value);
|
||||
// 设置配置项
|
||||
myMap.setOption(option);
|
||||
nextTick(() => {
|
||||
initChart();
|
||||
});
|
||||
|
||||
window.addEventListener('resize', handleChartResize);
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('resize', handleChartResize);
|
||||
if (myMap) {
|
||||
myMap.dispose();
|
||||
myMap = null;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
@ -70,7 +70,7 @@
|
||||
<el-carousel-item>
|
||||
<div class="carousel-item-content">
|
||||
<div class="carousel-item-title">
|
||||
仁寿县劳务合作社联合送工
|
||||
农民工返乡慰问现场
|
||||
</div>
|
||||
<div style="height:20vw;">
|
||||
<img src="@/assets/images/ms/fxww.jpg" class="carousel-image">
|
||||
|
||||
@ -104,6 +104,7 @@ const props = defineProps({
|
||||
color: #ffffff;
|
||||
margin-bottom: 0.46875vw;
|
||||
font-size: 0.729vw;
|
||||
font-weight:700 ;
|
||||
}
|
||||
|
||||
.modelItem1 {
|
||||
|
||||
@ -59,18 +59,18 @@
|
||||
:type1="cardFourInfo.type1"
|
||||
:type2="cardFourInfo.type2"
|
||||
>
|
||||
<el-carousel
|
||||
:interval="8000"
|
||||
type="card"
|
||||
height="17vw"
|
||||
indicator-position="none"
|
||||
:autoplay="true"
|
||||
>
|
||||
<!-- <el-carousel-->
|
||||
<!-- :interval="8000"-->
|
||||
<!-- type="card"-->
|
||||
<!-- height="17vw"-->
|
||||
<!-- indicator-position="none"-->
|
||||
<!-- :autoplay="true"-->
|
||||
<!-- >-->
|
||||
<!-- <el-carousel-item><LaborSystemOne /></el-carousel-item> -->
|
||||
<el-carousel-item><LaborSystemTwo /></el-carousel-item>
|
||||
<div class="isVisibleImg"><LaborSystemTwo /></div>
|
||||
<!-- <el-carousel-item><LaborSystemThree /></el-carousel-item> -->
|
||||
<!-- <el-carousel-item><LaborSystemFour /></el-carousel-item> -->
|
||||
</el-carousel>
|
||||
<!-- </el-carousel>-->
|
||||
</enterprise-employment-card>
|
||||
<enterprise-employment-card
|
||||
style="margin-top: 0.625vw"
|
||||
@ -79,6 +79,9 @@
|
||||
:type1="cardThreeInfo.type1"
|
||||
:type2="cardThreeInfo.type2"
|
||||
>
|
||||
<template v-slot:header>
|
||||
<div class="header_bg" style="margin-top:1vw">近2个月保供入职人员分析</div>
|
||||
</template>
|
||||
<ListView/>
|
||||
|
||||
|
||||
@ -170,7 +173,7 @@ const cardTwoInfo = {
|
||||
}
|
||||
};
|
||||
const cardThreeInfo = {
|
||||
title: "重点企业保供案例(比亚迪)",
|
||||
title: "重点企业保供案例",
|
||||
// description: "4000+毕业生",
|
||||
type1: {
|
||||
title: "招募总人数",
|
||||
@ -234,6 +237,11 @@ function getWebSocketData() {
|
||||
.transition {
|
||||
transition: all 0.5s;
|
||||
}
|
||||
|
||||
.isVisibleImg.el-carousel__item {
|
||||
background: none !important;
|
||||
}
|
||||
|
||||
.el-carousel {
|
||||
margin-top: 0.5vw;
|
||||
}
|
||||
@ -268,8 +276,8 @@ function getWebSocketData() {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
background: url('~@/assets/recruitment/mbc.svg') no-repeat center center;
|
||||
background-size: 130% 100%;
|
||||
background: url('~@/assets/recruitment/bjtl.svg') no-repeat center center;
|
||||
background-size: 102% 100%;
|
||||
// background: url("~@/assets/recruitment/mbc.png") no-repeat center center;
|
||||
// background-size: 100% 100%;
|
||||
}
|
||||
|
||||
@ -2,22 +2,15 @@
|
||||
<div class="contentWrapper">
|
||||
<div class="rowContent">
|
||||
<div class="modelWrapper">
|
||||
<div
|
||||
class="modelContent"
|
||||
v-for="(item, index) in modelContentList"
|
||||
:key="index"
|
||||
:class="selectedIndex == index ? 'active' : ''"
|
||||
@click="onacitve(index, item.label)"
|
||||
>
|
||||
<div class="modelContent" v-for="(item, index) in modelContentList" :key="index"
|
||||
:class="selectedIndex == index ? 'active' : ''" @click="onacitve(index, item.label)">
|
||||
<div class="num">{{ item.num }}</div>
|
||||
<div class="label">{{ item.label }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="content"
|
||||
v-show="isactive != 0 && isactive != 1 && isactive != 2 && isactive != 3 && isactive != 4 && isactive != 5 && isactive != 6"
|
||||
>
|
||||
<div class="content"
|
||||
v-show="isactive != 0 && isactive != 1 && isactive != 2 && isactive != 3 && isactive != 4 && isactive != 5 && isactive != 6">
|
||||
<div class="num">{{ centerInfoMap[activeView].num }}</div>
|
||||
<div class="label">{{ centerInfoMap[activeView].label }}</div>
|
||||
</div>
|
||||
@ -36,12 +29,8 @@
|
||||
>
|
||||
{{ item }}
|
||||
</li> -->
|
||||
<li
|
||||
v-for="(item, index) in tabsDate.tabs"
|
||||
:key="index"
|
||||
:class="tabsActive == index ? 'active' : ''"
|
||||
@click="tabsActive = 0"
|
||||
>
|
||||
<li v-for="(item, index) in tabsDate.tabs" :key="index" :class="tabsActive == index ? 'active' : ''"
|
||||
@click="tabsActive = 0">
|
||||
{{ item }}
|
||||
</li>
|
||||
</ul>
|
||||
@ -62,8 +51,7 @@
|
||||
<span>{{ item.title }}</span>
|
||||
</div>
|
||||
<div class="count">
|
||||
<span class="numb">{{ item.count }}</span
|
||||
>（{{ item.unit }}）
|
||||
<span class="numb">{{ item.count }}</span>（{{ item.unit }}）
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
@ -83,15 +71,13 @@
|
||||
<li>
|
||||
<div><span class="blockOne"></span><span>城镇新增就业</span></div>
|
||||
<div>
|
||||
<span class="numb">目标7200人</span
|
||||
><span class="proportion">完成5445人</span>
|
||||
<span class="numb">目标7200人</span><span class="proportion">完成5445人</span>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div><span class="blockTwo"></span><span>失业人员再就业</span></div>
|
||||
<div>
|
||||
<span class="numb">目标1900人</span
|
||||
><span class="proportion">完成1528人</span>
|
||||
<span class="numb">目标1900人</span><span class="proportion">完成1528人</span>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
@ -99,8 +85,7 @@
|
||||
<span class="blockThree"></span><span>就业困难人员再就业</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="numb">目标190人</span
|
||||
><span class="proportion">完成125人</span>
|
||||
<span class="numb">目标190人</span><span class="proportion">完成125人</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
@ -120,15 +105,10 @@
|
||||
>
|
||||
{{ item }}
|
||||
</li> -->
|
||||
<li
|
||||
v-for="(item, index) in tabsDate2.tabs"
|
||||
:key="index"
|
||||
:class="tabsActive == index ? 'active' : ''"
|
||||
@click="
|
||||
<li v-for="(item, index) in tabsDate2.tabs" :key="index" :class="tabsActive == index ? 'active' : ''" @click="
|
||||
tabsDate2.activeIndex = index;
|
||||
tabsActive = index;
|
||||
"
|
||||
>
|
||||
">
|
||||
{{ item }}
|
||||
</li>
|
||||
</ul>
|
||||
@ -167,13 +147,26 @@
|
||||
<div class="title">部分合作学校</div>
|
||||
<div class="close" @click="isactive = -1"></div>
|
||||
</div>
|
||||
<div class="schoolEmploymentBox">
|
||||
<table class="employmentTable">
|
||||
<div class="schoolEmploymentBoxs">
|
||||
<div v-for="(item, idx) in topSchools" :key="idx" class="schoolItem">
|
||||
<div class="schoolContent">
|
||||
<img src="@/assets/images/recruitment/xuexiao.png" alt="学校" class="schoolIcon" />
|
||||
<div class="schoolName">
|
||||
<div class="bane"> {{ item.name }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div v-for="(item, idx) in topSchools" :key="idx" style="display: flex;">
|
||||
<div>
|
||||
<img src="@/assets/images/recruitment/xuexiao.png" alt="学校" class="schoolIcon" />
|
||||
{{ item.name }}
|
||||
</div>
|
||||
<div>{{ item.name1 }}</div>
|
||||
</div> -->
|
||||
<!-- <table class="employmentTable">
|
||||
<thead>
|
||||
<tr>
|
||||
<!-- <th>序号</th>-->
|
||||
<th colspan="2">部分合作学校</th>
|
||||
<!-- <th>当年就业人数</th>-->
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@ -182,7 +175,7 @@
|
||||
<td>{{ item.name1 }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</table> -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="hjrkDialogBox topSchoolsDialog" v-show="isactive == 5">-->
|
||||
@ -210,7 +203,8 @@
|
||||
</ul>
|
||||
</div>
|
||||
<div class="bottomSwitch">
|
||||
<button data-type="overview" :class="{active: activeView === 'overview'}" @click="switchView('overview')">崇州概况</button>
|
||||
<button data-type="overview" :class="{ active: activeView === 'overview' }"
|
||||
@click="switchView('overview')">崇州概况</button>
|
||||
<button data-type="work" :class="{ active: activeView === 'work' }" @click="switchView('work')">兴蜀工作</button>
|
||||
</div>
|
||||
</div>
|
||||
@ -281,7 +275,7 @@ const modelSets = {
|
||||
{ num: "628个", label: "服务企业" },
|
||||
{ num: "36所", label: "合作学校" },
|
||||
{ num: "19个", label: "合作区县" },
|
||||
{ num: "17期", label: "培训课程" },
|
||||
{ num: "9000+", label: "培训人次" },
|
||||
{ num: "870人", label: "领证人数" }
|
||||
]
|
||||
};
|
||||
@ -308,19 +302,19 @@ const statisticData = ref([
|
||||
{
|
||||
imgURL: tongjiPxjg,
|
||||
title: "博士",
|
||||
count: "133",
|
||||
count: "40",
|
||||
unit: "人"
|
||||
},
|
||||
{
|
||||
imgURL: tongjiPxjg,
|
||||
title: "硕士",
|
||||
count: "1012",
|
||||
count: "1213",
|
||||
unit: "人"
|
||||
},
|
||||
{
|
||||
imgURL: tongjiPxjg,
|
||||
title: "本科",
|
||||
count: "20792",
|
||||
count: "21788",
|
||||
unit: "人"
|
||||
}
|
||||
]);
|
||||
@ -349,15 +343,20 @@ const schoolEmploymentList = ref([
|
||||
{ name: "四川文化传媒职业技术学校", count: 1200 }
|
||||
]);
|
||||
const topSchools = ref([
|
||||
// { name: "成都工业职业技术学院" },
|
||||
// { name: "成都工贸职业技术学院" },
|
||||
// { name: "四川师范大学" },
|
||||
{ name: "成都工业职业技术学院" },
|
||||
{ name: "成都工贸职业技术学院" },
|
||||
{ name: "四川师范大学" },
|
||||
{ name: "四川水利职业技术学校" },
|
||||
{ name: "四川文化传媒职业技术学校" },
|
||||
{ name: "甘孜州职业技术学院" },
|
||||
{ name: "四川矿产机电技师学院" },
|
||||
{ name: "成都职业技术学院" },
|
||||
// { name: "崇州市职业教育培训中心（成都市技师学院南校区）" },
|
||||
// { name: "成都矿产机电技师学院" }
|
||||
{ name: "成都工贸职业技术学院", name1: '成都工业职业技术学院' },
|
||||
{ name: "四川师范大学", name1: '四川水利职业技术学校' },
|
||||
{ name: "四川文化传媒职业技术学校", name1: '甘孜州职业技术学院' },
|
||||
{ name: "四川矿产机电技师学院", name1: '成都职业技术学院' },
|
||||
// { name: "成都工贸职业技术学院", name1: '成都工业职业技术学院' },
|
||||
// { name: "四川师范大学", name1: '四川水利职业技术学校' },
|
||||
// { name: "四川文化传媒职业技术学校", name1: '甘孜州职业技术学院' },
|
||||
// { name: "四川矿产机电技师学院", name1: '成都职业技术学院' },
|
||||
]);
|
||||
const topCoops = ref([
|
||||
{ name: "绵阳市游仙区鑫众送劳务信息咨询农民专业合作社" },
|
||||
@ -546,10 +545,12 @@ onMounted(() => {
|
||||
color: #cbf2fa;
|
||||
}
|
||||
}
|
||||
|
||||
.modelWrapper {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
|
||||
.modelContent {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -562,6 +563,7 @@ onMounted(() => {
|
||||
padding: 0.625vw 0;
|
||||
margin: 0 1.5vw 1.2vw;
|
||||
cursor: pointer;
|
||||
|
||||
.num {
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-size: 1.667vw;
|
||||
@ -584,9 +586,9 @@ onMounted(() => {
|
||||
// margin-left: 8vw;
|
||||
// }
|
||||
&.active {
|
||||
background: url("~@/assets/images/recruitment/model-active-bg.png")
|
||||
no-repeat;
|
||||
background: url("~@/assets/images/recruitment/model-active-bg.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
|
||||
.num {
|
||||
background: -webkit-linear-gradient(#fff4b3, #ffd901);
|
||||
-webkit-background-clip: text;
|
||||
@ -595,6 +597,7 @@ onMounted(() => {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hjrkDialogBox {
|
||||
top: 15.2vw;
|
||||
left: 50%;
|
||||
@ -605,10 +608,12 @@ onMounted(() => {
|
||||
background-size: 100% 100%;
|
||||
margin-left: -26.302vw;
|
||||
z-index: 9999;
|
||||
|
||||
.titleBox {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: 2.604vw;
|
||||
|
||||
.title {
|
||||
font-size: 1vw;
|
||||
height: 100%;
|
||||
@ -616,20 +621,22 @@ onMounted(() => {
|
||||
padding: 0 0 0 1.042vw;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.close {
|
||||
width: 1.5625vw;
|
||||
height: 1.5625vw;
|
||||
background: url("~@/assets/images/recruitment/hjrk-dialog-close.png")
|
||||
no-repeat;
|
||||
background: url("~@/assets/images/recruitment/hjrk-dialog-close.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
margin: 0.5vw;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
ul.tabsBox {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
padding: 1vw 7vw;
|
||||
|
||||
li {
|
||||
width: 3.958vw;
|
||||
height: 1.354vw;
|
||||
@ -640,11 +647,13 @@ onMounted(() => {
|
||||
background-size: 100% 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
li.active {
|
||||
background: url("~@/assets/images/recruitment/tabs-active-bg.png") no-repeat center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.barBox {
|
||||
width: 40vw;
|
||||
height: 20vw;
|
||||
@ -652,15 +661,18 @@ onMounted(() => {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul.statisticOne {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
padding-top: 3vw;
|
||||
|
||||
li {
|
||||
// width: 450px;
|
||||
height: 9vw;
|
||||
margin: 0 0;
|
||||
|
||||
// 第一排的前2个元素（第一排显示2个）
|
||||
&:nth-child(-n + 2) {
|
||||
width: 20vw; // 减去margin值
|
||||
@ -677,13 +689,16 @@ ul.statisticOne {
|
||||
height: 7vw;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.infoBox {
|
||||
float: left;
|
||||
padding: 0 0 0 0.5vw;
|
||||
|
||||
.title {
|
||||
height: 2vw;
|
||||
line-height: 2vw;
|
||||
margin-top: 1vw;
|
||||
|
||||
span {
|
||||
background: -webkit-linear-gradient(#ffffff, #75e8ff);
|
||||
-webkit-background-clip: text;
|
||||
@ -692,9 +707,11 @@ ul.statisticOne {
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
|
||||
.count {
|
||||
font-size: 1.4vw;
|
||||
padding: 0.5vw 0 0 0;
|
||||
|
||||
span.numb {
|
||||
font-size: 2.2vw;
|
||||
display: inline-block;
|
||||
@ -704,24 +721,27 @@ ul.statisticOne {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pieBigBox {
|
||||
width: 40vw;
|
||||
margin: 1vw auto 0;
|
||||
|
||||
// height: 274px;
|
||||
.pieMain {
|
||||
position: relative;
|
||||
border: 1px solid transparent;
|
||||
float: left;
|
||||
|
||||
.pieBox {
|
||||
margin: 0 auto;
|
||||
margin-top: 3vw;
|
||||
width: 15vw;
|
||||
height: 15vw;
|
||||
background: url("~@/assets/images/recruitment/pie-bg@2x.png") no-repeat
|
||||
center;
|
||||
background: url("~@/assets/images/recruitment/pie-bg@2x.png") no-repeat center;
|
||||
background-size: 100%;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.pieTitle {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
@ -732,12 +752,14 @@ ul.statisticOne {
|
||||
font-size: 1vw;
|
||||
}
|
||||
}
|
||||
|
||||
ul.pieLsit {
|
||||
float: left;
|
||||
margin: 2.6vw 0 0 2vw;
|
||||
border: 1px solid transparent;
|
||||
padding: 1vw 0 0 0;
|
||||
width: 20vw;
|
||||
|
||||
li {
|
||||
// font-size: 16px;
|
||||
display: flex;
|
||||
@ -750,10 +772,12 @@ ul.statisticOne {
|
||||
border: 1px solid rgba(203, 242, 250, 0.2);
|
||||
margin-top: 1vw;
|
||||
font-size: 0.7vw;
|
||||
|
||||
>div {
|
||||
height: 100%;
|
||||
line-height: 3vw;
|
||||
}
|
||||
|
||||
.blockOne,
|
||||
.blockTwo,
|
||||
.blockThree,
|
||||
@ -763,18 +787,23 @@ ul.statisticOne {
|
||||
height: 0.8vw;
|
||||
margin-right: 1vw;
|
||||
}
|
||||
|
||||
.blockOne {
|
||||
background-color: #58a8ff;
|
||||
}
|
||||
|
||||
.blockTwo {
|
||||
background-color: #30dcff;
|
||||
}
|
||||
|
||||
.blockThree {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.blockFour {
|
||||
background-color: #dd7d4d;
|
||||
}
|
||||
|
||||
.proportion {
|
||||
display: inline-block;
|
||||
width: 4.5vw;
|
||||
@ -783,11 +812,79 @@ ul.statisticOne {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 在崇学校就业人数列表样式 */
|
||||
.schoolEmploymentBox {
|
||||
width: 40vw;
|
||||
margin: 1.6vw auto 0;
|
||||
.schoolEmploymentBoxs {
|
||||
width: 100%;
|
||||
padding: 1vw;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
justify-content:space-between;
|
||||
/* 学校项目容器 */
|
||||
.schoolItem {
|
||||
width: 50%;
|
||||
margin-bottom: 0vw;
|
||||
}
|
||||
|
||||
/* 学校内容容器 */
|
||||
.schoolContent {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
line-height: 5vw;
|
||||
justify-content:space-between;
|
||||
.schoolIcon {
|
||||
height: 5vw;
|
||||
width: 5vw;
|
||||
}
|
||||
}
|
||||
|
||||
.schoolName {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
height: 5vw;
|
||||
line-height: 5vw;
|
||||
|
||||
/* 创建模糊背景 */
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 50%;
|
||||
height: 1.5vw;
|
||||
top: 2vw;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 221, 255, 0.45);
|
||||
border-radius: 0px;
|
||||
filter: blur(50px);
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.bane {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
/* 确保文字在模糊背景上方 */
|
||||
width: 100%;
|
||||
height: 5vw;
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: 500;
|
||||
font-size: 1.5vw;
|
||||
line-height: 5vw;
|
||||
letter-spacing: 3px;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
background: linear-gradient(270deg, #FFFFFF 0%, #75E8FF 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.employmentTable {
|
||||
width: 100%;
|
||||
border-collapse: separate;
|
||||
@ -795,6 +892,7 @@ ul.statisticOne {
|
||||
color: #cbf2fa;
|
||||
font-size: 0.8vw;
|
||||
}
|
||||
|
||||
.employmentTable thead th {
|
||||
height: 2vw;
|
||||
line-height: 2vw;
|
||||
@ -803,6 +901,7 @@ ul.statisticOne {
|
||||
border-radius: 0.26vw;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.employmentTable tbody td {
|
||||
height: 2vw;
|
||||
line-height: 2vw;
|
||||
@ -811,9 +910,11 @@ ul.statisticOne {
|
||||
border-radius: 0.26vw;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.employmentTable tbody tr:nth-child(odd) td {
|
||||
background: linear-gradient(180deg, rgba(48, 220, 255, 0.16) 0%, rgba(48, 220, 255, 0.06) 100%);
|
||||
}
|
||||
|
||||
.bottomSwitch {
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
@ -823,6 +924,7 @@ ul.statisticOne {
|
||||
gap: 0.8vw;
|
||||
z-index: 100; // 保持在内容之上但不遮挡弹窗
|
||||
pointer-events: auto;
|
||||
|
||||
button {
|
||||
min-width: 7vw;
|
||||
height: 2vw;
|
||||
@ -836,12 +938,14 @@ ul.statisticOne {
|
||||
padding: 0 1.2vw;
|
||||
border-radius: 0.26vw;
|
||||
}
|
||||
|
||||
button.active {
|
||||
color: #fff;
|
||||
background: url("~@/assets/images/recruitment/tabs-active-bg2.png") no-repeat center;
|
||||
background-size: auto 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* 合作社TOP5 样式 */
|
||||
.cooperateOrgList {
|
||||
width: 42vw;
|
||||
@ -852,16 +956,19 @@ ul.statisticOne {
|
||||
border: 1px solid rgba(48, 220, 255, 0.15);
|
||||
border-radius: 0.4vw;
|
||||
}
|
||||
|
||||
.cooperateOrgList li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.cooperateOrgList .coopIcon {
|
||||
width: 3.6vw;
|
||||
height: 3.6vw;
|
||||
margin-right: 1.2vw;
|
||||
filter: drop-shadow(0 0 0.6vw rgba(48, 220, 255, 0.5));
|
||||
}
|
||||
|
||||
.cooperateOrgList .coopName {
|
||||
font-size: 1.1vw;
|
||||
font-weight: 600;
|
||||
@ -873,6 +980,7 @@ ul.statisticOne {
|
||||
text-shadow: 0 0 0.3vw rgba(48, 220, 255, 0.8), 0 0 0.8vw rgba(48, 220, 255, 0.4);
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.cooperateOrgList .coopName {
|
||||
font-size: 1.2vw;
|
||||
font-weight: 600;
|
||||
@ -884,6 +992,7 @@ ul.statisticOne {
|
||||
text-shadow: 0 0 0.3vw rgba(48, 220, 255, 0.8),
|
||||
0 0 0.8vw rgba(48, 220, 255, 0.4);
|
||||
}
|
||||
|
||||
.employmentTable thead th {
|
||||
height: 2vw;
|
||||
line-height: 2vw;
|
||||
@ -892,6 +1001,7 @@ ul.statisticOne {
|
||||
border-radius: 0.26vw;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.employmentTable tbody td {
|
||||
height: 2vw;
|
||||
line-height: 2vw;
|
||||
@ -900,9 +1010,11 @@ ul.statisticOne {
|
||||
border-radius: 0.26vw;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.employmentTable tbody tr:nth-child(odd) td {
|
||||
background: linear-gradient(180deg, rgba(48, 220, 255, 0.16) 0%, rgba(48, 220, 255, 0.06) 100%);
|
||||
}
|
||||
|
||||
.bottomSwitch {
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
@ -912,6 +1024,7 @@ ul.statisticOne {
|
||||
gap: 0.8vw;
|
||||
z-index: 100; // 保持在内容之上但不遮挡弹窗
|
||||
pointer-events: auto;
|
||||
|
||||
button {
|
||||
min-width: 7vw;
|
||||
height: 2vw;
|
||||
@ -925,12 +1038,14 @@ ul.statisticOne {
|
||||
padding: 0 1.2vw;
|
||||
border-radius: 0.26vw;
|
||||
}
|
||||
|
||||
button.active {
|
||||
color: #fff;
|
||||
background: url("~@/assets/images/recruitment/tabs-active-bg2.png") no-repeat center;
|
||||
background-size: auto 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* 合作学校TOP5 样式 */
|
||||
.cooperateSchoolList {
|
||||
width: 42vw;
|
||||
@ -944,16 +1059,19 @@ ul.statisticOne {
|
||||
border: 1px solid rgba(48, 220, 255, 0.15);
|
||||
border-radius: 0.4vw;
|
||||
}
|
||||
|
||||
.cooperateSchoolList li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.cooperateSchoolList .schoolIcon {
|
||||
width: 3.6vw;
|
||||
height: 3.6vw;
|
||||
margin-right: 1.2vw;
|
||||
filter: drop-shadow(0 0 0.6vw rgba(48, 220, 255, 0.5));
|
||||
}
|
||||
|
||||
.cooperateSchoolList .schoolName {
|
||||
font-size: 1.2vw;
|
||||
font-weight: 600;
|
||||
@ -974,6 +1092,7 @@ ul.statisticOne {
|
||||
gap: 0.8vw;
|
||||
z-index: 100; // 保持在内容之上但不遮挡弹窗
|
||||
pointer-events: auto;
|
||||
|
||||
button {
|
||||
min-width: 7vw;
|
||||
height: 2vw;
|
||||
@ -987,12 +1106,14 @@ ul.statisticOne {
|
||||
padding: 0 1.2vw;
|
||||
border-radius: 0.26vw;
|
||||
}
|
||||
|
||||
button.active {
|
||||
color: #fff;
|
||||
background: url("~@/assets/images/recruitment/tabs-active-bg2.png") no-repeat center;
|
||||
background-size: auto 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.bottomSwitch {
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
@ -1002,6 +1123,7 @@ ul.statisticOne {
|
||||
gap: 0.8vw;
|
||||
z-index: 999; // 保持在内容之上但不遮挡弹窗
|
||||
pointer-events: auto;
|
||||
|
||||
button {
|
||||
min-width: 7vw;
|
||||
height: 2vw;
|
||||
@ -1015,6 +1137,7 @@ ul.statisticOne {
|
||||
padding: 0 1.2vw;
|
||||
border-radius: 0.26vw;
|
||||
}
|
||||
|
||||
button.active {
|
||||
color: #fff;
|
||||
background: url("~@/assets/images/recruitment/tabs-active-bg2.png") no-repeat center;
|
||||
@ -1024,21 +1147,23 @@ ul.statisticOne {
|
||||
.pieBigBox {
|
||||
width: 40vw;
|
||||
margin: 1vw auto 0;
|
||||
|
||||
// height: 274px;
|
||||
.pieMain {
|
||||
position: relative;
|
||||
border: 1px solid transparent;
|
||||
float: left;
|
||||
|
||||
.pieBox {
|
||||
margin: 0 auto;
|
||||
margin-top: 3vw;
|
||||
width: 15vw;
|
||||
height: 15vw;
|
||||
background: url("~@/assets/images/recruitment/pie-bg@2x.png") no-repeat
|
||||
center;
|
||||
background: url("~@/assets/images/recruitment/pie-bg@2x.png") no-repeat center;
|
||||
background-size: 100%;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.pieTitle {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
@ -1049,12 +1174,14 @@ ul.statisticOne {
|
||||
font-size: 1vw;
|
||||
}
|
||||
}
|
||||
|
||||
ul.pieLsit {
|
||||
float: left;
|
||||
margin: 2.6vw 0 0 2vw;
|
||||
border: 1px solid transparent;
|
||||
padding: 1vw 0 0 0;
|
||||
width: 20vw;
|
||||
|
||||
li {
|
||||
// font-size: 16px;
|
||||
display: flex;
|
||||
@ -1067,10 +1194,12 @@ ul.statisticOne {
|
||||
border: 1px solid rgba(203, 242, 250, 0.2);
|
||||
margin-top: 1vw;
|
||||
font-size: 0.7vw;
|
||||
|
||||
>div {
|
||||
height: 100%;
|
||||
line-height: 3vw;
|
||||
}
|
||||
|
||||
.blockOne,
|
||||
.blockTwo,
|
||||
.blockThree,
|
||||
@ -1080,18 +1209,23 @@ ul.statisticOne {
|
||||
height: 0.8vw;
|
||||
margin-right: 1vw;
|
||||
}
|
||||
|
||||
.blockOne {
|
||||
background-color: #58a8ff;
|
||||
}
|
||||
|
||||
.blockTwo {
|
||||
background-color: #30dcff;
|
||||
}
|
||||
|
||||
.blockThree {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.blockFour {
|
||||
background-color: #dd7d4d;
|
||||
}
|
||||
|
||||
.proportion {
|
||||
display: inline-block;
|
||||
width: 4.5vw;
|
||||
@ -1100,11 +1234,13 @@ ul.statisticOne {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 在崇学校就业人数列表样式 */
|
||||
.schoolEmploymentBox {
|
||||
width: 40vw;
|
||||
margin: 1.6vw auto 0;
|
||||
}
|
||||
|
||||
.employmentTable {
|
||||
width: 100%;
|
||||
border-collapse: separate;
|
||||
@ -1112,6 +1248,7 @@ ul.statisticOne {
|
||||
color: #cbf2fa;
|
||||
font-size: 0.8vw;
|
||||
}
|
||||
|
||||
.employmentTable thead th {
|
||||
height: 2vw;
|
||||
line-height: 2vw;
|
||||
@ -1120,6 +1257,7 @@ ul.statisticOne {
|
||||
border-radius: 0.26vw;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.employmentTable tbody td {
|
||||
height: 2vw;
|
||||
line-height: 2vw;
|
||||
@ -1128,9 +1266,11 @@ ul.statisticOne {
|
||||
border-radius: 0.26vw;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.employmentTable tbody tr:nth-child(odd) td {
|
||||
background: linear-gradient(180deg, rgba(48, 220, 255, 0.16) 0%, rgba(48, 220, 255, 0.06) 100%);
|
||||
}
|
||||
|
||||
.bottomSwitch {
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
@ -1140,6 +1280,7 @@ ul.statisticOne {
|
||||
gap: 0.8vw;
|
||||
z-index: 100; // 保持在内容之上但不遮挡弹窗
|
||||
pointer-events: auto;
|
||||
|
||||
button {
|
||||
min-width: 7vw;
|
||||
height: 2vw;
|
||||
@ -1153,12 +1294,14 @@ ul.statisticOne {
|
||||
padding: 0 1.2vw;
|
||||
border-radius: 0.26vw;
|
||||
}
|
||||
|
||||
button.active {
|
||||
color: #fff;
|
||||
background: url("~@/assets/images/recruitment/tabs-active-bg2.png") no-repeat center;
|
||||
background-size: auto 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* 合作社TOP5 样式 */
|
||||
.cooperateOrgList {
|
||||
width: 42vw;
|
||||
@ -1169,16 +1312,19 @@ ul.statisticOne {
|
||||
border: 1px solid rgba(48, 220, 255, 0.15);
|
||||
border-radius: 0.4vw;
|
||||
}
|
||||
|
||||
.cooperateOrgList li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.cooperateOrgList .coopIcon {
|
||||
width: 3.6vw;
|
||||
height: 3.6vw;
|
||||
margin-right: 1.2vw;
|
||||
filter: drop-shadow(0 0 0.6vw rgba(48, 220, 255, 0.5));
|
||||
}
|
||||
|
||||
.cooperateOrgList .coopName {
|
||||
font-size: 1.1vw;
|
||||
font-weight: 600;
|
||||
@ -1189,6 +1335,7 @@ ul.statisticOne {
|
||||
-webkit-text-fill-color: transparent;
|
||||
text-shadow: 0 0 0.3vw rgba(48, 220, 255, 0.8), 0 0 0.8vw rgba(48, 220, 255, 0.4);
|
||||
}
|
||||
|
||||
.cooperateOrgList .coopName {
|
||||
font-size: 1.2vw;
|
||||
font-weight: 600;
|
||||
@ -1200,6 +1347,7 @@ ul.statisticOne {
|
||||
text-shadow: 0 0 0.3vw rgba(48, 220, 255, 0.8),
|
||||
0 0 0.8vw rgba(48, 220, 255, 0.4);
|
||||
}
|
||||
|
||||
.employmentTable thead th {
|
||||
height: 2vw;
|
||||
line-height: 2vw;
|
||||
@ -1208,6 +1356,7 @@ ul.statisticOne {
|
||||
border-radius: 0.26vw;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.employmentTable tbody td {
|
||||
height: 2vw;
|
||||
line-height: 2vw;
|
||||
@ -1216,9 +1365,11 @@ ul.statisticOne {
|
||||
border-radius: 0.26vw;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.employmentTable tbody tr:nth-child(odd) td {
|
||||
background: linear-gradient(180deg, rgba(48, 220, 255, 0.16) 0%, rgba(48, 220, 255, 0.06) 100%);
|
||||
}
|
||||
|
||||
.bottomSwitch {
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
@ -1228,6 +1379,7 @@ ul.statisticOne {
|
||||
gap: 0.8vw;
|
||||
z-index: 100; // 保持在内容之上但不遮挡弹窗
|
||||
pointer-events: auto;
|
||||
|
||||
button {
|
||||
min-width: 7vw;
|
||||
height: 2vw;
|
||||
@ -1241,12 +1393,14 @@ ul.statisticOne {
|
||||
padding: 0 1.2vw;
|
||||
border-radius: 0.26vw;
|
||||
}
|
||||
|
||||
button.active {
|
||||
color: #fff;
|
||||
background: url("~@/assets/images/recruitment/tabs-active-bg2.png") no-repeat center;
|
||||
background-size: auto 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* 合作学校TOP5 样式 */
|
||||
.cooperateSchoolList {
|
||||
width: 42vw;
|
||||
@ -1260,16 +1414,19 @@ ul.statisticOne {
|
||||
border: 1px solid rgba(48, 220, 255, 0.15);
|
||||
border-radius: 0.4vw;
|
||||
}
|
||||
|
||||
.cooperateSchoolList li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.cooperateSchoolList .schoolIcon {
|
||||
width: 3.6vw;
|
||||
height: 3.6vw;
|
||||
margin-right: 1.2vw;
|
||||
filter: drop-shadow(0 0 0.6vw rgba(48, 220, 255, 0.5));
|
||||
}
|
||||
|
||||
.cooperateSchoolList .schoolName {
|
||||
font-size: 1.2vw;
|
||||
font-weight: 600;
|
||||
@ -1280,6 +1437,7 @@ ul.statisticOne {
|
||||
-webkit-text-fill-color: transparent;
|
||||
text-shadow: 0 0 0.3vw rgba(48, 220, 255, 0.8), 0 0 0.8vw rgba(48, 220, 255, 0.4);
|
||||
}
|
||||
|
||||
.bottomSwitch {
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
@ -1289,6 +1447,7 @@ ul.statisticOne {
|
||||
gap: 1.2vw;
|
||||
z-index: 10001;
|
||||
}
|
||||
|
||||
.bottomSwitch button {
|
||||
min-width: 11vw;
|
||||
height: 2.8vw;
|
||||
@ -1303,16 +1462,19 @@ ul.statisticOne {
|
||||
position: relative;
|
||||
clip-path: polygon(8% 0, 92% 0, 100% 50%, 92% 100%, 8% 100%, 0 50%);
|
||||
}
|
||||
|
||||
.bottomSwitch button[data-type="overview"] {
|
||||
background: linear-gradient(180deg, rgba(255, 208, 96, 0.85) 0%, rgba(204, 160, 61, 0.78) 100%);
|
||||
text-shadow: 0 0 0.5vw rgba(241, 207, 104, 0.6), 0 0 0.2vw rgba(241, 207, 104, 0.8);
|
||||
box-shadow: 0 0 0.6vw rgba(241, 207, 104, 0.35) inset, 0 0 0.6vw rgba(241, 207, 104, 0.3);
|
||||
}
|
||||
|
||||
.bottomSwitch button[data-type="work"] {
|
||||
background: linear-gradient(180deg, rgba(64, 196, 255, 0.85) 0%, rgba(24, 142, 196, 0.78) 100%);
|
||||
text-shadow: 0 0 0.5vw rgba(48, 220, 255, 0.7), 0 0 0.2vw rgba(48, 220, 255, 0.9);
|
||||
box-shadow: 0 0 0.6vw rgba(48, 220, 255, 0.35) inset, 0 0 0.6vw rgba(48, 220, 255, 0.3);
|
||||
}
|
||||
|
||||
.bottomSwitch button::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
@ -1322,6 +1484,7 @@ ul.statisticOne {
|
||||
pointer-events: none;
|
||||
filter: drop-shadow(0 0 0.4vw rgba(48, 220, 255, 0.45));
|
||||
}
|
||||
|
||||
.bottomSwitch button::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
@ -1336,6 +1499,7 @@ ul.statisticOne {
|
||||
opacity: 0.9;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.bottomSwitch button.active::before {
|
||||
border-color: rgba(48, 220, 255, 0.55);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user