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>
</span>
<div class="iconfont"><img src="@/assets/header/magnifier.png" alt=""></div>
<div class="switchLang"><span>EN</span></div>
<div class="iconfont"><img src="@/assets/header/denglu.png" alt=""></div>
<div class="switchLang"><img src="@/assets/header/en.png" alt=""></div>
</div>
</el-col>
</div>
@@ -174,6 +174,7 @@ export default {
background: #1956BC;
.link {
line-height: 2.2rem;
width: 80%;
@@ -189,7 +190,7 @@ export default {
.bottom {
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;
.icon {
@@ -247,36 +248,22 @@ export default {
}
.iconfont {
width: 4rem;
height: 4.2rem;
border: 0.1rem solid #C5DCFE;
text-align: center;
margin-top: 3.4rem;
margin-left: 2.6rem;
margin-top: 2.1rem;
margin-left: 1.3rem;
img {
margin-top: 0.9rem;
width: 2.4rem;
height: 2.4rem;
width: 2.5rem;
height: 2.6rem;
}
}
.switchLang {
width: 4rem;
height: 4.2rem;
border: 0.1rem solid #C5DCFE;
margin-top: 3.4rem;
margin-left: .6rem;
margin-top: 2.1rem;
margin-left: .4rem;
cursor: pointer;
text-align: center;
span {
font-size: 2rem;
line-height: 4rem;
color: #C5DCFE;
img{
width: 2.5rem;
height: 2.6rem;
}
}
.secondary {
display: none;
width: 25rem;

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

@@ -1,101 +1,99 @@
<script src="../../../utils/sist.js"></script>
<template>
<div class="news_center">
<div class="headline">
<!-- <div class="hr_div">-->
<!-- <div class="hr_line_left">-->
<!-- </div>-->
<!-- <div class="hr_dot_left">-->
<!-- </div>-->
<!-- </div>-->
<div class="title">
{{ $t("message.news_ceter") }}
<span class="vertica_line"></span>
<div class="news_center_english">
<span class="">NEWS</span>
<span class="">CENTER</span>
<el-row>
<el-col :span="5">
<div class="grid-content"></div>
</el-col>
<el-col :span="14">
<div class="headline">
<div class="title">
<!-- {{ $t("message.news_ceter") }}-->
新闻中心
<span class="vertica_line"></span>
<div class="news_center_english">
<span class="">NEWS</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>
<!-- <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-col>
</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>
</el-col>
<el-col :xs="22" :sm="20" :md="20" :lg="18" :xl="14">
<el-row class="news">
<el-col v-for="(news,index) in newsDate" :key="index" :xs="12" :sm="12" :md="12" :lg="6" :xl="6">
<div class="news_context" @click="getArticle(news)">
<div class="news_context_img">
<img :src="news.imgurl" alt="">
</div>
<div class="news_context_text">
{{ news.title }}
<el-col :span="14" class="news">
<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>
</el-col>
</el-row>
</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>
<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-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>
</template>
@@ -153,47 +151,46 @@ export default {
</style>
<style scoped lang="scss">
@import '../css/comment.css';
.news_center {
//padding-bottom: 2rem;
background-image: url("../../../assets/news_center/sy_bj3.png");
height: 97.6rem;
padding-top: 10rem;
padding-left: 10.9rem;
background-image: url("../../../assets/index/news_center/sy_bj3.png");
height: 61rem;
.headline {
width: 41.5rem;
height: 9.4rem;
border-radius: 20px;
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;
display: flex;
width: 100%;
justify-content: space-between;
.title {
display: flex;
height: 7rem;
line-height: 7rem;
font-size: 5rem;
width: 25.9rem;
height: 5.9rem;
line-height: 5.9rem;
border-radius: 2rem;
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: 6.3rem;
.vertica_line {
width: .1rem;
height: 4rem;
height: 2.5rem;
border: .1rem solid #FFFFFF;
margin: 1.5rem 1.4rem;
margin: 1.7rem 1.4rem;
}
.news_center_english {
width: 8.5rem;
height: 4.4rem;
font-size: 2rem;
width: 5.3rem;
height: 2.8rem;
font-size: 1.3rem;
font-weight: 500;
color: #FFFFFF;
line-height: 2.2rem;
line-height: 1.4rem;
margin-top: 1.6rem;
span {
float: left;
@@ -201,52 +198,60 @@ export default {
}
}
}
}
.slideshow {
width: 100%;
.more {
display: flex;
height: 3.7rem;
margin-top: 9.8rem;
.el-carousel__arrow {
top: 93%;
display: block;
}
.more_text {
font-size: 1.6rem;
font-weight: 500;
color: #8B8B8B;
line-height: 2.3rem;
letter-spacing: .2rem;
}
.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: "微软雅黑";
font-weight: 400;
color: #FFFFFF;
}
img {
width: 100%;
img {
width: 2.9rem;
height: 1.4rem;
margin-left: 0.8rem;
margin-top: .5rem;
}
}
}
.vline:last-child{
border: none;
}
.news {
//width: 106.3rem;
height: 36.9rem;
background-color: #fff;
margin-top: 4rem;
display: flex;
.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 {
cursor: pointer;
width: 23rem;
height: 23rem;
margin: 3rem auto;
border-radius: 1.4rem;
border: 0.1rem solid #CAD9F3;
width: 28rem;
height: 36.9rem;
.news_context_img {
height: 62%;
height: 42.8%;
width: 100%;
img {
@@ -255,32 +260,74 @@ export default {
}
.news_context_text {
height: 24%;
width: 80%;
font-size: 1.6rem;
font-weight: 400;
text-align: center;
color: #262626;
margin: 0 auto;
padding: 1rem 0;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box; //作为弹性伸缩盒子模型显示。
-webkit-box-orient: vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
-webkit-line-clamp: 3; //显示的行
//padding: 4rem 2rem;
padding: 4rem 0 4rem 2rem;
.vline {
height: 14rem;
border-right: 1px solid #CCCCCC;
//padding-right: 1rem;
.news_context_text-title {
width: 23.8rem;
height: 2.1rem;
font-size: 1.5rem;
font-weight: 500;
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) {
.news_context {
width: 20rem !important;
height: 20rem !important;
.news_context_img {
height: 12.5rem !important;
}
}
}
//@media screen and (min-width: 1100px) and (max-width: 1400px) {
// .news_context {
// width: 20rem !important;
// height: 20rem !important;
//
// .news_context_img {
// height: 12.5rem !important;
// }
// }
//}
</style>

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

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