提交
This commit is contained in:
wangchengming
parent
038d60563a
commit
98ef795163
Binary file not shown.
|
Before Width: | Height: | Size: 526 KiB After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 526 KiB After Width: | Height: | Size: 17 KiB |
BIN
src/assets/bottomBg.png
Normal file
BIN
src/assets/bottomBg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 133 KiB |
|
|
@ -73,7 +73,7 @@ a:focus {
|
|||
}
|
||||
.wrapper1518 {
|
||||
width: 1518rem;
|
||||
margin: 0 auto 0 0;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.wrapper1680 {
|
||||
width: 1680rem;
|
||||
|
|
|
|||
BIN
src/assets/topBg.png
Normal file
BIN
src/assets/topBg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 70 KiB |
|
|
@ -152,6 +152,7 @@
|
|||
padding: 28rem 60rem;
|
||||
box-sizing: border-box;
|
||||
transition: background-color 0.3s;
|
||||
height: 158rem;
|
||||
}
|
||||
.nav-left {
|
||||
width: 0;
|
||||
|
|
@ -220,6 +221,7 @@
|
|||
/* theme-dark --- start */
|
||||
.nav-bar-dark {
|
||||
color: #ffffff;
|
||||
background-image: url('@/assets/topBg.png');
|
||||
}
|
||||
.nav-bar-dark .nav-submenus > div {
|
||||
background-color: rgba(255, 255, 255, 0.98);
|
||||
|
|
|
|||
|
|
@ -41,7 +41,6 @@
|
|||
name="fade-slide-left"
|
||||
>
|
||||
<img
|
||||
v-show="item.offsetLevel >= 0"
|
||||
:src="item.imgSrc"
|
||||
alt=""
|
||||
style="width:1165rem;height:720rem;"
|
||||
|
|
@ -52,7 +51,6 @@
|
|||
name="fade-slide-right"
|
||||
>
|
||||
<img
|
||||
v-show="item.offsetLevel >= 0"
|
||||
:src="item.imgSrc"
|
||||
alt=""
|
||||
style="width:1165rem;height:720rem;"
|
||||
|
|
@ -61,7 +59,6 @@
|
|||
<div class="content">
|
||||
<transition name="fade-slide-bottom">
|
||||
<div
|
||||
v-show="item.offsetLevel >= 0"
|
||||
class="content-type"
|
||||
>
|
||||
{{ item.type }}
|
||||
|
|
@ -69,7 +66,6 @@
|
|||
</transition>
|
||||
<transition name="fade-slide-bottom">
|
||||
<div
|
||||
v-show="item.offsetLevel >= 0"
|
||||
class="content-title"
|
||||
style="--tde:0.3s;"
|
||||
>
|
||||
|
|
@ -78,7 +74,6 @@
|
|||
</transition>
|
||||
<transition name="fade-slide-bottom">
|
||||
<div
|
||||
v-show="item.offsetLevel >= 0"
|
||||
class="content-main"
|
||||
v-html="item.content"
|
||||
style="--tde: 0.6s;"
|
||||
|
|
@ -86,14 +81,13 @@
|
|||
</transition>
|
||||
<transition name="fade-slide-bottom">
|
||||
<div
|
||||
v-show="item.offsetLevel >= 0"
|
||||
style="--tde:0.8s;width: 66rem; height: 4rem; background-color: #FFAE00;margin-top:40rem;"
|
||||
></div>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
<!-- <div
|
||||
class="screen5"
|
||||
id="screen5"
|
||||
>
|
||||
|
|
@ -133,7 +127,7 @@
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
<!-- <div class="screen6">
|
||||
<div class="wrapper1680">
|
||||
<div class="title">
|
||||
|
|
@ -285,22 +279,22 @@ export default {
|
|||
if (v >= this.screen2.offsets[i2]) {
|
||||
this.screen2.offsetLevel = i2;
|
||||
}
|
||||
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;
|
||||
}
|
||||
const i6 = this.screen6.offsetLevel + 1;
|
||||
if (v >= this.screen6.offsets[i6]) {
|
||||
this.screen6.offsetLevel = i6;
|
||||
}
|
||||
// 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;
|
||||
// }
|
||||
// const i6 = this.screen6.offsetLevel + 1;
|
||||
// if (v >= this.screen6.offsets[i6]) {
|
||||
// this.screen6.offsetLevel = i6;
|
||||
// }
|
||||
},
|
||||
$route () {
|
||||
if (this.$route.hash) {
|
||||
|
|
@ -502,7 +496,7 @@ export default {
|
|||
margin-top: 90rem;
|
||||
}
|
||||
.screen4{
|
||||
margin-top: 90rem;
|
||||
margin: 90rem 0;
|
||||
}
|
||||
.screen-list .wrapper1920 {
|
||||
height: 100%;
|
||||
|
|
|
|||
|
|
@ -4,12 +4,21 @@
|
|||
<div style="height:104rem;"></div>
|
||||
</div>
|
||||
<div class="screen2">
|
||||
<div class="wrapper1680">
|
||||
<div class="wrapper1680">
|
||||
<transition name="fade-slide-bottom">
|
||||
<div
|
||||
v-show="screen2.show"
|
||||
class="text-posi-abs"
|
||||
style="--t:53rem;--l:0rem;--c:#ff0000;"
|
||||
style="--l:0rem;--t:93rem;--r:8rem;--w:950rem;--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="text-posi-abs"
|
||||
style="--t:53rem;--r:0rem;--c:#ff0000;"
|
||||
>
|
||||
{{ screen2.title }}
|
||||
</div>
|
||||
|
|
@ -18,25 +27,16 @@
|
|||
<div
|
||||
v-show="screen2.show"
|
||||
class="text-posi-abs"
|
||||
style="--t:99rem;--l:0rem;--fs:72rem;--c:#111111;--ff:MicrosoftYaHeiLight;--tde:0.3s;"
|
||||
style="--t:99rem;--r: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;"
|
||||
style="--l:1rem;--t:320rem;--w:1680rem;--h:620rem;--tde:0.9s;"
|
||||
>
|
||||
<img
|
||||
:src="screen2.imageSrc"
|
||||
|
|
@ -531,7 +531,7 @@ export default {
|
|||
}
|
||||
.screen2 {
|
||||
position: relative;
|
||||
height: 1186rem;
|
||||
height: 1030rem;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.screen2 .wrapper1680 {
|
||||
|
|
@ -545,6 +545,7 @@ export default {
|
|||
position: relative;
|
||||
height: 1260rem;
|
||||
background-color: #ffffff;
|
||||
display: none;
|
||||
}
|
||||
.screen3 .wrapper1680 {
|
||||
height: 100%;
|
||||
|
|
@ -611,6 +612,7 @@ export default {
|
|||
position: relative;
|
||||
height: 1286rem;
|
||||
background-color: #FFFFFF;
|
||||
display: none;
|
||||
}
|
||||
.screen4 .wrapper1680 {
|
||||
padding: 124rem 0;
|
||||
|
|
@ -671,6 +673,7 @@ export default {
|
|||
position: relative;
|
||||
height: 733rem;
|
||||
background-color: #ffffff;
|
||||
display: none;
|
||||
}
|
||||
.screen5 .wrapper1680 {
|
||||
height: 100%;
|
||||
|
|
@ -708,6 +711,7 @@ export default {
|
|||
position: relative;
|
||||
height: 800rem;
|
||||
background-color: rgb(245, 244, 249);
|
||||
display: none;
|
||||
}
|
||||
.screen6 .wrapper1680 {
|
||||
height: 100%;
|
||||
|
|
|
|||
|
|
@ -6,43 +6,23 @@
|
|||
<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;"
|
||||
>
|
||||
<div v-show="screen2.show" class="text-posi-abs" style="--t:53rem;--r: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 v-show="screen2.show" class="text-posi-abs" style="--t:99rem;--r: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;"
|
||||
>
|
||||
<div v-show="screen2.show" class="text-posi-abs" style="--l:0rem;--t:93rem;--r:8rem;--w:950rem;--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 v-show="screen2.show" class="image-posi-abs" style="--l:1rem;--t:320rem;--w:1680rem;--h:620rem;--tde:0.9s;">
|
||||
<img :src="screen2.imageSrc" alt="" style="width:100%;height:100%;">
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
|
|
@ -50,56 +30,29 @@
|
|||
<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;"
|
||||
>
|
||||
<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;"
|
||||
>
|
||||
<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"
|
||||
:key="item.id"
|
||||
class="list-item"
|
||||
>
|
||||
<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 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;`"
|
||||
>
|
||||
<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;`"
|
||||
>
|
||||
<div v-show="screen3.offsetLevel >= 0" class="list-content" :style="`--tde:${1.2 + index * 0.05}s;`">
|
||||
{{ item.titleChinese }}
|
||||
</div>
|
||||
</transition>
|
||||
|
|
@ -109,16 +62,9 @@
|
|||
</div>
|
||||
<div class="screen4">
|
||||
<div class="wrapper1680">
|
||||
<div
|
||||
v-for="(item, index) in screen4.list"
|
||||
:key="item.id"
|
||||
class="list-item"
|
||||
>
|
||||
<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="content-wrapper" :style="`--tdu:0.5s;--initial:#f5f5f8;`">
|
||||
<div class="title">
|
||||
{{ item.businessName }}
|
||||
</div>
|
||||
|
|
@ -128,15 +74,8 @@
|
|||
</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 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>
|
||||
|
|
@ -144,367 +83,376 @@
|
|||
</div>
|
||||
<div class="screen5">
|
||||
<div class="wrapper1680">
|
||||
<div
|
||||
class="box-posi-abs"
|
||||
style="--t:90rem;--w:100%;--h:1rem;"
|
||||
>
|
||||
<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 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
|
||||
class="text-posi-abs"
|
||||
style="--t:333rem;--l:118rem;--fs:30rem;--c:#ffffff;"
|
||||
>
|
||||
<div 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;"
|
||||
>
|
||||
<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')"
|
||||
>
|
||||
<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
|
||||
id="myfooter"
|
||||
theme="dark"
|
||||
></FootBar>
|
||||
<FootBar id="myfooter" theme="dark"></FootBar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapMutations, 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: {
|
||||
import { mapMutations, mapState } from 'vuex';
|
||||
import FootBar from '@/components/FootBar.vue';
|
||||
export default {
|
||||
components: { FootBar },
|
||||
data() {
|
||||
return {
|
||||
screen2: {
|
||||
show: false,
|
||||
title: '',
|
||||
contentCn: '',
|
||||
imageSrc: ''
|
||||
},
|
||||
plateList: [],
|
||||
joinUs: {
|
||||
title: '',
|
||||
screen3: {
|
||||
offsets: [800],
|
||||
offsetLevel: -1,
|
||||
titleCn: '',
|
||||
contentCn: '',
|
||||
imageSrc: '',
|
||||
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;
|
||||
}
|
||||
},
|
||||
};
|
||||
},
|
||||
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;
|
||||
$route() {
|
||||
if (this.$route.hash) {
|
||||
this.forceScroll({
|
||||
top: document.getElementById(this.$route.hash.slice(1)).offsetTop,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
$route () {
|
||||
mounted() {
|
||||
if (this.$route.hash) {
|
||||
this.forceScroll({
|
||||
top: document.getElementById(this.$route.hash.slice(1)).offsetTop,
|
||||
behavior: 'smooth',
|
||||
behavior: 'smooth'
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted () {
|
||||
if (this.$route.hash) {
|
||||
this.forceScroll({
|
||||
top: document.getElementById(this.$route.hash.slice(1)).offsetTop,
|
||||
behavior: 'smooth',
|
||||
});
|
||||
created() {
|
||||
this.$event.$emit('nav-theme', 'light');
|
||||
this.getScreen2Data();
|
||||
this.getScreen3Data();
|
||||
this.getScreen3ListData();
|
||||
this.getScreen4ListData();
|
||||
this.getScreen5JoinusData();
|
||||
},
|
||||
methods: {
|
||||
...mapMutations(['forceScroll', 'setScrollTop']),
|
||||
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: 2,
|
||||
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) {}
|
||||
}
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.$event.$emit('nav-theme', 'light');
|
||||
this.getScreen2Data();
|
||||
this.getScreen3Data();
|
||||
this.getScreen3ListData();
|
||||
this.getScreen4ListData();
|
||||
this.getScreen5JoinusData();
|
||||
},
|
||||
methods: {
|
||||
...mapMutations(['forceScroll', 'setScrollTop']),
|
||||
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: 2, 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: 850rem;
|
||||
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-item {
|
||||
margin: 0 58rem;
|
||||
width: 234rem;
|
||||
height: 330rem;
|
||||
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: 1286rem;
|
||||
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;
|
||||
}
|
||||
.page-construction {
|
||||
width: 100%;
|
||||
}
|
||||
.screen1 {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.screen2 {
|
||||
position: relative;
|
||||
height: 1030rem;
|
||||
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: 850rem;
|
||||
background-color: #ffffff;
|
||||
display: none;
|
||||
}
|
||||
.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-item {
|
||||
margin: 0 58rem;
|
||||
width: 234rem;
|
||||
height: 330rem;
|
||||
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: 1286rem;
|
||||
background-color: #f5f5f8;
|
||||
display: none;
|
||||
}
|
||||
.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;
|
||||
display: none;
|
||||
}
|
||||
.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>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
<div
|
||||
v-show="screen2.show"
|
||||
class="text-posi-abs"
|
||||
style="--t:53rem;--l:0rem;--c:#ff0000;"
|
||||
style="--t:53rem;--r:0rem;--c:#ff0000;"
|
||||
>
|
||||
{{ screen2.title }}
|
||||
</div>
|
||||
|
|
@ -18,7 +18,7 @@
|
|||
<div
|
||||
v-show="screen2.show"
|
||||
class="text-posi-abs"
|
||||
style="--t:99rem;--l:0rem;--fs:72rem;--c:#111111;--ff:MicrosoftYaHeiLight;--tde:0.3s;"
|
||||
style="--t:99rem;--r:0rem;--fs:72rem;--c:#111111;--ff:MicrosoftYaHeiLight;--tde:0.3s;"
|
||||
>
|
||||
基础设施
|
||||
</div>
|
||||
|
|
@ -27,7 +27,7 @@
|
|||
<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;"
|
||||
style="--l:0rem;--t:93rem;--r:8rem;--w:950rem;--fs:22rem;--lh:30rem;--c:#111111;--ff:MicrosoftYaHeiLight;--ws:pre-line;--ta:justify;--tde:0.6s;text-indent: 1.5em;"
|
||||
>
|
||||
{{ screen2.contentCn }}
|
||||
</div>
|
||||
|
|
@ -36,7 +36,7 @@
|
|||
<div
|
||||
v-show="screen2.show"
|
||||
class="image-posi-abs"
|
||||
style="--l:1rem;--t:447rem;--w:1680rem;--h:620rem;--tde:0.9s;"
|
||||
style="--l:1rem;--t:320rem;--w:1680rem;--h:620rem;--tde:0.9s;"
|
||||
>
|
||||
<img
|
||||
:src="screen2.imageSrc"
|
||||
|
|
@ -346,7 +346,7 @@ export default {
|
|||
}
|
||||
.screen2 {
|
||||
position: relative;
|
||||
height: 1186rem;
|
||||
height: 1030rem;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.screen2 .wrapper1680 {
|
||||
|
|
@ -360,6 +360,7 @@ export default {
|
|||
position: relative;
|
||||
height: 850rem;
|
||||
background-color: #ffffff;
|
||||
display: none;
|
||||
}
|
||||
.screen3 .wrapper1680 {
|
||||
height: 100%;
|
||||
|
|
@ -413,6 +414,7 @@ export default {
|
|||
position: relative;
|
||||
height: 1286rem;
|
||||
background-color: #F5F5F8;
|
||||
display: none;
|
||||
}
|
||||
.screen4 .wrapper1680 {
|
||||
padding: 124rem 0;
|
||||
|
|
@ -474,6 +476,7 @@ export default {
|
|||
position: relative;
|
||||
height: 823rem;
|
||||
background-color: #ffffff;
|
||||
display: none;
|
||||
}
|
||||
.screen5 .wrapper1680 {
|
||||
height: 100%;
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
<div
|
||||
v-show="screen2.show"
|
||||
class="text-posi-abs"
|
||||
style="--t:53rem;--l:0rem;--c:#ff0000;"
|
||||
style="--t:53rem;--r:0rem;--c:#ff0000;"
|
||||
>
|
||||
{{ screen2.title }}
|
||||
</div>
|
||||
|
|
@ -18,7 +18,7 @@
|
|||
<div
|
||||
v-show="screen2.show"
|
||||
class="text-posi-abs"
|
||||
style="--t:99rem;--l:0rem;--fs:72rem;--c:#111111;--ff:MicrosoftYaHeiLight;--tde:0.3s;"
|
||||
style="--t:99rem;--r:0rem;--fs:72rem;--c:#111111;--ff:MicrosoftYaHeiLight;--tde:0.3s;"
|
||||
>
|
||||
能源环保
|
||||
</div>
|
||||
|
|
@ -27,7 +27,7 @@
|
|||
<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;"
|
||||
style="--l:0rem;--t:93rem;--r:8rem;--w:950rem;--fs:22rem;--lh:30rem;--c:#111111;--ff:MicrosoftYaHeiLight;--ws:pre-line;--ta:justify;--tde:0.6s;text-indent: 1.5em;"
|
||||
>
|
||||
{{ screen2.contentCn }}
|
||||
</div>
|
||||
|
|
@ -36,7 +36,7 @@
|
|||
<div
|
||||
v-show="screen2.show"
|
||||
class="image-posi-abs"
|
||||
style="--l:1rem;--t:447rem;--w:1680rem;--h:620rem;--tde:0.9s;"
|
||||
style="--l:1rem;--t:320rem;--w:1680rem;--h:620rem;--tde:0.9s;"
|
||||
>
|
||||
<img
|
||||
:src="screen2.imageSrc"
|
||||
|
|
@ -347,7 +347,7 @@ export default {
|
|||
}
|
||||
.screen2 {
|
||||
position: relative;
|
||||
height: 1186rem;
|
||||
height: 1030rem;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.screen2 .wrapper1680 {
|
||||
|
|
@ -361,6 +361,7 @@ export default {
|
|||
position: relative;
|
||||
height: 850rem;
|
||||
background-color: #ffffff;
|
||||
display: none;
|
||||
}
|
||||
.screen3 .wrapper1680 {
|
||||
height: 100%;
|
||||
|
|
@ -414,6 +415,7 @@ export default {
|
|||
position: relative;
|
||||
height: 1286rem;
|
||||
background-color: #F5F5F8;
|
||||
display: none;
|
||||
}
|
||||
.screen4 .wrapper1680 {
|
||||
padding: 124rem 0;
|
||||
|
|
@ -475,6 +477,7 @@ export default {
|
|||
position: relative;
|
||||
height: 823rem;
|
||||
background-color: #ffffff;
|
||||
display: none;
|
||||
}
|
||||
.screen5 .wrapper1680 {
|
||||
height: 100%;
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
<div
|
||||
v-show="screen2.show"
|
||||
class="text-posi-abs"
|
||||
style="--t:53rem;--l:0rem;--c:#ff0000;"
|
||||
style="--t:53rem;--r:0rem;--c:#ff0000;"
|
||||
>
|
||||
{{ screen2.title }}
|
||||
</div>
|
||||
|
|
@ -18,7 +18,7 @@
|
|||
<div
|
||||
v-show="screen2.show"
|
||||
class="text-posi-abs"
|
||||
style="--t:99rem;--l:0rem;--fs:72rem;--c:#111111;--ff:MicrosoftYaHeiLight;--tde:0.3s;"
|
||||
style="--t:99rem;--r:0rem;--fs:72rem;--c:#111111;--ff:MicrosoftYaHeiLight;--tde:0.3s;"
|
||||
>
|
||||
农业发展
|
||||
</div>
|
||||
|
|
@ -27,7 +27,7 @@
|
|||
<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;"
|
||||
style="--l:0rem;--t:93rem;--r:8rem;--w:950rem;--fs:22rem;--lh:30rem;--c:#111111;--ff:MicrosoftYaHeiLight;--ws:pre-line;--ta:justify;--tde:0.6s;text-indent: 1.5em;"
|
||||
>
|
||||
{{ screen2.contentCn }}
|
||||
</div>
|
||||
|
|
@ -36,7 +36,7 @@
|
|||
<div
|
||||
v-show="screen2.show"
|
||||
class="image-posi-abs"
|
||||
style="--l:1rem;--t:447rem;--w:1680rem;--h:620rem;--tde:0.9s;"
|
||||
style="--l:1rem;--t:320rem;--w:1680rem;--h:620rem;--tde:0.9s;"
|
||||
>
|
||||
<img
|
||||
:src="screen2.imageSrc"
|
||||
|
|
@ -346,7 +346,7 @@ export default {
|
|||
}
|
||||
.screen2 {
|
||||
position: relative;
|
||||
height: 1186rem;
|
||||
height: 1030rem;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.screen2 .wrapper1680 {
|
||||
|
|
@ -360,6 +360,7 @@ export default {
|
|||
position: relative;
|
||||
height: 850rem;
|
||||
background-color: #ffffff;
|
||||
display: none;
|
||||
}
|
||||
.screen3 .wrapper1680 {
|
||||
height: 100%;
|
||||
|
|
@ -413,6 +414,7 @@ export default {
|
|||
position: relative;
|
||||
height: 1286rem;
|
||||
background-color: #F5F5F8;
|
||||
display: none;
|
||||
}
|
||||
.screen4 .wrapper1680 {
|
||||
padding: 124rem 0;
|
||||
|
|
@ -474,6 +476,7 @@ export default {
|
|||
position: relative;
|
||||
height: 823rem;
|
||||
background-color: #ffffff;
|
||||
display: none;
|
||||
}
|
||||
.screen5 .wrapper1680 {
|
||||
height: 100%;
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
<div
|
||||
v-show="screen2.show"
|
||||
class="text-posi-abs"
|
||||
style="--t:53rem;--l:0rem;--c:#ff0000;"
|
||||
style="--t:53rem;--r:0rem;--c:#ff0000;"
|
||||
>
|
||||
{{ screen2.title }}
|
||||
</div>
|
||||
|
|
@ -18,7 +18,7 @@
|
|||
<div
|
||||
v-show="screen2.show"
|
||||
class="text-posi-abs"
|
||||
style="--t:99rem;--l:0rem;--fs:72rem;--c:#111111;--ff:MicrosoftYaHeiLight;--tde:0.3s;"
|
||||
style="--t:99rem;--r:0rem;--fs:72rem;--c:#111111;--ff:MicrosoftYaHeiLight;--tde:0.3s;"
|
||||
>
|
||||
供应链管理
|
||||
</div>
|
||||
|
|
@ -27,7 +27,7 @@
|
|||
<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;"
|
||||
style="--l:0rem;--t:93rem;--r:8rem;--w:950rem;--fs:22rem;--lh:30rem;--c:#111111;--ff:MicrosoftYaHeiLight;--ws:pre-line;--ta:justify;--tde:0.6s;text-indent: 1.5em;"
|
||||
>
|
||||
{{ screen2.contentCn }}
|
||||
</div>
|
||||
|
|
@ -36,7 +36,7 @@
|
|||
<div
|
||||
v-show="screen2.show"
|
||||
class="image-posi-abs"
|
||||
style="--l:1rem;--t:447rem;--w:1680rem;--h:620rem;--tde:0.9s;"
|
||||
style="--l:1rem;--t:320rem;--w:1680rem;--h:620rem;--tde:0.9s;"
|
||||
>
|
||||
<img
|
||||
:src="screen2.imageSrc"
|
||||
|
|
@ -425,7 +425,7 @@ export default {
|
|||
}
|
||||
.screen2 {
|
||||
position: relative;
|
||||
height: 1186rem;
|
||||
height: 1030rem;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.screen2 .wrapper1680 {
|
||||
|
|
@ -439,6 +439,7 @@ export default {
|
|||
position: relative;
|
||||
height: 1300rem;
|
||||
background-color: #ffffff;
|
||||
display: none;
|
||||
}
|
||||
.screen3 .wrapper1680 {
|
||||
height: 100%;
|
||||
|
|
@ -492,6 +493,7 @@ export default {
|
|||
position: relative;
|
||||
height: 1286rem;
|
||||
background-color: #F5F5F8;
|
||||
display: none;
|
||||
}
|
||||
.screen4 .wrapper1680 {
|
||||
padding: 124rem 0;
|
||||
|
|
@ -553,6 +555,7 @@ export default {
|
|||
position: relative;
|
||||
height: 823rem;
|
||||
background-color: #ffffff;
|
||||
display: none;
|
||||
}
|
||||
.screen5 .wrapper1680 {
|
||||
height: 100%;
|
||||
|
|
@ -590,6 +593,7 @@ export default {
|
|||
position: relative;
|
||||
height: 800rem;
|
||||
background-color: rgb(245, 244, 249);
|
||||
display: none;
|
||||
}
|
||||
.screen6 .wrapper1680 {
|
||||
height: 100%;
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
<div
|
||||
v-show="screen2.show"
|
||||
class="text-posi-abs"
|
||||
style="--t:53rem;--l:0rem;--c:#ff0000;"
|
||||
style="--t:53rem;--r:0rem;--c:#ff0000;"
|
||||
>
|
||||
{{ screen2.title }}
|
||||
</div>
|
||||
|
|
@ -18,7 +18,7 @@
|
|||
<div
|
||||
v-show="screen2.show"
|
||||
class="text-posi-abs"
|
||||
style="--t:99rem;--l:0rem;--fs:72rem;--c:#111111;--ff:MicrosoftYaHeiLight;--tde:0.3s;"
|
||||
style="--t:99rem;--r:0rem;--fs:72rem;--c:#111111;--ff:MicrosoftYaHeiLight;--tde:0.3s;"
|
||||
>
|
||||
大健康产业
|
||||
</div>
|
||||
|
|
@ -27,7 +27,7 @@
|
|||
<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;"
|
||||
style="--l:0rem;--t:93rem;--r:8rem;--w:950rem;--fs:22rem;--lh:30rem;--c:#111111;--ff:MicrosoftYaHeiLight;--ws:pre-line;--ta:justify;--tde:0.6s;text-indent: 1.5em;"
|
||||
>
|
||||
{{ screen2.contentCn }}
|
||||
</div>
|
||||
|
|
@ -36,7 +36,7 @@
|
|||
<div
|
||||
v-show="screen2.show"
|
||||
class="image-posi-abs"
|
||||
style="--l:1rem;--t:447rem;--w:1680rem;--h:620rem;--tde:0.9s;"
|
||||
style="--l:1rem;--t:320rem;--w:1680rem;--h:620rem;--tde:0.9s;"
|
||||
>
|
||||
<img
|
||||
:src="screen2.imageSrc"
|
||||
|
|
@ -346,7 +346,7 @@ export default {
|
|||
}
|
||||
.screen2 {
|
||||
position: relative;
|
||||
height: 1186rem;
|
||||
height: 1030rem;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.screen2 .wrapper1680 {
|
||||
|
|
@ -360,6 +360,7 @@ export default {
|
|||
position: relative;
|
||||
height: 850rem;
|
||||
background-color: #ffffff;
|
||||
display: none;
|
||||
}
|
||||
.screen3 .wrapper1680 {
|
||||
height: 100%;
|
||||
|
|
@ -413,6 +414,7 @@ export default {
|
|||
position: relative;
|
||||
height: 1286rem;
|
||||
background-color: #F5F5F8;
|
||||
display: none;
|
||||
}
|
||||
.screen4 .wrapper1680 {
|
||||
padding: 124rem 0;
|
||||
|
|
@ -474,6 +476,7 @@ export default {
|
|||
position: relative;
|
||||
height: 823rem;
|
||||
background-color: #ffffff;
|
||||
display: none;
|
||||
}
|
||||
.screen5 .wrapper1680 {
|
||||
height: 100%;
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
<div
|
||||
v-show="screen2.show"
|
||||
class="text-posi-abs"
|
||||
style="--t:53rem;--l:0rem;--c:#ff0000;"
|
||||
style="--t:53rem;--r:0rem;--c:#ff0000;"
|
||||
>
|
||||
{{ screen2.title }}
|
||||
</div>
|
||||
|
|
@ -18,7 +18,7 @@
|
|||
<div
|
||||
v-show="screen2.show"
|
||||
class="text-posi-abs"
|
||||
style="--t:99rem;--l:0rem;--fs:72rem;--c:#111111;--ff:MicrosoftYaHeiLight;--tde:0.3s;"
|
||||
style="--t:99rem;--r:0rem;--fs:72rem;--c:#111111;--ff:MicrosoftYaHeiLight;--tde:0.3s;"
|
||||
>
|
||||
高新技术
|
||||
</div>
|
||||
|
|
@ -27,7 +27,7 @@
|
|||
<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;"
|
||||
style="--l: 0rem;--t:93rem;--r:8rem;--w:950rem;--fs:22rem;--lh:30rem;--c:#111111;--ff:MicrosoftYaHeiLight;--ws:pre-line;--ta:justify;--tde:0.6s;text-indent: 1.5em;"
|
||||
>
|
||||
{{ screen2.contentCn }}
|
||||
</div>
|
||||
|
|
@ -36,7 +36,7 @@
|
|||
<div
|
||||
v-show="screen2.show"
|
||||
class="image-posi-abs"
|
||||
style="--l:1rem;--t:447rem;--w:1680rem;--h:620rem;--tde:0.9s;"
|
||||
style="--l:1rem;--t:320rem;--w:1680rem;--h:620rem;--tde:0.9s;"
|
||||
>
|
||||
<img
|
||||
:src="screen2.imageSrc"
|
||||
|
|
@ -385,7 +385,7 @@ export default {
|
|||
}
|
||||
.screen2 {
|
||||
position: relative;
|
||||
height: 1186rem;
|
||||
height: 1030rem;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.screen2 .wrapper1680 {
|
||||
|
|
@ -399,6 +399,7 @@ export default {
|
|||
position: relative;
|
||||
height: 1300rem;
|
||||
background-color: #ffffff;
|
||||
display: none;
|
||||
}
|
||||
.screen3 .wrapper1680 {
|
||||
height: 100%;
|
||||
|
|
@ -461,6 +462,7 @@ export default {
|
|||
position: relative;
|
||||
height: 1286rem;
|
||||
background-color: #F5F5F8;
|
||||
display: none;
|
||||
}
|
||||
.screen4 .wrapper1680 {
|
||||
padding: 124rem 0;
|
||||
|
|
@ -522,6 +524,7 @@ export default {
|
|||
position: relative;
|
||||
height: 823rem;
|
||||
background-color: #ffffff;
|
||||
display: none;
|
||||
}
|
||||
.screen5 .wrapper1680 {
|
||||
height: 100%;
|
||||
|
|
|
|||
|
|
@ -101,7 +101,7 @@
|
|||
<span v-if="screen3.currentIndicator >= 0">{{ screen3.carouselData[screen3.currentIndicator].titleChinese }}</span>
|
||||
</div>
|
||||
</transition>
|
||||
<transition name="fade-slide-left">
|
||||
<!-- <transition name="fade-slide-left">
|
||||
<div
|
||||
v-show="screen3.offsetLevel >= 0"
|
||||
class="text-posi-abs"
|
||||
|
|
@ -109,12 +109,12 @@
|
|||
>
|
||||
{{ screen3.currentIndicator > -1 ? screen3.carouselData[screen3.currentIndicator].titleEnglish : '' }}
|
||||
</div>
|
||||
</transition>
|
||||
</transition> -->
|
||||
<transition name="fade-slide-right">
|
||||
<div
|
||||
v-show="screen3.offsetLevel >= 0"
|
||||
class="box-posi-abs"
|
||||
style="--l:460rem;--t:324rem;--w:880rem;--h:552rem;--tde:0.3s;"
|
||||
style="--l:0rem;--t:324rem;--w:1680rem;--h:752rem;--tde:0.3s;"
|
||||
>
|
||||
<BusinessCarousel
|
||||
:carouselData="screen3.carouselData"
|
||||
|
|
@ -359,14 +359,17 @@ export default {
|
|||
}
|
||||
.screen1 .indicator-wrapper {
|
||||
position: absolute;
|
||||
bottom: 100rem;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
width: 100%;
|
||||
height: 293rem;
|
||||
padding-top: 193rem;
|
||||
max-width: 1920rem;
|
||||
z-index: 100;
|
||||
color: #ffffff;
|
||||
background-image: url("@/assets/bottomBg.png");
|
||||
}
|
||||
.screen2 {
|
||||
height: 1080rem;
|
||||
|
|
@ -404,7 +407,7 @@ export default {
|
|||
stroke-dashoffset: 0;
|
||||
}
|
||||
.screen3 {
|
||||
height: 1055rem;
|
||||
height: 1155rem;
|
||||
background-color: #ffffff;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,55 +1,25 @@
|
|||
<template>
|
||||
<div class="business-carousel">
|
||||
<div
|
||||
v-if="current > -1"
|
||||
class="carousel-viewer"
|
||||
>
|
||||
<div
|
||||
class="carousel-prev"
|
||||
:class="{ 'transition-prev': transitionMode === 'prev' }"
|
||||
>
|
||||
<img
|
||||
:src="prevCarousel.imageurl"
|
||||
alt=""
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
class="carousel-current"
|
||||
:class="{ ['transition-' + transitionMode]: transitionMode }"
|
||||
>
|
||||
<img
|
||||
:src="currentCarousel.imageurl"
|
||||
alt=""
|
||||
style="cursor: pointer;"
|
||||
@click="$router.push(currentCarousel.twLink)"
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
class="carousel-next"
|
||||
:class="{ ['transition-' + transitionMode]: transitionMode }"
|
||||
>
|
||||
<img
|
||||
:src="nextCarousel.imageurl"
|
||||
alt=""
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
class="carousel-next"
|
||||
style="cursor: pointer;"
|
||||
title="点击切换下一张"
|
||||
@click="handleNext"
|
||||
></div>
|
||||
<div
|
||||
class="carousel-next-2"
|
||||
:class="{ 'transition-next': transitionMode === 'next' }"
|
||||
>
|
||||
<img
|
||||
:src="nextCarousel2.imageurl"
|
||||
alt=""
|
||||
>
|
||||
<div v-if="current > -1" class="carousel-viewer">
|
||||
<img v-if="transitionMode === 'prev'" :class="{ 'carousel-operator-disabled': transitionMode }" src="/static/img/home/PaginationPrevSolid.png" alt="" style="width: 44rem;height: 44rem;position: absolute;z-index: 1;top: 354rem;left: -64rem;">
|
||||
<img v-else :class="{ 'carousel-operator-disabled': transitionMode }" src="/static/img/home/PaginationPrevLinearity.png" alt="" style="width: 44rem;height: 44rem;position: absolute;z-index: 1;top: 354rem;left: -64rem;" @click="handlePrev">
|
||||
<!-- <div class="carousel-prev" :class="{ 'transition-prev': transitionMode === 'prev' }">
|
||||
<img :src="prevCarousel.imageurl" alt="">
|
||||
</div> -->
|
||||
<div class="carousel-current" :class="{ ['transition-' + transitionMode]: transitionMode }">
|
||||
<img :src="currentCarousel.imageurl" alt="" style="cursor: pointer;" @click="$router.push(currentCarousel.twLink)">
|
||||
</div>
|
||||
<!-- <div class="carousel-next" :class="{ ['transition-' + transitionMode]: transitionMode }">
|
||||
<img :src="nextCarousel.imageurl" alt="">
|
||||
</div> -->
|
||||
<!-- <div class="carousel-next" style="cursor: pointer;" title="点击切换下一张" @click="handleNext"></div>
|
||||
<div class="carousel-next-2" :class="{ 'transition-next': transitionMode === 'next' }">
|
||||
<img :src="nextCarousel2.imageurl" alt="">
|
||||
</div> -->
|
||||
<img v-if="transitionMode === 'next'" :class="{ 'carousel-operator-disabled': transitionMode }" src="/static/img/home/PaginationNextSolid.png" alt="" style="width: 44rem;height: 44rem;position: absolute;z-index: 1;top: 354rem;right: -64rem;">
|
||||
<img v-else :class="{ 'carousel-operator-disabled': transitionMode }" src="/static/img/home/PaginationNextLinearity.png" alt="" style="width: 44rem;height: 44rem;position: absolute;z-index: 1;top: 354rem;right: -64rem;" @click="handleNext">
|
||||
</div>
|
||||
<div
|
||||
<!-- <div
|
||||
v-if="current > -1"
|
||||
class="carousel-text-viewer"
|
||||
>
|
||||
|
|
@ -90,323 +60,303 @@
|
|||
>
|
||||
<span>{{ nextCarousel4.businessName }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="carouselData.length > 0"
|
||||
class="carousel-operator"
|
||||
>
|
||||
</div> -->
|
||||
<!-- <div v-if="carouselData.length > 0" class="carousel-operator">
|
||||
<div class="carousel-operator-left">
|
||||
<img
|
||||
v-if="transitionMode === 'prev'"
|
||||
:class="{ 'carousel-operator-disabled': transitionMode }"
|
||||
src="/static/img/home/PaginationPrevSolid.png"
|
||||
alt=""
|
||||
style="width: 44rem;height: 44rem;"
|
||||
>
|
||||
<img
|
||||
v-else
|
||||
:class="{ 'carousel-operator-disabled': transitionMode }"
|
||||
src="/static/img/home/PaginationPrevLinearity.png"
|
||||
alt=""
|
||||
style="width: 44rem;height: 44rem;"
|
||||
@click="handlePrev"
|
||||
>
|
||||
<img
|
||||
v-if="transitionMode === 'next'"
|
||||
:class="{ 'carousel-operator-disabled': transitionMode }"
|
||||
src="/static/img/home/PaginationNextSolid.png"
|
||||
alt=""
|
||||
style="width: 44rem;height: 44rem;"
|
||||
>
|
||||
<img
|
||||
v-else
|
||||
:class="{ 'carousel-operator-disabled': transitionMode }"
|
||||
src="/static/img/home/PaginationNextLinearity.png"
|
||||
alt=""
|
||||
style="width: 44rem;height: 44rem;"
|
||||
@click="handleNext"
|
||||
>
|
||||
<img v-if="transitionMode === 'prev'" :class="{ 'carousel-operator-disabled': transitionMode }" src="/static/img/home/PaginationPrevSolid.png" alt="" style="width: 44rem;height: 44rem;">
|
||||
<img v-else :class="{ 'carousel-operator-disabled': transitionMode }" src="/static/img/home/PaginationPrevLinearity.png" alt="" style="width: 44rem;height: 44rem;" @click="handlePrev">
|
||||
<img v-if="transitionMode === 'next'" :class="{ 'carousel-operator-disabled': transitionMode }" src="/static/img/home/PaginationNextSolid.png" alt="" style="width: 44rem;height: 44rem;">
|
||||
<img v-else :class="{ 'carousel-operator-disabled': transitionMode }" src="/static/img/home/PaginationNextLinearity.png" alt="" style="width: 44rem;height: 44rem;" @click="handleNext">
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
carouselData: { type: Array, required: true },
|
||||
current: { type: Number, required: true },
|
||||
},
|
||||
computed: {
|
||||
currentCarousel () {
|
||||
return this.carouselData[this.current];
|
||||
export default {
|
||||
props: {
|
||||
carouselData: { type: Array, required: true },
|
||||
current: { type: Number, required: true }
|
||||
},
|
||||
prevCarousel () {
|
||||
return this.carouselData[(this.current + this.carouselData.length - 1) % this.carouselData.length];
|
||||
computed: {
|
||||
currentCarousel() {
|
||||
return this.carouselData[this.current];
|
||||
},
|
||||
prevCarousel() {
|
||||
return this.carouselData[
|
||||
(this.current + this.carouselData.length - 1) % this.carouselData.length
|
||||
];
|
||||
},
|
||||
nextCarousel() {
|
||||
return this.carouselData[(this.current + 1) % this.carouselData.length];
|
||||
},
|
||||
nextCarousel2() {
|
||||
return this.carouselData[(this.current + 2) % this.carouselData.length];
|
||||
},
|
||||
nextCarousel3() {
|
||||
return this.carouselData[(this.current + 3) % this.carouselData.length];
|
||||
},
|
||||
nextCarousel4() {
|
||||
return this.carouselData[(this.current + 4) % this.carouselData.length];
|
||||
}
|
||||
},
|
||||
nextCarousel () {
|
||||
return this.carouselData[(this.current + 1) % this.carouselData.length];
|
||||
data() {
|
||||
return {
|
||||
transitionMode: ''
|
||||
};
|
||||
},
|
||||
nextCarousel2 () {
|
||||
return this.carouselData[(this.current + 2) % this.carouselData.length];
|
||||
},
|
||||
nextCarousel3 () {
|
||||
return this.carouselData[(this.current + 3) % this.carouselData.length];
|
||||
},
|
||||
nextCarousel4 () {
|
||||
return this.carouselData[(this.current + 4) % this.carouselData.length];
|
||||
},
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
transitionMode: '',
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handlePrev () {
|
||||
if (this.transitionMode) return;
|
||||
const current = this.current;
|
||||
this.transitionMode = 'prev';
|
||||
setTimeout(() => {
|
||||
this.transitionMode = '';
|
||||
this.$emit('update:current', current ? current - 1 : this.carouselData.length - 1);
|
||||
}, 500);
|
||||
},
|
||||
handleNext () {
|
||||
if (this.transitionMode) return;
|
||||
const current = this.current;
|
||||
this.transitionMode = 'next';
|
||||
setTimeout(() => {
|
||||
this.transitionMode = '';
|
||||
this.$emit('update:current', current === this.carouselData.length - 1 ? 0 : current + 1);
|
||||
}, 500);
|
||||
},
|
||||
},
|
||||
};
|
||||
methods: {
|
||||
handlePrev() {
|
||||
if (this.transitionMode) return;
|
||||
const current = this.current;
|
||||
this.transitionMode = 'prev';
|
||||
setTimeout(() => {
|
||||
this.transitionMode = '';
|
||||
this.$emit(
|
||||
'update:current',
|
||||
current ? current - 1 : this.carouselData.length - 1
|
||||
);
|
||||
}, 500);
|
||||
},
|
||||
handleNext() {
|
||||
if (this.transitionMode) return;
|
||||
const current = this.current;
|
||||
this.transitionMode = 'next';
|
||||
setTimeout(() => {
|
||||
this.transitionMode = '';
|
||||
this.$emit(
|
||||
'update:current',
|
||||
current === this.carouselData.length - 1 ? 0 : current + 1
|
||||
);
|
||||
}, 500);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.business-carousel {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.carousel-viewer {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
.carousel-viewer img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.carousel-viewer > div {
|
||||
position: absolute;
|
||||
border-radius: 50rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
.carousel-prev {
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
width: 0;
|
||||
height: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
.carousel-prev.transition-prev {
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 1;
|
||||
transition: all 0.5s;
|
||||
}
|
||||
.carousel-current {
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
.carousel-current img {
|
||||
transition: transform 0.4s;
|
||||
}
|
||||
.carousel-current:hover img {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
.carousel-current.transition-prev {
|
||||
left: calc(100% + 60rem);
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transition: all 0.5s;
|
||||
}
|
||||
.carousel-current.transition-next {
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
width: 0;
|
||||
height: 0;
|
||||
opacity: 0;
|
||||
transition: all 0.5s;
|
||||
}
|
||||
.carousel-next {
|
||||
left: calc(100% + 60rem);
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
.carousel-next:hover{
|
||||
box-shadow: rgba(28, 28, 30, 0.08) 0rem 0rem 2rem 0rem, rgba(28, 28, 30, 0.08) 0rem 8rem 16rem 0rem;
|
||||
}
|
||||
.carousel-next.transition-prev {
|
||||
left: calc(200% + 120rem);
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transition: all 0.5s;
|
||||
}
|
||||
.carousel-next.transition-next {
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transition: all 0.5s;
|
||||
}
|
||||
.carousel-next-2 {
|
||||
left: calc(200% + 120rem);
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.carousel-next-2.transition-next {
|
||||
left: calc(100% + 60rem);
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transition: all 0.5s;
|
||||
}
|
||||
.carousel-text-viewer {
|
||||
position: absolute;
|
||||
left: calc(100% + 60rem);
|
||||
top: -250rem;
|
||||
width: fit-content;
|
||||
height: 50rem;
|
||||
}
|
||||
.carousel-text-viewer > div {
|
||||
white-space: nowrap;
|
||||
height: 50rem;
|
||||
line-height: 50rem;
|
||||
font-size: 18rem;
|
||||
color: #000000;
|
||||
font-weight: 500;
|
||||
position: absolute;
|
||||
}
|
||||
.carousel-text-prev {
|
||||
left: 0;
|
||||
top: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
.carousel-text-prev.transition-prev {
|
||||
left: 0;
|
||||
top: 0;
|
||||
opacity: 1;
|
||||
transition: all 0.5s;
|
||||
}
|
||||
.carousel-text-current {
|
||||
left: 0;
|
||||
top: 0;
|
||||
opacity: 1;
|
||||
}
|
||||
.carousel-text-current.transition-prev {
|
||||
left: 0;
|
||||
top: 100%;
|
||||
opacity: 0.6;
|
||||
transition: all 0.5s;
|
||||
}
|
||||
.carousel-text-current.transition-next {
|
||||
left: 0;
|
||||
top: 0;
|
||||
opacity: 0;
|
||||
transition: all 0.5s;
|
||||
}
|
||||
.carousel-text-next {
|
||||
left: 0;
|
||||
top: 100%;
|
||||
opacity: 0.6;
|
||||
cursor: pointer;
|
||||
}
|
||||
.carousel-text-next.transition-prev {
|
||||
left: 0;
|
||||
top: 200%;
|
||||
opacity: 0.4;
|
||||
transition: all 0.5s;
|
||||
}
|
||||
.carousel-text-next.transition-next {
|
||||
left: 0;
|
||||
top: 0;
|
||||
opacity: 1;
|
||||
transition: all 0.5s;
|
||||
}
|
||||
.carousel-text-next-2 {
|
||||
left: 0;
|
||||
top: 200%;
|
||||
opacity: 0.4;
|
||||
}
|
||||
.carousel-text-next-2.transition-prev {
|
||||
left: 0;
|
||||
top: 300%;
|
||||
opacity: 0.2;
|
||||
transition: all 0.5s;
|
||||
}
|
||||
.carousel-text-next-2.transition-next {
|
||||
left: 0;
|
||||
top: 100%;
|
||||
opacity: 0.6;
|
||||
transition: all 0.5s;
|
||||
}
|
||||
.carousel-text-next-3 {
|
||||
left: 0;
|
||||
top: 300%;
|
||||
opacity: 0.2;
|
||||
}
|
||||
.carousel-text-next-3.transition-prev {
|
||||
left: 0;
|
||||
top: 400%;
|
||||
opacity: 0;
|
||||
transition: all 0.5s;
|
||||
}
|
||||
.carousel-text-next-3.transition-next {
|
||||
left: 0;
|
||||
top: 200%;
|
||||
opacity: 0.4;
|
||||
transition: all 0.5s;
|
||||
}
|
||||
.carousel-text-next-4 {
|
||||
left: 0;
|
||||
top: 400%;
|
||||
opacity: 0;
|
||||
}
|
||||
.carousel-text-next-4.transition-next {
|
||||
left: 0;
|
||||
top: 300%;
|
||||
opacity: 0.2;
|
||||
transition: all 0.5s;
|
||||
}
|
||||
.carousel-operator {
|
||||
position: absolute;
|
||||
top: calc(100% + 58rem);
|
||||
left: 0;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.carousel-operator img {
|
||||
cursor: pointer;
|
||||
}
|
||||
.carousel-operator-left img {
|
||||
margin-right: 14rem;
|
||||
}
|
||||
.carousel-operator-disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.business-carousel {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.carousel-viewer {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
.carousel-viewer img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.carousel-viewer > div {
|
||||
position: absolute;
|
||||
border-radius: 50rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
.carousel-prev {
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
width: 0;
|
||||
height: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
.carousel-prev.transition-prev {
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 1;
|
||||
transition: all 0.5s;
|
||||
}
|
||||
.carousel-current {
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
.carousel-current img {
|
||||
transition: transform 0.4s;
|
||||
}
|
||||
.carousel-current:hover img {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
.carousel-current.transition-prev {
|
||||
left: calc(100% + 60rem);
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transition: all 0.5s;
|
||||
}
|
||||
.carousel-current.transition-next {
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
width: 0;
|
||||
height: 0;
|
||||
opacity: 0;
|
||||
transition: all 0.5s;
|
||||
}
|
||||
.carousel-next {
|
||||
left: calc(100% + 60rem);
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
.carousel-next:hover {
|
||||
box-shadow: rgba(28, 28, 30, 0.08) 0rem 0rem 2rem 0rem,
|
||||
rgba(28, 28, 30, 0.08) 0rem 8rem 16rem 0rem;
|
||||
}
|
||||
.carousel-next.transition-prev {
|
||||
left: calc(200% + 120rem);
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transition: all 0.5s;
|
||||
}
|
||||
.carousel-next.transition-next {
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transition: all 0.5s;
|
||||
}
|
||||
.carousel-next-2 {
|
||||
left: calc(200% + 120rem);
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.carousel-next-2.transition-next {
|
||||
left: calc(100% + 60rem);
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transition: all 0.5s;
|
||||
}
|
||||
.carousel-text-viewer {
|
||||
position: absolute;
|
||||
left: calc(100% + 60rem);
|
||||
top: -250rem;
|
||||
width: fit-content;
|
||||
height: 50rem;
|
||||
}
|
||||
.carousel-text-viewer > div {
|
||||
white-space: nowrap;
|
||||
height: 50rem;
|
||||
line-height: 50rem;
|
||||
font-size: 18rem;
|
||||
color: #000000;
|
||||
font-weight: 500;
|
||||
position: absolute;
|
||||
}
|
||||
.carousel-text-prev {
|
||||
left: 0;
|
||||
top: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
.carousel-text-prev.transition-prev {
|
||||
left: 0;
|
||||
top: 0;
|
||||
opacity: 1;
|
||||
transition: all 0.5s;
|
||||
}
|
||||
.carousel-text-current {
|
||||
left: 0;
|
||||
top: 0;
|
||||
opacity: 1;
|
||||
}
|
||||
.carousel-text-current.transition-prev {
|
||||
left: 0;
|
||||
top: 100%;
|
||||
opacity: 0.6;
|
||||
transition: all 0.5s;
|
||||
}
|
||||
.carousel-text-current.transition-next {
|
||||
left: 0;
|
||||
top: 0;
|
||||
opacity: 0;
|
||||
transition: all 0.5s;
|
||||
}
|
||||
.carousel-text-next {
|
||||
left: 0;
|
||||
top: 100%;
|
||||
opacity: 0.6;
|
||||
cursor: pointer;
|
||||
}
|
||||
.carousel-text-next.transition-prev {
|
||||
left: 0;
|
||||
top: 200%;
|
||||
opacity: 0.4;
|
||||
transition: all 0.5s;
|
||||
}
|
||||
.carousel-text-next.transition-next {
|
||||
left: 0;
|
||||
top: 0;
|
||||
opacity: 1;
|
||||
transition: all 0.5s;
|
||||
}
|
||||
.carousel-text-next-2 {
|
||||
left: 0;
|
||||
top: 200%;
|
||||
opacity: 0.4;
|
||||
}
|
||||
.carousel-text-next-2.transition-prev {
|
||||
left: 0;
|
||||
top: 300%;
|
||||
opacity: 0.2;
|
||||
transition: all 0.5s;
|
||||
}
|
||||
.carousel-text-next-2.transition-next {
|
||||
left: 0;
|
||||
top: 100%;
|
||||
opacity: 0.6;
|
||||
transition: all 0.5s;
|
||||
}
|
||||
.carousel-text-next-3 {
|
||||
left: 0;
|
||||
top: 300%;
|
||||
opacity: 0.2;
|
||||
}
|
||||
.carousel-text-next-3.transition-prev {
|
||||
left: 0;
|
||||
top: 400%;
|
||||
opacity: 0;
|
||||
transition: all 0.5s;
|
||||
}
|
||||
.carousel-text-next-3.transition-next {
|
||||
left: 0;
|
||||
top: 200%;
|
||||
opacity: 0.4;
|
||||
transition: all 0.5s;
|
||||
}
|
||||
.carousel-text-next-4 {
|
||||
left: 0;
|
||||
top: 400%;
|
||||
opacity: 0;
|
||||
}
|
||||
.carousel-text-next-4.transition-next {
|
||||
left: 0;
|
||||
top: 300%;
|
||||
opacity: 0.2;
|
||||
transition: all 0.5s;
|
||||
}
|
||||
.carousel-operator {
|
||||
position: absolute;
|
||||
top: calc(100% + 58rem);
|
||||
left: 0;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.carousel-operator img {
|
||||
cursor: pointer;
|
||||
}
|
||||
.carousel-operator-left img {
|
||||
margin-right: 14rem;
|
||||
}
|
||||
.carousel-operator-disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -185,21 +185,21 @@
|
|||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-col :span="9">
|
||||
<el-form-item label="遵守标准">
|
||||
<el-checkbox-group v-model="form.complianceStandards">
|
||||
<el-checkbox v-for="(item, index) in standardsList" :key="'standards' + index" :label="item.label" :value="item.value" />
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="7">
|
||||
<el-col :span="11">
|
||||
<el-form-item label="产品已获得的认证">
|
||||
<el-checkbox-group :max="1" v-model="form.productCertification">
|
||||
<el-checkbox v-for="(item, index) in authenticationList" :key="'authentication' + index" :label="item.label" :value="item.value" />
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="5">
|
||||
<el-col :span="4">
|
||||
<el-form-item label="" label-width="0rem">
|
||||
<el-input v-show="form.productCertification[0] == '其他说明'" v-model="form.otherNotes" placeholder="请输入其他说明" />
|
||||
</el-form-item>
|
||||
|
|
|
|||
|
|
@ -136,7 +136,7 @@
|
|||
<div class="wrapper1680">
|
||||
<div class="remarks">
|
||||
<span>如果您有【产业/产品/项目】需要策划操盘、资源导入、资本加持，如果您需要拓展华北、华东、华南或者国际市场，请填写申请表或者发送您的合作方案至以下</span>
|
||||
<a>邮箱：Info@futurestar.cc</a>
|
||||
<a>邮箱：Info@cnkhp.com</a>
|
||||
<span>若您的来信真实、完整、有效，我们将在5个工作日内给予回复，期待您的加入!</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -187,12 +187,12 @@ export default {
|
|||
children: [
|
||||
{ value: '资本服务' },
|
||||
{ value: '高新技术' },
|
||||
{ value: '能源环保' },
|
||||
{ value: '全球供应链' },
|
||||
{ value: '商业发展' },
|
||||
{ value: '未来农业' },
|
||||
{ value: '健康产业' },
|
||||
{ value: '大健康产业' },
|
||||
{ value: '基础设施' },
|
||||
{ value: '能源环保' },
|
||||
{ value: '供应链管理' },
|
||||
{ value: '农业发展' },
|
||||
{ value: '商业服务' },
|
||||
],
|
||||
},
|
||||
share: {
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user