361 lines
10 KiB
Vue
361 lines
10 KiB
Vue
<template>
|
|
<div class="academy_and_sciences">
|
|
<el-row type="flex" justify="center">
|
|
<el-col :xs="22" :sm="22" :md="20" :lg="16" :xl="14" >
|
|
<el-row>
|
|
<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
|
|
<div class="sciences_title">
|
|
{{ $t("message.scientific") }}
|
|
</div>
|
|
<div class="sciences_content" v-for="(item,index) in academyData" :key="index" @click="getArticle(item)">
|
|
<div class="sciences_content_time">
|
|
{{getMonthTime(item.publishTime)}}
|
|
</div>
|
|
<div class="sciences_content_text">
|
|
{{item.title}}
|
|
</div>
|
|
</div>
|
|
<div class="more" @click="lookMore('b4Lm82Ct_eaF2u5XDABv0TM')">
|
|
<span class="more_text">更多</span>
|
|
<img src="../../../assets/index/academy_and_sciences/gangduobai1.png" alt="">
|
|
</div>
|
|
</el-col>
|
|
<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
|
|
<div class="academy_title">
|
|
{{ $t("message.academic") }}
|
|
</div>
|
|
<el-row>
|
|
<el-col :span="11">
|
|
<div class="academy_content" @click="getArticle(sciencesData[0])">
|
|
<div class="academy_content_icontime">
|
|
<div class="img"></div>
|
|
<span>{{getDateTime(sciencesData[0].publishTime)}}</span>
|
|
</div>
|
|
<div class="academy_content_title">
|
|
{{sciencesData[0].title}}
|
|
</div>
|
|
<div v-if="sciencesData[0].description" class="academy_content_text">{{sciencesData[0].description}}</div>
|
|
<div v-if="!sciencesData[0].description" class="academy_content_text" v-html="sciencesData[0].content"></div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="2">
|
|
<div class="grid-content"></div>
|
|
</el-col>
|
|
<el-col :span="11">
|
|
<div class="academy_content" @click="getArticle(sciencesData[1])">
|
|
<div class="academy_content_icontime">
|
|
<div class="img"></div>
|
|
<span>{{getDateTime(sciencesData[1].publishTime)}}</span>
|
|
</div>
|
|
<div class="academy_content_title">
|
|
{{sciencesData[1].title}}
|
|
</div>
|
|
<div v-if="sciencesData[1].description" class="academy_content_text">{{sciencesData[1].description}}</div>
|
|
<div v-if="!sciencesData[1].description" class="academy_content_text" v-html="sciencesData[1].content"></div>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row>
|
|
<el-col :span="11">
|
|
<div class="academy_content" @click="getArticle(sciencesData[1])">
|
|
<div class="academy_content_icontime">
|
|
<div class="img"></div>
|
|
<span>{{getDateTime(sciencesData[2].publishTime)}}</span>
|
|
</div>
|
|
<div class="academy_content_title">
|
|
{{sciencesData[2].title}}
|
|
</div>
|
|
<div v-if="sciencesData[2].description" class="academy_content_text">{{sciencesData[2].description}}</div>
|
|
<div v-if="!sciencesData[2].description" class="academy_content_text" v-html="sciencesData[2].content"></div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="2">
|
|
<div class="grid-content"></div>
|
|
</el-col>
|
|
|
|
<el-col :span="11">
|
|
<div class="academy_content" @click="getArticle(sciencesData[1])">
|
|
<div class="academy_content_icontime">
|
|
<!-- <img :src="src" alt="">-->
|
|
<div class="img"></div>
|
|
<span>{{getDateTime(sciencesData[3].publishTime)}}</span>
|
|
</div>
|
|
<div class="academy_content_title">
|
|
{{sciencesData[3].title}}
|
|
</div>
|
|
<div v-if="sciencesData[3].description" class="academy_content_text">{{sciencesData[3].description}}</div>
|
|
<div v-if="!sciencesData[3].description" class="academy_content_text" v-html="sciencesData[3].content"></div>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
<div class="more" @click="lookMore('47sdOe8NQs0B4EHmM-wFWjQ')">
|
|
<span class="more_text">更多</span>
|
|
<img src="../../../assets/index/academy_and_sciences/gangduobai1.png" alt="">
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
import {getArticleList} from "@/api";
|
|
import {toArticle} from "@/utils/sist";
|
|
import {lookMoreFixedComment} from "../../../utils/sist";
|
|
export default {
|
|
name: "academy_and_sciences",
|
|
data(){
|
|
return{
|
|
width: document.documentElement.clientWidth > 992,
|
|
academyData:[],
|
|
sciencesData:[],
|
|
}
|
|
},
|
|
|
|
created() {
|
|
this.getAcademyList();
|
|
this.getSciencesList();
|
|
},
|
|
methods: {
|
|
clickTo(link) {
|
|
//console.log(link)
|
|
window.location.href = link;//当前标签页
|
|
},
|
|
getArticle(news) {
|
|
toArticle(news, this.width);
|
|
},
|
|
lookMore(str) {
|
|
lookMoreFixedComment(str, this.width);
|
|
},
|
|
getAcademyList() {
|
|
getArticleList({
|
|
navId: "b4Lm82Ct_eaF2u5XDABv0TM",
|
|
pageNum: 1,
|
|
pageSize: 9
|
|
}).then(res => {
|
|
console.log(res.rows);
|
|
this.academyData = res.rows;
|
|
});
|
|
},
|
|
getSciencesList() {
|
|
getArticleList({
|
|
navId: "47sdOe8NQs0B4EHmM-wFWjQ",
|
|
pageNum: 1,
|
|
pageSize: 4
|
|
}).then(res => {
|
|
this.sciencesData = res.rows;
|
|
});
|
|
},
|
|
|
|
getDateTime(date) {
|
|
let time = new Date(date);
|
|
let year = time.getFullYear();
|
|
let month = time.getMonth() + 1
|
|
if (month < 10){
|
|
month = "0"+month
|
|
}
|
|
let day = time.getDate();
|
|
if (day<10){
|
|
day = "0"+ day
|
|
}
|
|
return year + "-" + month + "-" + day;
|
|
},
|
|
|
|
getMonthTime(date) {
|
|
let time = new Date(date);
|
|
let month = time.getMonth() + 1
|
|
if (month < 10){
|
|
month = "0"+month
|
|
}
|
|
let day = time.getDate();
|
|
if (day<10){
|
|
day = "0"+ day
|
|
}
|
|
return month + "-" + day;
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@media screen and (max-width: 960px) {
|
|
.more {
|
|
justify-content: center!important;
|
|
}
|
|
}
|
|
@media screen and (max-width: 768px) {
|
|
.more {
|
|
justify-content: center!important;
|
|
}
|
|
}
|
|
/deep/ .el-col-2 {
|
|
width: 8%;
|
|
}
|
|
|
|
.academy_and_sciences {
|
|
background-image: url("../../../assets/index/academy_and_sciences/bj.png");
|
|
background-size: cover;
|
|
background-repeat: no-repeat;
|
|
width: 100%;
|
|
//height: 68.3rem;
|
|
|
|
.sciences_title, .academy_title {
|
|
display: flex;
|
|
width: 18rem;
|
|
height: 5.9rem;
|
|
line-height: 5.9rem;
|
|
border-radius: 1.3rem 0 0 1.3rem;
|
|
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: 2rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.sciences_content {
|
|
cursor: pointer;
|
|
display: flex;
|
|
margin-bottom: 1.6rem;
|
|
|
|
&_time {
|
|
//width: 38px;
|
|
//height: 18px;
|
|
font-size: 1.3rem;
|
|
font-weight: 500;
|
|
color: #FFFFFF;
|
|
line-height: 2.3rem;
|
|
margin-right: 1.4rem;
|
|
}
|
|
|
|
&_text {
|
|
width: 81%;
|
|
//height: 23px;
|
|
font-size: 1.6rem;
|
|
font-weight: 500;
|
|
color: #FFFFFF;
|
|
line-height: 2.3rem;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box; //作为弹性伸缩盒子模型显示。
|
|
-webkit-box-orient: vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
|
|
-webkit-line-clamp: 1; //显示的行
|
|
}
|
|
}
|
|
|
|
.more {
|
|
width: 100%;
|
|
display: flex;
|
|
height: 2.3rem;
|
|
margin-top: 3.4rem;
|
|
margin-bottom: 3rem;
|
|
cursor: pointer;
|
|
.more_text {
|
|
font-size: 1.6rem;
|
|
font-weight: 500;
|
|
color: #FFFFFF;
|
|
letter-spacing: .2rem;
|
|
}
|
|
|
|
img {
|
|
width: 2.9rem;
|
|
height: 1.4rem;
|
|
margin-left: 0.8rem;
|
|
margin-top: .5rem;
|
|
}
|
|
}
|
|
|
|
.academy_content:hover{
|
|
box-shadow: 0 8px 11px 0 rgba(0, 73, 174, 0.5);
|
|
background: #FFFFFF;
|
|
color: #0049AF;
|
|
.academy_content_text{
|
|
color: #575757;
|
|
font-size: 1.4rem !important;
|
|
}
|
|
|
|
.img {
|
|
background-image: url("../../../assets/index/academy_and_sciences/shijian2.png");
|
|
}
|
|
}
|
|
|
|
.academy_content {
|
|
cursor: pointer;
|
|
|
|
//&:hover{
|
|
// box-shadow: 0 8px 11px 0 rgba(0, 73, 174, 0.5);
|
|
// background: #FFFFFF;
|
|
// color: #0049AF;
|
|
// .academy_content_text{
|
|
// color: #575757;
|
|
// }
|
|
//}
|
|
|
|
|
|
background-color: rgba(10, 81, 174, 0.89);
|
|
padding: 2.5rem 2.3rem;
|
|
border-radius: 16px;
|
|
margin-bottom: 1.9rem;
|
|
color: #FFFFFF;
|
|
&_icontime {
|
|
display: flex;
|
|
margin-bottom: 1.1rem;
|
|
.img {
|
|
background-image: url("../../../assets/index/academy_and_sciences/shijian3.png");
|
|
background-size: 1.5rem;
|
|
width: 1.5rem;
|
|
height: 1.5rem;
|
|
margin-right: .9rem;
|
|
}
|
|
|
|
span {
|
|
//width: 79px;
|
|
//height: 18px;
|
|
font-size: 1.3rem;
|
|
font-weight: 500;
|
|
|
|
line-height: 1.85rem;
|
|
}
|
|
}
|
|
|
|
&_title {
|
|
//width: 139px;
|
|
width: 100%;
|
|
//height: 38px;
|
|
font-size: 1.6rem;
|
|
font-weight: bold;
|
|
//color: #FFFFFF;
|
|
line-height: 1.9rem;
|
|
letter-spacing: .1rem;
|
|
margin-bottom: .6rem;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box; //作为弹性伸缩盒子模型显示。
|
|
-webkit-box-orient: vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
|
|
-webkit-line-clamp: 1; //显示的行
|
|
}
|
|
|
|
&_text {
|
|
//width: 139px;
|
|
width: 100%;
|
|
//height: 41px;
|
|
font-size: 1rem;
|
|
font-weight: 500;
|
|
//color: #FFFFFF;
|
|
line-height: 1.4rem;
|
|
letter-spacing: .1rem;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box; //作为弹性伸缩盒子模型显示。
|
|
-webkit-box-orient: vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
|
|
-webkit-line-clamp: 3; //显示的行
|
|
}
|
|
}
|
|
}
|
|
</style>
|