317 lines
11 KiB
Vue
317 lines
11 KiB
Vue
<template>
|
||
<div class="academy_and_sciences">
|
||
<el-row type="flex" justify="center">
|
||
<el-col :xs="22" :sm="22" :md="20" :lg="16" :xl="14" >
|
||
<el-row>
|
||
<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
|
||
<div class="sciences_title">
|
||
科学研究
|
||
</div>
|
||
<div class="sciences_content">
|
||
<div class="sciences_content_time">
|
||
10-03
|
||
</div>
|
||
<div class="sciences_content_text">
|
||
徐加鹏博士学术后李鹤博士 士学术学学后李鹤博士 士学术学学后李鹤博士 士学术学学后李鹤博士 士学术学学后李鹤博士 士学术学学受限通信受限随系…
|
||
</div>
|
||
</div>
|
||
<div class="sciences_content">
|
||
<div class="sciences_content_time">
|
||
10-03
|
||
</div>
|
||
<div class="sciences_content_text">
|
||
剑桥大学博士后李鹤博士后李鹤博士 士学术学学后李鹤博士 士学术学学后李鹤博士 士学术学学后李鹤博士 士学术学学报： 异…
|
||
</div>
|
||
</div>
|
||
<div class="sciences_content">
|
||
<div class="sciences_content_time">
|
||
10-03
|
||
</div>
|
||
<div class="sciences_content_text">
|
||
徐加鹏博士学术报告-通信受限随机系.受限通信受限随系…
|
||
</div>
|
||
</div>
|
||
<div class="sciences_content">
|
||
<div class="sciences_content_time">
|
||
10-03
|
||
</div>
|
||
<div class="sciences_content_text">
|
||
复旦大学蒋轶教授学术报告
|
||
</div>
|
||
</div>
|
||
<div class="sciences_content">
|
||
<div class="sciences_content_time">
|
||
10-03
|
||
</div>
|
||
<div class="sciences_content_text">
|
||
徐加鹏博士学术报告-通信受士后李鹤博限随机系.受限…
|
||
</div>
|
||
</div>
|
||
<div class="sciences_content">
|
||
<div class="sciences_content_time">
|
||
10-03
|
||
</div>
|
||
<div class="sciences_content_text">
|
||
剑桥大学博士后李鹤博士后李鹤博士 士学术学学报： 异…
|
||
</div>
|
||
</div>
|
||
<div class="sciences_content">
|
||
<div class="sciences_content_time">
|
||
10-03
|
||
</div>
|
||
<div class="sciences_content_text">
|
||
复旦大学蒋轶教授学术报告
|
||
</div>
|
||
</div>
|
||
<div class="sciences_content">
|
||
<div class="sciences_content_time">
|
||
10-03
|
||
</div>
|
||
<div class="sciences_content_text">
|
||
徐加鹏博士学术报告-通信受限随机系.受限通信受限随系…
|
||
</div>
|
||
</div>
|
||
<div class="sciences_content">
|
||
<div class="sciences_content_time">
|
||
10-03
|
||
</div>
|
||
<div class="sciences_content_text">
|
||
徐加鹏博士学术报告-通信受士后李鹤博限随机系.受限…
|
||
</div>
|
||
</div>
|
||
<div class="more">
|
||
<span class="more_text">更多</span>
|
||
<img src="../../../assets/index/academy_and_sciences/gangduobai1.png" alt="">
|
||
</div>
|
||
</el-col>
|
||
<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
|
||
<div class="academy_title">
|
||
学术交流
|
||
</div>
|
||
<el-row>
|
||
<el-col :span="11">
|
||
<div class="academy_content">
|
||
<div class="academy_content_icontime">
|
||
<div class="img" v-bind:style="{backgroundImage:'url('+bgc+')'}"></div>
|
||
<span>2022-10-08</span>
|
||
</div>
|
||
<div class="academy_content_title">
|
||
信息科学与技术学院开展英
|
||
</div>
|
||
<div class="academy_content_text">
|
||
为加强学院学风建设，提升学生英语能力，2021年10月25日晚，息科学与…
|
||
</div>
|
||
</div>
|
||
<div class="academy_content">
|
||
<div class="academy_content_icontime">
|
||
<div class="img" v-bind:style="{backgroundImage:'url('+bgc+')'}"></div>
|
||
<span>2022-10-08</span>
|
||
</div>
|
||
<div class="academy_content_title">
|
||
信息科学与技术学院开展英
|
||
</div>
|
||
<div class="academy_content_text">
|
||
为加强学院学风建设，提升学生英语能力，2021年10月25日晚，息科学与…
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="2">
|
||
<div class="grid-content"></div>
|
||
</el-col>
|
||
<el-col :span="11">
|
||
<div class="academy_content">
|
||
<div class="academy_content_icontime">
|
||
<div class="img" v-bind:style="{backgroundImage:'url('+bgc+')'}"></div>
|
||
<span>2022-10-08</span>
|
||
</div>
|
||
<div class="academy_content_title">
|
||
信息科学与学风建设，提升学生英语能力，2021学风建设，提升学生英语能力，2021学风建设，提升学生英语能力，2021
|
||
</div>
|
||
<div class="academy_content_text">
|
||
为加强学院学风建设，提学风建设，提升学生英语能力，2021学风建设，提升学生英语能力，2021学风建设，提升学生英语能力，20212021年10月25日晚，息科学与…
|
||
</div>
|
||
</div>
|
||
<div class="academy_content">
|
||
<div class="academy_content_icontime">
|
||
<!-- <img :src="src" alt="">-->
|
||
<div class="img" v-bind:style="{backgroundImage:'url('+bgc+')'}"></div>
|
||
<span>2022-10-08</span>
|
||
</div>
|
||
<div class="academy_content_title">
|
||
信息科学与技术学院学风建设，提升学生英语能力，2021学风建设，提升学生英语能力，2021学风建设，提升学生英语能力，2021
|
||
</div>
|
||
<div class="academy_content_text">
|
||
为加强学院学风建设，提升学生英语能力，2021学风建设，提升学生英语能力，2021学风建设，提升学生英语能力，2021学风建设，提升学生英语能力，2021年10月25日晚，息科学与…
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
<div class="more">
|
||
<span class="more_text">更多</span>
|
||
<img src="../../../assets/index/academy_and_sciences/gangduobai1.png" alt="">
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: "academy_and_sciences",
|
||
data(){
|
||
return{
|
||
bgc:require('../../../assets/index/academy_and_sciences/shijian3.png')
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
/deep/ .el-col-2 {
|
||
width: 8%;
|
||
}
|
||
|
||
.academy_and_sciences {
|
||
background-image: url("../../../assets/index/academy_and_sciences/bj.png");
|
||
background-size: cover;
|
||
background-repeat: no-repeat;
|
||
width: 100%;
|
||
//height: 68.3rem;
|
||
|
||
.sciences_title, .academy_title {
|
||
display: flex;
|
||
width: 18rem;
|
||
height: 5.9rem;
|
||
line-height: 5.9rem;
|
||
border-radius: 1.3rem 0 0 1.3rem;
|
||
font-size: 3rem;
|
||
font-weight: 500;
|
||
letter-spacing: .1rem;
|
||
color: #FFFFFF;
|
||
text-align: left;
|
||
background: linear-gradient(240deg, rgba(0, 75, 177, 0) 0%, rgba(6, 79, 175, 0.64) 44%, #0A51AE 100%);
|
||
padding-left: 1.9rem;
|
||
margin-top: 8.1rem;
|
||
margin-bottom: 5rem;
|
||
}
|
||
|
||
.sciences_content {
|
||
display: flex;
|
||
margin-bottom: 1.6rem;
|
||
|
||
&_time {
|
||
//width: 38px;
|
||
//height: 18px;
|
||
font-size: 1.3rem;
|
||
font-weight: 500;
|
||
color: #FFFFFF;
|
||
line-height: 2.3rem;
|
||
margin-right: 1.4rem;
|
||
}
|
||
|
||
&_text {
|
||
width: 81%;
|
||
//height: 23px;
|
||
font-size: 1.6rem;
|
||
font-weight: 500;
|
||
color: #FFFFFF;
|
||
line-height: 2.3rem;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
display: -webkit-box; //作为弹性伸缩盒子模型显示。
|
||
-webkit-box-orient: vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
|
||
-webkit-line-clamp: 1; //显示的行
|
||
}
|
||
}
|
||
|
||
.more {
|
||
width: 100%;
|
||
display: flex;
|
||
height: 2.3rem;
|
||
margin-top: 3.4rem;
|
||
margin-bottom: 2rem;
|
||
cursor: pointer;
|
||
.more_text {
|
||
font-size: 1.6rem;
|
||
font-weight: 500;
|
||
color: #FFFFFF;
|
||
letter-spacing: .2rem;
|
||
}
|
||
|
||
img {
|
||
width: 2.9rem;
|
||
height: 1.4rem;
|
||
margin-left: 0.8rem;
|
||
margin-top: .5rem;
|
||
}
|
||
}
|
||
|
||
.academy_content {
|
||
&:hover {
|
||
box-shadow: 0 8px 11px 0 rgba(0, 73, 174, 0.5);
|
||
background: #FFFFFF;
|
||
color: #0049AF;
|
||
}
|
||
padding: 2.5rem 2.3rem;
|
||
background: rgba(10, 81, 174, 0.89);
|
||
border-radius: 16px;
|
||
margin-bottom: 1.9rem;
|
||
color: #FFFFFF;
|
||
&_icontime {
|
||
display: flex;
|
||
margin-bottom: 1.1rem;
|
||
.img {
|
||
background-size: 1.5rem;
|
||
width: 1.5rem;
|
||
height: 1.5rem;
|
||
margin-right: .9rem;
|
||
}
|
||
|
||
span {
|
||
//width: 79px;
|
||
//height: 18px;
|
||
font-size: 1.3rem;
|
||
font-weight: 500;
|
||
|
||
line-height: 1.85rem;
|
||
}
|
||
}
|
||
|
||
&_title {
|
||
//width: 139px;
|
||
width: 100%;
|
||
//height: 38px;
|
||
font-size: 1.4rem;
|
||
font-weight: 500;
|
||
//color: #FFFFFF;
|
||
line-height: 1.9rem;
|
||
letter-spacing: .1rem;
|
||
margin-bottom: .6rem;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
display: -webkit-box; //作为弹性伸缩盒子模型显示。
|
||
-webkit-box-orient: vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
|
||
-webkit-line-clamp: 1; //显示的行
|
||
}
|
||
|
||
&_text {
|
||
//width: 139px;
|
||
width: 100%;
|
||
//height: 41px;
|
||
font-size: 1rem;
|
||
font-weight: 500;
|
||
//color: #FFFFFF;
|
||
line-height: 1.4rem;
|
||
letter-spacing: .1rem;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
display: -webkit-box; //作为弹性伸缩盒子模型显示。
|
||
-webkit-box-orient: vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
|
||
-webkit-line-clamp: 3; //显示的行
|
||
}
|
||
}
|
||
}
|
||
</style>
|