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

Merge pull request 'dengjie commit : 通知公告区修改样式' (#8) from dengjie into master

Browse Source 
Reviewed-on: http://git.hchyun.com/feashow/sist_web/pulls/8
This commit is contained in:
clay
2022-10-04 09:41:41 +00:00
parent 698adad066 2126436e90
commit 2a951cc654
9 changed files with 248 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/index/announcements/gang1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 688 B

BIN
src/assets/index/announcements/gang1@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

BIN
src/assets/index/announcements/gang2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 696 B

BIN
src/assets/index/announcements/gang2@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
src/assets/index/announcements/sy_bj3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 533 KiB

BIN
src/assets/index/announcements/sy_bj3@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 MiB

210
src/views/index/components/announcements.vue
View File

@@ -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>

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

@@ -171,9 +171,11 @@ export default {
</style>
<style scoped lang="scss">
.news_center {
background-image: url("../../../assets/index/news_center/sy_bj3.png");
background-size : cover;
background-repeat:no-repeat;
//width: 100%;
height: 61rem;
.headline {
@@ -241,37 +243,28 @@ export default {
}
}
.vline:last-child {
border: none;
}
.news {
//width: 106.3rem;
height: 36.9rem;
height: 60.4%;
background-color: #fff;
margin-top: 4rem;
.news_context:hover {
box-shadow: 0rem 0rem 0.7rem 0rem rgba(18, 69, 155, 0.59);
}
.news_context:last-child {
.news_context_text {
.vline {
border: none !important;
}
}
}
//.news_context:last-child {
// .news_context_text {
// .vline {
// //border-right: none;
// }
// }
//}
.news_context {
cursor: pointer;
//width: 28rem;
width: 100%;
height: 36.9rem;
&:hover {
box-shadow: 0 0 0.7rem 0 rgba(18, 69, 155, 0.59);
}
.news_context_img {
height: 42.8%;
width: 100%;
@@ -289,6 +282,7 @@ export default {
height: 14rem;
border-right: 1px solid #CCCCCC;
//padding-right: 1rem;
.news_context_text-title {
width: 23.8rem;
height: 2.1rem;

48
src/views/index/index.vue
View File

@@ -10,32 +10,38 @@
<NewsCenter/>
</el-col>
</el-row>
<el-row>
<el-col>
<ResearchTrends/>
</el-col>
</el-row>
<el-row v-if="$i18n.locale === 'cn'">
<el-col>
<PartyBuildingActivities/>
</el-col>
</el-row>
<el-row>
<el-col>
<TeachingStudent/>
</el-col>
</el-row>
<el-row v-show="width>=1100">
<el-col>
<Bottom/>
</el-col>
</el-row>
<el-row>
<el-col>
<Announcements/>
</el-col>
</el-row>
<!-- <el-row>-->
<!-- <el-col>-->
<!-- <ResearchTrends/>-->
<!-- </el-col>-->
<!-- </el-row>-->
<!-- <el-row v-if="$i18n.locale === 'cn'">-->
<!-- <el-col>-->
<!-- <PartyBuildingActivities/>-->
<!-- </el-col>-->
<!-- </el-row>-->
<!-- <el-row>-->
<!-- <el-col>-->
<!-- <TeachingStudent/>-->
<!-- </el-col>-->
<!-- </el-row>-->
<!-- <el-row v-show="width>=1100">-->
<!-- <el-col>-->
<!-- <Bottom/>-->
<!-- </el-col>-->
<!-- </el-row>-->
</div>
</template>
<script>
import NewsCenter from './components/news_center'
import Carousel from './components/carousel'
import Announcements from "./components/announcements";
import PartyBuildingActivities from './components/party_building_activities.vue'
import ResearchTrends from './components/scientific_research_trends.vue'
import SlideshowCard from './components/slideshow_card.vue'
@@ -44,9 +50,11 @@ import Bottom from './components/bottom.vue'
import {getConfig} from "@/api";
import {setAppLanguage, setLanguage} from "@/utils/sist";
export default {
name: "index",
components: {
Announcements,
NewsCenter,
PartyBuildingActivities,
ResearchTrends,