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

dengjie commit : 新闻中心修改样式

Browse Source
This commit is contained in:
clay
2022-10-04 00:08:16 +08:00
parent aa7e14293c
commit 595a0eefc2
6 changed files with 241 additions and 207 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/header/magnifier.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.7 KiB

BIN
src/assets/news_center/sy_bj3.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 613 KiB

BIN
src/assets/news_center/sy_bj3@2x.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.7 MiB

39
src/views/header/index.vue
View File

@@ -95,8 +95,8 @@
<!--<div class="secondary" v-if="index == 5">--> <!--<div class="secondary" v-if="index == 5">-->
</div> </div>
</span> </span>
<div class="iconfont"><img src="@/assets/header/magnifier.png" alt=""></div> <div class="iconfont"><img src="@/assets/header/denglu.png" alt=""></div>
<div class="switchLang"><span>EN</span></div> <div class="switchLang"><img src="@/assets/header/en.png" alt=""></div>
</div> </div>
</el-col> </el-col>
</div> </div>
@@ -174,6 +174,7 @@ export default {
background: #1956BC; background: #1956BC;
.link { .link {
line-height: 2.2rem; line-height: 2.2rem;
width: 80%; width: 80%;
@@ -189,7 +190,7 @@ export default {
.bottom { .bottom {
height: 11rem; height: 11rem;
background: linear-gradient(180deg, rgba(61, 96, 163, 0.91) 0%, rgba(61, 96, 163, 0.64) 35%, rgba(61, 96, 163, 0.42) 65%, rgba(73, 133, 234, 0.33) 77%, rgba(73, 133, 234, 0.02) 100%); background: linear-gradient(180deg, rgba(61,96,163,0.91) 0%, rgba(61,96,163,0.64) 35%, rgba(61,96,163,0.42) 65%, rgba(73,133,234,0.33) 77%, rgba(73,133,234,0.02) 100%);
border-radius: 0rem 0rem 2rem 2rem; border-radius: 0rem 0rem 2rem 2rem;
.icon { .icon {
@@ -247,36 +248,22 @@ export default {
} }
.iconfont { .iconfont {
width: 4rem; margin-top: 2.1rem;
height: 4.2rem; margin-left: 1.3rem;
border: 0.1rem solid #C5DCFE;
text-align: center;
margin-top: 3.4rem;
margin-left: 2.6rem;
img { img {
margin-top: 0.9rem; width: 2.5rem;
width: 2.4rem; height: 2.6rem;
height: 2.4rem;
} }
} }
.switchLang { .switchLang {
width: 4rem; margin-top: 2.1rem;
height: 4.2rem; margin-left: .4rem;
border: 0.1rem solid #C5DCFE;
margin-top: 3.4rem;
margin-left: .6rem;
cursor: pointer; cursor: pointer;
text-align: center; img{
width: 2.5rem;
span { height: 2.6rem;
font-size: 2rem;
line-height: 4rem;
color: #C5DCFE;
} }
} }
.secondary { .secondary {
display: none; display: none;
width: 25rem; width: 25rem;

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

@@ -1,101 +1,99 @@
<script src="../../../utils/sist.js"></script> <script src="../../../utils/sist.js"></script>
<template> <template>
<div class="news_center"> <div class="news_center">
<div class="headline"> <el-row>
<!-- <div class="hr_div">--> <el-col :span="5">
<!-- <div class="hr_line_left">--> <div class="grid-content"></div>
<!-- </div>--> </el-col>
<!-- <div class="hr_dot_left">--> <el-col :span="14">
<!-- </div>--> <div class="headline">
<!-- </div>--> <div class="title">
<div class="title"> <!-- {{ $t("message.news_ceter") }}-->
{{ $t("message.news_ceter") }} 新闻中心
<span class="vertica_line"></span> <span class="vertica_line"></span>
<div class="news_center_english"> <div class="news_center_english">
<span class="">NEWS</span> <span class="">NEWS</span>
<span class="">CENTER</span> <span class="">CENTER</span>
</div>
</div>
<div class="more">
<span class="more_text">更多</span>
<img src="../../../assets/index/news_center/gd_icon.png" alt="">
</div>
</div> </div>
</el-col>
</div> </el-row>
<!-- <div class="hr_div">-->
<!-- <div class="hr_line_right">-->
<!-- </div>-->
<!-- <div class="hr_dot_right">-->
<!-- </div>-->
<!-- </div>-->
</div>
<!--录播图-->
<!-- <el-row>-->
<!-- <el-col :xs="1" :sm="2" :md="2" :lg="3" :xl="5">-->
<!-- <div class="grid-content"></div>-->
<!-- </el-col>-->
<!-- <el-col :xs="22" :sm="20" :md="20" :lg="18" :xl="14">-->
<!-- <div class="slideshow">-->
<!-- <el-carousel trigger="click" height="23.3vw">-->
<!-- <el-carousel-item v-for="(item,index) in bannerDate" :key="index">-->
<!-- <div v-show="$i18n.locale === 'cn'" @click="clickTo(item.link)">-->
<!-- <img :src="item.imgurl" alt="">-->
<!-- <div class="bottom_title">-->
<!-- <el-row>-->
<!-- <el-col :offset="2" :span="18">-->
<!-- {{ item.title }}-->
<!-- </el-col>-->
<!-- </el-row>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div v-show="$i18n.locale === 'en'" @click="clickTo(item.enLink)">-->
<!-- <img :src="item.imgurl" alt="">-->
<!-- <div class="bottom_title">-->
<!-- <el-row>-->
<!-- <el-col :offset="2" :span="18">-->
<!-- {{ item.enTitle }}-->
<!-- </el-col>-->
<!-- </el-row>-->
<!-- </div>-->
<!-- </div>-->
<!-- </el-carousel-item>-->
<!-- </el-carousel>-->
<!-- </div>-->
<!-- </el-col>-->
<!-- </el-row>-->
<!--轮播图下的新闻--> <!--轮播图下的新闻-->
<el-row> <el-row>
<el-col :xs="1" :sm="2" :md="2" :lg="3" :xl="5"> <el-col :span="5">
<div class="grid-content"></div> <div class="grid-content"></div>
</el-col> </el-col>
<el-col :xs="22" :sm="20" :md="20" :lg="18" :xl="14"> <el-col :span="14" class="news">
<el-row class="news"> <div class="news_context">
<el-col v-for="(news,index) in newsDate" :key="index" :xs="12" :sm="12" :md="12" :lg="6" :xl="6"> <div class="news_context_img">
<div class="news_context" @click="getArticle(news)"> <img src="../../../assets/index/news_center/t4.png" alt="">
<div class="news_context_img"> </div>
<img :src="news.imgurl" alt=""> <div class="news_context_text">
</div> <div class="vline">
<div class="news_context_text"> <div class="news_context_text-title">信息引领，勇于拼搏—信息搏…</div>
{{ news.title }} <div class="news_context_text-content">为促进学生学业发展学生学业学生学业学生学业、给予2021年转专业同学有针对性的帮助，信息科学与技术学院于10月26日开展…</div>
<div class="news_context_time">
<div class="icon"><img src="../../../assets/index/news_center/shijian.png" alt=""></div>
<span class="time">2022-10-2</span>
</div> </div>
</div> </div>
</el-col> </div>
</el-row> </div>
<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 class="vline">
<div class="news_context_text-title">信息引领，勇于拼搏—信息搏…</div>
<div class="news_context_text-content">为促进学生学业发展学生学业学生学业学生学业、给予2021年转专业同学有针对性的帮助，信息科学与技术学院于10月26日开展…</div>
<div class="news_context_time">
<div class="icon"><img src="../../../assets/index/news_center/shijian.png" alt=""></div>
<span class="time">2022-10-2</span>
</div>
</div>
</div>
</div>
<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 class="vline">
<div class="news_context_text-title">信息引领，勇于拼搏—信息搏…</div>
<div class="news_context_text-content">为促进学生学业发展学生学业学生学业学生学业、给予2021年转专业同学有针对性的帮助，信息科学与技术学院于10月26日开展…</div>
<div class="news_context_time">
<div class="icon"><img src="../../../assets/index/news_center/shijian.png" alt=""></div>
<span class="time">2022-10-2</span>
</div>
</div>
</div>
</div>
<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 class="vline">
<div class="news_context_text-title">信息引领，勇于拼搏—信息搏…</div>
<div class="news_context_text-content">为促进学生学业发展学生学业学生学业学生学业、给予2021年转专业同学有针对性的帮助，信息科学与技术学院于10月26日开展…</div>
<div class="news_context_time">
<div class="icon"><img src="../../../assets/index/news_center/shijian.png" alt=""></div>
<span class="time">2022-10-2</span>
</div>
</div>
</div>
</div>
</el-col> </el-col>
</el-row> </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" @click="lookMore(newsDate[0])">
{{ $t("message.more") }}
</div>
<!-- <div class="more_img">-->
<!-- <img src="@/assets/index/sy_icon_zhdl.png" alt="">-->
<!-- </div>-->
</el-col>
</el-row>
</div> </div>
</template> </template>
@@ -153,47 +151,46 @@ export default {
</style> </style>
<style scoped lang="scss"> <style scoped lang="scss">
@import '../css/comment.css';
.news_center { .news_center {
//padding-bottom: 2rem; background-image: url("../../../assets/index/news_center/sy_bj3.png");
background-image: url("../../../assets/news_center/sy_bj3.png"); height: 61rem;
height: 97.6rem;
padding-top: 10rem;
padding-left: 10.9rem;
.headline { .headline {
width: 41.5rem; display: flex;
height: 9.4rem; width: 100%;
border-radius: 20px; justify-content: space-between;
background: linear-gradient(240deg, rgba(0, 75, 177, 0) 0%, rgba(6, 79, 175, 0.64) 44%, #0A51AE 100%);
padding-top: 1.2rem;
padding-left: 3rem;
.title { .title {
display: flex; display: flex;
height: 7rem; width: 25.9rem;
line-height: 7rem; height: 5.9rem;
font-size: 5rem; line-height: 5.9rem;
border-radius: 2rem;
font-size: 3rem;
font-weight: 500; font-weight: 500;
letter-spacing: .1rem; letter-spacing: .1rem;
color: #FFFFFF; color: #FFFFFF;
text-align: left; 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: 6.3rem;
.vertica_line { .vertica_line {
width: .1rem; width: .1rem;
height: 4rem; height: 2.5rem;
border: .1rem solid #FFFFFF; border: .1rem solid #FFFFFF;
margin: 1.5rem 1.4rem; margin: 1.7rem 1.4rem;
} }
.news_center_english { .news_center_english {
width: 8.5rem; width: 5.3rem;
height: 4.4rem; height: 2.8rem;
font-size: 2rem; font-size: 1.3rem;
font-weight: 500; font-weight: 500;
color: #FFFFFF; color: #FFFFFF;
line-height: 2.2rem; line-height: 1.4rem;
margin-top: 1.6rem;
span { span {
float: left; float: left;
@@ -201,52 +198,60 @@ export default {
} }
} }
} }
}
.slideshow { .more {
width: 100%; display: flex;
height: 3.7rem;
margin-top: 9.8rem;
.el-carousel__arrow { .more_text {
top: 93%; font-size: 1.6rem;
display: block; font-weight: 500;
} color: #8B8B8B;
line-height: 2.3rem;
letter-spacing: .2rem;
}
.bottom_title { img {
z-index: 99; width: 2.9rem;
width: 100%; height: 1.4rem;
height: 3.6vw; margin-left: 0.8rem;
background: #1956BC; margin-top: .5rem;
opacity: 0.89; }
position: absolute;
bottom: 0;
line-height: 3.6vw;
font-size: 2rem;
font-family: "微软雅黑";
font-weight: 400;
color: #FFFFFF;
}
img {
width: 100%;
} }
} }
.vline:last-child{
border: none;
}
.news { .news {
//width: 106.3rem;
height: 36.9rem;
background-color: #fff;
margin-top: 4rem;
display: flex;
.news_context:hover { .news_context:hover {
box-shadow: 0rem 0rem 0.7rem 0rem rgba(18, 69, 155, 0.59); 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 { .news_context {
cursor: pointer; cursor: pointer;
width: 23rem; width: 28rem;
height: 23rem; height: 36.9rem;
margin: 3rem auto;
border-radius: 1.4rem;
border: 0.1rem solid #CAD9F3;
.news_context_img { .news_context_img {
height: 62%; height: 42.8%;
width: 100%; width: 100%;
img { img {
@@ -255,32 +260,74 @@ export default {
} }
.news_context_text { .news_context_text {
height: 24%; //padding: 4rem 2rem;
width: 80%; padding: 4rem 0 4rem 2rem;
font-size: 1.6rem;
font-weight: 400; .vline {
text-align: center; height: 14rem;
color: #262626; border-right: 1px solid #CCCCCC;
margin: 0 auto; //padding-right: 1rem;
padding: 1rem 0; .news_context_text-title {
overflow: hidden; width: 23.8rem;
text-overflow: ellipsis; height: 2.1rem;
display: -webkit-box; //作为弹性伸缩盒子模型显示。 font-size: 1.5rem;
-webkit-box-orient: vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列 font-weight: 500;
-webkit-line-clamp: 3; //显示的行 color: #0040A4;
line-height: 2.1rem;
}
.news_context_text-content {
width: 23.8rem;
height: 5.3rem;
font-size: 1.3rem;
font-weight: 500;
color: #777777;
line-height: 1.8rem;
letter-spacing: .1rem;
margin-top: 1.6rem;
margin-bottom: 2.5rem;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box; //作为弹性伸缩盒子模型显示。
-webkit-box-orient: vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
-webkit-line-clamp: 3; //显示的行
}
.news_context_time {
display: flex;
.icon {
margin-right: .4rem;
img {
width: 1.1rem;
height: 1.1rem;
}
}
.time {
width: 6rem;
height: 1.4rem;
font-size: 1rem;
font-weight: 500;
color: #0040A4;
line-height: 1.4rem;
}
}
}
} }
} }
} }
@media screen and (min-width: 1100px) and (max-width: 1400px) { //@media screen and (min-width: 1100px) and (max-width: 1400px) {
.news_context { // .news_context {
width: 20rem !important; // width: 20rem !important;
height: 20rem !important; // height: 20rem !important;
//
.news_context_img { // .news_context_img {
height: 12.5rem !important; // height: 12.5rem !important;
} // }
} // }
} //}
</style> </style>

44
src/views/index/css/comment.css
View File

@@ -77,30 +77,30 @@
line-height: 5rem; line-height: 5rem;
} }
.more { /*.more {*/
cursor: pointer !important; /* cursor: pointer !important;*/
width: 12.8rem; /* width: 12.8rem;*/
height: 3.6rem; /* height: 3.6rem;*/
background: #1956BC; /* background: #1956BC;*/
border-radius: 1.8rem; /* border-radius: 1.8rem;*/
font-size: 1.4rem; /* font-size: 1.4rem;*/
font-family: "微软雅黑"; /* font-family: "微软雅黑";*/
font-weight: 400; /* font-weight: 400;*/
text-align: center; /* text-align: center;*/
margin: 2rem auto; /* margin: 2rem auto;*/
line-height: 3.6rem; /* line-height: 3.6rem;*/
color: #FFFFFF; /* color: #FFFFFF;*/
} /*}*/
.more_img { /*.more_img {*/
text-align: center; /* text-align: center;*/
margin-top: 2rem; /* margin-top: 2rem;*/
font-size: 2rem; /* font-size: 2rem;*/
} /*}*/
.more_img img { /*.more_img img {*/
font-size: small; /* font-size: small;*/
} /*}*/
.hr { .hr {
border: 0.1rem solid #E6E6E6; border: 0.1rem solid #E6E6E6;