|
|
|
|
@ -1,6 +1,6 @@ |
|
|
|
|
<template> |
|
|
|
|
<div class="wrap"> |
|
|
|
|
<el-carousel class="carousel" |
|
|
|
|
<el-carousel :class="['carousel']" |
|
|
|
|
:interval="6000" |
|
|
|
|
:arrow="(modules[0] && modules[0].list.filter(e => e.isEnable).length > 1) ? 'hover' : 'never'" |
|
|
|
|
:indicator-position="modules[0].list.filter(e => e.isEnable).length > 1 ? '' : 'none'"> |
|
|
|
|
@ -19,17 +19,15 @@ |
|
|
|
|
</el-carousel-item> |
|
|
|
|
</template> |
|
|
|
|
</el-carousel> |
|
|
|
|
|
|
|
|
|
<div :class="['block-wrap',{active: hide}]"> |
|
|
|
|
<div class="block" |
|
|
|
|
style="padding-top: 80px"> |
|
|
|
|
<div class="inner"> |
|
|
|
|
<h2 class="b-title wow fadeInUp">{{ modules[1].form.title }}</h2> |
|
|
|
|
<p class="intro wow fadeInUp" |
|
|
|
|
<h2 class="b-title">{{ modules[1].form.title }}</h2> |
|
|
|
|
<p class="intro" |
|
|
|
|
data-wow-delay="0.5s">{{ modules[1].form.des }}</p> |
|
|
|
|
<ul class="card"> |
|
|
|
|
<li class="wow fadeInDown" |
|
|
|
|
data-wow-delay="0.2s" |
|
|
|
|
:class="{'cursor-pointer': isLink(modules[2].form.link.linkName)}" |
|
|
|
|
<li :class="{'cursor-pointer': isLink(modules[2].form.link.linkName)}" |
|
|
|
|
@click="openLink(modules[2].form)"> |
|
|
|
|
<img class="pic" |
|
|
|
|
:src="modules[2].form.pic" |
|
|
|
|
@ -41,9 +39,7 @@ |
|
|
|
|
<p class="des">{{ modules[2].form.des }}</p> |
|
|
|
|
</div> |
|
|
|
|
</li> |
|
|
|
|
<li class="wow fadeInDown" |
|
|
|
|
data-wow-delay="0.6s" |
|
|
|
|
:class="{'cursor-pointer': isLink(modules[3].form.link.linkName)}" |
|
|
|
|
<li :class="{'cursor-pointer': isLink(modules[3].form.link.linkName)}" |
|
|
|
|
@click="openLink(modules[3].form)"> |
|
|
|
|
<img class="pic" |
|
|
|
|
:src="modules[3].form.pic" |
|
|
|
|
@ -279,7 +275,7 @@ |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
</div> |
|
|
|
|
<ul class="tools"> |
|
|
|
|
<template v-for="(item, i) in modules[19].list"> |
|
|
|
|
<li v-if="item.isEnable" |
|
|
|
|
@ -312,11 +308,15 @@ export default { |
|
|
|
|
curInd3: 0, |
|
|
|
|
curArticle3: {}, |
|
|
|
|
timer: null, |
|
|
|
|
hide: false, |
|
|
|
|
lastScrollTop: 0 |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
mounted () { |
|
|
|
|
this.height = window.innerHeight + 'px' |
|
|
|
|
new WOW().init() |
|
|
|
|
|
|
|
|
|
document.onscroll = this.throttle(this.scroll, 100) |
|
|
|
|
}, |
|
|
|
|
methods: { |
|
|
|
|
// 获取文章详情 |
|
|
|
|
@ -410,6 +410,43 @@ export default { |
|
|
|
|
// 右侧工具栏点击回调 |
|
|
|
|
toLink (item, i) { |
|
|
|
|
i ? this.openLink(item) : window.scrollTo(0, document.documentElement.scrollHeight) |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
scroll () { |
|
|
|
|
let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop |
|
|
|
|
|
|
|
|
|
console.log(33, this.lastScrollTop < scrollTop) |
|
|
|
|
if (this.lastScrollTop < scrollTop && scrollTop > 10) { |
|
|
|
|
this.hide = true |
|
|
|
|
} else if (this.lastScrollTop > scrollTop && scrollTop <= (window.innerWidth / 2.03)) { |
|
|
|
|
this.hide = false |
|
|
|
|
} |
|
|
|
|
this.lastScrollTop = scrollTop |
|
|
|
|
}, |
|
|
|
|
// 节流 |
|
|
|
|
throttle (fn, time) { |
|
|
|
|
// 上一次的执行时间 |
|
|
|
|
let pre = 0 |
|
|
|
|
let timeout = null |
|
|
|
|
return function (...args) { |
|
|
|
|
const now = Date.now() |
|
|
|
|
// 时间差超过了设定的时间间隔 |
|
|
|
|
if (now - pre > time) { |
|
|
|
|
pre = now |
|
|
|
|
fn.apply(this, args) |
|
|
|
|
} else { |
|
|
|
|
// 没有超过设定的时间间隔,则后续的事件会直接清除 |
|
|
|
|
if (timeout) { |
|
|
|
|
clearTimeout(timeout) |
|
|
|
|
timeout = null |
|
|
|
|
} |
|
|
|
|
// 最后一次的事件会触发 |
|
|
|
|
timeout = setTimeout(() => { |
|
|
|
|
pre = now |
|
|
|
|
fn.apply(this, args) |
|
|
|
|
}, time); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
@ -418,13 +455,19 @@ export default { |
|
|
|
|
<style lang="scss" scoped> |
|
|
|
|
@import url(../../plugins/wow/animate.css); |
|
|
|
|
@import '../../styles/page/page.scss'; |
|
|
|
|
$bannerHeight: calc(100vw / 2.03); |
|
|
|
|
.carousel { |
|
|
|
|
height: 100vh; |
|
|
|
|
z-index: 1; |
|
|
|
|
position: fixed; |
|
|
|
|
top: 0; |
|
|
|
|
left: 0; |
|
|
|
|
width: 100%; |
|
|
|
|
height: $bannerHeight; |
|
|
|
|
img { |
|
|
|
|
height: 100vh; |
|
|
|
|
height: $bannerHeight; |
|
|
|
|
} |
|
|
|
|
/deep/.el-carousel__container { |
|
|
|
|
height: 100vh; |
|
|
|
|
height: $bannerHeight; |
|
|
|
|
} |
|
|
|
|
.texts { |
|
|
|
|
position: absolute; |
|
|
|
|
@ -450,6 +493,17 @@ export default { |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.block-wrap { |
|
|
|
|
z-index: 2; |
|
|
|
|
position: relative; |
|
|
|
|
top: $bannerHeight; |
|
|
|
|
padding-bottom: 229px; |
|
|
|
|
background-color: #fff; |
|
|
|
|
transition: all 0.7s cubic-bezier(0.5, 0, 0.2, 1) 0s; |
|
|
|
|
&.active { |
|
|
|
|
top: 130px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.block { |
|
|
|
|
padding-top: 3.15rem; |
|
|
|
|
.b-title { |
|
|
|
|
@ -459,7 +513,7 @@ export default { |
|
|
|
|
} |
|
|
|
|
.intro { |
|
|
|
|
margin-bottom: 3.6rem; |
|
|
|
|
font-size: 30px; |
|
|
|
|
font-size: 26px; |
|
|
|
|
font-family: FZLTXHK--GBK1-0, FZLTXHK--GBK1; |
|
|
|
|
color: #5b5b5e; |
|
|
|
|
} |
|
|
|
|
@ -862,7 +916,7 @@ export default { |
|
|
|
|
overflow: hidden; |
|
|
|
|
.left { |
|
|
|
|
width: 50%; |
|
|
|
|
padding: 120px 80px 0 5%; |
|
|
|
|
padding: 50px 80px 0 5%; |
|
|
|
|
background: #111c43; |
|
|
|
|
} |
|
|
|
|
h6 { |
|
|
|
|
@ -879,16 +933,15 @@ export default { |
|
|
|
|
line-height: 2; |
|
|
|
|
} |
|
|
|
|
.el-button { |
|
|
|
|
font-size: 20px; |
|
|
|
|
font-size: 16px; |
|
|
|
|
border: 0; |
|
|
|
|
} |
|
|
|
|
.pic { |
|
|
|
|
width: 50%; |
|
|
|
|
min-height: 465px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.about { |
|
|
|
|
padding: 100px 0 229px; |
|
|
|
|
padding: 100px 0 0; |
|
|
|
|
background: url(http://10.10.11.7/images/iasf/12.png) 0 450px no-repeat; |
|
|
|
|
.about-bg { |
|
|
|
|
background-color: #0a7fec; |
|
|
|
|
@ -982,94 +1035,105 @@ export default { |
|
|
|
|
margin-right: 10px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
@media (max-width: 1470px) { |
|
|
|
|
.inner { |
|
|
|
|
width: 95%; |
|
|
|
|
} |
|
|
|
|
.card { |
|
|
|
|
li { |
|
|
|
|
height: auto; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.about { |
|
|
|
|
.pic { |
|
|
|
|
width: 700px; |
|
|
|
|
height: auto; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
@media (max-width: 1370px) { |
|
|
|
|
.card { |
|
|
|
|
.texts { |
|
|
|
|
padding: 0 1rem; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.about { |
|
|
|
|
.inner { |
|
|
|
|
height: auto; |
|
|
|
|
} |
|
|
|
|
.left { |
|
|
|
|
width: 100%; |
|
|
|
|
} |
|
|
|
|
.pic { |
|
|
|
|
position: static; |
|
|
|
|
width: auto; |
|
|
|
|
max-width: 100%; |
|
|
|
|
height: auto; |
|
|
|
|
margin-top: 10px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
@media (max-width: 1200px) { |
|
|
|
|
.carousel .texts { |
|
|
|
|
left: 5%; |
|
|
|
|
right: 5%; |
|
|
|
|
} |
|
|
|
|
.card { |
|
|
|
|
flex-direction: column; |
|
|
|
|
li { |
|
|
|
|
margin-top: 1.25rem; |
|
|
|
|
width: 100%; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.news { |
|
|
|
|
flex-direction: column; |
|
|
|
|
li { |
|
|
|
|
width: 100%; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.news-banner { |
|
|
|
|
flex-direction: column; |
|
|
|
|
.pic-wrap, |
|
|
|
|
.right { |
|
|
|
|
width: 100%; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.news-carousel, |
|
|
|
|
.people { |
|
|
|
|
flex-direction: column; |
|
|
|
|
li { |
|
|
|
|
width: 100%; |
|
|
|
|
margin-bottom: 10px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.talent { |
|
|
|
|
flex-direction: column; |
|
|
|
|
.left, |
|
|
|
|
.pic { |
|
|
|
|
width: 100%; |
|
|
|
|
} |
|
|
|
|
.left { |
|
|
|
|
padding-bottom: 50px; |
|
|
|
|
margin-bottom: 10px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.entry { |
|
|
|
|
flex-direction: column; |
|
|
|
|
li { |
|
|
|
|
width: 100% !important; |
|
|
|
|
margin-right: 0; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
// @media (max-width: 1470px) { |
|
|
|
|
// .carousel { |
|
|
|
|
// height: 724px; |
|
|
|
|
// img { |
|
|
|
|
// height: 724px; |
|
|
|
|
// } |
|
|
|
|
// /deep/.el-carousel__container { |
|
|
|
|
// height: 724px; |
|
|
|
|
// } |
|
|
|
|
// } |
|
|
|
|
// } |
|
|
|
|
// @media (max-width: 1470px) { |
|
|
|
|
// .inner { |
|
|
|
|
// width: 95%; |
|
|
|
|
// } |
|
|
|
|
// .card { |
|
|
|
|
// li { |
|
|
|
|
// height: auto; |
|
|
|
|
// } |
|
|
|
|
// } |
|
|
|
|
// .about { |
|
|
|
|
// .pic { |
|
|
|
|
// width: 700px; |
|
|
|
|
// height: auto; |
|
|
|
|
// } |
|
|
|
|
// } |
|
|
|
|
// } |
|
|
|
|
// @media (max-width: 1370px) { |
|
|
|
|
// .card { |
|
|
|
|
// .texts { |
|
|
|
|
// padding: 0 1rem; |
|
|
|
|
// } |
|
|
|
|
// } |
|
|
|
|
// .about { |
|
|
|
|
// .inner { |
|
|
|
|
// height: auto; |
|
|
|
|
// } |
|
|
|
|
// .left { |
|
|
|
|
// width: 100%; |
|
|
|
|
// } |
|
|
|
|
// .pic { |
|
|
|
|
// position: static; |
|
|
|
|
// width: auto; |
|
|
|
|
// max-width: 100%; |
|
|
|
|
// height: auto; |
|
|
|
|
// margin-top: 10px; |
|
|
|
|
// } |
|
|
|
|
// } |
|
|
|
|
// } |
|
|
|
|
// @media (max-width: 1200px) { |
|
|
|
|
// .carousel .texts { |
|
|
|
|
// left: 5%; |
|
|
|
|
// right: 5%; |
|
|
|
|
// } |
|
|
|
|
// .card { |
|
|
|
|
// flex-direction: column; |
|
|
|
|
// li { |
|
|
|
|
// margin-top: 1.25rem; |
|
|
|
|
// width: 100%; |
|
|
|
|
// } |
|
|
|
|
// } |
|
|
|
|
// .news { |
|
|
|
|
// flex-direction: column; |
|
|
|
|
// li { |
|
|
|
|
// width: 100%; |
|
|
|
|
// } |
|
|
|
|
// } |
|
|
|
|
// .news-banner { |
|
|
|
|
// flex-direction: column; |
|
|
|
|
// .pic-wrap, |
|
|
|
|
// .right { |
|
|
|
|
// width: 100%; |
|
|
|
|
// } |
|
|
|
|
// } |
|
|
|
|
// .news-carousel, |
|
|
|
|
// .people { |
|
|
|
|
// flex-direction: column; |
|
|
|
|
// li { |
|
|
|
|
// width: 100%; |
|
|
|
|
// margin-bottom: 10px; |
|
|
|
|
// } |
|
|
|
|
// } |
|
|
|
|
// .talent { |
|
|
|
|
// flex-direction: column; |
|
|
|
|
// .left, |
|
|
|
|
// .pic { |
|
|
|
|
// width: 100%; |
|
|
|
|
// } |
|
|
|
|
// .left { |
|
|
|
|
// padding-bottom: 50px; |
|
|
|
|
// margin-bottom: 10px; |
|
|
|
|
// } |
|
|
|
|
// } |
|
|
|
|
// .entry { |
|
|
|
|
// flex-direction: column; |
|
|
|
|
// li { |
|
|
|
|
// width: 100% !important; |
|
|
|
|
// margin-right: 0; |
|
|
|
|
// } |
|
|
|
|
// } |
|
|
|
|
// } |
|
|
|
|
</style> |
