diff --git a/src/assets/recruitment/bjtl.svg b/src/assets/recruitment/bjtl.svg new file mode 100644 index 0000000..25574d7 --- /dev/null +++ b/src/assets/recruitment/bjtl.svg @@ -0,0 +1,33 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/views/recruitment/card/ListView.vue b/src/views/recruitment/card/ListView.vue index 619bb0b..ce054de 100644 --- a/src/views/recruitment/card/ListView.vue +++ b/src/views/recruitment/card/ListView.vue @@ -70,7 +70,7 @@ - - - - - - - - - - - - + + + + + + + + + + + +
合作社TOP5
@@ -210,8 +203,9 @@
- - + +
@@ -270,28 +264,28 @@ const centerInfoMap = { 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: "9000+", label: "培训人次" }, - { num: "870人", label: "领证人数" } - ] - }; + 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: "9000+", 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]; - }; + activeView.value = view; + isactive.value = -1; // 退出任何弹窗 + selectedIndex.value = -1; // 取消高亮 + modelContentList.value = modelSets[view]; +}; const statisticData = ref([ { imgURL: tongjiPxjg, @@ -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 { + + >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,37 +910,42 @@ 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%; - 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%; - } - } + 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; @@ -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; @@ -882,8 +990,9 @@ ul.statisticOne { -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); + 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,37 +1010,42 @@ 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%; - 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%; - } - } + 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; @@ -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,330 +1137,372 @@ 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%; } -.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%; + .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; + } } - .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; + + 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%; - } + + /* 在崇学校就业人数列表样式 */ + .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; } -/* 合作社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%; - } + + 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); -} + } + + /* 合作社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); + } }