资本服务与高薪技术
This commit is contained in:
wangchengming
parent
02b8f96682
commit
19a3a60b02
BIN
public/static/img/about/aboutBanner.png
Normal file
BIN
public/static/img/about/aboutBanner.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.2 MiB |
|
|
@ -148,17 +148,17 @@ export default {
|
|||
{
|
||||
title: '关于我们',
|
||||
children: [
|
||||
{ title: '简介', path: '/', hash: 'develop-bar' },
|
||||
{ title: '使命', path: '/', hash: 'work-bar' },
|
||||
{ title: '远景', path: '/', hash: 'life-bar' },
|
||||
{ title: '价值观', path: '/' },
|
||||
{ title: '简介' },
|
||||
{ title: '使命' },
|
||||
{ title: '远景' },
|
||||
{ title: '价值观' },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '业务领域',
|
||||
children: [
|
||||
{ title: '资本服务', path: '/' },
|
||||
{ title: '高薪技术', path: '/' },
|
||||
{ title: '资本服务', path: '/business/capitalServices' },
|
||||
{ title: '高薪技术', path: '/business/highTech' },
|
||||
{ title: '能源环保', path: '/' },
|
||||
{ title: '全球供应链', path: '/' },
|
||||
{ title: '商业管理', path: '/' },
|
||||
|
|
|
|||
|
|
@ -88,20 +88,12 @@ export default {
|
|||
title: '首页',
|
||||
path: '/',
|
||||
},
|
||||
{
|
||||
title: '关于我们',
|
||||
children: [
|
||||
{ title: '简介', path: '/' },
|
||||
{ title: '使命', path: '/' },
|
||||
{ title: '远景', path: '/' },
|
||||
{ title: '价值观', path: '/' },
|
||||
],
|
||||
},
|
||||
{ title: '关于我们', path: '/about/companyIntroduction' },
|
||||
{
|
||||
title: '业务领域',
|
||||
children: [
|
||||
{ title: '资本服务', path: '/' },
|
||||
{ title: '高薪技术', path: '/' },
|
||||
{ title: '资本服务', path: '/business/capitalServices' },
|
||||
{ title: '高薪技术', path: '/business/highTech' },
|
||||
{ title: '能源环保', path: '/' },
|
||||
{ title: '全球供应链', path: '/' },
|
||||
{ title: '商业管理', path: '/' },
|
||||
|
|
|
|||
|
|
@ -20,6 +20,16 @@ const routes = [
|
|||
path: '/business',
|
||||
component: RouteView,
|
||||
children: [
|
||||
{
|
||||
path: '/business/capitalServices',
|
||||
component: (resolve) =>
|
||||
require(['../views/Business/CapitalServices/Index.vue'], resolve),
|
||||
},
|
||||
{
|
||||
path: '/business/highTech',
|
||||
component: (resolve) =>
|
||||
require(['../views/Business/HighTech/Index.vue'], resolve),
|
||||
},
|
||||
{
|
||||
path: '/business/index',
|
||||
component: (resolve) =>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div class="page-company">
|
||||
<div class="screen1">
|
||||
<video
|
||||
<!-- <video
|
||||
ref="video"
|
||||
:src="playingVideoSrc"
|
||||
style="width: 100%;filter: blur(2rem);"
|
||||
|
|
@ -9,19 +9,31 @@
|
|||
:controls="false"
|
||||
loop="true"
|
||||
muted="true"
|
||||
></video>
|
||||
></video> -->
|
||||
<img
|
||||
src="/static/img/about/aboutBanner.png"
|
||||
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: center;transform: translateY(-50%);"
|
||||
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: 40rem;font-family: MicrosoftYaHeiLight;">
|
||||
<div style="font-size: 48rem;line-height: 1;margin-bottom: 24rem;font-family: MicrosoftYaHeiLight;">
|
||||
{{ screen1.introduction.businessName }}
|
||||
</div>
|
||||
<div style="font-size: 72rem;line-height: 1;letter-spacing: 8rem;">
|
||||
{{ screen1.introduction.titleChinese }}
|
||||
<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: 16rem;width: 608rem;line-height: 40rem;margin-bottom: 70rem;letter-spacing: 0rem;"
|
||||
>
|
||||
{{ textEn }}
|
||||
</div>
|
||||
<div style="flex: 1;"></div>
|
||||
<div
|
||||
<!-- <div
|
||||
style="width: 61rem;height: 61rem;cursor: pointer;"
|
||||
@click="handleShowVideo"
|
||||
>
|
||||
|
|
@ -30,13 +42,13 @@
|
|||
alt=""
|
||||
style="width: 100%;height: 100%;"
|
||||
>
|
||||
</div>
|
||||
<div style="font-size: 24rem;line-height: 1;margin-top: 34rem;font-family: MicrosoftYaHeiLight;">
|
||||
</div> -->
|
||||
<!-- <div style="font-size: 24rem;line-height: 1;margin-top: 34rem;font-family: MicrosoftYaHeiLight;">
|
||||
观看视频
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="screen2">
|
||||
<!-- <div class="screen2">
|
||||
<div class="wrapper1920">
|
||||
<div class="list-wrapper">
|
||||
<div
|
||||
|
|
@ -89,7 +101,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
<div
|
||||
v-for="(item, index) in screenList"
|
||||
:key="index"
|
||||
|
|
@ -147,7 +159,7 @@
|
|||
<transition name="fade-slide-bottom">
|
||||
<div
|
||||
v-show="item.offsetLevel >= 0"
|
||||
style="--tde:0.8s;width: 66rem; height: 4rem; background-color: #D70D18;margin-top:40rem;"
|
||||
style="--tde:0.8s;width: 66rem; height: 4rem; background-color: #FFAE00;margin-top:40rem;"
|
||||
></div>
|
||||
</transition>
|
||||
</div>
|
||||
|
|
@ -177,7 +189,7 @@
|
|||
<div
|
||||
v-show="screen5.offsetLevel >= 0"
|
||||
class="box-posi-abs"
|
||||
style="--tde:0.5s;--l: 50%; --t: 311rem;--w: 66rem; --h: 4rem; background-color: #D70D18;transform: translateX(-50%);"
|
||||
style="--tde:0.5s;--l: 50%; --t: 311rem;--w: 66rem; --h: 4rem; background-color: #FFAE00;transform: translateX(-50%);"
|
||||
></div>
|
||||
</transition>
|
||||
<div
|
||||
|
|
@ -268,6 +280,7 @@ export default {
|
|||
videoLink: '',
|
||||
introduction: {
|
||||
businessName: '',
|
||||
businessNameEnglish: '',
|
||||
titleChinese: '',
|
||||
},
|
||||
videoVisible: false,
|
||||
|
|
@ -298,7 +311,7 @@ export default {
|
|||
offsets: [3200],
|
||||
offsetLevel: -1,
|
||||
title: '我们的价值观',
|
||||
contentCn: '我们的价值观体现并定义了在昊坤能源工作的意义。\n它们是我们文化和经营哲学的核心。',
|
||||
contentCn: '我们的价值观体现并定义了未来之星工作的意义。\n它们是我们文化和经营方式的核心。',
|
||||
list: [],
|
||||
},
|
||||
screen6: {
|
||||
|
|
@ -358,9 +371,9 @@ export default {
|
|||
},
|
||||
created () {
|
||||
this.$event.$emit('nav-theme', 'dark');
|
||||
this.getScreen1Banner();
|
||||
// this.getScreen1Banner();
|
||||
this.getScreen1DialogVideo();
|
||||
this.getScreen2ListData();
|
||||
// this.getScreen2ListData();
|
||||
this.getScreenListContent('我们的使命', this.screen3);
|
||||
this.getScreenListContent('我们的愿景', this.screen4);
|
||||
this.getScreen5ListData();
|
||||
|
|
@ -452,7 +465,7 @@ export default {
|
|||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
.screen1::after {
|
||||
/* .screen1::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
|
|
@ -461,7 +474,7 @@ export default {
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #000000aa;
|
||||
}
|
||||
} */
|
||||
|
||||
.screen2 {
|
||||
background-color: #ffffff;
|
||||
|
|
@ -534,6 +547,9 @@ export default {
|
|||
height: 720rem;
|
||||
background: #FFFFFF;
|
||||
}
|
||||
.screen3{
|
||||
margin-top: 90rem;
|
||||
}
|
||||
.screen4{
|
||||
margin-top: 90rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@
|
|||
v-html="screen2.contentCn"
|
||||
></div>
|
||||
</transition>
|
||||
<transition name="fade-slide-bottom">
|
||||
<!-- <transition name="fade-slide-bottom">
|
||||
<div
|
||||
v-show="screen2.offsetLevel >= 0"
|
||||
class="learn-more"
|
||||
|
|
@ -41,7 +41,7 @@
|
|||
<ArrowHalfRound />
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</transition> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -52,12 +52,12 @@
|
|||
|
||||
<script>
|
||||
import { mapState } from 'vuex';
|
||||
import ArrowHalfRound from '@/components/ArrowHalfRound.vue';
|
||||
// import ArrowHalfRound from '@/components/ArrowHalfRound.vue';
|
||||
import FootBar from '@/components/FootBar.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
ArrowHalfRound,
|
||||
// ArrowHalfRound,
|
||||
FootBar,
|
||||
},
|
||||
data () {
|
||||
|
|
|
|||
733
src/views/Business/CapitalServices/Index.vue
Normal file
733
src/views/Business/CapitalServices/Index.vue
Normal file
|
|
@ -0,0 +1,733 @@
|
|||
<template>
|
||||
<div class="page-construction">
|
||||
<div class="screen1">
|
||||
<div style="height:104rem;"></div>
|
||||
</div>
|
||||
<div class="screen2">
|
||||
<div class="wrapper1680">
|
||||
<transition name="fade-slide-bottom">
|
||||
<div
|
||||
v-show="screen2.show"
|
||||
class="text-posi-abs"
|
||||
style="--t:53rem;--l:0rem;--c:#ff0000;"
|
||||
>
|
||||
{{ screen2.title }}
|
||||
</div>
|
||||
</transition>
|
||||
<transition name="fade-slide-bottom">
|
||||
<div
|
||||
v-show="screen2.show"
|
||||
class="text-posi-abs"
|
||||
style="--t:99rem;--l:0rem;--fs:72rem;--c:#111111;--ff:MicrosoftYaHeiLight;--tde:0.3s;"
|
||||
>
|
||||
资本服务
|
||||
</div>
|
||||
</transition>
|
||||
<transition name="fade-slide-bottom">
|
||||
<div
|
||||
v-show="screen2.show"
|
||||
class="text-posi-abs"
|
||||
style="--t:93rem;--r:8rem;--w:650rem;--fs:22rem;--lh:30rem;--c:#111111;--ff:MicrosoftYaHeiLight;--ws:pre-line;--ta:justify;--tde:0.6s;"
|
||||
>
|
||||
{{ screen2.contentCn }}
|
||||
</div>
|
||||
</transition>
|
||||
<transition name="fade-slide-bottom">
|
||||
<div
|
||||
v-show="screen2.show"
|
||||
class="image-posi-abs"
|
||||
style="--l:1rem;--t:447rem;--w:1680rem;--h:620rem;--tde:0.9s;"
|
||||
>
|
||||
<img
|
||||
:src="screen2.imageSrc"
|
||||
alt=""
|
||||
style="width:100%;height:100%;"
|
||||
>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
<div class="screen3">
|
||||
<div class="wrapper1680">
|
||||
<transition name="fade-slide-bottom">
|
||||
<div
|
||||
v-show="screen3.offsetLevel >= 0"
|
||||
class="text-posi-abs"
|
||||
style="--t:115rem;--r:0rem;--w:100%;--fs:42rem;--c:#111111;--ff:MicrosoftYaHeiLight;--ws:pre-line;--ta:center;"
|
||||
>
|
||||
{{ screen3.titleCn }}
|
||||
</div>
|
||||
</transition>
|
||||
<transition name="fade-slide-bottom">
|
||||
<div
|
||||
v-show="screen3.offsetLevel >= 0"
|
||||
class="text-posi-abs"
|
||||
style="--t:197rem;--r:0rem;--w:100%;--fs:20rem;--lh:35rem;--c:#111111;--ff:MicrosoftYaHeiLight;--ws:pre-line;--ta:center;--tde:0.3s;"
|
||||
>
|
||||
{{ screen3.contentCn }}
|
||||
</div>
|
||||
</transition>
|
||||
<!-- <transition name="fade-slide-bottom">
|
||||
<div
|
||||
v-show="screen3.offsetLevel >= 0"
|
||||
class="box-posi-abs"
|
||||
style="--tde:0.5s;--l: 50%; --t: 342rem;--w: 66rem; --h: 4rem; background-color: #D70D18;transform: translateX(-50%);"
|
||||
></div>
|
||||
</transition> -->
|
||||
<div class="list-wrapper">
|
||||
<div
|
||||
v-for="(item, index) in screen3.list"
|
||||
:key="item.id"
|
||||
class="list-item"
|
||||
>
|
||||
<transition name="scale">
|
||||
<div
|
||||
v-show="screen3.offsetLevel >= 0"
|
||||
class="list-img"
|
||||
:style="`--tde:${0.6 + index * 0.05}s;`"
|
||||
>
|
||||
<img
|
||||
:src="item.imageurl"
|
||||
alt=""
|
||||
>
|
||||
</div>
|
||||
</transition>
|
||||
<transition name="fade-slide-bottom">
|
||||
<div
|
||||
v-show="screen3.offsetLevel >= 0"
|
||||
class="list-title"
|
||||
:style="`--tde:${0.9 + index * 0.05}s;`"
|
||||
>
|
||||
{{ item.businessName }}
|
||||
</div>
|
||||
</transition>
|
||||
<transition name="fade-slide-bottom">
|
||||
<div
|
||||
v-show="screen3.offsetLevel >= 0"
|
||||
class="list-content"
|
||||
:style="`--tde:${1.2 + index * 0.05}s;`"
|
||||
>
|
||||
{{ item.titleChinese }}
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="screen6">
|
||||
<div class="wrapper1680">
|
||||
<transition name="fade-slide-bottom">
|
||||
<div
|
||||
v-show="screen6.offsetLevel >= 0"
|
||||
class="text-posi-abs"
|
||||
style="--t:115rem;--r:0rem;--w:100%;--fs:42rem;--c:#111111;--ff:MicrosoftYaHeiLight;--ws:pre-line;--ta:center;"
|
||||
>
|
||||
{{ screen6.titleCn }}
|
||||
</div>
|
||||
</transition>
|
||||
<transition name="fade-slide-bottom">
|
||||
<div
|
||||
v-show="screen6.offsetLevel >= 0"
|
||||
class="text-posi-abs"
|
||||
style="--t:197rem;--r:0rem;--w:100%;--fs:20rem;--lh:35rem;--c:#111111;--ff:MicrosoftYaHeiLight;--ws:pre-line;--ta:center;--tde:0.3s;"
|
||||
>
|
||||
{{ screen6.contentCn }}
|
||||
</div>
|
||||
</transition>
|
||||
<div class="list-wrapper">
|
||||
<div
|
||||
v-for="(item, index) in screen6.list"
|
||||
:key="item.id"
|
||||
class="list-item"
|
||||
>
|
||||
<transition name="scale">
|
||||
<div
|
||||
v-show="screen6.offsetLevel >= 0"
|
||||
class="list-img"
|
||||
:style="`--tde:${0.6 + index * 0.05}s;`"
|
||||
>
|
||||
<img
|
||||
:src="item.imageurl"
|
||||
alt=""
|
||||
>
|
||||
</div>
|
||||
</transition>
|
||||
<transition name="fade-slide-bottom">
|
||||
<div
|
||||
v-show="screen6.offsetLevel >= 0"
|
||||
class="list-title"
|
||||
:style="`--tde:${0.9 + index * 0.05}s;`"
|
||||
>
|
||||
{{ item.businessName }}
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="screen4">
|
||||
<div class="wrapper1680">
|
||||
<div
|
||||
v-for="(item, index) in screen4.list"
|
||||
:key="item.id"
|
||||
class="list-item"
|
||||
>
|
||||
<transition :name="'curtain-' + (index % 2 === 0 ? 'right' : 'left')">
|
||||
<div
|
||||
class="content-wrapper"
|
||||
:style="`--tdu:0.5s;--initial:#f5f5f8;`"
|
||||
>
|
||||
<div class="title">
|
||||
{{ item.businessName }}
|
||||
</div>
|
||||
<div class="content">
|
||||
{{ item.titleChinese }}
|
||||
</div>
|
||||
<!-- <transition :name="'curtain-' + (index % 2 === 0 ? 'right' : 'left')">
|
||||
<div
|
||||
v-show="screen4.offsetLevel >= index"
|
||||
style="--tdu:0.5s;--tde:0.3s;width:66rem;height:4rem;background-color:#D70D18;margin:40rem 5rem 0;"
|
||||
></div>
|
||||
</transition> -->
|
||||
</div>
|
||||
</transition>
|
||||
<transition :name="'curtain-' + (index % 2 === 0 ? 'right' : 'left')">
|
||||
<div
|
||||
class="image-wrapper"
|
||||
:style="`--tdu:0.5s;--tde:0.5s;--initial:#f5f5f8;`"
|
||||
>
|
||||
<img
|
||||
:src="item.imageurl"
|
||||
alt=""
|
||||
style="width:100%;height:100%;"
|
||||
>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="screen5">
|
||||
<div class="wrapper1680">
|
||||
<!-- <transition name="fade-slide-bottom">
|
||||
<div
|
||||
v-show="screen5.offsetLevel >= 0"
|
||||
class="text-posi-abs"
|
||||
style="--t:120rem;--l:0rem;--w:100%;--fs:24rem;--c:#111111;--ta:center;"
|
||||
>
|
||||
项目案例
|
||||
</div>
|
||||
</transition> -->
|
||||
<!-- <transition name="fade-slide-bottom">
|
||||
<div
|
||||
v-show="screen5.offsetLevel >= 0"
|
||||
class="text-posi-abs"
|
||||
style="--t:174rem;--l:0rem;--w:100%;--fs:42rem;--c:#111111;--ff:MicrosoftYaHeiLight;--ta:center;--tde:0.3s;"
|
||||
>
|
||||
{{ screen5.keyCase.title }}
|
||||
</div>
|
||||
</transition> -->
|
||||
<!-- <transition name="fade-slide-bottom">
|
||||
<div
|
||||
v-show="screen5.offsetLevel >= 0"
|
||||
class="text-posi-abs"
|
||||
style="--t:255rem;--l:0rem;--w:100%;--fs:20rem;--lh:34rem;--c:#111111;--ff:MicrosoftYaHeiLight;--ta:center;--ws:pre-line;--tde:0.6s;"
|
||||
>
|
||||
{{ screen5.keyCase.contentCn }}
|
||||
</div>
|
||||
</transition> -->
|
||||
<!-- <transition name="fade-slide-bottom">
|
||||
<div
|
||||
v-show="screen5.offsetLevel >= 0"
|
||||
class="box-posi-abs"
|
||||
style="--tde:0.5s;--l: 50%; --t: 397rem;--w: 66rem; --h: 4rem; background-color: #D70D18;transform: translateX(-50%);"
|
||||
></div>
|
||||
</transition>
|
||||
<div
|
||||
class="box-posi-abs plate-wrapper"
|
||||
style="--l:0;--r:0;--t:545rem;--w:100%;--h:550rem;"
|
||||
>
|
||||
<div
|
||||
v-for="(item, index) in screen5.plateList"
|
||||
:key="item.id"
|
||||
class="plate-item"
|
||||
>
|
||||
<transition name="fade-slide-bottom">
|
||||
<img
|
||||
v-show="screen5.offsetLevel >= 0"
|
||||
:src="item.imageurl"
|
||||
alt=""
|
||||
:style="`width:100%;height:100%;--tde:${0.9+0.1*index}s;`"
|
||||
/>
|
||||
</transition>
|
||||
<transition name="fade-slide-bottom">
|
||||
<div
|
||||
v-show="screen5.offsetLevel >= 0"
|
||||
class="text-posi-abs"
|
||||
:style="`--t:121rem;--l:0;--w:100%;--h:auto;--fs:30rem;--c:#ffffff;--ta:center;--tde:${0.9+0.1*index}s;`"
|
||||
>
|
||||
{{ item.businessName }}
|
||||
</div>
|
||||
</transition>
|
||||
<transition name="fade-slide-bottom">
|
||||
<div
|
||||
v-show="screen5.offsetLevel >= 0"
|
||||
class="text-posi-abs"
|
||||
:style="`--t:166rem;--l:0;--w:100%;--h:auto;--fs:18rem;--c:#ffffff;--ff:MicrosoftYaHeiLight;--ta:center;--tde:${0.9+0.1*index}s;`"
|
||||
>
|
||||
{{ item.businessNameEnglish }}
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</div> -->
|
||||
<div
|
||||
class="box-posi-abs"
|
||||
style="--t:0rem;--w:100%;--h:1rem;"
|
||||
>
|
||||
<div class="split-line"></div>
|
||||
</div>
|
||||
<div
|
||||
class="image-posi-abs"
|
||||
style="--l:1rem;--r:1rem;--t:90rem;--w:1680rem;--h:550rem;"
|
||||
>
|
||||
<img
|
||||
:src="screen5.joinUs.imageSrc"
|
||||
alt=""
|
||||
style="width:100%;height:100%;"
|
||||
>
|
||||
</div>
|
||||
<transition name="fade-slide-left">
|
||||
<div
|
||||
v-show="screen5.offsetLevel >= 1"
|
||||
class="text-posi-abs"
|
||||
style="--t:243rem;--l:118rem;--fs:30rem;--c:#ffffff;"
|
||||
>
|
||||
{{ screen5.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;"
|
||||
>
|
||||
{{ screen5.joinUs.contentCn }}
|
||||
</div>
|
||||
<div
|
||||
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;"
|
||||
>
|
||||
<!-- @click="$router.push('/recruit/socialRecruit')" -->
|
||||
<span class="join-btn-text">JOIN US</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<FootBar theme="dark"></FootBar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex';
|
||||
import FootBar from '@/components/FootBar.vue';
|
||||
export default {
|
||||
components: { FootBar },
|
||||
data () {
|
||||
return {
|
||||
screen2: {
|
||||
show: false,
|
||||
title: '',
|
||||
contentCn: '',
|
||||
imageSrc: '',
|
||||
},
|
||||
screen3: {
|
||||
offsets: [800],
|
||||
offsetLevel: -1,
|
||||
titleCn: '',
|
||||
contentCn: '',
|
||||
list: [],
|
||||
},
|
||||
screen4: {
|
||||
offsets: [1700, 2000],
|
||||
offsetLevel: -1,
|
||||
list: [],
|
||||
},
|
||||
screen5: {
|
||||
offsets: [2900, 3900],
|
||||
offsetLevel: -1,
|
||||
keyCase: {
|
||||
title: '',
|
||||
contentCn: '',
|
||||
},
|
||||
plateList: [],
|
||||
joinUs: {
|
||||
title: '',
|
||||
contentCn: '',
|
||||
imageSrc: '',
|
||||
},
|
||||
},
|
||||
screen6: {
|
||||
offsets: [800],
|
||||
offsetLevel: 1,
|
||||
titleCn: '',
|
||||
contentCn: '',
|
||||
list: [],
|
||||
},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
scrollTop: state => state.scroll.scrollTop,
|
||||
webScale: state => state.web.scale,
|
||||
}),
|
||||
},
|
||||
watch: {
|
||||
scrollTop (val) {
|
||||
const v = val / this.webScale;
|
||||
const i3 = this.screen3.offsetLevel + 1;
|
||||
if (v >= this.screen3.offsets[i3]) {
|
||||
this.screen3.offsetLevel = i3;
|
||||
}
|
||||
const i4 = this.screen4.offsetLevel + 1;
|
||||
if (v >= this.screen4.offsets[i4]) {
|
||||
this.screen4.offsetLevel = i4;
|
||||
}
|
||||
const i5 = this.screen5.offsetLevel + 1;
|
||||
if (v >= this.screen5.offsets[i5]) {
|
||||
this.screen5.offsetLevel = i5;
|
||||
}
|
||||
},
|
||||
},
|
||||
created () {
|
||||
this.$event.$emit('nav-theme', 'light');
|
||||
this.getScreen2Data();
|
||||
this.getScreen3Data();
|
||||
this.getScreen3ListData();
|
||||
this.getScreen4ListData();
|
||||
// this.getScreen5KeyCaseData();
|
||||
// this.getScreen5PlateListData();
|
||||
this.getScreen5JoinusData();
|
||||
this.getScreen6Data();
|
||||
this.getScreen6ListData();
|
||||
},
|
||||
methods: {
|
||||
async getScreen2Data () {
|
||||
try {
|
||||
const res = await this.$request.get(
|
||||
'/official/index/list',
|
||||
{ params: { pageNum: 1, pageSize: 1, captionName: '业务领域/资本服务/主要内容' } },
|
||||
);
|
||||
this.screen2.title = res.rows[0].businessName;
|
||||
this.screen2.contentCn = res.rows[0].titleChinese;
|
||||
this.screen2.imageSrc = res.rows[0].imageurl;
|
||||
this.screen2.show = true;
|
||||
} catch (error) {}
|
||||
},
|
||||
async getScreen3Data () {
|
||||
try {
|
||||
const res = await this.$request.get(
|
||||
'/official/index/list',
|
||||
{ params: { pageNum: 1, pageSize: 1, captionName: '业务领域/资本服务/项目描述' } },
|
||||
);
|
||||
this.screen3.titleCn = res.rows[0].businessName;
|
||||
this.screen3.contentCn = res.rows[0].titleChinese;
|
||||
} catch (error) {}
|
||||
},
|
||||
async getScreen3ListData () {
|
||||
try {
|
||||
const res = await this.$request.get(
|
||||
'/official/index/list',
|
||||
{ params: { pageNum: 1, pageSize: 6, captionName: '业务领域/资本服务/项目案例' } },
|
||||
);
|
||||
this.screen3.list = res.rows.sort((a, b) => a.orders - b.orders);
|
||||
} catch (error) {}
|
||||
},
|
||||
async getScreen4ListData () {
|
||||
try {
|
||||
const res = await this.$request.get(
|
||||
'/official/index/list',
|
||||
{ params: { pageNum: 1, pageSize: 3, captionName: '业务领域/资本服务/技术支持' } },
|
||||
);
|
||||
this.screen4.list = res.rows.sort((a, b) => a.orders - b.orders);
|
||||
} catch (error) {}
|
||||
},
|
||||
// async getScreen5KeyCaseData () {
|
||||
// try {
|
||||
// const res = await this.$request.get(
|
||||
// '/official/index/list',
|
||||
// { params: { pageNum: 1, pageSize: 1, captionName: '业务范围/基建业务/重点案例' } },
|
||||
// );
|
||||
// this.screen5.keyCase.title = res.rows[0].businessName;
|
||||
// this.screen5.keyCase.contentCn = res.rows[0].titleChinese;
|
||||
// } catch (error) {}
|
||||
// },
|
||||
// async getScreen5PlateListData () {
|
||||
// try {
|
||||
// const res = await this.$request.get(
|
||||
// '/official/index/list',
|
||||
// { params: { pageNum: 1, pageSize: 4, captionName: '业务范围/基建业务/重点案例主题' } },
|
||||
// );
|
||||
// this.screen5.plateList = res.rows.sort((a, b) => a.orders - b.orders);
|
||||
// } catch (error) {}
|
||||
// },
|
||||
async getScreen5JoinusData () {
|
||||
try {
|
||||
const res = await this.$request.get(
|
||||
'/official/index/list',
|
||||
{ params: { pageNum: 1, pageSize: 1, captionName: '业务领域/资本服务/joinus' } },
|
||||
);
|
||||
this.screen5.joinUs.title = res.rows[0].businessName;
|
||||
this.screen5.joinUs.contentCn = res.rows[0].titleChinese;
|
||||
this.screen5.joinUs.imageSrc = res.rows[0].imageurl;
|
||||
} catch (error) {}
|
||||
},
|
||||
async getScreen6Data () {
|
||||
try {
|
||||
const res = await this.$request.get(
|
||||
'/official/index/list',
|
||||
{ params: { pageNum: 1, pageSize: 1, captionName: '业务领域/资本服务/渠道描述' } },
|
||||
);
|
||||
this.screen6.titleCn = res.rows[0].businessName;
|
||||
this.screen6.contentCn = res.rows[0].titleChinese;
|
||||
} catch (error) {}
|
||||
},
|
||||
async getScreen6ListData () {
|
||||
try {
|
||||
const res = await this.$request.get(
|
||||
'/official/index/list',
|
||||
{ params: { pageNum: 1, pageSize: 4, captionName: '业务领域/资本服务/资本渠道' } },
|
||||
);
|
||||
this.screen6.list = res.rows.sort((a, b) => a.orders - b.orders);
|
||||
} catch (error) {}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.page-construction {
|
||||
width: 100%;
|
||||
}
|
||||
.screen1 {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.screen2 {
|
||||
position: relative;
|
||||
height: 1186rem;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.screen2 .wrapper1680 {
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
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;
|
||||
}
|
||||
.screen3 {
|
||||
position: relative;
|
||||
height: 1260rem;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.screen3 .wrapper1680 {
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
.screen3 .list-wrapper {
|
||||
/* position: absolute;
|
||||
top: 443rem;
|
||||
width: 100%;
|
||||
display: flex; */
|
||||
position: absolute;
|
||||
top: 400rem;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 0px 140rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.screen3 .list-item {
|
||||
/* width: 0;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
transform: scale(1, 1);
|
||||
transition: transform 0.3s;
|
||||
transform-origin: center center;
|
||||
cursor: pointer; */
|
||||
margin: 0 58rem;
|
||||
width: 350rem;
|
||||
height: 350rem;
|
||||
margin-bottom: 90rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
.screen3 .list-item:hover {
|
||||
transform: scale(1.1, 1.1);
|
||||
}
|
||||
.screen3 .list-img {
|
||||
width: 150rem;
|
||||
height: 150rem;
|
||||
margin-bottom: 40rem;
|
||||
}
|
||||
.screen3 .list-title {
|
||||
text-align: center;
|
||||
font-size: 20rem;
|
||||
line-height: 1;
|
||||
color: #111111;
|
||||
margin-bottom: 26rem;
|
||||
}
|
||||
.screen3 .list-content {
|
||||
width: 280rem;
|
||||
white-space: normal;
|
||||
text-align: center;
|
||||
font-family: MicrosoftYaHeiLight;
|
||||
font-size: 14rem;
|
||||
line-height: 22rem;
|
||||
color: #333333;
|
||||
}
|
||||
.screen4 {
|
||||
position: relative;
|
||||
height: 1850rem;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
.screen4 .wrapper1680 {
|
||||
padding: 124rem 0;
|
||||
}
|
||||
.screen4 .list-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.screen4 .list-item:nth-of-type(2n-1) {
|
||||
flex-direction: row;
|
||||
}
|
||||
.screen4 .list-item:nth-of-type(2n) {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
.screen4 .list-item + .list-item {
|
||||
margin-top: 52rem;
|
||||
}
|
||||
.screen4 .content-wrapper {
|
||||
width: 755rem;
|
||||
}
|
||||
.screen4 .content-wrapper .title {
|
||||
padding: 0 1rem;
|
||||
font-family: MicrosoftYaHeiLight;
|
||||
font-size: 42rem;
|
||||
color: #111111;
|
||||
margin-bottom: 36rem;
|
||||
}
|
||||
.screen4 .content-wrapper .content {
|
||||
padding: 5rem;
|
||||
font-family: MicrosoftYaHeiLight;
|
||||
font-size: 20rem;
|
||||
line-height: 36rem;
|
||||
}
|
||||
.screen4 .list-item:nth-of-type(2n) .content-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.screen4 .list-item:nth-of-type(2n) .content-wrapper .content {
|
||||
text-align: left;
|
||||
}
|
||||
.screen4 .image-wrapper {
|
||||
width: 752rem;
|
||||
height: 510rem;
|
||||
border-radius: 20rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
.screen4 .image-wrapper img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transition: transform 0.4s;
|
||||
}
|
||||
.screen4 .image-wrapper:hover img {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
.screen5 {
|
||||
position: relative;
|
||||
height: 733rem;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.screen5 .wrapper1680 {
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
.screen5 .plate-wrapper {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.screen5 .plate-item {
|
||||
width: 325rem;
|
||||
height: 302rem;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
border-radius: 20rem;
|
||||
}
|
||||
.screen5 .plate-item:hover {
|
||||
overflow: hidden;
|
||||
box-shadow: 8rem 8rem 25rem 3rem #5E5E5E11;
|
||||
}
|
||||
.screen5 .plate-item:hover img {
|
||||
transition: transform 0.4s;
|
||||
transform: scale(1.1, 1.1);
|
||||
}
|
||||
.screen5 .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;
|
||||
}
|
||||
.screen5 .join-btn-text {
|
||||
background-image: linear-gradient(90deg, #FF0300, #FFAA05);
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
}
|
||||
.screen6 {
|
||||
position: relative;
|
||||
height: 800rem;
|
||||
background-color: rgb(245, 244, 249);
|
||||
}
|
||||
.screen6 .wrapper1680 {
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
.screen6 .list-wrapper {
|
||||
position: absolute;
|
||||
top: 400rem;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 0px 140rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.screen6 .list-item {
|
||||
border-radius: 20rem;
|
||||
background: #ffffff;
|
||||
margin: 0 45rem;
|
||||
width: 260rem;
|
||||
height: 260rem;
|
||||
margin-bottom: 90rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
.screen6 .list-item:hover {
|
||||
transform: scale(1.1, 1.1);
|
||||
}
|
||||
.screen6 .list-img {
|
||||
width: 150rem;
|
||||
height: 150rem;
|
||||
display: contents;
|
||||
}
|
||||
.screen6 .list-title {
|
||||
text-align: center;
|
||||
font-size: 20rem;
|
||||
line-height: 1;
|
||||
color: #111111;
|
||||
margin-top: 26rem;
|
||||
}
|
||||
</style>
|
||||
538
src/views/Business/HighTech/Index.vue
Normal file
538
src/views/Business/HighTech/Index.vue
Normal file
|
|
@ -0,0 +1,538 @@
|
|||
<template>
|
||||
<div class="page-construction">
|
||||
<div class="screen1">
|
||||
<div style="height:104rem;"></div>
|
||||
</div>
|
||||
<div class="screen2">
|
||||
<div class="wrapper1680">
|
||||
<transition name="fade-slide-bottom">
|
||||
<div
|
||||
v-show="screen2.show"
|
||||
class="text-posi-abs"
|
||||
style="--t:53rem;--l:0rem;--c:#ff0000;"
|
||||
>
|
||||
{{ screen2.title }}
|
||||
</div>
|
||||
</transition>
|
||||
<transition name="fade-slide-bottom">
|
||||
<div
|
||||
v-show="screen2.show"
|
||||
class="text-posi-abs"
|
||||
style="--t:99rem;--l:0rem;--fs:72rem;--c:#111111;--ff:MicrosoftYaHeiLight;--tde:0.3s;"
|
||||
>
|
||||
高薪技术
|
||||
</div>
|
||||
</transition>
|
||||
<transition name="fade-slide-bottom">
|
||||
<div
|
||||
v-show="screen2.show"
|
||||
class="text-posi-abs"
|
||||
style="--t:93rem;--r:8rem;--w:650rem;--fs:22rem;--lh:30rem;--c:#111111;--ff:MicrosoftYaHeiLight;--ws:pre-line;--ta:justify;--tde:0.6s;text-indent: 1.5em;"
|
||||
>
|
||||
{{ screen2.contentCn }}
|
||||
</div>
|
||||
</transition>
|
||||
<transition name="fade-slide-bottom">
|
||||
<div
|
||||
v-show="screen2.show"
|
||||
class="image-posi-abs"
|
||||
style="--l:1rem;--t:447rem;--w:1680rem;--h:620rem;--tde:0.9s;"
|
||||
>
|
||||
<img
|
||||
:src="screen2.imageSrc"
|
||||
alt=""
|
||||
style="width:100%;height:100%;"
|
||||
>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
<div class="screen3">
|
||||
<div class="wrapper1680">
|
||||
<transition name="fade-slide-bottom">
|
||||
<div
|
||||
v-show="screen3.offsetLevel >= 0"
|
||||
class="text-posi-abs"
|
||||
style="--t:115rem;--r:0rem;--w:100%;--fs:42rem;--c:#111111;--ff:MicrosoftYaHeiLight;--ws:pre-line;--ta:center;"
|
||||
>
|
||||
{{ screen3.titleCn }}
|
||||
</div>
|
||||
</transition>
|
||||
<transition name="fade-slide-bottom">
|
||||
<div
|
||||
v-show="screen3.offsetLevel >= 0"
|
||||
class="text-posi-abs"
|
||||
style="--t:197rem;--r:0rem;--w:100%;--fs:20rem;--lh:35rem;--c:#111111;--ff:MicrosoftYaHeiLight;--ws:pre-line;--ta:center;--tde:0.3s;"
|
||||
>
|
||||
{{ screen3.contentCn }}
|
||||
</div>
|
||||
</transition>
|
||||
<div class="list-wrapper">
|
||||
<div
|
||||
v-for="(item, index) in screen3.list.slice(0,3)"
|
||||
:key="item.id"
|
||||
class="list-item"
|
||||
>
|
||||
<transition name="scale">
|
||||
<div
|
||||
v-show="screen3.offsetLevel >= 0"
|
||||
class="list-img"
|
||||
:style="`--tde:${0.6 + index * 0.05}s;`"
|
||||
>
|
||||
<img
|
||||
:src="item.imageurl"
|
||||
alt=""
|
||||
>
|
||||
</div>
|
||||
</transition>
|
||||
<transition name="fade-slide-bottom">
|
||||
<div
|
||||
v-show="screen3.offsetLevel >= 0"
|
||||
class="list-title"
|
||||
:style="`--tde:${0.9 + index * 0.05}s;`"
|
||||
>
|
||||
{{ item.businessName }}
|
||||
</div>
|
||||
</transition>
|
||||
<transition name="fade-slide-bottom">
|
||||
<div
|
||||
v-show="screen3.offsetLevel >= 0"
|
||||
class="list-content"
|
||||
:style="`--tde:${1.2 + index * 0.05}s;`"
|
||||
>
|
||||
{{ item.titleChinese }}
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-wrapper2">
|
||||
<div
|
||||
v-for="(item, index) in screen3.list.slice(3,5)"
|
||||
:key="item.id"
|
||||
class="list-item"
|
||||
>
|
||||
<transition name="scale">
|
||||
<div
|
||||
v-show="screen3.offsetLevel >= 0"
|
||||
class="list-img"
|
||||
:style="`--tde:${0.6 + index * 0.05}s;`"
|
||||
>
|
||||
<img
|
||||
:src="item.imageurl"
|
||||
alt=""
|
||||
>
|
||||
</div>
|
||||
</transition>
|
||||
<transition name="fade-slide-bottom">
|
||||
<div
|
||||
v-show="screen3.offsetLevel >= 0"
|
||||
class="list-title"
|
||||
:style="`--tde:${0.9 + index * 0.05}s;`"
|
||||
>
|
||||
{{ item.businessName }}
|
||||
</div>
|
||||
</transition>
|
||||
<transition name="fade-slide-bottom">
|
||||
<div
|
||||
v-show="screen3.offsetLevel >= 0"
|
||||
class="list-content"
|
||||
:style="`--tde:${1.2 + index * 0.05}s;`"
|
||||
>
|
||||
{{ item.titleChinese }}
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="screen4">
|
||||
<div class="wrapper1680">
|
||||
<div
|
||||
v-for="(item, index) in screen4.list"
|
||||
:key="item.id"
|
||||
class="list-item"
|
||||
>
|
||||
<transition :name="'curtain-' + (index % 2 === 0 ? 'right' : 'left')">
|
||||
<div
|
||||
class="content-wrapper"
|
||||
:style="`--tdu:0.5s;--initial:#f5f5f8;`"
|
||||
>
|
||||
<div class="title">
|
||||
{{ item.businessName }}
|
||||
</div>
|
||||
<div class="content">
|
||||
{{ item.titleChinese }}
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
<transition :name="'curtain-' + (index % 2 === 0 ? 'right' : 'left')">
|
||||
<div
|
||||
class="image-wrapper"
|
||||
:style="`--tdu:0.5s;--tde:0.5s;--initial:#f5f5f8;`"
|
||||
>
|
||||
<img
|
||||
:src="item.imageurl"
|
||||
alt=""
|
||||
style="width:100%;height:100%;"
|
||||
>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="screen5">
|
||||
<div class="wrapper1680">
|
||||
<div
|
||||
class="box-posi-abs"
|
||||
style="--t:90rem;--w:100%;--h:1rem;"
|
||||
>
|
||||
<div class="split-line"></div>
|
||||
</div>
|
||||
<div
|
||||
class="image-posi-abs"
|
||||
style="--l:1rem;--r:1rem;--t:180rem;--w:1680rem;--h:550rem;"
|
||||
>
|
||||
<img
|
||||
:src="screen5.joinUs.imageSrc"
|
||||
alt=""
|
||||
style="width:100%;height:100%;"
|
||||
>
|
||||
</div>
|
||||
<transition name="fade-slide-left">
|
||||
<div
|
||||
v-show="screen5.offsetLevel >= 1"
|
||||
class="text-posi-abs"
|
||||
style="--t:333rem;--l:118rem;--fs:30rem;--c:#ffffff;"
|
||||
>
|
||||
{{ screen5.joinUs.title }}
|
||||
</div>
|
||||
</transition>
|
||||
<div
|
||||
class="text-posi-abs"
|
||||
style="--t:402rem;--l:117rem;--w:536rem;--fs:16rem;--lh:24rem;--c:#ffffff;--ff:MicrosoftYaHeiLight;--ta:justify;"
|
||||
>
|
||||
{{ screen5.joinUs.contentCn }}
|
||||
</div>
|
||||
<div
|
||||
class="text-posi-abs"
|
||||
style="--l:118rem;--t:523rem;--w:209rem;--h:57rem;--fs:24rem;--lh:57rem;--ff:MicrosoftYaHeiSemiBold;--ta:center;background-color:#ffffff;border-radius:28rem;cursor: pointer;"
|
||||
>
|
||||
<!-- @click="$router.push('/recruit/socialRecruit')" -->
|
||||
<span class="join-btn-text">JOIN US</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<FootBar theme="dark"></FootBar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex';
|
||||
import FootBar from '@/components/FootBar.vue';
|
||||
export default {
|
||||
components: { FootBar },
|
||||
data () {
|
||||
return {
|
||||
screen2: {
|
||||
show: false,
|
||||
title: '',
|
||||
contentCn: '',
|
||||
imageSrc: '',
|
||||
},
|
||||
screen3: {
|
||||
offsets: [800],
|
||||
offsetLevel: -1,
|
||||
titleCn: '',
|
||||
contentCn: '',
|
||||
list: [],
|
||||
},
|
||||
screen4: {
|
||||
offsets: [1700, 2000],
|
||||
offsetLevel: -1,
|
||||
list: [],
|
||||
},
|
||||
screen5: {
|
||||
offsets: [2900, 3900],
|
||||
offsetLevel: -1,
|
||||
keyCase: {
|
||||
title: '',
|
||||
contentCn: '',
|
||||
},
|
||||
plateList: [],
|
||||
joinUs: {
|
||||
title: '',
|
||||
contentCn: '',
|
||||
imageSrc: '',
|
||||
},
|
||||
},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
scrollTop: state => state.scroll.scrollTop,
|
||||
webScale: state => state.web.scale,
|
||||
}),
|
||||
},
|
||||
watch: {
|
||||
scrollTop (val) {
|
||||
const v = val / this.webScale;
|
||||
const i3 = this.screen3.offsetLevel + 1;
|
||||
if (v >= this.screen3.offsets[i3]) {
|
||||
this.screen3.offsetLevel = i3;
|
||||
}
|
||||
const i4 = this.screen4.offsetLevel + 1;
|
||||
if (v >= this.screen4.offsets[i4]) {
|
||||
this.screen4.offsetLevel = i4;
|
||||
}
|
||||
const i5 = this.screen5.offsetLevel + 1;
|
||||
if (v >= this.screen5.offsets[i5]) {
|
||||
this.screen5.offsetLevel = i5;
|
||||
}
|
||||
},
|
||||
},
|
||||
created () {
|
||||
this.$event.$emit('nav-theme', 'light');
|
||||
this.getScreen2Data();
|
||||
this.getScreen3Data();
|
||||
this.getScreen3ListData();
|
||||
this.getScreen4ListData();
|
||||
this.getScreen5JoinusData();
|
||||
},
|
||||
methods: {
|
||||
async getScreen2Data () {
|
||||
try {
|
||||
const res = await this.$request.get(
|
||||
'/official/index/list',
|
||||
{ params: { pageNum: 1, pageSize: 1, captionName: '业务领域/高薪技术/主要内容' } },
|
||||
);
|
||||
this.screen2.title = res.rows[0].businessName;
|
||||
this.screen2.contentCn = res.rows[0].titleChinese;
|
||||
this.screen2.imageSrc = res.rows[0].imageurl;
|
||||
this.screen2.show = true;
|
||||
} catch (error) {}
|
||||
},
|
||||
async getScreen3Data () {
|
||||
try {
|
||||
const res = await this.$request.get(
|
||||
'/official/index/list',
|
||||
{ params: { pageNum: 1, pageSize: 1, captionName: '业务领域/高薪技术/项目描述' } },
|
||||
);
|
||||
this.screen3.titleCn = res.rows[0].businessName;
|
||||
this.screen3.contentCn = res.rows[0].titleChinese;
|
||||
} catch (error) {}
|
||||
},
|
||||
async getScreen3ListData () {
|
||||
try {
|
||||
const res = await this.$request.get(
|
||||
'/official/index/list',
|
||||
{ params: { pageNum: 1, pageSize: 6, captionName: '业务领域/高薪技术/项目案例' } },
|
||||
);
|
||||
this.screen3.list = res.rows.sort((a, b) => a.orders - b.orders);
|
||||
} catch (error) {}
|
||||
},
|
||||
async getScreen4ListData () {
|
||||
try {
|
||||
const res = await this.$request.get(
|
||||
'/official/index/list',
|
||||
{ params: { pageNum: 1, pageSize: 4, captionName: '业务领域/高薪技术/技术支持' } },
|
||||
);
|
||||
this.screen4.list = res.rows.sort((a, b) => a.orders - b.orders);
|
||||
} catch (error) {}
|
||||
},
|
||||
async getScreen5JoinusData () {
|
||||
try {
|
||||
const res = await this.$request.get(
|
||||
'/official/index/list',
|
||||
{ params: { pageNum: 1, pageSize: 1, captionName: '业务领域/高薪技术/joinus' } },
|
||||
);
|
||||
this.screen5.joinUs.title = res.rows[0].businessName;
|
||||
this.screen5.joinUs.contentCn = res.rows[0].titleChinese;
|
||||
this.screen5.joinUs.imageSrc = res.rows[0].imageurl;
|
||||
} catch (error) {}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.page-construction {
|
||||
width: 100%;
|
||||
}
|
||||
.screen1 {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.screen2 {
|
||||
position: relative;
|
||||
height: 1186rem;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.screen2 .wrapper1680 {
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
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;
|
||||
}
|
||||
.screen3 {
|
||||
position: relative;
|
||||
height: 1300rem;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.screen3 .wrapper1680 {
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
.screen3 .list-wrapper {
|
||||
position: absolute;
|
||||
top: 400rem;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 0px 140rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.screen3 .list-wrapper2 {
|
||||
position: absolute;
|
||||
top: 840rem;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 0px 370rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.screen3 .list-item {
|
||||
margin: 0 58rem;
|
||||
width: 350rem;
|
||||
height: 350rem;
|
||||
margin-bottom: 90rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
.screen3 .list-item:hover {
|
||||
transform: scale(1.1, 1.1);
|
||||
}
|
||||
.screen3 .list-img {
|
||||
width: 150rem;
|
||||
height: 150rem;
|
||||
margin-bottom: 40rem;
|
||||
}
|
||||
.screen3 .list-title {
|
||||
text-align: center;
|
||||
font-size: 20rem;
|
||||
line-height: 1;
|
||||
color: #111111;
|
||||
margin-bottom: 26rem;
|
||||
}
|
||||
.screen3 .list-content {
|
||||
width: 280rem;
|
||||
white-space: normal;
|
||||
text-align: center;
|
||||
font-family: MicrosoftYaHeiLight;
|
||||
font-size: 14rem;
|
||||
line-height: 22rem;
|
||||
color: #333333;
|
||||
}
|
||||
.screen4 {
|
||||
position: relative;
|
||||
height: 2410rem;
|
||||
background-color: #F5F5F8;
|
||||
}
|
||||
.screen4 .wrapper1680 {
|
||||
padding: 124rem 0;
|
||||
}
|
||||
.screen4 .list-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.screen4 .list-item:nth-of-type(2n-1) {
|
||||
flex-direction: row;
|
||||
}
|
||||
.screen4 .list-item:nth-of-type(2n) {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
.screen4 .list-item + .list-item {
|
||||
margin-top: 52rem;
|
||||
}
|
||||
.screen4 .content-wrapper {
|
||||
width: 755rem;
|
||||
}
|
||||
.screen4 .content-wrapper .title {
|
||||
padding: 0 1rem;
|
||||
font-family: MicrosoftYaHeiLight;
|
||||
font-size: 42rem;
|
||||
color: #111111;
|
||||
margin-bottom: 36rem;
|
||||
}
|
||||
.screen4 .content-wrapper .content {
|
||||
padding: 5rem;
|
||||
font-family: MicrosoftYaHeiLight;
|
||||
font-size: 20rem;
|
||||
line-height: 36rem;
|
||||
text-indent: 1.5em;
|
||||
}
|
||||
.screen4 .list-item:nth-of-type(2n) .content-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.screen4 .list-item:nth-of-type(2n) .content-wrapper .content {
|
||||
text-align: left;
|
||||
}
|
||||
.screen4 .image-wrapper {
|
||||
width: 752rem;
|
||||
height: 510rem;
|
||||
border-radius: 20rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
.screen4 .image-wrapper img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transition: transform 0.4s;
|
||||
}
|
||||
.screen4 .image-wrapper:hover img {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
.screen5 {
|
||||
position: relative;
|
||||
height: 823rem;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.screen5 .wrapper1680 {
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
.screen5 .plate-wrapper {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.screen5 .plate-item {
|
||||
width: 325rem;
|
||||
height: 302rem;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
border-radius: 20rem;
|
||||
}
|
||||
.screen5 .plate-item:hover {
|
||||
overflow: hidden;
|
||||
box-shadow: 8rem 8rem 25rem 3rem #5E5E5E11;
|
||||
}
|
||||
.screen5 .plate-item:hover img {
|
||||
transition: transform 0.4s;
|
||||
transform: scale(1.1, 1.1);
|
||||
}
|
||||
.screen5 .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;
|
||||
}
|
||||
.screen5 .join-btn-text {
|
||||
background-image: linear-gradient(90deg, #FF0300, #FFAA05);
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -40,7 +40,7 @@
|
|||
class="text-posi-abs"
|
||||
style="--r:1rem;--t:95rem;--ff:MicrosoftYaHeiSemibold;--fs:14rem;--fw:400;"
|
||||
>
|
||||
HAOKUN ENERGY
|
||||
Future Star —为世界创造价值
|
||||
</div>
|
||||
</transition>
|
||||
<transition name="fade-slide-left">
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user