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. 282
      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 {

282
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,17 +19,15 @@
</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"
:class="{'cursor-pointer': isLink(modules[2].form.link.linkName)}"
@click="openLink(modules[2].form)"> @click="openLink(modules[2].form)">
<img class="pic" <img class="pic"
:src="modules[2].form.pic" :src="modules[2].form.pic"
@ -41,9 +39,7 @@
<p class="des">{{ modules[2].form.des }}</p> <p class="des">{{ modules[2].form.des }}</p>
</div> </div>
</li> </li>
<li class="wow fadeInDown" <li :class="{'cursor-pointer': isLink(modules[3].form.link.linkName)}"
data-wow-delay="0.6s"
:class="{'cursor-pointer': isLink(modules[3].form.link.linkName)}"
@click="openLink(modules[3].form)"> @click="openLink(modules[3].form)">
<img class="pic" <img class="pic"
:src="modules[3].form.pic" :src="modules[3].form.pic"
@ -279,7 +275,7 @@
</div> </div>
</div> </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