jialong.yu
/
FE_IASF_client
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 3 Wiki Activity

中文网站首页banner吸附

Browse Source
master
yujialong 1 year ago
parent 3127624686
commit ef28afc850
8 changed files with 448 additions and 377 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. BIN
      src/assets/images/iasf1.png
  2. BIN
      src/assets/images/iasf2.png
  3. 73
      src/layouts/footer/index.vue
  4. 14
      src/layouts/header/index.vue
  5. 2
      src/layouts/home/index.vue
  6. 2
      src/pages/article/index.vue
  7. 732
      src/pages/iasf/index.vue
  8. 2
      src/store/index.js

BIN
src/assets/images/iasf1.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 26 KiB

BIN
src/assets/images/iasf2.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 37 KiB

73
src/layouts/footer/index.vue
Unescape View File

@ -254,6 +254,7 @@ export default {
margin-right: 100px; margin-right: 100px;
} }
.footer { .footer {
z-index: 2;
position: relative; position: relative;
padding: 64px 20% 25px; padding: 64px 20% 25px;
color: #fff; color: #fff;
@ -404,40 +405,40 @@ export default {
} }
} }
} }
@media (max-width: 1500px) { // @media (max-width: 1500px) {
.footer { // .footer {
padding: 64px 10% 25px; // padding: 64px 10% 25px;
} // }
} // }
@media (max-width: 1350px) { // @media (max-width: 1350px) {
.inner { // .inner {
width: 100% !important; // width: 100% !important;
.title { // .title {
width: 100%; // width: 100%;
text-align: center; // text-align: center;
} // }
.region { // .region {
top: 300px; // top: 300px;
left: 50%; // left: 50%;
} // }
.info { // .info {
margin-top: 90px; // margin-top: 90px;
} // }
} // }
.footer { // .footer {
.info { // .info {
flex-direction: column; // flex-direction: column;
.column { // .column {
margin-top: 20px; // margin-top: 20px;
margin-left: 0; // margin-left: 0;
} // }
} // }
} // }
.entry { // .entry {
flex-direction: column; // flex-direction: column;
li { // li {
margin-bottom: 30px; // margin-bottom: 30px;
} // }
} // }
} // }
</style> </style>

14
src/layouts/header/index.vue
Unescape View File

