odjbin/sist_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

dengjie commit : header区,新闻中心区部分修改样式

Browse Source
This commit is contained in:
clay
2022-10-04 15:51:38 +08:00
parent 6de202b5a7
commit 7ab4a674f0
3 changed files with 171 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files

159
src/views/anchor.vue
View File

@@ -1,6 +1,6 @@
<template> <template>
<div> <div>
<Index v-model="change"></Index> <Index/>
</div> </div>
</template> </template>
@@ -8,87 +8,88 @@
import Index from '@/views/index/index' import Index from '@/views/index/index'
export default { export default {
name: "anchor", name: "anchor",
components:{ components: {
Index Index
}, },
data() {
return {
screenWeight: 0, // 屏幕宽度
screenHeight: 0, // 屏幕高度
index: 1, // 用于判断翻页
curIndex: 1, // 当前页的index
startTime: 0, // 翻屏起始时间
endTime: 0, // 上一次翻屏结束时间
nowTop: 0, // 翻屏后top的位置
pageNum: 2, // 一共有多少页
main: Object,
obj: Object,
page2:Object,
change:0,
}
},
mounted() {
// 浏览器兼容
if ((navigator.userAgent.toLowerCase().indexOf("firefox") != -1)) {
document.addEventListener("DOMMouseScroll", this.scrollFun, false);
} else if (document.addEventListener) {
document.addEventListener("mousewheel", this.scrollFun, false);
} else if (document.attachEvent) {
document.attachEvent("onmousewheel", this.scrollFun);
} else {
document.onmousewheel = this.scrollFun;
}
},
beforeDestroy() { //及时释放
// 浏览器兼容
if ((navigator.userAgent.toLowerCase().indexOf("firefox") != -1)) {
document.removeEventListener("DOMMouseScroll", this.scrollFun, false);
} else if (document.addEventListener) {
document.removeEventListener("mousewheel", this.scrollFun, false);
} else if (document.attachEvent) {
document.removeEventListener("onmousewheel", this.scrollFun);
} else {
document.onmousewheel = this.scrollFun;
}
},
methods: {
scrollFun(event) {
//console.log(this.main,this.page2.offsetTop,this.screenHeight)
this.startTime = new Date().getTime();
// mousewheel事件中的 “event.wheelDelta” 属性值：返回的如果是正值说明滚轮是向上滚动
// DOMMouseScroll事件中的 “event.detail” 属性值：返回的如果是负值说明滚轮是向上滚动
let delta = event.detail || (-event.wheelDelta);
//console.log(delta)
// 如果当前滚动开始时间和上次滚动结束时间的差值小于1.5s，则不执行翻页动作，这样做是为了实现类似节流的效果
if ((this.startTime - this.endTime) > 1) {
if (delta > 0 && window.pageYOffset < window.innerHeight) {
// // 向下滚动
// this.index = 2;
// this.toPage(this.index);
console.log(window.innerHeight + 20);
console.log(window.innerWidth/2)
window.scrollTo({top: window.innerWidth/2, behavior: 'smooth',})
} else if (delta < 0 && window.pageYOffset <= window.innerHeight+200) {
// // 向上滚动
window.scrollTo({top: 0, behavior: 'smooth',})
}
// // 本次翻页结束，记录结束时间，用于下次判断
this.endTime = new Date().getTime();
}
},
// 翻页
toPage(index) {
if (index<=0){
return
}
if (index != this.curIndex) {
let delta = index - this.curIndex;
this.nowTop = this.nowTop - delta * this.screenHeight;
this.curIndex = index;
}
}
}
} }
// data() {
// return {
// screenWeight: 0, // 屏幕宽度
// screenHeight: 0, // 屏幕高度
// index: 1, // 用于判断翻页
// curIndex: 1, // 当前页的index
// startTime: 0, // 翻屏起始时间
// endTime: 0, // 上一次翻屏结束时间
// nowTop: 0, // 翻屏后top的位置
// pageNum: 2, // 一共有多少页
// main: Object,
// obj: Object,
// page2:Object,
// change:0,
// }
// },
// mounted() {
// // 浏览器兼容
// if ((navigator.userAgent.toLowerCase().indexOf("firefox") != -1)) {
// document.addEventListener("DOMMouseScroll", this.scrollFun, false);
// } else if (document.addEventListener) {
// document.addEventListener("mousewheel", this.scrollFun, false);
// } else if (document.attachEvent) {
// document.attachEvent("onmousewheel", this.scrollFun);
// } else {
// document.onmousewheel = this.scrollFun;
// }
// },
// beforeDestroy() { //及时释放
// // 浏览器兼容
// if ((navigator.userAgent.toLowerCase().indexOf("firefox") != -1)) {
// document.removeEventListener("DOMMouseScroll", this.scrollFun, false);
// } else if (document.addEventListener) {
// document.removeEventListener("mousewheel", this.scrollFun, false);
// } else if (document.attachEvent) {
// document.removeEventListener("onmousewheel", this.scrollFun);
// } else {
// document.onmousewheel = this.scrollFun;
// }
// },
// methods: {
// scrollFun(event) {
// //console.log(this.main,this.page2.offsetTop,this.screenHeight)
// this.startTime = new Date().getTime();
// // mousewheel事件中的 “event.wheelDelta” 属性值：返回的如果是正值说明滚轮是向上滚动
// // DOMMouseScroll事件中的 “event.detail” 属性值：返回的如果是负值说明滚轮是向上滚动
// let delta = event.detail || (-event.wheelDelta);
// //console.log(delta)
// // 如果当前滚动开始时间和上次滚动结束时间的差值小于1.5s，则不执行翻页动作，这样做是为了实现类似节流的效果
// if ((this.startTime - this.endTime) > 1) {
// if (delta > 0 && window.pageYOffset < window.innerHeight) {
// // // 向下滚动
// // this.index = 2;
// // this.toPage(this.index);
// console.log(window.innerHeight + 20);
// console.log(window.innerWidth/2)
// window.scrollTo({top: window.innerWidth/2, behavior: 'smooth',})
// } else if (delta < 0 && window.pageYOffset <= window.innerHeight+200) {
// // // 向上滚动
// window.scrollTo({top: 0, behavior: 'smooth',})
// }
// // // 本次翻页结束，记录结束时间，用于下次判断
// this.endTime = new Date().getTime();
// }
// },
// // 翻页
// toPage(index) {
// if (index<=0){
/* return*/
// }
// if (index != this.curIndex) {
// let delta = index - this.curIndex;
// this.nowTop = this.nowTop - delta * this.screenHeight;
// this.curIndex = index;
// }
// }
// }
// }
</script> </script>
<style scoped> <style scoped>

