dengjie commit : 新闻中心部分样式
This commit is contained in:
clay
BIN
src/assets/news_center/sy_bj3.png
Normal file
BIN
src/assets/news_center/sy_bj3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 613 KiB |
BIN
src/assets/news_center/sy_bj3@2x.png
Normal file
BIN
src/assets/news_center/sy_bj3@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 MiB |
@@ -2,59 +2,66 @@
|
||||
<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="hr_div">-->
|
||||
<!-- <div class="hr_line_left">-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="hr_dot_left">-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<div class="title">
|
||||
{{ $t('message.news_ceter') }}
|
||||
</div>
|
||||
<div class="hr_div">
|
||||
<div class="hr_line_right">
|
||||
</div>
|
||||
<div class="hr_dot_right">
|
||||
{{ $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="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-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-col :xs="1" :sm="2" :md="2" :lg="3" :xl="5">
|
||||
<div class="grid-content"></div>
|
||||
@@ -82,11 +89,11 @@
|
||||
</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') }}
|
||||
{{ $t("message.more") }}
|
||||
</div>
|
||||
<!-- <div class="more_img">-->
|
||||
<!-- <img src="@/assets/index/sy_icon_zhdl.png" alt="">-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="more_img">-->
|
||||
<!-- <img src="@/assets/index/sy_icon_zhdl.png" alt="">-->
|
||||
<!-- </div>-->
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
@@ -94,7 +101,7 @@
|
||||
|
||||
<script>
|
||||
import {banner, getArticleList} from "@/api";
|
||||
import {toArticle,lookMoreComment} from "@/utils/sist";
|
||||
import {toArticle, lookMoreComment} from "@/utils/sist";
|
||||
import {lookMoreFixedComment} from "../../../utils/sist";
|
||||
|
||||
export default {
|
||||
@@ -103,23 +110,23 @@ export default {
|
||||
return {
|
||||
newsDate: [],
|
||||
bannerDate: [],
|
||||
width: document.documentElement.clientWidth > 992,
|
||||
}
|
||||
width: document.documentElement.clientWidth > 992
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
this.getBanner()
|
||||
this.getList();
|
||||
this.getBanner();
|
||||
},
|
||||
methods: {
|
||||
clickTo(link) {
|
||||
//console.log(link)
|
||||
window.location.href = link;//当前标签页
|
||||
},
|
||||
getArticle(news){
|
||||
toArticle(news,this.width)
|
||||
getArticle(news) {
|
||||
toArticle(news, this.width);
|
||||
},
|
||||
lookMore(news) {
|
||||
lookMoreFixedComment("DpHktHeXJp3MX-FZoZdjz3w",this.width)
|
||||
lookMoreFixedComment("DpHktHeXJp3MX-FZoZdjz3w", this.width);
|
||||
},
|
||||
getList() {
|
||||
getArticleList({
|
||||
@@ -127,17 +134,18 @@ export default {
|
||||
pageNum: 1,
|
||||
pageSize: 4
|
||||
}).then(res => {
|
||||
this.newsDate = res.rows
|
||||
})
|
||||
this.newsDate = res.rows;
|
||||
});
|
||||
},
|
||||
getBanner() {
|
||||
banner("NEd5n92EMIpyyBslaNqsRgE").then(res => {
|
||||
this.bannerDate = res.data
|
||||
})
|
||||
this.bannerDate = res.data;
|
||||
});
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-carousel__indicators {
|
||||
display: none;
|
||||
@@ -148,7 +156,51 @@ export default {
|
||||
@import '../css/comment.css';
|
||||
|
||||
.news_center {
|
||||
padding-bottom: 2rem;
|
||||
//padding-bottom: 2rem;
|
||||
background-image: url("../../../assets/news_center/sy_bj3.png");
|
||||
height: 97.6rem;
|
||||
padding-top: 10rem;
|
||||
padding-left: 10.9rem;
|
||||
|
||||
.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;
|
||||
|
||||
.title {
|
||||
display: flex;
|
||||
height: 7rem;
|
||||
line-height: 7rem;
|
||||
font-size: 5rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: .1rem;
|
||||
color: #FFFFFF;
|
||||
text-align: left;
|
||||
|
||||
.vertica_line {
|
||||
width: .1rem;
|
||||
height: 4rem;
|
||||
border: .1rem solid #FFFFFF;
|
||||
margin: 1.5rem 1.4rem;
|
||||
}
|
||||
|
||||
.news_center_english {
|
||||
width: 8.5rem;
|
||||
height: 4.4rem;
|
||||
font-size: 2rem;
|
||||
font-weight: 500;
|
||||
color: #FFFFFF;
|
||||
line-height: 2.2rem;
|
||||
|
||||
span {
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.slideshow {
|
||||
@@ -213,9 +265,9 @@ export default {
|
||||
padding: 1rem 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display:-webkit-box; //作为弹性伸缩盒子模型显示。
|
||||
-webkit-box-orient:vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
|
||||
-webkit-line-clamp:3; //显示的行
|
||||
display: -webkit-box; //作为弹性伸缩盒子模型显示。
|
||||
-webkit-box-orient: vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
|
||||
-webkit-line-clamp: 3; //显示的行
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -4,10 +4,10 @@
|
||||
* @description：comment
|
||||
* @email: clay@hchyun.com
|
||||
*/
|
||||
.headline{
|
||||
text-align:center;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
/*.headline{*/
|
||||
/* text-align:center;*/
|
||||
/* margin-bottom: 3rem;*/
|
||||
/*}*/
|
||||
|
||||
.hr_line_left{
|
||||
float: left;
|
||||
@@ -56,15 +56,15 @@
|
||||
display: inline-block;
|
||||
width: 25rem;
|
||||
}
|
||||
.headline .title {
|
||||
display: inline-block;
|
||||
padding: 1rem 3.3rem;
|
||||
background: #1956BC;
|
||||
border-radius: 2.95rem;
|
||||
font-size: 2.6rem;
|
||||
font-weight: 500;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
/*.headline .title {*/
|
||||
/* display: inline-block;*/
|
||||
/* padding: 1rem 3.3rem;*/
|
||||
/* background: #1956BC;*/
|
||||
/* border-radius: 2.95rem;*/
|
||||
/* font-size: 2.6rem;*/
|
||||
/* font-weight: 500;*/
|
||||
/* color: #FFFFFF;*/
|
||||
/*}*/
|
||||
|
||||
.divider div {
|
||||
float: left;
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col class="interval">
|
||||
<el-col >
|
||||
<NewsCenter/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
Reference in New Issue
Block a user