@ -7,7 +7,12 @@
alt=""> alt="">
</template> </template>
<template v-else> <template v-else>
<img :src="require('@/assets/images/' + (isSfel ? 'logo2' : isHome ? 'logo' : 'logo2') + '.png')" <img v-if="site == 2"
:src="require('@/assets/images/' + (isSfel ? 'iasf2' : isHome ? 'iasf' : 'iasf2') + '.png')"
alt=""
width="310">
<img v-else
:src="require('@/assets/images/' + (isSfel ? 'logo2' : isHome ? 'logo' : 'logo2') + '.png')"
alt=""> alt="">
</template> </template>
</a> </a>
@ -177,9 +182,9 @@ export default {
this.showMoreBtns = type this.showMoreBtns = type
}, },
// 获取页面滚动距离(home长页专用) // 获取页面滚动距离(home长页专用)
handleScroll () { handleScroll (e) {
if (Util.isIndex()) { if (Util.isIndex()) {
const h = this.height const h = this.isIasf ? 50 : this.height
let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
if (this.isHome == scrollTop > h) { if (this.isHome == scrollTop > h) {
if (this.isHome != !(scrollTop > h)) this.navShow = false if (this.isHome != !(scrollTop > h)) this.navShow = false
@ -254,7 +259,7 @@ $height: 90px;
background-color: rgba(0, 0, 0, 0.15); background-color: rgba(0, 0, 0, 0.15);
} }
.logo { .logo {
font-size: 1.428rem; font-size: 1.4rem;
color: #333330; color: #333330;
line-height: $height; line-height: $height;
cursor: pointer; cursor: pointer;
@ -263,6 +268,7 @@ $height: 90px;
} }
} }
.tools { .tools {
white-space: nowrap;
img { img {
cursor: pointer; cursor: pointer;
} }

2
src/layouts/home/index.vue
Unescape View File

@ -66,7 +66,7 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.main { .main {
min-width: 1300px; min-width: 1240px;
} }
.main:not(.channel) { .main:not(.channel) {
min-height: calc(100% - 90px); min-height: calc(100% - 90px);

2
src/pages/article/index.vue
Unescape View File

@ -118,7 +118,7 @@ export default {
this.$router.back() this.$router.back()
} else { } else {
const temId = data.articleTemplate const temId = data.articleTemplate
let path = `?articleId=${this.id}&id=${id}&columnName=${columnName || ''}&path=${path || ''}` let path = `?articleId=${this.id}&id=${id}&columnName=${columnName || ''}&siteId=${data.siteId}&path=${path || ''}`
if (temId === 25 || temId === 26) { // 会议活动/期刊详情 if (temId === 25 || temId === 26) { // 会议活动/期刊详情
this.$router.replace((temId === 25 ? '/article/activity' : '/publish/show') + path) this.$router.replace((temId === 25 ? '/article/activity' : '/publish/show') + path)
} else { } else {

732
src/pages/iasf/index.vue
Unescape View File

@ -1,6 +1,6 @@
<template> <template>
<div class="wrap"> <div class="wrap">
<el-carousel class="carousel" <el-carousel :class="['carousel']"
:interval="6000" :interval="6000"
:arrow="(modules[0] && modules[0].list.filter(e => e.isEnable).length > 1) ? 'hover' : 'never'" :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'"> :indicator-position="modules[0].list.filter(e => e.isEnable).length > 1 ? '' : 'none'">
@ -19,267 +19,263 @@
</el-carousel-item> </el-carousel-item>
</template> </template>
</el-carousel> </el-carousel>
<div :class="['block-wrap',{active: hide}]">
<div class="block" <div class="block"
style="padding-top: 80px"> style="padding-top: 80px">
<div class="inner"> <div class="inner">
<h2 class="b-title wow fadeInUp">{{ modules[1].form.title }}</h2> <h2 class="b-title">{{ modules[1].form.title }}</h2>
<p class="intro wow fadeInUp" <p class="intro"
data-wow-delay="0.5s">{{ modules[1].form.des }}</p> data-wow-delay="0.5s">{{ modules[1].form.des }}</p>
<ul class="card"> <ul class="card">
<li class="wow fadeInDown" <li :class="{'cursor-pointer': isLink(modules[2].form.link.linkName)}"
data-wow-delay="0.2s" @click="openLink(modules[2].form)">
:class="{'cursor-pointer': isLink(modules[2].form.link.linkName)}"
@click="openLink(modules[2].form)">
<img class="pic"
:src="modules[2].form.pic"
alt="">
<div class="project">SILF</div>
<div class="texts">
<div class="name">SILF</div>
<h6>{{ modules[2].form.title }}</h6>
<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)}"
@click="openLink(modules[3].form)">
<img class="pic"
:src="modules[3].form.pic"
alt="">
<div class="project">S³FEL</div>
<div class="texts">
<div class="name">S³FEL</div>
<h6>{{ modules[3].form.title }}</h6>
<p class="des">{{ modules[3].form.des }}</p>
</div>
</li>
</ul>
</div>
</div>
<div class="block news-wrap">
<div class="inner">
<h2 class="b-title wow fadeInUp">{{ modules[4].form.title }}</h2>
<p v-if="modules[4].form.des"
class="intro wow fadeInUp"
data-wow-delay="0.5s">{{ modules[4].form.des }}</p>
<div class="all-link"
@click="toAll(modules[5].form)">
<span>{{$t('column.seeMore')}} <img class="icon"
src="@/assets/images/arrow.png"
alt=""></span>
</div>
<template v-if="articles.length">
<div class="news-banner wow fadeInDown"
data-wow-delay="0.5s"
@click="toArtice(articles[0], modules[5].form)">
<div class="pic-wrap">
<img class="pic" <img class="pic"
width="100%" :src="modules[2].form.pic"
height="100%"
:src="articles[0].titleImg"
alt=""> alt="">
<div class="pic-cover"></div> <div class="project">SILF</div>
</div> <div class="texts">
<div class="right"> <div class="name">SILF</div>
<h6>{{ articles[0].title }}</h6> <h6>{{ modules[2].form.title }}</h6>
<div class="des" <p class="des">{{ modules[2].form.des }}</p>
v-html="articles[0].mainBody"></div> </div>
<p class="meta">{{ articles[0].releaseTime }} {{ articles[0].classificationName && ' | ' + articles[0].classificationName }}</p> </li>
</div> <li :class="{'cursor-pointer': isLink(modules[3].form.link.linkName)}"
</div> @click="openLink(modules[3].form)">
<img class="pic"
<ul class="news"> :src="modules[3].form.pic"
<template v-for="(item, i) in articles"> alt="">
<li v-if="i" <div class="project">S³FEL</div>
:key="i" <div class="texts">
class="wow fadeInDown" <div class="name">S³FEL</div>
:data-wow-delay="(0.1 * i).toFixed(1) + 's'" <h6>{{ modules[3].form.title }}</h6>
@click="toArtice(item, modules[5].form)"> <p class="des">{{ modules[3].form.des }}</p>
<div class="pic-wrap"> </div>
<img class="pic" </li>
:src="item.titleImg"
alt="">
<div class="pic-cover"></div>
</div>
<div class="texts">
<h6>{{ item.title }}</h6>
<div class="des"
v-html="item.mainBody"></div>
<p class="meta">{{ item.releaseTime }} {{ item.classificationName && ' | ' + item.classificationName }}</p>
</div>
</li>
</template>
</ul> </ul>
</template> </div>
<ul class="news-carousel"> </div>
<li v-if="articles1.length">
<img class="pic" <div class="block news-wrap">
src="http://10.10.11.7/images/iasf/8.png" <div class="inner">
alt=""> <h2 class="b-title wow fadeInUp">{{ modules[4].form.title }}</h2>
<div class="texts"> <p v-if="modules[4].form.des"
<h6 @click="toAll(modules[6].form)">{{ getColumnTitle(modules[6].form) }} <i class="el-icon-arrow-right"></i></h6> class="intro wow fadeInUp"
<div class="des-wrap"> data-wow-delay="0.5s">{{ modules[4].form.des }}</p>
<p class="meta">{{ curArticle1.source }}</p> <div class="all-link"
<div class="des" @click="toAll(modules[5].form)">
@click="toArtice(curArticle1, modules[6].form)">{{ curArticle1.title }}</div> <span>{{$t('column.seeMore')}} <img class="icon"
src="@/assets/images/arrow.png"
alt=""></span>
</div>
<template v-if="articles.length">
<div class="news-banner wow fadeInDown"
data-wow-delay="0.5s"
@click="toArtice(articles[0], modules[5].form)">
<div class="pic-wrap">
<img class="pic"
width="100%"
height="100%"
:src="articles[0].titleImg"
alt="">
<div class="pic-cover"></div>
</div> </div>
<p class="date">{{ curArticle1.releaseTime }}</p> <div class="right">
</div> <h6>{{ articles[0].title }}</h6>
<div class="action">
<i class="el-icon-arrow-left dir"
@click.stop="prevCarousel(1)"></i>
<ul class="inds">
<li v-for="i in articles1.length > 3 ? 4 : articles1.length"
:key="i"
:class="{active: curInd1 == i - 1}"
@click.stop="switchCarousel(1, i - 1)"></li>
</ul>
<i class="el-icon-arrow-right dir"
@click.stop="nextCarousel(1)"></i>
</div>
</li>
<li v-if="articles2.length">
<img class="pic"
src="http://10.10.11.7/images/iasf/9.png"
alt="">
<div class="texts">
<h6 @click="toAll(modules[7].form)">{{ getColumnTitle(modules[7].form) }} <i class="el-icon-arrow-right"></i></h6>
<div class="des-wrap">
<p class="meta">{{ curArticle2.classificationName }}</p>
<div class="des" <div class="des"
@click="toArtice(curArticle2, modules[7].form)">{{ curArticle2.title }}</div> v-html="articles[0].mainBody"></div>
<p class="meta">{{ articles[0].releaseTime }} {{ articles[0].classificationName && ' | ' + articles[0].classificationName }}</p>
</div> </div>
<p class="date">{{ curArticle2.releaseTime }}</p>
</div> </div>
<div class="action">
<i class="el-icon-arrow-left dir" <ul class="news">
@click.stop="prevCarousel(2)"></i> <template v-for="(item, i) in articles">
<ul class="inds"> <li v-if="i"
<li v-for="i in articles2.length > 3 ? 4 : articles2.length"
:key="i" :key="i"
:class="{active: curInd2 == i - 1}" class="wow fadeInDown"
@click.stop="switchCarousel(2, i - 1)"></li> :data-wow-delay="(0.1 * i).toFixed(1) + 's'"
</ul> @click="toArtice(item, modules[5].form)">
<i class="el-icon-arrow-right dir" <div class="pic-wrap">
@click.stop="nextCarousel(2)"></i> <img class="pic"
</div> :src="item.titleImg"
</li> alt="">
<li v-if="articles3.length"> <div class="pic-cover"></div>
<img class="pic" </div>
src="http://10.10.11.7/images/iasf/10.png" <div class="texts">
alt=""> <h6>{{ item.title }}</h6>
<div class="texts"> <div class="des"
<h6 @click="toAll(modules[8].form)">{{ getColumnTitle(modules[8].form) }} <i class="el-icon-arrow-right"></i></h6> v-html="item.mainBody"></div>
<div class="activity"> <p class="meta">{{ item.releaseTime }} {{ item.classificationName && ' | ' + item.classificationName }}</p>
<div v-if="curArticle3.activityStartTime" </div>
class="date-y"> </li>
<p class="d">{{ curArticle3.activityStartTime.split(' ')[0].split('-')[2] }}</p> </template>
<p class="y">{{ curArticle3.activityStartTime.split(' ')[0].split('-')[0] + '-' + curArticle3.activityStartTime.split(' ')[0].split('-')[1] }}</p> </ul>
</template>
<ul class="news-carousel">
<li v-if="articles1.length">
<img class="pic"
src="http://10.10.11.7/images/iasf/8.png"
alt="">
<div class="texts">
<h6 @click="toAll(modules[6].form)">{{ getColumnTitle(modules[6].form) }} <i class="el-icon-arrow-right"></i></h6>
<div class="des-wrap">
<p class="meta">{{ curArticle1.source }}</p>
<div class="des"
@click="toArtice(curArticle1, modules[6].form)">{{ curArticle1.title }}</div>
</div> </div>
<p class="date">{{ curArticle1.releaseTime }}</p>
</div>
<div class="action">
<i class="el-icon-arrow-left dir"
@click.stop="prevCarousel(1)"></i>
<ul class="inds">
<li v-for="i in articles1.length > 3 ? 4 : articles1.length"
:key="i"
:class="{active: curInd1 == i - 1}"
@click.stop="switchCarousel(1, i - 1)"></li>
</ul>
<i class="el-icon-arrow-right dir"
@click.stop="nextCarousel(1)"></i>
</div>
</li>
<li v-if="articles2.length">
<img class="pic"
src="http://10.10.11.7/images/iasf/9.png"
alt="">
<div class="texts">
<h6 @click="toAll(modules[7].form)">{{ getColumnTitle(modules[7].form) }} <i class="el-icon-arrow-right"></i></h6>
<div class="des-wrap"> <div class="des-wrap">
<p class="meta">{{ curArticle3.classificationName }}</p> <p class="meta">{{ curArticle2.classificationName }}</p>
<div class="des" <div class="des"
@click="toArtice(curArticle3, modules[8].form)">{{ curArticle3.title }}</div> @click="toArtice(curArticle2, modules[7].form)">{{ curArticle2.title }}</div>
</div> </div>
<p class="date">{{ curArticle2.releaseTime }}</p>
</div> </div>
</div> <div class="action">
<div class="action"> <i class="el-icon-arrow-left dir"
<i class="el-icon-arrow-left dir" @click.stop="prevCarousel(2)"></i>
@click.stop="prevCarousel(3)"></i> <ul class="inds">
<ul class="inds"> <li v-for="i in articles2.length > 3 ? 4 : articles2.length"
<li v-for="i in articles3.length > 3 ? 4 : articles3.length" :key="i"
:key="i" :class="{active: curInd2 == i - 1}"
:class="{active: curInd3 == i - 1}" @click.stop="switchCarousel(2, i - 1)"></li>
@click.stop="switchCarousel(3, i - 1)"></li> </ul>
</ul> <i class="el-icon-arrow-right dir"
<i class="el-icon-arrow-right dir" @click.stop="nextCarousel(2)"></i>
@click.stop="nextCarousel(3)"></i> </div>
</div> </li>
</li> <li v-if="articles3.length">
</ul> <img class="pic"
</div> src="http://10.10.11.7/images/iasf/10.png"
</div> alt="">
<div class="texts">
<div class="block people-block"> <h6 @click="toAll(modules[8].form)">{{ getColumnTitle(modules[8].form) }} <i class="el-icon-arrow-right"></i></h6>
<div class="inner"> <div class="activity">
<h2 class="b-title wow fadeInUp">{{ modules[9].form.title }}</h2> <div v-if="curArticle3.activityStartTime"
<p class="intro wow fadeInUp" class="date-y">
data-wow-delay="0.5s">{{ modules[9].form.des }}</p> <p class="d">{{ curArticle3.activityStartTime.split(' ')[0].split('-')[2] }}</p>
<ul v-if="articles4.length" <p class="y">{{ curArticle3.activityStartTime.split(' ')[0].split('-')[0] + '-' + curArticle3.activityStartTime.split(' ')[0].split('-')[1] }}</p>
class="people"> </div>
<li v-for="(item, i) in articles4" <div class="des-wrap">
:key="i" <p class="meta">{{ curArticle3.classificationName }}</p>
@click="toArtice(item, modules[10].form)" <div class="des"
class="wow fadeInDown"> @click="toArtice(curArticle3, modules[8].form)">{{ curArticle3.title }}</div>
<img class="pic" </div>
:src="item.titleImg" </div>
alt=""> </div>
<div class="texts"> <div class="action">
<h6>{{ item.title }}</h6> <i class="el-icon-arrow-left dir"
<p class="job">岗位：{{ item.post }}</p> @click.stop="prevCarousel(3)"></i>
<p class="hobby">爱好：{{ item.hobby }}</p> <ul class="inds">
<div class="text" <li v-for="i in articles3.length > 3 ? 4 : articles3.length"
v-html="item.mainBody"></div> :key="i"
</div> :class="{active: curInd3 == i - 1}"
</li> @click.stop="switchCarousel(3, i - 1)"></li>
</ul> </ul>
<div class="all-link" <i class="el-icon-arrow-right dir"
@click="toAll(modules[10].form)"> @click.stop="nextCarousel(3)"></i>
<span>{{$t('column.all')}} <img class="icon" </div>
src="@/assets/images/arrow.png" </li>
alt=""></span> </ul>
</div> </div>
</div> </div>
</div>
<div class="block talent-block"> <div class="block people-block">
<div class="inner"> <div class="inner">
<h2 class="b-title wow fadeInUp">{{ modules[11].form.title }}</h2> <h2 class="b-title wow fadeInUp">{{ modules[9].form.title }}</h2>
<p class="intro wow fadeInUp" <p class="intro wow fadeInUp"
data-wow-delay="0.5s">{{ modules[11].form.des }}</p> data-wow-delay="0.5s">{{ modules[9].form.des }}</p>
<div class="talent"> <ul v-if="articles4.length"
<div class="left wow fadeInLeft" class="people">
data-wow-delay="0.5s"> <li v-for="(item, i) in articles4"
<h6>{{ modules[12].form.title }}</h6> :key="i"
<p class="sub-title">{{ modules[12].form.subTitle }}</p> @click="toArtice(item, modules[10].form)"
<div class="text" class="wow fadeInDown">
v-html="modules[12].form.des"></div> <img class="pic"
<el-button v-if="isLink(modules[12].form.link.linkName)" :src="item.titleImg"
style="background-color: #026BE1;" alt="">
type="primary" <div class="texts">
round <h6>{{ item.title }}</h6>
@click="openLink(modules[12].form)">诚邀海内外人才加入我们 ></el-button> <p class="job">岗位：{{ item.post }}</p>
<p class="hobby">爱好：{{ item.hobby }}</p>
<div class="text"
v-html="item.mainBody"></div>
</div>
</li>
</ul>
<div class="all-link"
@click="toAll(modules[10].form)">
<span>{{$t('column.all')}} <img class="icon"
src="@/assets/images/arrow.png"
alt=""></span>
</div> </div>
<img :src="modules[12].form.pic"
alt=""
class="pic wow fadeInRight"
data-wow-delay="0.5s">
</div> </div>
</div> </div>
</div>
<div class="about"> <div class="block talent-block">
<div class="about-bg">
<div class="inner"> <div class="inner">
<div class="left"> <h2 class="b-title wow fadeInUp">{{ modules[11].form.title }}</h2>
<h6>{{ modules[13].form.title }}</h6> <p class="intro wow fadeInUp"
<div class="text" data-wow-delay="0.5s">{{ modules[11].form.des }}</p>
v-html="modules[13].form.des"></div> <div class="talent">
<img src="@/assets/images/arrow-white.png" <div class="left wow fadeInLeft"
data-wow-delay="0.5s">
<h6>{{ modules[12].form.title }}</h6>
<p class="sub-title">{{ modules[12].form.subTitle }}</p>
<div class="text"
v-html="modules[12].form.des"></div>
<el-button v-if="isLink(modules[12].form.link.linkName)"
style="background-color: #026BE1;"
type="primary"
round
@click="openLink(modules[12].form)">诚邀海内外人才加入我们 ></el-button>
</div>
<img :src="modules[12].form.pic"
alt="" alt=""
:class="{'arrow': isLink(modules[13].form.link.linkName)}" class="pic wow fadeInRight"
@click="openLink(modules[13].form)"> data-wow-delay="0.5s">
</div> </div>
<img class="pic"
:src="modules[13].form.pic"
alt="">
</div> </div>
</div> </div>
</div>
<div class="about">
<div class="about-bg">
<div class="inner">
<div class="left">
<h6>{{ modules[13].form.title }}</h6>
<div class="text"
v-html="modules[13].form.des"></div>
<img src="@/assets/images/arrow-white.png"
alt=""
:class="{'arrow': isLink(modules[13].form.link.linkName)}"
@click="openLink(modules[13].form)">
</div>
<img class="pic"
:src="modules[13].form.pic"
alt="">
</div>
</div>
</div>
</div>
<ul class="tools"> <ul class="tools">
<template v-for="(item, i) in modules[19].list"> <template v-for="(item, i) in modules[19].list">
<li v-if="item.isEnable" <li v-if="item.isEnable"
@ -312,11 +308,15 @@ export default {
curInd3: 0, curInd3: 0,
curArticle3: {}, curArticle3: {},
timer: null, timer: null,
hide: false,
lastScrollTop: 0
} }
}, },
mounted () { mounted () {
this.height = window.innerHeight + 'px' this.height = window.innerHeight + 'px'
new WOW().init() new WOW().init()
document.onscroll = this.throttle(this.scroll, 100)
}, },
methods: { methods: {
// 获取文章详情 // 获取文章详情
@ -410,6 +410,43 @@ export default {
// 右侧工具栏点击回调 // 右侧工具栏点击回调
toLink (item, i) { toLink (item, i) {
i ? this.openLink(item) : window.scrollTo(0, document.documentElement.scrollHeight) 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> <style lang="scss" scoped>
@import url(../../plugins/wow/animate.css); @import url(../../plugins/wow/animate.css);
@import '../../styles/page/page.scss'; @import '../../styles/page/page.scss';
$bannerHeight: calc(100vw / 2.03);
.carousel { .carousel {
height: 100vh; z-index: 1;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: $bannerHeight;
img { img {
height: 100vh; height: $bannerHeight;
} }
/deep/.el-carousel__container { /deep/.el-carousel__container {
height: 100vh; height: $bannerHeight;
} }
.texts { .texts {
position: absolute; 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 { .block {
padding-top: 3.15rem; padding-top: 3.15rem;
.b-title { .b-title {
@ -459,7 +513,7 @@ export default {
} }
.intro { .intro {
margin-bottom: 3.6rem; margin-bottom: 3.6rem;
font-size: 30px; font-size: 26px;
font-family: FZLTXHK--GBK1-0, FZLTXHK--GBK1; font-family: FZLTXHK--GBK1-0, FZLTXHK--GBK1;
color: #5b5b5e; color: #5b5b5e;
} }
@ -862,7 +916,7 @@ export default {
overflow: hidden; overflow: hidden;
.left { .left {
width: 50%; width: 50%;
padding: 120px 80px 0 5%; padding: 50px 80px 0 5%;
background: #111c43; background: #111c43;
} }
h6 { h6 {
@ -879,16 +933,15 @@ export default {
line-height: 2; line-height: 2;
} }
.el-button { .el-button {
font-size: 20px; font-size: 16px;
border: 0; border: 0;
} }
.pic { .pic {
width: 50%; width: 50%;
min-height: 465px;
} }
} }
.about { .about {
padding: 100px 0 229px; padding: 100px 0 0;
background: url(http://10.10.11.7/images/iasf/12.png) 0 450px no-repeat; background: url(http://10.10.11.7/images/iasf/12.png) 0 450px no-repeat;
.about-bg { .about-bg {
background-color: #0a7fec; background-color: #0a7fec;
@ -982,94 +1035,105 @@ export default {
margin-right: 10px; margin-right: 10px;
} }
} }
@media (max-width: 1470px) { // @media (max-width: 1470px) {
.inner { // .carousel {
width: 95%; // height: 724px;
} // img {
.card { // height: 724px;
li { // }
height: auto; // /deep/.el-carousel__container {
} // height: 724px;
} // }
.about { // }
.pic { // }
width: 700px; // @media (max-width: 1470px) {
height: auto; // .inner {
} // width: 95%;
} // }
} // .card {
@media (max-width: 1370px) { // li {
.card { // height: auto;
.texts { // }
padding: 0 1rem; // }
} // .about {
} // .pic {
.about { // width: 700px;
.inner { // height: auto;
height: auto; // }
} // }
.left { // }
width: 100%; // @media (max-width: 1370px) {
} // .card {
.pic { // .texts {
position: static; // padding: 0 1rem;
width: auto; // }
max-width: 100%; // }
height: auto; // .about {
margin-top: 10px; // .inner {
} // height: auto;
} // }
} // .left {
@media (max-width: 1200px) { // width: 100%;
.carousel .texts { // }
left: 5%; // .pic {
right: 5%; // position: static;
} // width: auto;
.card { // max-width: 100%;
flex-direction: column; // height: auto;
li { // margin-top: 10px;
margin-top: 1.25rem; // }
width: 100%; // }
} // }
} // @media (max-width: 1200px) {
.news { // .carousel .texts {
flex-direction: column; // left: 5%;
li { // right: 5%;
width: 100%; // }
} // .card {
} // flex-direction: column;
.news-banner { // li {
flex-direction: column; // margin-top: 1.25rem;
.pic-wrap, // width: 100%;
.right { // }
width: 100%; // }
} // .news {
} // flex-direction: column;
.news-carousel, // li {
.people { // width: 100%;
flex-direction: column; // }
li { // }
width: 100%; // .news-banner {
margin-bottom: 10px; // flex-direction: column;
} // .pic-wrap,
} // .right {
.talent { // width: 100%;
flex-direction: column; // }
.left, // }
.pic { // .news-carousel,
width: 100%; // .people {
} // flex-direction: column;
.left { // li {
padding-bottom: 50px; // width: 100%;
margin-bottom: 10px; // margin-bottom: 10px;
} // }
} // }
.entry { // .talent {
flex-direction: column; // flex-direction: column;
li { // .left,
width: 100% !important; // .pic {
margin-right: 0; // width: 100%;
} // }
} // .left {
} // padding-bottom: 50px;
// margin-bottom: 10px;
// }
// }
// .entry {
// flex-direction: column;
// li {
// width: 100% !important;
// margin-right: 0;
// }
// }
// }
</style> </style>

2
src/store/index.js
Unescape View File

@ -20,7 +20,7 @@ const modules = modulesFiles.keys().reduce((modules, modulePath) => {
const store = new Vuex.Store({ const store = new Vuex.Store({
state: { state: {
modelType: false, //true为PC端，false为手机端 modelType: false, //true为PC端，false为手机端
navSum: sessionStorage.getItem('navPageSize') || 10, // 导航栏显示的条目数量 navSum: sessionStorage.getItem('navPageSize') || 8, // 导航栏显示的条目数量
}, },
mutations: { mutations: {
// 根据屏幕尺寸分别移动或者pc // 根据屏幕尺寸分别移动或者pc

Write Preview
Loading…
Cancel
Save