@ -62,77 +62,70 @@
< div class = "cover" @click ="toSet(4)" > 点击更换标题与描述 < / div > < div class = "cover" @click ="toSet(4)" > 点击更换标题与描述 < / div >
< / div > < / div >
< div class = "c-wrap" > < div class = "c-wrap" >
< div class = "news-banner" > < div v-if ="articles.length" class="news-banner" >
< img style = "width: 50%;height: 410px;overflow: hidden;" width = "100%" height = "480" < img class = "pic" width = "100%" height = "100%" :src ="articles[0].titleImg" alt = "" >
src = "https://huorantech.com/images/about/5.png" alt = "" >
< div class = "right" > < div class = "right" >
< h6 > IASF is driven to serve the Science and industry , and solve grand challenges through research and < h6 > { { articles [ 0 ] . title } } < / h6 >
innovation . We are open and creative < / h6 > < div class = "des" v-html ="articles[0].mainBody" > < / div >
< div class = "des" > Innovation centers are distributed in the bay areas , such as the San Francisco Bay < p class = "meta" > { { articles [ 0 ] . releaseTime } } { { articles [ 0 ] . classificationName && ' | ' +
area , the articles [ 0 ] . classificationName } } < / p >
New York Bay area , and the Tokyo Bay area in Japan . And the Guangdong - Hong Kong - Macao Greater Bay
< / div >
< p class = "meta" > 2022 - 07 - 24 | Research < / p >
< / div > < / div >
< / div > < / div >
< ul class = "news" > < ul class = "news" >
< li > < template v-for ="(item, i) in articles" >
< img class = "pic" src = "https://huorantech.com/images/about/5.png" alt = "" > < li v-if ="i" :key ="i" >
< div class = "texts" > < div class = "pic-wrap" >
< p class = "meta" > 2022 - 07 - 24 | 综合新闻 < / p > < img class = "pic" :src ="item.titleImg" alt = "" >
< div class = "des" > X射线自由电子激光已经成为了化学 、 生物 、 物理等领域不可或缺的研究手段 < / div > < div class = "pic-cover" > < / div >
< img class = "arrow" src = "@/assets/images/arrow.png" alt = "" > < / div >
< / div > < div class = "texts" >
< / li > < h6 > { { item . title } } < / h6 >
< li > < div class = "des" v-html ="item.mainBody" > < / div >
< img class = "pic" src = "https://huorantech.com/images/about/5.png" alt = "" > < p class = "meta" > { { item . releaseTime } } { { item . classificationName && ' | ' +
< div class = "texts" > item . classificationName
< p class = "meta" > 2022 - 07 - 24 | 建设进展 < / p > } } < / p >
< div class = "des" > 自由电子激光装置调试及运行过程中提供稳定可靠的单发辐射脉冲纵向信息 < / div > < / div >
< img class = "arrow" src = "@/assets/images/arrow.png" alt = "" > < / li >
< / div > < / template >
< / li >
< li >
< img class = "pic" src = "https://huorantech.com/images/about/5.png" alt = "" >
< div class = "texts" >
< p class = "meta" > 2022 - 07 - 24 | 学术动态 < / p >
< div class = "des" > 基于上海软X射线自由电子激光试验装置 ， 科研人员对这一方法进行了实验验证 < / div >
< img class = "arrow" src = "@/assets/images/arrow.png" alt = "" >
< / div >
< / li >
< / ul > < / ul >
< div class = "cover" @click ="toSet(5)" > 关联栏目 < / div > < div class = "cover" @click ="toSet(5)" > 关联栏目 < / div >
< / div > < / div >
< ul class = "news-carousel" > < ul class = "news-carousel" >
< li > < li v-if ="articles1.length" >
< img class = "pic" src = "https://huorantech.com/images/about/5 .png" alt = "" > < img class = "pic" src = "https://huorantech.com/images/iasf/8.png" alt = "" >
< div class = "texts" > < div class = "texts" >
< h6 > 媒体关注 < / h6 > < h6 > { { getColumnTitle ( modules [ 6 ] . form ) } } < / h6 >
< p class = "meta" > 来源人民日报 < / p > < div class = "des-wrap" >
< div class = "des" > 进深圳规划中的深圳中能高重复频率X射线自由电子激光项目和大连极紫外自由电子 < / div > < p class = "meta" > { { articles1 [ 0 ] . source } } < / p >
< p class = "date" > 2022 - 07 - 24 < / p > < div class = "des" > { { articles1 [ 0 ] . title } } < / div >
< / div >
< p class = "date" > { { articles1 [ 0 ] . releaseTime } } < / p >
< / div > < / div >
< div class = "cover" @click ="toSet(6)" > 关联栏目 < / div > < div class = "cover" @click ="toSet(6)" > 关联栏目 < / div >
< / li > < / li >
< li > < li v-if ="articles2.length" >
< img class = "pic" src = "https://huorantech.com/images/about/5 .png" alt = "" > < img class = "pic" src = "https://huorantech.com/images/iasf/9 .png" alt = "" >
< div class = "texts" > < div class = "texts" >
< h6 > 媒体关注 < / h6 > < h6 > { { getColumnTitle ( modules [ 7 ] . form ) } } < / h6 >
< p class = "meta" > 来源人民日报 < / p > < div class = "des-wrap" >
< div class = "des" > 进深圳规划中的深圳中能高重复频率X射线自由电子激光项目和大连极紫外自由电子 < / div > < p class = "meta" > { { articles2 [ 0 ] . source } } < / p >
< p class = "date" > 2022 - 07 - 24 < / p > < div class = "des" > { { articles2 [ 0 ] . title } } < / div >
< / div >
< p class = "date" > { { articles2 [ 0 ] . releaseTime } } < / p >
< / div > < / div >
< div class = "cover" @click ="toSet(7)" > 关联栏目 < / div > < div class = "cover" @click ="toSet(7)" > 关联栏目 < / div >
< / li > < / li >
< li > < li v-if ="articles3.length" >
< img class = "pic" src = "https://huorantech.com/images/about/5 .png" alt = "" > < img class = "pic" src = "https://huorantech.com/images/iasf/10 .png" alt = "" >
< div class = "texts" > < div class = "texts" >
< h6 > 媒体关注 < / h6 > < h6 > { { getColumnTitle ( modules [ 8 ] . form ) } } < / h6 >
< p class = "meta" > 来源人民日报 < / p > < div class = "des-wrap" >
< div class = "des" > 进深圳规划中的深圳中能高重复频率X射线自由电子激光项目和大连极紫外自由电子 < / div > < p class = "meta" > { { articles3 [ 0 ] . source } } < / p >
< p class = "date" > 2022 - 07 - 24 < / p > < div class = "des" > { { articles3 [ 0 ] . title } } < / div >
< / div >
< p class = "date" > { { articles3 [ 0 ] . releaseTime } } < / p >
< / div > < / div >
< div class = "cover" @click ="toSet(8)" > 关联栏目 < / div > < div class = "cover" @click ="toSet(8)" > 关联栏目 < / div >
< / li > < / li >
@ -257,18 +250,58 @@
< / template > < / template >
< script > < script >
import Util from '@/libs/util'
import mixins from '@/mixins/page' import mixins from '@/mixins/page'
import Modules from '@/const/modules' import Modules from '@/const/modules'
export default { export default {
mixins : [ mixins ] , mixins : [ mixins ] ,
data ( ) { data ( ) {
return { return {
modules : Modules . iasf modules : Modules . iasf ,
articles : [ ] ,
articles1 : [ ] ,
articles2 : [ ] ,
articles3 : [ ] ,
articles4 : [ ] ,
} }
} , } ,
mounted ( ) { } , mounted ( ) { } ,
methods : { methods : {
/ / 获 取 文 章 列 表
async getArticles ( ) {
const json = this . modules
if ( json [ 5 ] . form . column . length ) {
const { column , articleNum } = json [ 5 ] . form
const { data } = await this . $post ( ` ${ this . api . queryArticlesByColumnType } ?columnId= ${ column [ column . length - 1 ] } ` )
this . articles = Util . removeTag ( data . slice ( 0 , articleNum || 4 ) )
}
if ( json [ 6 ] . form . column . length ) {
const { column , articleNum } = json [ 6 ] . form
const { data } = await this . $post ( ` ${ this . api . queryArticlesByColumnType } ?columnId= ${ column [ column . length - 1 ] } ` )
this . articles1 = Util . removeTag ( data . slice ( 0 , articleNum || 4 ) )
}
if ( json [ 7 ] . form . column . length ) {
const { column , articleNum } = json [ 7 ] . form
const { data } = await this . $post ( ` ${ this . api . queryArticlesByColumnType } ?columnId= ${ column [ column . length - 1 ] } ` )
this . articles2 = Util . removeTag ( data . slice ( 0 , articleNum || 4 ) )
}
if ( json [ 8 ] . form . column . length ) {
const { column , articleNum } = json [ 8 ] . form
const { data } = await this . $post ( ` ${ this . api . queryArticlesByColumnType } ?columnId= ${ column [ column . length - 1 ] } ` )
this . articles3 = Util . removeTag ( data . slice ( 0 , articleNum || 4 ) )
}
if ( json [ 10 ] . form . column . length ) {
const { column , articleNum } = json [ 10 ] . form
const { data } = await this . $post ( ` ${ this . api . queryArticlesByColumnType } ?columnId= ${ column [ column . length - 1 ] } ` )
this . articles4 = Util . removeTag ( data . slice ( 0 , articleNum || 3 ) )
}
} ,
moduleSubmit ( ) {
console . log ( 33 , this . modules )
this . getArticles ( )
}
} }
} ; } ;
< / script > < / script >
@ -393,6 +426,7 @@ export default {
cursor : pointer ; cursor : pointer ;
. pic { . pic {
width : 50 % ;
transition : 0.5 s ; transition : 0.5 s ;
& : hover { & : hover {
@ -412,7 +446,8 @@ export default {
} }
. des { . des {
font - size : 1.02 rem ; font - size : 18 px ;
line - height : 32 px ;
} }
. meta { . meta {
@ -457,6 +492,7 @@ export default {
li { li {
width : calc ( ( 100 % - 18 px ) / 3 ) ; width : calc ( ( 100 % - 18 px ) / 3 ) ;
margin - right : 9 px ; margin - right : 9 px ;
background - color : # fff ;
& : nth - child ( 3 n ) { & : nth - child ( 3 n ) {
margin - right : 0 ; margin - right : 0 ;
@ -492,9 +528,11 @@ export default {
li { li {
position : relative ; position : relative ;
width : calc ( ( 100 % - 18 px ) / 3 ) ; width : calc ( ( 100 % - 40 px ) / 3 ) ;
height : 320 px ; height : 284 px ;
margin - right : 9 px ; margin - right : 20 px ;
overflow : hidden ;
box - shadow : 0 px 4 px 16 px 0 px rgba ( 0 , 0 , 0 , 0.06 ) ;
& : nth - child ( 3 n ) { & : nth - child ( 3 n ) {
margin - right : 0 ; margin - right : 0 ;
@ -504,36 +542,46 @@ export default {
. pic { . pic {
width : 100 % ; width : 100 % ;
height : 100 % ; height : 100 % ;
transition : 0.5 s ;
object - fit : cover ;
} }
. texts { . texts {
position : absolute ; position : absolute ;
top : 0 ; top : 0 ;
left : 0 ; left : 0 ;
width : 100 % ;
height : 100 % ;
padding : 50 px 30 px ; padding : 50 px 30 px ;
color : # fff ; color : # fff ;
background - color : rgba ( 0 , 0 , 0 , 0.3 ) ; background - color : rgba ( 0 , 0 , 0 , 0.3 ) ;
} }
h6 { h6 {
font - size : 1.2 rem ; font - size : 24 px ;
font - family : PingFangSC - Medium , PingFang SC ; cursor : pointer ;
}
. des - wrap {
height : 101 px ;
margin : 11 px 0 25 px ;
} }
. meta { . meta {
margin : 8 px 0 ; margin - bottom : 16 px ;
font - size : 0.9 rem ; font - size : 18 px ;
color : rgba ( 255 , 255 , 255 , 0.86 ) ; color : rgba ( 255 , 255 , 255 , 0.86 ) ;
} }
. des { . des {
margin - bottom : 8 px ; font - size : 20 px ;
font - size : 1 rem ; - webkit - line - clamp : 2 ;
font - family : PingFangSC - Medium , PingFang SC ; line - height : 30 px ;
cursor : pointer ;
} }
. date { . date {
font - size : 0.8 rem ; font - size : 16 px ;
} }
} }
