333 lines
9.3 KiB
Vue
333 lines
9.3 KiB
Vue
<template>
|
|
<div class="scientific_research_trends">
|
|
<!--title-->
|
|
<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.research') }}
|
|
<!--科学研究-->
|
|
</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="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="title">-->
|
|
<!-- <!– {{ $t('message.news_center') }}–>-->
|
|
<!-- 科学研究-->
|
|
<!-- </div>-->
|
|
<!-- <el-row>-->
|
|
<!-- <el-col :span="8">-->
|
|
<!-- <hr class="hr">-->
|
|
<!-- </el-col>-->
|
|
<!-- <el-col :span="8">-->
|
|
<!-- <div class="divider_text">Scientific research trends</div>-->
|
|
<!-- </el-col>-->
|
|
<!-- <el-col :span="8">-->
|
|
<!-- <hr class="hr">-->
|
|
<!-- </el-col>-->
|
|
<!-- </el-row>-->
|
|
<!-- </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 class="scientific_context" :xs="22" :sm="20" :md="20" :lg="18" :xl="14">
|
|
<el-row>
|
|
<el-col v-for="(item,index) in scientificData" :key="index" :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
|
|
<div @click="getArticle(item)">
|
|
<el-row class="scientific_context_text">
|
|
<el-col :span="2" class="img">
|
|
<img v-if="index == 0" src="@/assets/index/scientific_research_trends/sy_icon_bh1.png" alt="">
|
|
<img v-if="index == 1" src="@/assets/index/scientific_research_trends/sy_icon_bh2.png" alt="">
|
|
<img v-if="index == 2" src="@/assets/index/scientific_research_trends/sy_icon_bh3.png" alt="">
|
|
<img v-if="index == 3" src="@/assets/index/scientific_research_trends/sy_icon_bh4.png" alt="">
|
|
<img v-if="index == 4" src="@/assets/index/scientific_research_trends/sy_icon_bh5.png" alt="">
|
|
<img v-if="index == 5" src="@/assets/index/scientific_research_trends/sy_icon_bh6.png" alt="">
|
|
<img v-if="index == 6" src="@/assets/index/scientific_research_trends/sy_icon_bh7.png" alt="">
|
|
<img v-if="index == 7" src="@/assets/index/scientific_research_trends/sy_icon_bh8.png" alt="">
|
|
<img v-if="index == 8" src="@/assets/index/scientific_research_trends/sy_icon_bh9.png" alt="">
|
|
<img v-if="index == 9" src="@/assets/index/scientific_research_trends/sy_icon_bh10.png" alt="">
|
|
</el-col>
|
|
<el-col :span="16" class="text">{{ item.title }}</el-col>
|
|
<el-col :span="4">
|
|
<div class="time">{{ parseTime(item.publishTime) }}</div>
|
|
<!-- <div class="time">{{ item.publishTime }}</div>-->
|
|
</el-col>
|
|
</el-row>
|
|
<div class="scientific_context_divider">
|
|
<hr v-if="index < 8" style="border: 0.1rem solid #E6E6E6;">
|
|
<hr v-if="!width && index == 8" style="border: 0.1rem solid #E6E6E6;">
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<!--更多-->
|
|
|
|
<div class="headline">
|
|
<div style="background: #FFFFFF;color: #1956BC;" class="more" @click="lookMore('b4Lm82Ct_eaF2u5XDABv0TM')">
|
|
{{ $t('message.more') }}
|
|
</div>
|
|
<div class="hr_div">
|
|
<div class="hr_line_left">
|
|
</div>
|
|
<div class="hr_dot_left">
|
|
</div>
|
|
</div>
|
|
<div class="hr_text" style="color:#E6E6E6;">
|
|
{{ $t('message.academic') }}
|
|
<!--学术交流-->
|
|
</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 class="academia_context" :xs="22" :sm="20" :md="20" :lg="18" :xl="14">
|
|
<el-row>
|
|
<el-col v-for="(item,index) in academiaData" :key="index" :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
|
|
<div @click="getArticle(item)">
|
|
<el-row class="academia_context_text">
|
|
<el-col :span="2" class="img"><img src="@/assets/index/scientific_research_trends/sy_icon_b1.png" alt="">
|
|
</el-col>
|
|
<el-col :span="16" class="text">{{item.title}}</el-col>
|
|
<el-col :span="4">
|
|
<div class="time">{{ parseTime(item.publishTime) }}</div>
|
|
</el-col>
|
|
</el-row>
|
|
<div class="academia_context_divider">
|
|
<hr v-if="index < 4" style="border: 0.1rem solid #E6E6E6;">
|
|
<hr v-if="!width && index == 4" style="border: 0.1rem solid #E6E6E6;">
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
</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 style="background: #FFFFFF;color: #1956BC;" class="more" @click="lookMore('47sdOe8NQs0B4EHmM-wFWjQ')">
|
|
{{ $t('message.more') }}
|
|
</div>
|
|
<!-- <div class="more_img">-->
|
|
<!-- <img src="@/assets/index/scientific_research_trends/sy_icon_zhdb.png" alt="">-->
|
|
<!-- </div>-->
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {getArticleList, info} from "@/api";
|
|
import {parseTime} from '@/utils/ebts'
|
|
import {toArticle,lookMoreComment} from "@/utils/sist";
|
|
import {lookMoreFixedComment} from "../../../utils/sist";
|
|
|
|
export default {
|
|
name: "scientific_research_trends",
|
|
data() {
|
|
return {
|
|
width: document.documentElement.clientWidth > 992,
|
|
scientificData: [],
|
|
academiaData: [],
|
|
}
|
|
},
|
|
created() {
|
|
this.getScientificList()
|
|
this.getAcademiaList()
|
|
},
|
|
methods: {
|
|
getArticle(news){
|
|
toArticle(news,this.width)
|
|
},
|
|
lookMore(id) {
|
|
lookMoreFixedComment(id,this.width)
|
|
},
|
|
getScientificList() {
|
|
getArticleList({
|
|
type: "STCplDRCWAA3zcFE0EBTcQI",
|
|
pageNum: 1,
|
|
pageSize: 10
|
|
}).then(res => {
|
|
this.scientificData = res.rows
|
|
})
|
|
},
|
|
getAcademiaList() {
|
|
getArticleList({
|
|
type: "zpUhQJwnjHyJBqbvnWxcqwM",
|
|
pageNum: 1,
|
|
pageSize: 6
|
|
}).then(res => {
|
|
this.academiaData = res.rows
|
|
})
|
|
},
|
|
parseTime(time) {
|
|
return parseTime(time, '{y}-{m}-{d}')
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import '../css/comment.css';
|
|
|
|
.scientific_research_trends {
|
|
background-image: url("../../../assets/index/scientific_research_trends/sy_bj2.png");
|
|
padding-top: 4rem;
|
|
padding-bottom: 2rem;
|
|
}
|
|
|
|
.headline {
|
|
.title {
|
|
background: #FFFFFF;
|
|
color: #1956BC;
|
|
}
|
|
|
|
.divider_text {
|
|
font-size: 2rem;
|
|
font-weight: 500;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
}
|
|
|
|
.scientific_context {
|
|
background: rgba(255, 255, 255, 0.9);
|
|
border-radius: 2.4rem;
|
|
padding: 2rem 0;
|
|
|
|
.scientific_context_text {
|
|
margin-top: 2rem;
|
|
color: #1956BC;
|
|
padding-left: 4rem;
|
|
|
|
.img {
|
|
img {
|
|
width: 2.6rem;
|
|
}
|
|
}
|
|
|
|
.text {
|
|
cursor: pointer;
|
|
margin-left: 1rem;
|
|
font-size: 1.8rem;
|
|
font-weight: 500;
|
|
overflow: hidden; //超出的文本隐藏
|
|
text-overflow: ellipsis; //溢出用省略号显示
|
|
white-space: nowrap; //溢出不换行
|
|
}
|
|
|
|
.time {
|
|
text-align: center;
|
|
font-size: 1.2rem;
|
|
font-family: "微软雅黑";
|
|
font-weight: 400;
|
|
padding: .2rem .5rem;
|
|
width: 7.2rem;
|
|
height: 2.2rem;
|
|
line-height: 2.2rem;
|
|
border-radius: 1.1rem;
|
|
border: 0.1rem solid #1956BC;
|
|
margin-left: 2rem;
|
|
}
|
|
}
|
|
|
|
.scientific_context_divider {
|
|
padding-left: 4rem;
|
|
margin-top: 2rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
}
|
|
|
|
.academia_context {
|
|
background: rgba(255, 255, 255, 0.9);
|
|
padding: 2rem 0;
|
|
|
|
.academia_context_divider {
|
|
padding-left: 4rem;
|
|
margin-top: 2rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.academia_context_text {
|
|
margin-top: 2rem;
|
|
color: #1956BC;
|
|
padding-left: 4rem;
|
|
|
|
|
|
.img {
|
|
img {
|
|
width: 2.6rem;
|
|
}
|
|
}
|
|
|
|
.text {
|
|
cursor: pointer;
|
|
margin-left: 1rem;
|
|
font-size: 1.8rem;
|
|
font-weight: 500;
|
|
overflow: hidden; //超出的文本隐藏
|
|
text-overflow: ellipsis; //溢出用省略号显示
|
|
white-space: nowrap; //溢出不换行
|
|
}
|
|
|
|
.time {
|
|
font-size: 1.2rem;
|
|
font-family: "微软雅黑";
|
|
font-weight: 400;
|
|
color: #1956BC;
|
|
line-height: 2.4rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 1100px) and (max-width: 1400px) {
|
|
.scientific_context_text {
|
|
padding-left: 2rem !important;
|
|
|
|
.time {
|
|
margin-left: 2rem !important;
|
|
}
|
|
}
|
|
.academia_context_text {
|
|
padding-left: 2rem !important;
|
|
|
|
.time {
|
|
margin-left: 2rem !important;
|
|
}
|
|
}
|
|
}
|
|
</style>
|