From 0becdcc9eb97adbb776beb0bf9af47e73b7916f1 Mon Sep 17 00:00:00 2001 From: lcw <1878680531@qq.com> Date: Thu, 23 Oct 2025 13:38:03 +0800 Subject: [PATCH] lcw --- src/App.vue | 1 - src/assets/recruitment/mbc.svg | 33 +++ .../recruitment/components/recruitment.scss | 247 +++++++++--------- src/views/recruitment/index.vue | 16 +- 4 files changed, 173 insertions(+), 124 deletions(-) create mode 100644 src/assets/recruitment/mbc.svg diff --git a/src/App.vue b/src/App.vue index ca55db4..0cbcd25 100644 --- a/src/App.vue +++ b/src/App.vue @@ -105,4 +105,3 @@ v-deep .el-loading-mask { } - \ No newline at end of file diff --git a/src/assets/recruitment/mbc.svg b/src/assets/recruitment/mbc.svg new file mode 100644 index 0000000..e47b1cc --- /dev/null +++ b/src/assets/recruitment/mbc.svg @@ -0,0 +1,33 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/views/recruitment/components/recruitment.scss b/src/views/recruitment/components/recruitment.scss index 3aceb0b..01d202c 100644 --- a/src/views/recruitment/components/recruitment.scss +++ b/src/views/recruitment/components/recruitment.scss @@ -13,67 +13,70 @@ background-size: 100% 100%; color: #fff; -// 头部 -.homeHead,.homeHeadsmall { - display: flex; - justify-content: space-between; - position: fixed; - top: 0; - left: 0; - width: 100%; - z-index: 8; - height: 4.896vw !important; - background: url('~@/assets/recruitment/header_bg.svg') no-repeat; - background-size: 100%; + // 头部 + .homeHead, + .homeHeadsmall { + display: flex; + justify-content: space-between; + position: fixed; + top: 0; + left: 0; + width: 100%; + z-index: 8; + height: 4.896vw !important; + background: url('~@/assets/recruitment/header_bg.svg') no-repeat; + background-size: 100%; - .left_Head { - position: absolute; - left: 1vw; - top: 2.135vw; - font-family: "DigifaceWide"; - } - - .center_head { - position: absolute; - top: 2vw; - left: 50%; - transform: translateX(-56%); - font-size: 4vw; - font-family: "YSBTH"; - letter-spacing: 0.104vw; - font-weight: 400; - white-space: nowrap; - - span { - background-image: linear-gradient(to top, #165493 10%, #ffffff 50%); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - } - - &::before { - content: attr(text); + .left_Head { position: absolute; - z-index: -2; + left: 1vw; + top: 2.135vw; + font-family: "DigifaceWide"; } - } - .right_head { - position: absolute; - right: 1.875vw; - top: 2.135vw; - - .setting { + .center_head { position: absolute; - top: -10px; - left: -78px; - width: 1.8vw; - height: 1.8vw; + top: 2vw; + left: 50%; + transform: translateX(-56%); + font-size: 4vw; + font-family: "YSBTH"; + letter-spacing: 0.104vw; + font-weight: 400; + white-space: nowrap; + + span { + background-image: linear-gradient(to top, #165493 10%, #ffffff 50%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + } + + &::before { + content: attr(text); + position: absolute; + z-index: -2; + } + } + + .right_head { + position: absolute; + right: 1.875vw; + top: 2.135vw; + + .setting { + position: absolute; + top: -10px; + left: -78px; + width: 1.8vw; + height: 1.8vw; + } } } -} - .homeHeadsmall{ - // background: url('~@/assets/images/home_head_small.png') no-repeat center center; + + .homeHeadsmall { + // background: url('~@/assets/images/home_head_small.png') no-repeat center center; height: 6.771vw; + .center_head { position: absolute; top: 0.5vw; @@ -87,86 +90,86 @@ } } -// 侧边 -.asidemodel { - position: absolute; - top: 5.888vw; -//width: 22.396vw; -//height: calc(100vh - 13.75vw); -//transform: perspective(6.25vw) rotateY(2deg); + // 侧边 + .asidemodel { + position: absolute; + top: 5.888vw; + //width: 22.396vw; + //height: calc(100vh - 13.75vw); + //transform: perspective(6.25vw) rotateY(2deg); - .asideHead { - position: relative; - height: 2.083vw; - line-height: 2.083vw; - margin-bottom: 1.042vw; - padding-left: 0.729vw; - padding-right: 0.729vw; - box-sizing: border-box; + .asideHead { + position: relative; + height: 2.083vw; + line-height: 2.083vw; + margin-bottom: 1.042vw; + padding-left: 0.729vw; + padding-right: 0.729vw; + box-sizing: border-box; - span { - font-size: 1.458vw; - @include textColor(#499FF2, #ffffff); - font-family: "HANYILINGXINTIJIAN"; + span { + font-size: 1.458vw; + @include textColor(#499FF2, #ffffff); + font-family: "HANYILINGXINTIJIAN"; + } + + &::after { + position: absolute; + content: ''; + width: 8.594vw; + height: 1.146vw; + left: 0.104vw; + top: 1.823vw; + background: url('~@/assets/images/bg_03.png') no-repeat left bottom; + background-size: 100%; + } } - &::after { - position: absolute; - content: ''; - width: 8.594vw; - height: 1.146vw; - left: 0.104vw; - top: 1.823vw; - background: url('~@/assets/images/bg_03.png') no-repeat left bottom; + .asideHeadR { + position: relative; + + &::after { + position: absolute; + content: ''; + width: 8.594vw; + height: 1.146vw; + left: 13.333vw; + top: 1.823vw; + background: url('~@/assets/images/bg_03.png') no-repeat left bottom; + background-size: 100%; + transform: rotate(180deg); + } + } + + .modelBox { + height: calc(100% - 3.125vw); + } + + .asideItem { + flex: 1 0 0; + // margin: 0px 0.052vw; + margin: 0 0.052vw 1.5vh; + overflow: hidden; + // margin-bottom: 0.26vw; + background: url('~@/assets/images/bg_04.png') no-repeat left bottom; background-size: 100%; } } - .asideHeadR { - position: relative; - - &::after { - position: absolute; - content: ''; - width: 8.594vw; - height: 1.146vw; - left: 13.333vw; - top: 1.823vw; - background: url('~@/assets/images/bg_03.png') no-repeat left bottom; - background-size: 100%; - transform: rotate(180deg); - } - } - - .modelBox { - height: calc(100% - 3.125vw); - } - - .asideItem { - flex: 1 0 0; - // margin: 0px 0.052vw; - margin: 0 0.052vw 1.5vh; - overflow: hidden; - // margin-bottom: 0.26vw; - background: url('~@/assets/images/bg_04.png') no-repeat left bottom; - background-size: 100%; - } -} - .asidemodelR { - //transform: perspective(6.25vw) rotateY(-2deg); + //transform: perspective(6.25vw) rotateY(-2deg); } -// 展开-关闭按钮 -.showNeun { - position: absolute; - top: 47%; - transform: translateY(-50%); - width: 4.313vw; - height: 22.802vw; - background: url('~@/assets/images/home_left.png') no-repeat center center; - background-size: 100% 100%; -} + // 展开-关闭按钮 + .showNeun { + position: absolute; + top: 47%; + transform: translateY(-50%); + width: 4.313vw; + height: 22.802vw; + background: url('~@/assets/images/home_left.png') no-repeat center center; + background-size: 100% 100%; + } .showNeunR { background: url('~@/assets/images/home_right.png') no-repeat center center; diff --git a/src/views/recruitment/index.vue b/src/views/recruitment/index.vue index 96c5a73..59d8e9d 100644 --- a/src/views/recruitment/index.vue +++ b/src/views/recruitment/index.vue @@ -1,5 +1,6 @@