1345 lines
37 KiB
Vue
1345 lines
37 KiB
Vue
<template>
|
||
<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="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="num">{{ centerInfoMap[activeView].num }}</div>
|
||
<div class="label">{{ centerInfoMap[activeView].label }}</div>
|
||
</div>
|
||
<!-- <transition name="fade"> -->
|
||
<div class="hjrkDialogBox" v-show="isactive == 0">
|
||
<div class="titleBox">
|
||
<div class="title">户籍人口</div>
|
||
<div class="close" @click="isactive = -1"></div>
|
||
</div>
|
||
<ul class="tabsBox">
|
||
<!-- <li
|
||
v-for="(item, index) in tabsDate.tabs"
|
||
:key="index"
|
||
:class="tabsActive == index ? 'active' : ''"
|
||
@click="tabsActive = index"
|
||
>
|
||
{{ item }}
|
||
</li> -->
|
||
<li
|
||
v-for="(item, index) in tabsDate.tabs"
|
||
:key="index"
|
||
:class="tabsActive == index ? 'active' : ''"
|
||
@click="tabsActive = 0"
|
||
>
|
||
{{ item }}
|
||
</li>
|
||
</ul>
|
||
|
||
<div class="barBox" ref="enterpriseTwoRef"></div>
|
||
</div>
|
||
<!-- </transition> -->
|
||
<div class="hjrkDialogBox" v-show="isactive == 1">
|
||
<div class="titleBox">
|
||
<div class="title">高中端人才</div>
|
||
<div class="close" @click="isactive = -1"></div>
|
||
</div>
|
||
<ul class="statisticOne">
|
||
<li v-for="(item, index) in statisticData" :key="index">
|
||
<img :src="item.imgURL" :alt="item.title" />
|
||
<div class="infoBox">
|
||
<div class="title">
|
||
<span>{{ item.title }}</span>
|
||
</div>
|
||
<div class="count">
|
||
<span class="numb">{{ item.count }}</span
|
||
>（{{ item.unit }}）
|
||
</div>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div class="hjrkDialogBox" v-show="isactive == 3">
|
||
<div class="titleBox">
|
||
<div class="title">新增就业群体</div>
|
||
<div class="close" @click="isactive = -1"></div>
|
||
</div>
|
||
<div class="pieBigBox">
|
||
<div class="pieMain">
|
||
<div class="pieBox" ref="pieRef"></div>
|
||
<div class="pieTitle">新增就业群体</div>
|
||
</div>
|
||
<ul class="pieLsit">
|
||
<li>
|
||
<div><span class="blockOne"></span><span>城镇新增就业</span></div>
|
||
<div>
|
||
<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>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<div>
|
||
<span class="blockThree"></span><span>就业困难人员再就业</span>
|
||
</div>
|
||
<div>
|
||
<span class="numb">目标190人</span
|
||
><span class="proportion">完成125人</span>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="hjrkDialogBox" v-show="isactive == 2">
|
||
<div class="titleBox">
|
||
<div class="title">高校毕业未就业情况</div>
|
||
<div class="close" @click="isactive = -1"></div>
|
||
</div>
|
||
<ul class="tabsBox">
|
||
<!-- <li
|
||
v-for="(item, index) in tabsDate.tabs"
|
||
:key="index"
|
||
:class="tabsActive == index ? 'active' : ''"
|
||
@click="tabsActive = index"
|
||
>
|
||
{{ item }}
|
||
</li> -->
|
||
<li
|
||
v-for="(item, index) in tabsDate2.tabs"
|
||
:key="index"
|
||
:class="tabsActive == index ? 'active' : ''"
|
||
@click="
|
||
tabsDate2.activeIndex = index;
|
||
tabsActive = index;
|
||
"
|
||
>
|
||
{{ item }}
|
||
</li>
|
||
</ul>
|
||
<Xueli v-if="tabsDate2.activeIndex == 0"></Xueli>
|
||
<Zhuanye v-if="tabsDate2.activeIndex == 1"></Zhuanye>
|
||
<Xingbie v-if="tabsDate2.activeIndex == 2"></Xingbie>
|
||
<Juzhudi v-if="tabsDate2.activeIndex == 3"></Juzhudi>
|
||
<Kunnan v-if="tabsDate2.activeIndex == 4"></Kunnan>
|
||
</div>
|
||
<div class="hjrkDialogBox" v-show="isactive == 4">
|
||
<div class="titleBox">
|
||
<div class="title">在崇学校就业人数</div>
|
||
<div class="close" @click="isactive = -1"></div>
|
||
</div>
|
||
<div class="schoolEmploymentBox">
|
||
<table class="employmentTable">
|
||
<thead>
|
||
<tr>
|
||
<th>序号</th>
|
||
<th>校名</th>
|
||
<th>当年就业人数</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr v-for="(item, idx) in schoolEmploymentList" :key="idx">
|
||
<td>{{ (idx + 1).toString().padStart(2, '0') }}</td>
|
||
<td>{{ item.name }}</td>
|
||
<td>{{ item.count }}人</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
<div class="hjrkDialogBox" v-show="isactive == 5">
|
||
<div class="titleBox">
|
||
<div class="title">部分合作学校</div>
|
||
<div class="close" @click="isactive = -1"></div>
|
||
</div>
|
||
<div class="schoolEmploymentBox">
|
||
<table class="employmentTable">
|
||
<thead>
|
||
<tr>
|
||
<!-- <th>序号</th>-->
|
||
<th colspan="2">部分合作学校</th>
|
||
<!-- <th>当年就业人数</th>-->
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr v-for="(item, idx) in topSchools" :key="idx">
|
||
<td>{{ item.name }}</td>
|
||
<td>{{ item.name1 }}</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
<!-- <div class="hjrkDialogBox topSchoolsDialog" v-show="isactive == 5">-->
|
||
<!-- <div class="titleBox">-->
|
||
<!-- <div class="title">合作学校TOP5</div>-->
|
||
<!-- <div class="close" @click="isactive = -1"></div>-->
|
||
<!-- </div>-->
|
||
<!-- <ul class="cooperateSchoolList">-->
|
||
<!-- <li v-for="(item, index) in topSchools" :key="index">-->
|
||
<!-- <img :src="schoolIcon" alt="学校" class="schoolIcon" />-->
|
||
<!-- <div class="schoolName">{{ item.name }}</div>-->
|
||
<!-- </li>-->
|
||
<!-- </ul>-->
|
||
<!-- </div>-->
|
||
<div class="hjrkDialogBox" v-show="isactive == 6">
|
||
<div class="titleBox">
|
||
<div class="title">合作社TOP5</div>
|
||
<div class="close" @click="isactive = -1"></div>
|
||
</div>
|
||
<ul class="cooperateOrgList">
|
||
<li v-for="(item, index) in topCoops" :key="index">
|
||
<img :src="coopIcon" alt="合作社" class="coopIcon" />
|
||
<div class="coopName">{{ item.name }}</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div class="bottomSwitch">
|
||
<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>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, reactive, onMounted, computed } from "vue";
|
||
import tongjiPxrs from "@/assets/images/largeScreen/tongji-pxrs.png";
|
||
import tongjiPxkc from "@/assets/images/largeScreen/tongji-pxkc.png";
|
||
import tongjiPxjg from "@/assets/images/largeScreen/tongji-pxjg.png";
|
||
import Xueli from "../components/jyknryzjy/xueli.vue";
|
||
import Zhuanye from "../components/jyknryzjy/zhuanye.vue";
|
||
import Xingbie from "../components/jyknryzjy/xingbie.vue";
|
||
import Juzhudi from "../components/jyknryzjy/juzhudi.vue";
|
||
import Kunnan from "../components/jyknryzjy/kunnan.vue";
|
||
import schoolIcon from "@/assets/images/recruitment/xuexiao.png";
|
||
import coopIcon from "@/assets/images/recruitment/hzqy.png";
|
||
const isactive = ref(-1); // 控制弹窗
|
||
const hideBottomSwitch = computed(() => [0, 1, 2, 3, 4, 5, 6].includes(isactive.value));
|
||
const selectedIndex = ref(-1); // 控制上方卡片高亮
|
||
const tabsActive = ref(0);
|
||
const dialogTitle = ref("户籍人口");
|
||
const onacitve = (index, label) => {
|
||
// 仅在“崇州概况”模式下开启弹窗，其它模式只高亮不弹窗
|
||
// 记录高亮卡片
|
||
selectedIndex.value = index;
|
||
if (activeView.value === "overview") {
|
||
// 根据标签映射到既有弹窗：户籍人口(0)、高中端人才(1)、新增就业群体(3)、在崇学校就业人数(4)
|
||
if (label === "户籍人口") {
|
||
// 取消弹窗显示
|
||
isactive.value = -1;
|
||
} else if (label === "高中端人才") {
|
||
isactive.value = 1;
|
||
} else if (label.includes("新增")) {
|
||
isactive.value = 3;
|
||
} else if (label === "在崇学校就业人数") {
|
||
isactive.value = 4;
|
||
} else {
|
||
isactive.value = -1;
|
||
}
|
||
dialogTitle.value = label;
|
||
} else {
|
||
// 兴蜀工作视图的弹窗映射：合作学校TOP5、合作社TOP5
|
||
if (label === "合作学校") {
|
||
isactive.value = 5;
|
||
} else if (label === "合作社") {
|
||
isactive.value = 6;
|
||
} else {
|
||
isactive.value = -1;
|
||
}
|
||
}
|
||
};
|
||
|
||
const activeView = ref("overview");
|
||
const centerInfoMap = {
|
||
overview: { num: "81.1万", label: "人口总数" },
|
||
work: { num: "19.7万", label: "服务人数" }
|
||
};
|
||
const modelSets = {
|
||
overview: [
|
||
{ num: "65.33万", label: "户籍人口" },
|
||
{ num: "2.2万", label: "高中端人才" },
|
||
{ num: "0.71万", label: "新增就业群体" },
|
||
{ num: "0.76万", label: "失业人员就业帮扶" },
|
||
{ num: "0.49万", label: "在崇学校就业人数" }
|
||
],
|
||
work: [
|
||
{ num: "628个", label: "服务企业" },
|
||
{ num: "36所", label: "合作学校" },
|
||
{ num: "19个", label: "合作社" },
|
||
{ num: "17期", label: "培训课程" },
|
||
{ num: "870人", label: "领证人数" }
|
||
]
|
||
};
|
||
const modelContentList = ref(modelSets[activeView.value]);
|
||
const switchView = (view) => {
|
||
activeView.value = view;
|
||
isactive.value = -1; // 退出任何弹窗
|
||
selectedIndex.value = -1; // 取消高亮
|
||
modelContentList.value = modelSets[view];
|
||
};
|
||
const statisticData = ref([
|
||
{
|
||
imgURL: tongjiPxjg,
|
||
title: "国家级领军人才",
|
||
count: "18",
|
||
unit: "人"
|
||
},
|
||
{
|
||
imgURL: tongjiPxjg,
|
||
title: "地方级领军型人才",
|
||
count: "45",
|
||
unit: "人"
|
||
},
|
||
{
|
||
imgURL: tongjiPxjg,
|
||
title: "博士",
|
||
count: "133",
|
||
unit: "人"
|
||
},
|
||
{
|
||
imgURL: tongjiPxjg,
|
||
title: "硕士",
|
||
count: "1012",
|
||
unit: "人"
|
||
},
|
||
{
|
||
imgURL: tongjiPxjg,
|
||
title: "本科",
|
||
count: "20792",
|
||
unit: "人"
|
||
}
|
||
]);
|
||
const tabsDate = reactive({
|
||
tabs: [
|
||
"学历",
|
||
"工种",
|
||
"性别",
|
||
"年龄段",
|
||
"原户籍地",
|
||
"所在产业",
|
||
"所在行业",
|
||
"公司规模"
|
||
],
|
||
activeIndex: 0
|
||
});
|
||
const tabsDate2 = reactive({
|
||
tabs: ["学历", "专业", "性别", "居住地址", "困难大学生"],
|
||
activeIndex: 0
|
||
});
|
||
const schoolEmploymentList = ref([
|
||
{ name: "四川矿产机电技师学院", count: 1228 },
|
||
{ name: "四川科华高级技工学校", count: 176 },
|
||
{ name: "中国五冶高级学校崇州校区", count: 300 },
|
||
{ name: "四川水利职业技术学院", count: 2067 },
|
||
{ name: "四川文化传媒职业技术学校", count: 1200 }
|
||
]);
|
||
const topSchools = ref([
|
||
// { name: "成都工业职业技术学院" },
|
||
// { name: "成都工贸职业技术学院" },
|
||
// { name: "四川师范大学" },
|
||
// { name: "崇州市职业教育培训中心（成都市技师学院南校区）" },
|
||
// { name: "成都矿产机电技师学院" }
|
||
{ name: "成都工贸职业技术学院", name1: '成都工业职业技术学院' },
|
||
{ name: "四川师范大学", name1: '四川水利职业技术学校' },
|
||
{ name: "四川文化传媒职业技术学校", name1: '甘孜州职业技术学院' },
|
||
{ name: "四川矿产机电技师学院", name1: '成都职业技术学院' },
|
||
]);
|
||
const topCoops = ref([
|
||
{ name: "绵阳市游仙区鑫众达劳务信息咨询农民专业合作社" },
|
||
{ name: "成都市武侯青业劳务信息咨询农民专业合作社" },
|
||
{ name: "成都市成华青业劳务信息咨询农民专业合作社" },
|
||
{ name: "崇州市蜀洲聚力劳务信息咨询农民专业合作社" },
|
||
{ name: "成都市蜀州兴蜀农民劳务信息咨询专业合作社" }
|
||
]);
|
||
import * as echarts from "echarts";
|
||
const enterpriseTwoRef = ref(null);
|
||
const option = {
|
||
// 设置图形位置
|
||
grid: {
|
||
top: "10%",
|
||
left: "8%",
|
||
right: "5%",
|
||
bottom: "11%"
|
||
},
|
||
// 设置图例
|
||
// legend: {
|
||
// itemWidth: 10, // 方块宽度
|
||
// itemHeight: 10, // 方块高度
|
||
// textStyle: {
|
||
// color: "#B2D9DF" // 文字颜色
|
||
// },
|
||
// x: "center", // 图例在左（left）、右（right）、居中（center）、100px
|
||
// y: "top", // 图例在上（top）、下（bottom）、居中（center、100px）、100px
|
||
// padding: [15, 50, 0, 0] // 图例[距上右下左方距离
|
||
// },
|
||
xAxis: {
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: "#CBF2FA" // 文字颜色
|
||
}
|
||
},
|
||
axisLabel: {
|
||
fontSize: 22, // 设置 x 轴文字大小
|
||
color: "#CBF2FA" // 可以同时设置文字颜色
|
||
},
|
||
type: "category",
|
||
data: ["大专及以上", "高中(含中专)", "初中", "小学"]
|
||
},
|
||
yAxis: {
|
||
//网格线
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: ["#A1C7CD"], // 线颜色
|
||
opacity: 0.2 // 透明度
|
||
}
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: "#CBF2FA" // 文字颜色
|
||
}
|
||
},
|
||
axisLabel: {
|
||
fontSize: 20, // 设置 x 轴文字大小
|
||
color: "#CBF2FA" // 可以同时设置文字颜色
|
||
},
|
||
type: "value"
|
||
},
|
||
series: [
|
||
{
|
||
name: "岗位种类数",
|
||
type: "bar",
|
||
showBackground: true,
|
||
barWidth: 20,
|
||
data: [71013, 105716, 266225, 210356],
|
||
// 设置柱状图的数值
|
||
label: {
|
||
show: true,
|
||
position: "top",
|
||
color: "#30DCFF",
|
||
fontSize: 22
|
||
},
|
||
itemStyle: {
|
||
//渐变色
|
||
color: {
|
||
type: "linear",
|
||
x: 1,
|
||
y: 0,
|
||
x2: 0,
|
||
y2: 1,
|
||
colorStops: [
|
||
{ offset: 0, color: "rgba(48, 220, 255, 1)" },
|
||
{ offset: 1, color: "rgba(48, 220, 255, 0.06)" }
|
||
]
|
||
}
|
||
}
|
||
}
|
||
]
|
||
};
|
||
const pieRef = ref(null);
|
||
const optionPie = {
|
||
// 设置图形位置
|
||
tooltip: {
|
||
trigger: "item"
|
||
},
|
||
|
||
series: [
|
||
{
|
||
name: "新增就业群里",
|
||
type: "pie",
|
||
radius: ["65%", "80%"],
|
||
avoidLabelOverlap: false,
|
||
padAngle: 5,
|
||
itemStyle: {
|
||
borderRadius: 1
|
||
},
|
||
label: {
|
||
show: false,
|
||
position: "center"
|
||
},
|
||
|
||
labelLine: {
|
||
show: false
|
||
},
|
||
data: [
|
||
{ value: 5445, name: "城镇新增就业", itemStyle: { color: "#58A8FF" } },
|
||
{
|
||
value: 1528,
|
||
name: "失业人员再就业",
|
||
itemStyle: { color: "#30DCFF" }
|
||
},
|
||
{
|
||
value: 125,
|
||
name: "就业困难人员再就业",
|
||
itemStyle: { color: "#ffffff" }
|
||
}
|
||
]
|
||
}
|
||
]
|
||
};
|
||
// 生命周期钩子
|
||
onMounted(() => {
|
||
if (enterpriseTwoRef.value) {
|
||
const chart = echarts.init(enterpriseTwoRef.value);
|
||
// 设置option
|
||
chart.setOption(option);
|
||
}
|
||
if (pieRef.value) {
|
||
const chart = echarts.init(pieRef.value);
|
||
// 设置option
|
||
chart.setOption(optionPie);
|
||
}
|
||
});
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.contentWrapper {
|
||
position: absolute;
|
||
top: 8.2vw;
|
||
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: 12.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: center;
|
||
.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;
|
||
margin: 0 1.5vw 1.2vw;
|
||
cursor: pointer;
|
||
.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(1) {
|
||
// margin-right: 8vw;
|
||
// }
|
||
|
||
// &:nth-last-child(3) {
|
||
// margin-left: 8vw;
|
||
// }
|
||
&.active {
|
||
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;
|
||
color: transparent;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.hjrkDialogBox {
|
||
top: 15.2vw;
|
||
left: 50%;
|
||
position: absolute;
|
||
width: 52.604vw;
|
||
height: 27.135vw;
|
||
background: url("~@/assets/images/recruitment/hjrk-dialog-bg.png") no-repeat;
|
||
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%;
|
||
line-height: 2.604vw;
|
||
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-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;
|
||
line-height: 1.354vw;
|
||
text-align: center;
|
||
font-size: 0.625vw;
|
||
background: url("~@/assets/images/recruitment/tabs-bg.png") no-repeat;
|
||
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;
|
||
margin: 0 auto;
|
||
}
|
||
}
|
||
}
|
||
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值
|
||
}
|
||
|
||
// // 第二排的第3-5个元素（第二排显示3个）
|
||
// &:nth-child(n + 3):nth-child(-n + 5) {
|
||
// width: calc(33.33% - 20px); // 减去margin值
|
||
// }
|
||
|
||
img {
|
||
display: block;
|
||
width: 7vw;
|
||
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;
|
||
-webkit-text-fill-color: transparent;
|
||
font-size: 1.3vw;
|
||
font-weight: 400;
|
||
}
|
||
}
|
||
.count {
|
||
font-size: 1.4vw;
|
||
padding: 0.5vw 0 0 0;
|
||
span.numb {
|
||
font-size: 2.2vw;
|
||
display: inline-block;
|
||
padding: 0 0.5vw 0 0;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.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-size: 100%;
|
||
border: 1px solid transparent;
|
||
}
|
||
.pieTitle {
|
||
position: absolute;
|
||
top: 50%;
|
||
width: 100%;
|
||
text-align: center;
|
||
z-index: 10;
|
||
margin-top: 1vw;
|
||
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;
|
||
justify-content: space-between;
|
||
width: 100%;
|
||
height: 3vw;
|
||
padding: 0 1vw;
|
||
background: rgba(203, 242, 250, 0.2);
|
||
border-radius: 4px 4px 4px 4px;
|
||
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,
|
||
.blockFour {
|
||
display: inline-block;
|
||
width: 0.8vw;
|
||
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;
|
||
text-align: right;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
/* 在崇学校就业人数列表样式 */
|
||
.schoolEmploymentBox {
|
||
width: 40vw;
|
||
margin: 1.6vw auto 0;
|
||
}
|
||
.employmentTable {
|
||
width: 100%;
|
||
border-collapse: separate;
|
||
border-spacing: 0 0.6vw;
|
||
color: #cbf2fa;
|
||
font-size: 0.8vw;
|
||
}
|
||
.employmentTable thead th {
|
||
height: 2vw;
|
||
line-height: 2vw;
|
||
background: linear-gradient(180deg, rgba(48, 220, 255, 0.35) 0%, rgba(48, 220, 255, 0.15) 100%);
|
||
border: 1px solid rgba(48, 220, 255, 0.25);
|
||
border-radius: 0.26vw;
|
||
text-align: center;
|
||
}
|
||
.employmentTable tbody td {
|
||
height: 2vw;
|
||
line-height: 2vw;
|
||
background: linear-gradient(180deg, rgba(88, 168, 255, 0.18) 0%, rgba(48, 220, 255, 0.08) 100%);
|
||
border: 1px solid rgba(48, 220, 255, 0.2);
|
||
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%;
|
||
bottom: 2.2vw; // 更贴近底部，避免与弹窗标题冲突
|
||
transform: translateX(-50%);
|
||
display: flex;
|
||
gap: 0.8vw;
|
||
z-index: 100; // 保持在内容之上但不遮挡弹窗
|
||
pointer-events: auto;
|
||
button {
|
||
min-width: 7vw;
|
||
height: 2vw;
|
||
line-height: 2vw;
|
||
font-size: 0.8vw;
|
||
color: #c4f3fe;
|
||
background: url("~@/assets/images/recruitment/tabs-active-bg1.png") no-repeat center;
|
||
background-size: auto 100%;
|
||
border: none;
|
||
cursor: pointer;
|
||
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;
|
||
margin: 1.2vw auto 1.6vw;
|
||
display: block;
|
||
padding: 1vw 2vw;
|
||
background: rgba(12, 52, 76, 0.35);
|
||
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;
|
||
letter-spacing: 0.02vw;
|
||
color: #cbf2fa;
|
||
background-image: linear-gradient(to top, #8cc8ff 0%, #ffffff 55%);
|
||
-webkit-background-clip: text;
|
||
-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);
|
||
word-break: break-word;
|
||
}
|
||
.cooperateOrgList .coopName {
|
||
font-size: 1.2vw;
|
||
font-weight: 600;
|
||
letter-spacing: 0.02vw;
|
||
color: #cbf2fa;
|
||
background-image: linear-gradient(to top, #8cc8ff 0%, #ffffff 55%);
|
||
-webkit-background-clip: text;
|
||
-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);
|
||
}
|
||
.employmentTable thead th {
|
||
height: 2vw;
|
||
line-height: 2vw;
|
||
background: linear-gradient(180deg, rgba(48, 220, 255, 0.35) 0%, rgba(48, 220, 255, 0.15) 100%);
|
||
border: 1px solid rgba(48, 220, 255, 0.25);
|
||
border-radius: 0.26vw;
|
||
text-align: center;
|
||
}
|
||
.employmentTable tbody td {
|
||
height: 2vw;
|
||
line-height: 2vw;
|
||
background: linear-gradient(180deg, rgba(88, 168, 255, 0.18) 0%, rgba(48, 220, 255, 0.08) 100%);
|
||
border: 1px solid rgba(48, 220, 255, 0.2);
|
||
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%;
|
||
bottom: 2.2vw; // 更贴近底部，避免与弹窗标题冲突
|
||
transform: translateX(-50%);
|
||
display: flex;
|
||
gap: 0.8vw;
|
||
z-index: 100; // 保持在内容之上但不遮挡弹窗
|
||
pointer-events: auto;
|
||
button {
|
||
min-width: 7vw;
|
||
height: 2vw;
|
||
line-height: 2vw;
|
||
font-size: 0.8vw;
|
||
color: #c4f3fe;
|
||
background: url("~@/assets/images/recruitment/tabs-active-bg1.png") no-repeat center;
|
||
background-size: auto 100%;
|
||
border: none;
|
||
cursor: pointer;
|
||
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;
|
||
margin: 1.2vw auto 1.6vw;
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
grid-row-gap: 1.6vw;
|
||
grid-column-gap: 2vw;
|
||
padding: 1vw 2vw;
|
||
background: rgba(12, 52, 76, 0.35);
|
||
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;
|
||
letter-spacing: 0.02vw;
|
||
color: #cbf2fa;
|
||
background-image: linear-gradient(to top, #8cc8ff 0%, #ffffff 55%);
|
||
-webkit-background-clip: text;
|
||
-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%;
|
||
bottom: 2.2vw; // 更贴近底部，避免与弹窗标题冲突
|
||
transform: translateX(-50%);
|
||
display: flex;
|
||
gap: 0.8vw;
|
||
z-index: 100; // 保持在内容之上但不遮挡弹窗
|
||
pointer-events: auto;
|
||
button {
|
||
min-width: 7vw;
|
||
height: 2vw;
|
||
line-height: 2vw;
|
||
font-size: 0.8vw;
|
||
color: #c4f3fe;
|
||
background: url("~@/assets/images/recruitment/tabs-active-bg1.png") no-repeat center;
|
||
background-size: auto 100%;
|
||
border: none;
|
||
cursor: pointer;
|
||
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%;
|
||
bottom: 2.2vw; // 更贴近底部，避免与弹窗标题冲突
|
||
transform: translateX(-50%);
|
||
display: flex;
|
||
gap: 0.8vw;
|
||
z-index: 999; // 保持在内容之上但不遮挡弹窗
|
||
pointer-events: auto;
|
||
button {
|
||
min-width: 7vw;
|
||
height: 2vw;
|
||
line-height: 2vw;
|
||
font-size: 0.8vw;
|
||
color: #c4f3fe;
|
||
background: url("~@/assets/images/recruitment/tabs-active-bg1.png") no-repeat center;
|
||
background-size: auto 100%;
|
||
border: none;
|
||
cursor: pointer;
|
||
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%;
|
||
}
|
||
|
||
.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-size: 100%;
|
||
border: 1px solid transparent;
|
||
}
|
||
.pieTitle {
|
||
position: absolute;
|
||
top: 50%;
|
||
width: 100%;
|
||
text-align: center;
|
||
z-index: 10;
|
||
margin-top: 1vw;
|
||
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;
|
||
justify-content: space-between;
|
||
width: 100%;
|
||
height: 3vw;
|
||
padding: 0 1vw;
|
||
background: rgba(203, 242, 250, 0.2);
|
||
border-radius: 4px 4px 4px 4px;
|
||
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,
|
||
.blockFour {
|
||
display: inline-block;
|
||
width: 0.8vw;
|
||
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;
|
||
text-align: right;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
/* 在崇学校就业人数列表样式 */
|
||
.schoolEmploymentBox {
|
||
width: 40vw;
|
||
margin: 1.6vw auto 0;
|
||
}
|
||
.employmentTable {
|
||
width: 100%;
|
||
border-collapse: separate;
|
||
border-spacing: 0 0.6vw;
|
||
color: #cbf2fa;
|
||
font-size: 0.8vw;
|
||
}
|
||
.employmentTable thead th {
|
||
height: 2vw;
|
||
line-height: 2vw;
|
||
background: linear-gradient(180deg, rgba(48, 220, 255, 0.35) 0%, rgba(48, 220, 255, 0.15) 100%);
|
||
border: 1px solid rgba(48, 220, 255, 0.25);
|
||
border-radius: 0.26vw;
|
||
text-align: center;
|
||
}
|
||
.employmentTable tbody td {
|
||
height: 2vw;
|
||
line-height: 2vw;
|
||
background: linear-gradient(180deg, rgba(88, 168, 255, 0.18) 0%, rgba(48, 220, 255, 0.08) 100%);
|
||
border: 1px solid rgba(48, 220, 255, 0.2);
|
||
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%;
|
||
bottom: 2.2vw; // 更贴近底部，避免与弹窗标题冲突
|
||
transform: translateX(-50%);
|
||
display: flex;
|
||
gap: 0.8vw;
|
||
z-index: 100; // 保持在内容之上但不遮挡弹窗
|
||
pointer-events: auto;
|
||
button {
|
||
min-width: 7vw;
|
||
height: 2vw;
|
||
line-height: 2vw;
|
||
font-size: 0.8vw;
|
||
color: #c4f3fe;
|
||
background: url("~@/assets/images/recruitment/tabs-active-bg1.png") no-repeat center;
|
||
background-size: auto 100%;
|
||
border: none;
|
||
cursor: pointer;
|
||
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;
|
||
margin: 1.2vw auto 1.6vw;
|
||
display: block;
|
||
padding: 1vw 2vw;
|
||
background: rgba(12, 52, 76, 0.35);
|
||
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;
|
||
letter-spacing: 0.02vw;
|
||
color: #cbf2fa;
|
||
background-image: linear-gradient(to top, #8cc8ff 0%, #ffffff 55%);
|
||
-webkit-background-clip: text;
|
||
-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;
|
||
letter-spacing: 0.02vw;
|
||
color: #cbf2fa;
|
||
background-image: linear-gradient(to top, #8cc8ff 0%, #ffffff 55%);
|
||
-webkit-background-clip: text;
|
||
-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);
|
||
}
|
||
.employmentTable thead th {
|
||
height: 2vw;
|
||
line-height: 2vw;
|
||
background: linear-gradient(180deg, rgba(48, 220, 255, 0.35) 0%, rgba(48, 220, 255, 0.15) 100%);
|
||
border: 1px solid rgba(48, 220, 255, 0.25);
|
||
border-radius: 0.26vw;
|
||
text-align: center;
|
||
}
|
||
.employmentTable tbody td {
|
||
height: 2vw;
|
||
line-height: 2vw;
|
||
background: linear-gradient(180deg, rgba(88, 168, 255, 0.18) 0%, rgba(48, 220, 255, 0.08) 100%);
|
||
border: 1px solid rgba(48, 220, 255, 0.2);
|
||
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%;
|
||
bottom: 2.2vw; // 更贴近底部，避免与弹窗标题冲突
|
||
transform: translateX(-50%);
|
||
display: flex;
|
||
gap: 0.8vw;
|
||
z-index: 100; // 保持在内容之上但不遮挡弹窗
|
||
pointer-events: auto;
|
||
button {
|
||
min-width: 7vw;
|
||
height: 2vw;
|
||
line-height: 2vw;
|
||
font-size: 0.8vw;
|
||
color: #c4f3fe;
|
||
background: url("~@/assets/images/recruitment/tabs-active-bg1.png") no-repeat center;
|
||
background-size: auto 100%;
|
||
border: none;
|
||
cursor: pointer;
|
||
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;
|
||
margin: 1.2vw auto 1.6vw;
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
grid-row-gap: 1.6vw;
|
||
grid-column-gap: 2vw;
|
||
padding: 1vw 2vw;
|
||
background: rgba(12, 52, 76, 0.35);
|
||
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;
|
||
letter-spacing: 0.02vw;
|
||
color: #cbf2fa;
|
||
background-image: linear-gradient(to top, #8cc8ff 0%, #ffffff 55%);
|
||
-webkit-background-clip: text;
|
||
-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%;
|
||
bottom: 2.2vw;
|
||
transform: translateX(-50%);
|
||
display: flex;
|
||
gap: 1.2vw;
|
||
z-index: 10001;
|
||
}
|
||
.bottomSwitch button {
|
||
min-width: 11vw;
|
||
height: 2.8vw;
|
||
line-height: 2.8vw;
|
||
padding: 0 2.2vw;
|
||
font-size: 1.1vw;
|
||
letter-spacing: 0.14vw;
|
||
color: #fff;
|
||
background: transparent;
|
||
border: none;
|
||
cursor: pointer;
|
||
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;
|
||
inset: -0.5vw;
|
||
clip-path: inherit;
|
||
border: 0.12vw dashed rgba(203,242,250,0.35);
|
||
pointer-events: none;
|
||
filter: drop-shadow(0 0 0.4vw rgba(48,220,255,0.45));
|
||
}
|
||
.bottomSwitch button::after {
|
||
content: "";
|
||
position: absolute;
|
||
left: 1.2vw;
|
||
top: 0.4vw;
|
||
width: 1.8vw;
|
||
height: 0.6vw;
|
||
background:
|
||
linear-gradient(90deg, rgba(255,255,255,0.85), rgba(117,232,255,0.7)) left top / 0.6vw 0.12vw no-repeat,
|
||
linear-gradient(90deg, rgba(255,255,255,0.85), rgba(117,232,255,0.7)) left center / 1vw 0.12vw no-repeat,
|
||
linear-gradient(90deg, rgba(255,255,255,0.85), rgba(117,232,255,0.7)) left bottom / 1.4vw 0.12vw no-repeat;
|
||
opacity: 0.9;
|
||
pointer-events: none;
|
||
}
|
||
.bottomSwitch button.active::before {
|
||
border-color: rgba(48, 220, 255, 0.55);
|
||
}
|
||
|
||
}
|
||
</style>
|