guowenhao/weilaizhixing_official_website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

提交

Browse Source
This commit is contained in:
wangchengming 2024-11-21 14:08:26 +08:00
parent 3ffecf38a2
commit 58f2d6efc1
8 changed files with 149 additions and 193 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/FootBar.vue
View File

@ -187,7 +187,7 @@ export default {
{
title: '人才招募',
children: [
{ title: '人才战略', path: '/' },
{ title: '人才战略', path: '/recruit/talentStrategy' },
{ title: '招募信息', path: '/recruit/socialRecruit' },
],
},

2
src/components/NavBar.vue
View File

@ -122,7 +122,7 @@ export default {
{
title: '人才招募',
children: [
{ title: '人才战略', path: '/' },
{ title: '人才战略', path: '/recruit/talentStrategy' },
{ title: '招募信息', path: '/recruit/socialRecruit' },
],
},

4
src/router/index.js
View File

@ -172,9 +172,9 @@ const routes = [
component: RouteView,
children: [
{
path: '/recruit/beautifulHk',
path: '/recruit/talentStrategy',
component: (resolve) =>
require(['../views/Recruit/BeautifulHk/Index.vue'], resolve),
require(['../views/Recruit/TalentStrategy/Index.vue'], resolve),
},
{
path: '/recruit/socialRecruit',

2
src/views/About/ContactUs/Index.vue
View File

@ -62,8 +62,6 @@ export default {
{ title: '服务时间：', value: '周一至周五AM 09:00-12:00 PM 01:00-06:00', src: '/static/img/contactUs/serviceTime.png' },
{ title: '公司地址：', value: '海南省三亚市天涯区育春路七巷九号', src: '/static/img/contactUs/address.png' },
{ title: '邮编：', value: '572022', src: '/static/img/contactUs/postcode.png' },
{ title: '北京地址：', value: '北京市朝阳区霄云路36号国航大厦3/7楼', src: '/static/img/contactUs/address.png' },
{ title: '邮编：', value: '100027', src: '/static/img/contactUs/postcode.png' },
],
},
],

332
src/views/Recruit/BeautifulHk/Index.vue → src/views/Recruit/TalentStrategy/Index.vue
View File

@ -1,20 +1,28 @@
<template>
<div class="page-company">
<div class="screen1">
<video
ref="video"
:src="playingVideoSrc"
style="width: 100%;filter: blur(2px);"
autoplay
:controls="false"
loop="true"
muted="true"
></video>
<div class="text-wrapper">
加入我们，展现自我
</div>
<div class="next-page-wrapper">
<NextPage @click="handleNextPage" />
<img
:src="screen1.imageurl"
alt=""
style="width: 100%;height: 100%;"
/>
<div
class="box-posi-abs"
style="--w:100%;--h: 407rem;--t:50%;--l:0;z-index:10;color:#ffffff;display: flex;flex-direction: column;align-items: left;padding: 0rem 60rem;transform: translateY(-50%);"
>
<div style="font-size: 48rem;line-height: 1;margin-bottom: 24rem;font-family: MicrosoftYaHeiLight;">
{{ screen1.introduction.businessName }}
</div>
<div style="font-size: 48rem;line-height: 1;margin-bottom: 80rem;font-family: MicrosoftYaHeiLight;">
{{ screen1.introduction.businessNameEnglish }}
</div>
<div
v-for="(textEn, i) in screen1.introduction.titleChinese.split('\n')"
:key="'text-en-' + i"
style="font-size: 24rem;width: 608rem;line-height: 40rem;margin-bottom: 70rem;letter-spacing: 0rem;"
>
{{ textEn }}
</div>
</div>
</div>
<div
@ -68,7 +76,7 @@
</div>
</el-carousel-item>
</el-carousel>
<div
<!-- <div
class="carousel-tab"
>
<div
@ -80,7 +88,7 @@
>
{{carousel.businessName}}
</div>
</div>
</div> -->
</div>
</div>
</div>
@ -113,7 +121,7 @@
</div>
</el-carousel-item>
</el-carousel>
<div
<!-- <div
class="carousel-tab"
>
<div
@ -125,7 +133,7 @@
>
{{carousel.businessName}}
</div>
</div>
</div> -->
</div>
<div
class="screen-content-left"
@ -211,7 +219,7 @@
</div>
</el-carousel-item>
</el-carousel>
<div
<!-- <div
class="carousel-tab"
>
<div
@ -223,37 +231,49 @@
>
{{carousel.businessNameEnglish}}
</div>
</div>
</div> -->
</div>
</div>
</div>
<div class="screen6">
<div class="wrapper1680">
<div class="title">
更多福利
<div
class="box-posi-abs"
style="--t:0rem;--w:100%;--h:1rem;"
>
<div class="split-line"></div>
</div>
<div class="recommend-wrapper">
<div
v-for="item in screen6.list"
:key="item.id"
class="recommend-item"
<div
class="image-posi-abs"
style="--l:1rem;--r:1rem;--t:90rem;--w:1680rem;--h:550rem;"
>
<img
:src="screen6.joinUs.imageSrc"
alt=""
style="width:100%;height:100%;"
>
<div class="recommend-image">
<img
:src="item.imageurl"
alt=""
style="width:100%;height:100%;object-fit:cover;"
>
</div>
<div class="recommend-info">
<div class="title">
{{ item.businessName }}
</div>
<div class="abstracts">
{{ item.titleChinese }}
</div>
</div>
</div>
<transition name="fade-slide-left">
<div
v-show="screen6.offsetLevel >= 1"
class="text-posi-abs"
style="--t:243rem;--l:118rem;--fs:30rem;--c:#ffffff;"
>
{{ screen6.joinUs.title }}
</div>
</transition>
<div
class="text-posi-abs"
style="--t:312rem;--l:117rem;--w:536rem;--fs:16rem;--lh:24rem;--c:#ffffff;--ff:MicrosoftYaHeiLight;--ta:justify;"
>
{{ screen6.joinUs.contentCn }}
</div>
<div
@click="$router.push('/recruit/socialRecruit')"
class="text-posi-abs"
style="--l:118rem;--t:433rem;--w:209rem;--h:57rem;--fs:24rem;--lh:57rem;--ff:MicrosoftYaHeiSemiBold;--ta:center;background-color:#ffffff;border-radius:28rem;cursor: pointer;"
>
<span class="join-btn-text">JOIN US</span>
</div>
</div>
</div>
@ -262,51 +282,61 @@
<script>
import { mapMutations, mapState } from 'vuex';
import NextPage from '@/components/NextPage.vue';
export default {
components: {
NextPage,
},
data () {
return {
screen1: {
videoLink: '',
imageurl: '',
introduction: {
businessName: '',
businessNameEnglish: '',
titleChinese: '',
},
},
screen2: {
miniTitle: '发展在昊坤',
title: '美好源于<br />持续的成长',
subtitle: '可持续的人才培养',
titleEn: 'DEVELOPING AT HAOKUN',
miniTitle: '',
title: '跨领域<br />的综合发展',
subtitle: '',
titleEn: '',
carouselData: [],
carouselAutoplay: false,
currentIndicator: -1,
timer: null,
},
screen3: {
miniTitle: '工作在昊坤',
title: '美好源于<br />健康的身心',
subtitle: '高标准的员工关爱',
titleEn: 'WORKING AT HAOKUN',
miniTitle: '',
title: '创新与<br />探索的氛围',
subtitle: '',
titleEn: '',
carouselData: [],
carouselAutoplay: false,
currentIndicator: -1,
timer: null,
},
screen4: {
miniTitle: '生活在昊坤',
title: '美好源于<br />多彩的生活',
subtitle: '丰富多彩的文化活动',
titleEn: 'LIVING IN HAOKUN',
miniTitle: '',
title: '合作共赢<br />的伙伴关系',
subtitle: '',
titleEn: '',
carouselData: [],
carouselAutoplay: false,
currentIndicator: -1,
timer: null,
},
screen6: {
offsets: [4500],
offsetLevel: -1,
list: [],
offsets: [2900, 3900],
offsetLevel: 1,
keyCase: {
title: '',
contentCn: '',
},
plateList: [],
joinUs: {
title: '',
contentCn: '',
imageSrc: '',
},
},
};
},
@ -314,9 +344,9 @@ export default {
...mapState({
scrollTop: state => state.scroll.scrollTop,
}),
playingVideoSrc () {
return process.env.VUE_APP_FILE_TARGET_URL + '/video' + this.screen1.videoLink;
},
// playingVideoSrc () {
// return process.env.VUE_APP_FILE_TARGET_URL + '/video' + this.screen1.videoLink;
// },
},
watch: {
scrollTop (v) {
@ -338,6 +368,7 @@ export default {
created () {
this.$event.$emit('nav-theme', 'dark');
this.getScreen1Banner();
this.getScreen1Info();
this.getScreen2CarouselData(0);
this.getScreen3ListData();
this.getScreen4CarouselData(0);
@ -365,19 +396,26 @@ export default {
try {
const res = await this.$request.get(
'/official/index/list',
{ params: { pageNum: 1, pageSize: 1, captionName: '加入我们/美好昊坤/banner' } },
{ params: { pageNum: 1, pageSize: 1, captionName: '人才招募/人才战略/banner' } },
);
this.screen1.videoLink = res.rows[0].videoLink;
console.log(res);
this.screen1.imageurl = res.rows[0].imageurl;
} catch (error) {}
},
handleNextPage () {
this.forceScroll({ top: window.innerHeight, behavior: 'smooth' });
async getScreen1Info () {
try {
const res = await this.$request.get(
'/official/index/list',
{ params: { pageNum: 1, pageSize: 1, captionName: '人才招募/人才战略/介绍信息' } },
);
Object.assign(this.screen1.introduction, res.rows[0]);
} catch (error) {}
},
async getScreen2CarouselData () {
try {
const res = await this.$request.get(
'/official/index/list',
{ params: { pageNum: 1, pageSize: 4, captionName: '加入我们/美好昊坤/发展在昊坤' } },
{ params: { pageNum: 1, pageSize: 4, captionName: '人才招募/人才战略/跨领域的综合发展' } },
);
this.screen2.carouselData = res.rows.sort((a, b) => a.orders - b.orders);
setTimeout(() => {
@ -389,7 +427,7 @@ export default {
try {
const res = await this.$request.get(
'/official/index/list',
{ params: { pageNum: 1, pageSize: 4, captionName: '加入我们/美好昊坤/工作在昊坤' } },
{ params: { pageNum: 1, pageSize: 4, captionName: '人才招募/人才战略/创新与探索的氛围' } },
);
this.screen3.carouselData = res.rows.sort((a, b) => a.orders - b.orders);
setTimeout(() => {
@ -401,7 +439,7 @@ export default {
try {
const res = await this.$request.get(
'/official/index/list',
{ params: { pageNum: 1, pageSize: 4, captionName: '加入我们/美好昊坤/生活在昊坤' } },
{ params: { pageNum: 1, pageSize: 4, captionName: '人才招募/人才战略/合作共赢的伙伴关系' } },
);
this.screen4.carouselData = res.rows.sort((a, b) => a.orders - b.orders);
setTimeout(() => {
@ -413,9 +451,11 @@ export default {
try {
const res = await this.$request.get(
'/official/index/list',
{ params: { pageNum: 1, pageSize: 2, captionName: '加入我们/美好昊坤/福利' } },
{ params: { pageNum: 1, pageSize: 1, captionName: '人才招募/人才战略/joinus' } },
);
this.screen6.list = res.rows.sort((a, b) => a.orders - b.orders);
this.screen6.joinUs.title = res.rows[0].businessName;
this.screen6.joinUs.contentCn = res.rows[0].titleChinese;
this.screen6.joinUs.imageSrc = res.rows[0].imageurl;
} catch (error) {}
},
startScreen4Carousel (indicator, num) {
@ -437,43 +477,16 @@ export default {
<style scoped>
.page-company {
width: 100%;
background-color: #ffffff;
margin: 0 auto;
}
.screen1 {
height: calc(100vw * 1080 / 1920);
height: calc(100vw / 1920 * 1080);
max-height: 100vh;
overflow: hidden;
position: relative;
}
.screen1::after {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: #000000aa;
}
.screen1 .text-wrapper {
position: absolute;
left: 50%;
top: 50%;
z-index: 10;
transform: translate(-50%, -100rem);
font-size: 72rem;
font-family: MicrosoftYaHeiSemiBold;
color: #ffffff;
letter-spacing: 6rem;
}
.screen1 .next-page-wrapper {
position: absolute;
left: 0;
bottom: 100rem;
width: 100%;
display: flex;
justify-content: center;
z-index: 10;
}
.screen2 {
margin-top: 134rem;
padding: 134rem 0;
@ -482,7 +495,7 @@ export default {
padding: 134rem 0;
}
.screen4 {
padding: 134rem 0;
padding: 90rem 0;
box-sizing: border-box;
position: relative;
z-index: 1;
@ -623,97 +636,42 @@ export default {
border-radius: 20rem;
overflow: hidden;
}
.screen5 {
/*margin-top: calc(-100vw * 100 / 1920);*/
}
.screen6 {
height: auto;
background-color: #F5F5F7;
padding: 180rem 0;
}
.screen6 .title {
font-family: MicrosoftYaHei;
font-size: 30rem;
line-height: 30rem;
color: #141414;
margin-bottom: 82rem;
}
.screen6 .recommend-wrapper {
display: flex;
flex-wrap: wrap;
}
.screen6 .recommend-item {
width: 820rem;
height: 580rem;
border-radius: 20rem;
background-color: #FFFFFF;
overflow: hidden;
cursor: pointer;
position: relative;
z-index: 1;
height: 733rem;
background-color: #ffffff;
}
.screen6 .recommend-item + .recommend-item {
margin-left: 39rem;
.screen6 .wrapper1680 {
height: 100%;
position: relative;
}
.screen6 .recommend-item:hover {
box-shadow: rgba(28, 28, 30, 0.1) 0rem 0rem 2rem 0rem, rgba(28, 28, 30, 0.1) 0rem 8rem 16rem 0rem;
z-index: 10;
}
.screen6 .recommend-image {
width: 100%;
height: 430rem;
}
.screen6 .recommend-info {
padding: 40rem 40rem 0;
}
.screen6 .recommend-info .title {
font-family: MicrosoftYaHei;
font-weight: 400;
font-size: 24rem;
line-height: 24rem;
color: #000000;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 20rem;
}
.screen6 .recommend-info .abstracts {
font-family: MicrosoftYaHei;
font-weight: 400;
font-size: 14rem;
line-height: 14rem;
color: #666666;
margin-bottom: 33rem;
}
.screen6 .learn-more {
width: fit-content;
.screen6 .plate-wrapper {
display: flex;
align-items: center;
justify-content: space-between;
}
.screen6 .plate-item {
width: 325rem;
height: 302rem;
position: relative;
cursor: pointer;
border-radius: 20rem;
}
.screen6 .learn-more .label {
font-size: 16rem;
font-weight: 400;
line-height: 40rem;
color: #111111;
letter-spacing: 3rem;
margin-right: 8rem;
.screen6 .plate-item:hover {
overflow: hidden;
box-shadow: 8rem 8rem 25rem 3rem #5E5E5E11;
}
.screen6 .learn-more .icon-wrapper {
width: 40rem;
height: 40rem;
}
.screen6 .learn-more .icon-wrapper >>> .svg-wrapper {
width: 40rem;
height: 40rem;
}
.screen6 .recommend-image img {
.screen6 .plate-item:hover img {
transition: transform 0.4s;
transform: scale(1.1, 1.1);
}
.screen6 >>> .learn-more:hover .group-hover\:translate-x-0\.5 {
--tw-translate-x: 2rem;
.screen6 .split-line {
border-bottom: 1rem solid;
border-image: radial-gradient(circle, rgba(193, 200, 221, 1), rgba(191, 199, 222, 1), rgba(195, 203, 223, 1), rgba(175, 185, 208, 1)) 1 1;
}
.screen6 >>> .learn-more:hover .group-hover\:dashoffset-0 {
stroke-dashoffset: 0;
.screen6 .join-btn-text {
background-image: linear-gradient(90deg, #FF0300, #FFAA05);
background-clip: text;
color: transparent;
}
</style>

0
src/views/Recruit/BeautifulHk/components/CarouselIndicator.vue → src/views/Recruit/TalentStrategy/components/CarouselIndicator.vue
View File

0
src/views/Recruit/BeautifulHk/components/DevelopBar.vue → src/views/Recruit/TalentStrategy/components/DevelopBar.vue
View File

0
src/views/Recruit/BeautifulHk/components/WorkBar.vue → src/views/Recruit/TalentStrategy/components/WorkBar.vue
View File