rem
This commit is contained in:
clay
@@ -8,100 +8,104 @@
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :offset="3" :span="18">
|
||||
<!--正文部分-->
|
||||
<div class="news_center">
|
||||
<!--标题-->
|
||||
<div class="title">{{ $t('message.news_center') }}</div>
|
||||
<div class="divider">
|
||||
<div class="divider_left">
|
||||
<img src="@/assets/index/sy_icon_gd.png" alt="">
|
||||
<!--新闻中心-->
|
||||
<div class="new_center">
|
||||
<el-row>
|
||||
<el-col :offset="3" :span="18">
|
||||
<!--正文部分-->
|
||||
<div class="news_center">
|
||||
<!--标题-->
|
||||
<div class="title">{{ $t('message.news_center') }}</div>
|
||||
<div class="divider">
|
||||
<div class="divider_left">
|
||||
<img src="@/assets/index/sy_icon_gd.png" alt="">
|
||||
</div>
|
||||
<div class="name">News Center</div>
|
||||
<div class="divider_right">
|
||||
<img src="@/assets/index/sy_icon_gd1.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="name">News Center</div>
|
||||
<div class="divider_right">
|
||||
<img src="@/assets/index/sy_icon_gd1.png" alt="">
|
||||
<!--录播图-->
|
||||
<div class="slideshow">
|
||||
<el-carousel trigger="click" height="51rem">
|
||||
<el-carousel-item v-for="item in 4" :key="item">
|
||||
<div>
|
||||
<img src="@/assets/index/t1@2x.png" alt="">
|
||||
<div class="bottom_title">
|
||||
<el-row>
|
||||
<el-col :offset="2" :span="18">
|
||||
{{ item }}sdamdnalkdasdnlkadlajsdlksadjajdknakdnakldnlasnlsa
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
</div>
|
||||
<!--轮播图下的新闻-->
|
||||
<div class="new_context">
|
||||
<el-row>
|
||||
<el-col :span="6">
|
||||
<div class="new_content">
|
||||
<div class="thumbnail">
|
||||
<img src="@/assets/index/t2.png" alt="">
|
||||
</div>
|
||||
<div class="new_title">
|
||||
<p>
|
||||
信息引领，勇于拼搏——信息科学与技术学院在全校教职工篮球赛获佳绩
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="new_content">
|
||||
<div class="thumbnail">
|
||||
<img src="@/assets/index/t2.png" alt="">
|
||||
</div>
|
||||
<div class="new_title">
|
||||
<p>
|
||||
信息引领，勇于拼搏——信息科学与技术学院在全校教职工篮球赛获佳绩
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="new_content">
|
||||
<div class="thumbnail">
|
||||
<img src="@/assets/index/t2.png" alt="">
|
||||
</div>
|
||||
<div class="new_title">
|
||||
<p>
|
||||
信息引领，勇于拼搏——信息科学与技术学院在全校教职工篮球赛获佳绩
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="new_content">
|
||||
<div class="thumbnail">
|
||||
<img src="@/assets/index/t2.png" alt="">
|
||||
</div>
|
||||
<div class="new_title">
|
||||
<p>
|
||||
信息引领，勇于拼搏——信息科学与技术学院在全校教职工篮球赛获佳绩
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
<!--录播图-->
|
||||
<div class="slideshow">
|
||||
<el-carousel trigger="click" height="51rem">
|
||||
<el-carousel-item v-for="item in 4" :key="item">
|
||||
<div>
|
||||
<img src="@/assets/index/t1@2x.png" alt="">
|
||||
<div class="bottom_title">
|
||||
<el-row>
|
||||
<el-col :offset="2" :span="18">
|
||||
{{ item }}sdamdnalkdasdnlkadlajsdlksadjajdknakdnakldnlasnlsa
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
</div>
|
||||
<!--轮播图下的新闻-->
|
||||
<div class="new_context">
|
||||
<el-row>
|
||||
<el-col :span="6">
|
||||
<div class="new_content">
|
||||
<div class="thumbnail">
|
||||
<img src="@/assets/index/t2.png" alt="">
|
||||
</div>
|
||||
<div class="new_title">
|
||||
<p>
|
||||
信息引领，勇于拼搏——信息科学与技术学院在全校教职工篮球赛获佳绩
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="new_content">
|
||||
<div class="thumbnail">
|
||||
<img src="@/assets/index/t2.png" alt="">
|
||||
</div>
|
||||
<div class="new_title">
|
||||
<p>
|
||||
信息引领，勇于拼搏——信息科学与技术学院在全校教职工篮球赛获佳绩
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="new_content">
|
||||
<div class="thumbnail">
|
||||
<img src="@/assets/index/t2.png" alt="">
|
||||
</div>
|
||||
<div class="new_title">
|
||||
<p>
|
||||
信息引领，勇于拼搏——信息科学与技术学院在全校教职工篮球赛获佳绩
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="new_content">
|
||||
<div class="thumbnail">
|
||||
<img src="@/assets/index/t2.png" alt="">
|
||||
</div>
|
||||
<div class="new_title">
|
||||
<p>
|
||||
信息引领，勇于拼搏——信息科学与技术学院在全校教职工篮球赛获佳绩
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--更多-->
|
||||
<div class="more_title">{{ $t('message.more') }}</div>
|
||||
<div class="more_img">
|
||||
<img src="@/assets/index/sy_icon_zhdl.png" alt="">
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!--更多-->
|
||||
<div class="more_title">{{ $t('message.more') }}</div>
|
||||
<div class="more_img">
|
||||
<img src="@/assets/index/sy_icon_zhdl.png" alt="">
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<!--科学研究-->
|
||||
<div class="scientific_research">
|
||||
<el-row>
|
||||
<el-col :offset="3" :span="18">
|
||||
@@ -119,7 +123,7 @@
|
||||
</div>
|
||||
|
||||
<el-row>
|
||||
<el-col :offset="3" span="18">
|
||||
<el-col :offset="3" :span="18">
|
||||
<div class="first">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
@@ -265,9 +269,125 @@
|
||||
</div>
|
||||
</div>
|
||||
<el-row>
|
||||
<el-col :offset="3" span="18">
|
||||
<el-col :offset="3" :span="18">
|
||||
<div class="communication">
|
||||
<div class="communication_row">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-row>
|
||||
<el-col :span="3">
|
||||
<div class="communication_img">
|
||||
<img src="@/assets/index/sy_icon_b1.png" alt="">
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="16"><span>上海交通大学郁昱教授学术报告</span></el-col>
|
||||
<el-col :span="4">
|
||||
<div class="communication_time">
|
||||
2021.10.11
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div style="margin:2rem 0 2rem 4rem">
|
||||
<hr style="width: 40rem; border: 0.1rem solid #E6E6E6;">
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-row>
|
||||
<el-col :span="3">
|
||||
<div class="communication_img">
|
||||
<img src="@/assets/index/sy_icon_b1.png" alt="">
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="16"><span>上海交通大学郁昱教授学术报告</span></el-col>
|
||||
<el-col :span="4">
|
||||
<div class="communication_time">
|
||||
2021.10.11
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div style="margin:2rem 0 2rem 4rem">
|
||||
<hr style="width: 40rem; border: 0.1rem solid #E6E6E6;">
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-row>
|
||||
<el-col :span="3">
|
||||
<div class="communication_img">
|
||||
<img src="@/assets/index/sy_icon_b1.png" alt="">
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="16"><span>上海交通大学郁昱教授学术报告</span></el-col>
|
||||
<el-col :span="4">
|
||||
<div class="communication_time">
|
||||
2021.10.11
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div style="margin:2rem 0 2rem 4rem">
|
||||
<hr style="width: 40rem; border: 0.1rem solid #E6E6E6;">
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-row>
|
||||
<el-col :span="3">
|
||||
<div class="communication_img">
|
||||
<img src="@/assets/index/sy_icon_b1.png" alt="">
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="16"><span>上海交通大学郁昱教授学术报告</span></el-col>
|
||||
<el-col :span="4">
|
||||
<div class="communication_time">
|
||||
2021.10.11
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div style="margin:2rem 0 2rem 4rem">
|
||||
<hr style="width: 40rem; border: 0.1rem solid #E6E6E6;">
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-row>
|
||||
<el-col :span="3">
|
||||
<div class="communication_img">
|
||||
<img src="@/assets/index/sy_icon_b1.png" alt="">
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="16"><span>上海交通大学郁昱教授学术报告</span></el-col>
|
||||
<el-col :span="4">
|
||||
<div class="communication_time">
|
||||
2021.10.11
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div style="margin:2rem 0 0 4rem">
|
||||
<!--<hr style="width: 40rem; border: 0.1rem solid #E6E6E6;">-->
|
||||
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-row>
|
||||
<el-col :span="3">
|
||||
<div class="communication_img">
|
||||
<img src="@/assets/index/sy_icon_b1.png" alt="">
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="16"><span>上海交通大学郁昱教授学术报告</span></el-col>
|
||||
<el-col :span="4">
|
||||
<div class="communication_time">
|
||||
2021.10.11
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div style="margin:2rem 0 0 4rem">
|
||||
<!--<hr style="width: 40rem; border: 0.1rem solid #E6E6E6;">-->
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
@@ -283,6 +403,7 @@
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<!--党群工作-->
|
||||
<div class="party_building_active">
|
||||
|
||||
<el-row>
|
||||
@@ -418,6 +539,7 @@
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<!--教学工作-->
|
||||
<div class="teaching_and_student">
|
||||
<el-row>
|
||||
<el-col :offset="3" :span="18">
|
||||
@@ -603,62 +725,69 @@
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<!--下方开始-->
|
||||
<div class="bottom">
|
||||
<el-row>
|
||||
<el-col :offset="5" :span="12">
|
||||
<div class="table">
|
||||
<table>
|
||||
<tr>
|
||||
<td rowspan="6">
|
||||
<div class="left">
|
||||
<div class="table_img">
|
||||
<img src="@/assets/index/sy_icon_sjzx.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td width="45rem">
|
||||
<div class="right">
|
||||
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="right">
|
||||
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="right">
|
||||
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="right">
|
||||
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="right">
|
||||
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="right">
|
||||
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div class="table">
|
||||
<table>
|
||||
<tr>
|
||||
<td rowspan="6">
|
||||
<div class="left">
|
||||
<div class="table_img">
|
||||
<img src="@/assets/index/sy_icon_sjzx.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td width="45rem">
|
||||
<div class="right one">
|
||||
<div class="table_tr_left">职工人数</div>
|
||||
<div class="table_tr_right">667人</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="right tow">
|
||||
<div class="table_tr_left">在校学生人数</div>
|
||||
<div class="table_tr_right">667人</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="right three">
|
||||
<div class="table_tr_left">研究生导师</div>
|
||||
<div class="table_tr_right">667人</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="right fourth">
|
||||
<div class="table_tr_left">科研团队</div>
|
||||
<div class="table_tr_right">28000人</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="right five">
|
||||
<div class="table_tr_left">高层次人才</div>
|
||||
<div class="table_tr_right">18个</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="right sex">
|
||||
<div class="table_tr_left">重大项目</div>
|
||||
<div class="table_tr_right">280000个</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</el-col>
|
||||
</el-row>
|
||||
@@ -677,6 +806,47 @@ export default {
|
||||
name: "index",
|
||||
components: {
|
||||
SlideshowCard
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
scroll: 0,
|
||||
}
|
||||
},
|
||||
mounted() { //监听scroll方法
|
||||
window.addEventListener('scroll', this.handleScroll)
|
||||
},
|
||||
beforeDestroy() { //及时释放
|
||||
window.removeEventListener('scroll', this.handleScroll)
|
||||
},
|
||||
methods: {
|
||||
handleScroll() {
|
||||
if (window.pageYOffset < 960) {
|
||||
if (window.pageYOffset > this.scroll) {
|
||||
console.log("向下")
|
||||
|
||||
window.scrollTo({top: 960, behavior: 'smooth',})
|
||||
// this.backtop(960,false);
|
||||
} else if (window.pageYOffset < this.scroll) {
|
||||
console.log("向上")
|
||||
|
||||
// this.backtop(0,true);
|
||||
window.scrollTo({top: -500, behavior: 'smooth',})
|
||||
}
|
||||
}
|
||||
this.scroll = window.pageYOffset
|
||||
console.log(window.pageYOffset)
|
||||
}, //返回顶部
|
||||
backtop(top,type) {
|
||||
// 实现滚动效果
|
||||
const timeTop = setInterval(() => {
|
||||
if (type){
|
||||
document.body.scrollTop = document.documentElement.scrollTop = top -= 50
|
||||
if (top <= 0) {
|
||||
clearInterval(timeTop)
|
||||
}
|
||||
}
|
||||
}, 10)
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -813,7 +983,6 @@ export default {
|
||||
|
||||
.first {
|
||||
padding-top: 1rem;
|
||||
height: 34rem;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
border-radius: 2.4rem;
|
||||
|
||||
@@ -864,8 +1033,28 @@ export default {
|
||||
.communication {
|
||||
width: 100%;
|
||||
margin-top: 1rem;
|
||||
height: 24rem;
|
||||
//height: 24rem;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
padding-top: 3rem;
|
||||
|
||||
span {
|
||||
line-height: 2.6rem;
|
||||
font-size: 1.8rem;
|
||||
font-weight: 500;
|
||||
color: #1956BC;
|
||||
}
|
||||
|
||||
.communication_img {
|
||||
height: 2.6rem;
|
||||
margin-left: 3rem;
|
||||
}
|
||||
|
||||
.communication_time {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 400;
|
||||
color: #1956BC;
|
||||
line-height: 2.6rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -962,30 +1151,79 @@ export default {
|
||||
background-image: url('../../assets/index/sy_bj4.png');
|
||||
height: 66rem;
|
||||
|
||||
.table{
|
||||
margin: 4rem 0 0 0 ;
|
||||
.table {
|
||||
margin: 4rem 0 0 0;
|
||||
|
||||
|
||||
td{
|
||||
td {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.left {
|
||||
width: 55rem;
|
||||
height: 55rem;
|
||||
.table_img{
|
||||
|
||||
.table_img {
|
||||
text-align: right;
|
||||
padding-top: 6rem;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
width: 55rem;
|
||||
height: 6.5rem;
|
||||
background-color: blue;
|
||||
width: 41.5rem;
|
||||
height: 6.8rem;
|
||||
clear: left;
|
||||
position: relative;
|
||||
color: #FFFFFF;
|
||||
|
||||
.table_tr_left {
|
||||
position: absolute;
|
||||
font-size: 1.6rem;
|
||||
height: 100%;
|
||||
line-height: 6.8rem;
|
||||
float: left;
|
||||
left: 12.5rem;
|
||||
}
|
||||
|
||||
.table_tr_right {
|
||||
position: absolute;
|
||||
font-size: 2.4rem;
|
||||
float: left;
|
||||
right: 3.3rem;
|
||||
height: 100%;
|
||||
line-height: 6.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
.one {
|
||||
background-image: url("../../assets/index/footer/sy_icon_zxxs.png");
|
||||
}
|
||||
|
||||
.tow {
|
||||
margin-left: 6rem;
|
||||
background-image: url("../../assets/index/footer/sy_icon_yjs.png");
|
||||
}
|
||||
|
||||
.three {
|
||||
margin-left: 12rem;
|
||||
background-image: url("../../assets/index/footer/sy_icon_kytd.png");
|
||||
}
|
||||
|
||||
.fourth {
|
||||
margin-left: 18rem;
|
||||
background-image: url("../../assets/index/footer/sy_icon_gccrc.png");
|
||||
}
|
||||
|
||||
.five {
|
||||
margin-left: 12rem;
|
||||
background-image: url("../../assets/index/footer/sy_icon_gzrs.png");
|
||||
}
|
||||
|
||||
.sex {
|
||||
margin-left: 6rem;
|
||||
background-image: url("../../assets/index/footer/sy_icon_zxxs.png");
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user