18
src/views/header/index.vue
View File

@@ -39,9 +39,9 @@
<!--导航部分--> <!--导航部分-->
<div class="bottom"> <div class="bottom">
<el-row> <el-row>
<!-- <el-col v-show="width" :span="1">--> <el-col v-show="width" :span="1">
<!-- <div class="grid-content"></div>--> <div class="grid-content"></div>
<!-- </el-col>--> </el-col>
<div class="bottom-div" style="margin-left: 1rem;"> <div class="bottom-div" style="margin-left: 1rem;">
<el-col v-show="width" :xs="1" :sm="1" :md="4" :lg="8" :xl="8"> <el-col v-show="width" :xs="1" :sm="1" :md="4" :lg="8" :xl="8">
<div class="icon"> <div class="icon">
@@ -158,10 +158,14 @@ export default {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.grid-content{
height: 1px;
}
.header { .header {
//width: 100rem; width: 100%;
width: 190.3rem;
margin: 0 auto; margin: 0 auto;
background: linear-gradient(180deg, rgba(61,96,163,0.91) 0%, rgba(61,96,163,0.64) 35%, rgba(61,96,163,0.42) 65%, rgba(73,133,234,0.33) 77%, rgba(73,133,234,0.02) 100%);
.top { .top {
font-size: 1.2rem; font-size: 1.2rem;
@@ -190,8 +194,8 @@ export default {
.bottom { .bottom {
height: 11rem; height: 11rem;
background: linear-gradient(180deg, rgba(61,96,163,0.91) 0%, rgba(61,96,163,0.64) 35%, rgba(61,96,163,0.42) 65%, rgba(73,133,234,0.33) 77%, rgba(73,133,234,0.02) 100%); //background: linear-gradient(180deg, rgba(61,96,163,0.91) 0%, rgba(61,96,163,0.64) 35%, rgba(61,96,163,0.42) 65%, rgba(73,133,234,0.33) 77%, rgba(73,133,234,0.02) 100%);
border-radius: 0rem 0rem 2rem 2rem; //border-radius: 0rem 0rem 2rem 2rem;
.icon { .icon {
margin-left: 4rem; margin-left: 4rem;

138
src/views/index/components/news_center.vue
View File

@@ -30,66 +30,83 @@
<div class="grid-content"></div> <div class="grid-content"></div>
</el-col> </el-col>
<el-col :span="14" class="news"> <el-col :span="14" class="news">
<div class="news_context"> <el-row>
<div class="news_context_img"> <el-col :span="6">
<img src="../../../assets/index/news_center/t4.png" alt=""> <div class="news_context">
</div> <div class="news_context_img">
<div class="news_context_text"> <img src="../../../assets/index/news_center/t4.png" alt="">
<div class="vline"> </div>
<div class="news_context_text-title">信息引领，勇于拼搏—信息搏…</div> <div class="news_context_text">
<div class="news_context_text-content">为促进学生学业发展学生学业学生学业学生学业、给予2021年转专业同学有针对性的帮助，信息科学与技术学院于10月26日开展…</div> <div class="vline">
<div class="news_context_time"> <div class="news_context_text-title">信息引领，勇于拼搏—信息搏…</div>
<div class="icon"><img src="../../../assets/index/news_center/shijian.png" alt=""></div> <div class="news_context_text-content">为促进学生学业发展学生学业学生学业学生学业、给予2021年转专业同学有针对性的帮助，信息科学与技术学院于10月26日开展…
<span class="time">2022-10-2</span> </div>
<div class="news_context_time">
<div class="icon"><img src="../../../assets/index/news_center/shijian.png" alt=""></div>
<span class="time">2022-10-2</span>
</div>
</div>
</div> </div>
</div> </div>
</div> </el-col>
</div> <el-col :span="6">
<div class="news_context"> <div class="news_context">
<div class="news_context_img"> <div class="news_context_img">
<img src="../../../assets/index/news_center/t4.png" alt=""> <img src="../../../assets/index/news_center/t4.png" alt="">
</div> </div>
<div class="news_context_text"> <div class="news_context_text">
<div class="vline"> <div class="vline">
<div class="news_context_text-title">信息引领，勇于拼搏—信息搏…</div> <div class="news_context_text-title">信息引领，勇于拼搏—信息搏…</div>
<div class="news_context_text-content">为促进学生学业发展学生学业学生学业学生学业、给予2021年转专业同学有针对性的帮助，信息科学与技术学院于10月26日开展…</div> <div class="news_context_text-content">为促进学生学业发展学生学业学生学业学生学业、给予2021年转专业同学有针对性的帮助，信息科学与技术学院于10月26日开展…
<div class="news_context_time"> </div>
<div class="icon"><img src="../../../assets/index/news_center/shijian.png" alt=""></div> <div class="news_context_time">
<span class="time">2022-10-2</span> <div class="icon"><img src="../../../assets/index/news_center/shijian.png" alt=""></div>
<span class="time">2022-10-2</span>
</div>
</div>
</div> </div>
</div> </div>
</div> </el-col>
</div> <el-col :span="6">
<div class="news_context"> <div class="news_context">
<div class="news_context_img"> <div class="news_context_img">
<img src="../../../assets/index/news_center/t4.png" alt=""> <img src="../../../assets/index/news_center/t4.png" alt="">
</div> </div>
<div class="news_context_text"> <div class="news_context_text">
<div class="vline"> <div class="vline">
<div class="news_context_text-title">信息引领，勇于拼搏—信息搏…</div> <div class="news_context_text-title">信息引领，勇于拼搏—信息搏…</div>
<div class="news_context_text-content">为促进学生学业发展学生学业学生学业学生学业、给予2021年转专业同学有针对性的帮助，信息科学与技术学院于10月26日开展…</div> <div class="news_context_text-content">为促进学生学业发展学生学业学生学业学生学业、给予2021年转专业同学有针对性的帮助，信息科学与技术学院于10月26日开展…
<div class="news_context_time"> </div>
<div class="icon"><img src="../../../assets/index/news_center/shijian.png" alt=""></div> <div class="news_context_time">
<span class="time">2022-10-2</span> <div class="icon"><img src="../../../assets/index/news_center/shijian.png" alt=""></div>
<span class="time">2022-10-2</span>
</div>
</div>
</div> </div>
</div> </div>
</div> </el-col>
</div> <el-col :span="6">
<div class="news_context"> <div class="news_context">
<div class="news_context_img"> <div class="news_context_img">
<img src="../../../assets/index/news_center/t4.png" alt=""> <img src="../../../assets/index/news_center/t4.png" alt="">
</div> </div>
<div class="news_context_text"> <div class="news_context_text">
<div class="vline"> <div class="vline">
<div class="news_context_text-title">信息引领，勇于拼搏—信息搏…</div> <div class="news_context_text-title">信息引领，勇于拼搏—信息搏…</div>
<div class="news_context_text-content">为促进学生学业发展学生学业学生学业学生学业、给予2021年转专业同学有针对性的帮助，信息科学与技术学院于10月26日开展…</div> <div class="news_context_text-content">为促进学生学业发展学生学业学生学业学生学业、给予2021年转专业同学有针对性的帮助，信息科学与技术学院于10月26日开展…
<div class="news_context_time"> </div>
<div class="icon"><img src="../../../assets/index/news_center/shijian.png" alt=""></div> <div class="news_context_time">
<span class="time">2022-10-2</span> <div class="icon"><img src="../../../assets/index/news_center/shijian.png" alt=""></div>
<span class="time">2022-10-2</span>
</div>
</div>
</div> </div>
</div> </div>
</div> </el-col>
</div> </el-row>
</el-col>
<el-col :span="5">
<div class="grid-content"></div>
</el-col> </el-col>
</el-row> </el-row>
@@ -148,6 +165,9 @@ export default {
.el-carousel__indicators { .el-carousel__indicators {
display: none; display: none;
} }
.grid-content {
height: 1px !important;
}
</style> </style>
<style scoped lang="scss"> <style scoped lang="scss">
@@ -220,34 +240,36 @@ export default {
} }
} }
} }
.vline:last-child{
.vline:last-child {
border: none; border: none;
} }
.news { .news {
//width: 106.3rem; //width: 106.3rem;
height: 36.9rem; height: 36.9rem;
background-color: #fff; background-color: #fff;
margin-top: 4rem; margin-top: 4rem;
display: flex;
.news_context:hover { .news_context:hover {
box-shadow: 0rem 0rem 0.7rem 0rem rgba(18, 69, 155, 0.59); box-shadow: 0rem 0rem 0.7rem 0rem rgba(18, 69, 155, 0.59);
} }
.news_context:last-child {
.news_context:last-child{
.news_context_text { .news_context_text {
.vline { .vline {
border:none !important; border: none !important;
} }
} }
} }
.news_context { .news_context {
cursor: pointer; cursor: pointer;
width: 28rem; //width: 28rem;
width: 100%;
height: 36.9rem; height: 36.9rem;
.news_context_img { .news_context_img {