dengjie commit : 通知公告区修改样式
This commit is contained in:
clay
@@ -1,15 +1,215 @@
|
||||
<template>
|
||||
<div>
|
||||
通知公告
|
||||
</div>
|
||||
<div class="announcements">
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<div class="grid-content"></div>
|
||||
</el-col>
|
||||
<el-col :span="14">
|
||||
<div class="headline">
|
||||
<div class="line_left">
|
||||
<img src="../../../assets/index/announcements/gang1.png" alt="">
|
||||
</div>
|
||||
<div class="title">
|
||||
通知公告
|
||||
</div>
|
||||
<div class="line_right">
|
||||
<img src="../../../assets/index/announcements/gang2.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<div class="grid-content"></div>
|
||||
</el-col>
|
||||
<el-col :span="14">
|
||||
<el-row justify="space-between">
|
||||
<el-col :span="7">
|
||||
<div class="announcements_text">
|
||||
<div class="announcements_text_line_time">
|
||||
<div class="announcements_text_line_time_btime">27</div>
|
||||
<div class="announcements_text_line_time_stime">2022-09</div>
|
||||
</div>
|
||||
<div class="announcements_text_line"></div>
|
||||
<div class="announcements_text_title">信息科学与技术学院开展英语四级备考指导会</div>
|
||||
<div class="announcements_text_content">
|
||||
为加强学院学风建设，提升学生英语能力，2021年10月25日晚，信息科学与技术学院组织开展英语四级备考指导会。本次指导会邀请学校外国语学院李捷老师担任主讲，…
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="1">
|
||||
<div class="grid-content"></div>
|
||||
</el-col>
|
||||
<el-col :span="7">
|
||||
<div class="announcements_text">
|
||||
<div class="announcements_text_line_time">
|
||||
<div class="announcements_text_line_time_btime">27</div>
|
||||
<div class="announcements_text_line_time_stime">2022-09</div>
|
||||
</div>
|
||||
<div class="announcements_text_line"></div>
|
||||
<div class="announcements_text_title">信息科学与技术学院开展英语四级备考指导会</div>
|
||||
<div class="announcements_text_content">
|
||||
为加强学院学风建设，提升学生英语能力，2021年10月25日晚，信息科学与技术学院组织开展英语四级备考指导会。本次指导会邀请学校外国语学院李捷老师担任主讲，…
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="1">
|
||||
<div class="grid-content"></div>
|
||||
</el-col>
|
||||
<el-col :span="7">
|
||||
<div class="announcements_text">
|
||||
<div class="announcements_text_line_time">
|
||||
<div class="announcements_text_line_time_btime">27</div>
|
||||
<div class="announcements_text_line_time_stime">2022-09</div>
|
||||
</div>
|
||||
<div class="announcements_text_line"></div>
|
||||
<div class="announcements_text_title">信息科学与技术学院开展英语四级备考指导会</div>
|
||||
<div class="announcements_text_content">
|
||||
为加强学院学风建设，提升学生英语能力，2021年10月25日晚，信息科学与技术学院组织开展英语四级备考指导会。本次指导会邀请学校外国语学院李捷老师担任主讲，…
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<div class="grid-content"></div>
|
||||
</el-col>
|
||||
<el-col :span="14">
|
||||
<div class="more">
|
||||
<span class="more_text">更多</span>
|
||||
<img src="../../../assets/index/news_center/gd_icon.png" alt="">
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "announcements"
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
<style scoped lang="scss">
|
||||
/deep/ .el-col-1 {
|
||||
width: 6.25%;
|
||||
}
|
||||
|
||||
.announcements {
|
||||
background-image: url("../../../assets/index/announcements/sy_bj3.png");
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
width: 100%;
|
||||
height: 54.2rem;
|
||||
|
||||
.headline {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding-top: 6.3rem;
|
||||
padding-bottom: 5.6rem;
|
||||
|
||||
.line_left {
|
||||
line-height: 4.4rem;
|
||||
}
|
||||
|
||||
.title {
|
||||
width: 12.9rem;
|
||||
height: 4.4rem;
|
||||
font-size: 3.1rem;
|
||||
font-weight: 500;
|
||||
color: #0049AE;
|
||||
letter-spacing: .1rem;
|
||||
margin: 0 1.3rem;
|
||||
}
|
||||
|
||||
.line_right {
|
||||
line-height: 4.4rem;
|
||||
}
|
||||
}
|
||||
|
||||
.announcements_text {
|
||||
&:hover {
|
||||
box-shadow: 0px 8px 11px 0px rgba(0, 73, 174, 0.5);
|
||||
}
|
||||
|
||||
//width: 30.4%;
|
||||
//height: 26.3rem;
|
||||
background: #FFFFFF;
|
||||
border-radius: 1.3rem;
|
||||
padding: 3.9rem 3.3rem;
|
||||
|
||||
&_line_time {
|
||||
display: flex;
|
||||
|
||||
&_btime {
|
||||
height: 4.1rem;
|
||||
font-size: 3.1rem;
|
||||
font-weight: bold;
|
||||
color: #0049AE;
|
||||
letter-spacing: .1rem;
|
||||
}
|
||||
|
||||
&_stime {
|
||||
font-size: 1.3rem;
|
||||
font-weight: 500;
|
||||
color: #0049AE;
|
||||
margin-top: 1.5em;
|
||||
line-height: 1.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
&_line{
|
||||
//width: 216px;
|
||||
width: 100%;
|
||||
height: .2rem;
|
||||
background: linear-gradient(240deg, rgba(0,77,175,0) 0%, rgba(0,77,174,0.67) 47%, #004DAE 100%);
|
||||
margin-bottom: 2.3rem;
|
||||
}
|
||||
&_title{
|
||||
width: 100%;
|
||||
height: 3.8rem;
|
||||
font-size: 1.4rem;
|
||||
font-weight: 500;
|
||||
color: #0049AF;
|
||||
line-height: 1.9rem;
|
||||
letter-spacing: .1rem;
|
||||
margin-bottom: .6rem;
|
||||
}
|
||||
&_content{
|
||||
width: 100%;
|
||||
height: 7rem;
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
color: #777777;
|
||||
line-height: 1.8rem;
|
||||
letter-spacing: .1rem;
|
||||
}
|
||||
}
|
||||
.more {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
height: 2.3rem;
|
||||
margin-top: 3.1rem;
|
||||
.more_text {
|
||||
font-size: 1.6rem;
|
||||
font-weight: 500;
|
||||
color: #8B8B8B;
|
||||
letter-spacing: .2rem;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 2.9rem;
|
||||
height: 1.4rem;
|
||||
margin-left: 0.8rem;
|
||||
margin-top: .5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user