移动
This commit is contained in:
clay
194
src/views/index/components/news_center.vue
Normal file
194
src/views/index/components/news_center.vue
Normal file
@@ -0,0 +1,194 @@
|
||||
<template>
|
||||
<div class="news_center">
|
||||
<!--title-->
|
||||
<el-row>
|
||||
<el-col :xs="1" :sm="2" :md="4" :lg="6" :xl="6">
|
||||
<div class="grid-content"></div>
|
||||
</el-col>
|
||||
<el-col class="headline" :xs="22" :sm="20" :md="16" :lg="12" :xl="12">
|
||||
<div class="title">
|
||||
{{ $t('message.news_center') }}
|
||||
</div>
|
||||
<el-row>
|
||||
<el-col :span="9">
|
||||
<hr class="hr">
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="divider_text">News Center</div>
|
||||
</el-col>
|
||||
<el-col :span="9">
|
||||
<hr class="hr">
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!--录播图-->
|
||||
<el-row>
|
||||
<el-col :xs="1" :sm="2" :md="2" :lg="4" :xl="4">
|
||||
<div class="grid-content"></div>
|
||||
</el-col>
|
||||
<el-col :xs="22" :sm="20" :md="20" :lg="16" :xl="16">
|
||||
<div class="slideshow">
|
||||
<el-carousel trigger="click" height="23.3vw">
|
||||
<el-carousel-item v-for="item in 4" :key="item">
|
||||
<div>
|
||||
<img src="@/assets/index/news_center/t1@2x.png" alt="">
|
||||
<div class="bottom_title">
|
||||
<el-row>
|
||||
<el-col :offset="2" :span="18">
|
||||
{{ item }}喜报！信息学院师生在中国大学生计算机设计大赛中取得历史性突破！
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="1" :sm="2" :md="2" :lg="4" :xl="4">
|
||||
<div class="grid-content"></div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!--轮播图下的新闻-->
|
||||
|
||||
<el-row>
|
||||
<el-col :xs="1" :sm="2" :md="2" :lg="4" :xl="4">
|
||||
<div class="grid-content"></div>
|
||||
</el-col>
|
||||
<el-col :xs="22" :sm="20" :md="20" :lg="16" :xl="16">
|
||||
<el-row class="news">
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="6" :xl="6" :span="6">
|
||||
<div class="news_context">
|
||||
<div class="news_context_img">
|
||||
<img src="@/assets/index/news_center/t2.png" alt="">
|
||||
</div>
|
||||
<div class="news_context_text">
|
||||
信息引领，勇于拼搏——信息科学与技术学院在全校教职工篮球赛获佳绩
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="6" :xl="6" :span="6">
|
||||
<div class="news_context">
|
||||
<div class="news_context_img">
|
||||
<img src="@/assets/index/news_center/t3.png" alt="">
|
||||
</div>
|
||||
<div class="news_context_text">
|
||||
“学党史 担使命”一班一品牌，班班展风采——信息科学与技术学院2020-2021…
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="6" :xl="6" :span="6">
|
||||
<div class="news_context">
|
||||
<div class="news_context_img">
|
||||
<img src="@/assets/index/news_center/t4.png" alt="">
|
||||
</div>
|
||||
<div class="news_context_text">
|
||||
西南交大第十届青年教师教学竞赛信息学院初赛顺利举行
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="6" :xl="6" :span="6">
|
||||
<div class="news_context">
|
||||
<div class="news_context_img">
|
||||
<img src="@/assets/index/news_center/t5.png" alt="">
|
||||
</div>
|
||||
<div class="news_context_text">
|
||||
“奋斗青春 梦想起航” 西南交通大学信息科学与技术学院2021级新生开学典礼
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!--更多-->
|
||||
<el-row>
|
||||
<el-col :xs="1" :sm="2" :md="4" :lg="6" :xl="6">
|
||||
<div class="grid-content"></div>
|
||||
</el-col>
|
||||
<el-col class="headline" :xs="22" :sm="20" :md="16" :lg="12" :xl="12">
|
||||
<div class="more">
|
||||
{{ $t('message.more') }}
|
||||
</div>
|
||||
<div class="more_img">
|
||||
<img src="@/assets/index/sy_icon_zhdl.png" alt="">
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "news_center"
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '../css/comment.css';
|
||||
.news_center{
|
||||
padding-bottom: 2rem;
|
||||
}
|
||||
|
||||
.slideshow {
|
||||
width: 100%;
|
||||
|
||||
.el-carousel__arrow {
|
||||
top: 93%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.bottom_title {
|
||||
z-index: 99;
|
||||
width: 100%;
|
||||
height: 3.6vw;
|
||||
background: #1956BC;
|
||||
opacity: 0.89;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
line-height: 3.6vw;
|
||||
font-size: 2rem;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.news {
|
||||
|
||||
.news_context:hover {
|
||||
box-shadow: 0rem 0rem 0.7rem 0rem rgba(18, 69, 155, 0.59);
|
||||
}
|
||||
|
||||
.news_context {
|
||||
width: 23rem;
|
||||
height: 23rem;
|
||||
margin: 3rem auto;
|
||||
border-radius: 1.4rem;
|
||||
border: 0.1rem solid #CAD9F3;
|
||||
|
||||
.news_context_img {
|
||||
height: 14rem;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.news_context_text {
|
||||
font-size: 1.6rem;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #262626;
|
||||
margin: 1rem auto;
|
||||
width: 80%;
|
||||
height: 4rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user