|
|
|
@ -18,35 +18,24 @@ |
|
|
|
|
<h2 class="wow fadeInLeft">发展历程</h2> |
|
|
|
|
<p class="en">DEVELOPMENT HISTORY</p> |
|
|
|
|
|
|
|
|
|
<div class="event"> |
|
|
|
|
<div v-if="modules[1].list.length" class="event"> |
|
|
|
|
<ul class="time"> |
|
|
|
|
<li class="active">2022</li> |
|
|
|
|
<li>2021</li> |
|
|
|
|
<li>2020</li> |
|
|
|
|
<template v-for="(item, i) in modules[1].list"> |
|
|
|
|
<li v-if="item.isEnable" :key="i" :class="{active: curYear == i}" @click="yearClick(i)">{{ item.title }}</li> |
|
|
|
|
</template> |
|
|
|
|
</ul> |
|
|
|
|
<div class="right"> |
|
|
|
|
<h6 class="year">2022</h6> |
|
|
|
|
<h6 class="year">{{ modules[1].list[curYear].title }}</h6> |
|
|
|
|
<ul class="list"> |
|
|
|
|
<li> |
|
|
|
|
<div class="texts"> |
|
|
|
|
<p class="date">10月11日</p> |
|
|
|
|
<p class="text">深圳综合粒子设施研究院加入国际超导加速器联盟</p> |
|
|
|
|
</div> |
|
|
|
|
<img src="@/assets/images/channel1.png" alt="" class="pic"> |
|
|
|
|
</li> |
|
|
|
|
<li> |
|
|
|
|
<div class="texts"> |
|
|
|
|
<p class="date">10月11日</p> |
|
|
|
|
<p class="text">深圳综合粒子设施研究院加入国际超导加速器联盟</p> |
|
|
|
|
</div> |
|
|
|
|
<img src="@/assets/images/channel1.png" alt="" class="pic"> |
|
|
|
|
</li> |
|
|
|
|
<li> |
|
|
|
|
<template v-for="(e, j) in modules[1].list[curYear].list"> |
|
|
|
|
<li v-if="e.isEnable" :key="j" :class="{'cursor-pointer': isLink(e.link.linkName)}" @click="openLink(e)"> |
|
|
|
|
<div class="texts"> |
|
|
|
|
<p class="date">10月11日</p> |
|
|
|
|
<p class="text">深圳综合粒子设施研究院加入国际超导加速器联盟</p> |
|
|
|
|
<p class="date">{{ e.title }}</p> |
|
|
|
|
<p class="text">{{ e.des }}</p> |
|
|
|
|
</div> |
|
|
|
|
<img v-if="e.pic" :src="e.pic" alt="" class="pic"> |
|
|
|
|
</li> |
|
|
|
|
</template> |
|
|
|
|
</ul> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
@ -63,7 +52,8 @@ export default { |
|
|
|
|
data() { |
|
|
|
|
return { |
|
|
|
|
active: 1, |
|
|
|
|
tabs: ['S³FEL介绍', '发展历程', 'S³FEL宣传片', '地理位置', '机构设置'] |
|
|
|
|
tabs: ['S³FEL介绍', '发展历程', 'S³FEL宣传片', '地理位置', '机构设置'], |
|
|
|
|
curYear: 0 |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
mounted() { |
|
|
|
@ -89,6 +79,10 @@ export default { |
|
|
|
|
this.active = i |
|
|
|
|
if (i == 2) this.$router.push('/overviewTrailer?id=165&siteId=3') |
|
|
|
|
}, |
|
|
|
|
// 年份点击回调 |
|
|
|
|
yearClick(i) { |
|
|
|
|
this.curYear = i |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
</script> |
|
|
|
@ -138,6 +132,7 @@ export default { |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: center; |
|
|
|
|
.time { |
|
|
|
|
width: 200px; |
|
|
|
|
padding-right: 10px; |
|
|
|
|
margin-right: 20px; |
|
|
|
|
border-right: 1px solid #ddd; |
|
|
|
@ -168,6 +163,9 @@ export default { |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.right { |
|
|
|
|
width: 1000px; |
|
|
|
|
} |
|
|
|
|
.year { |
|
|
|
|
margin: 0 0 20px 20px; |
|
|
|
|
font-size: 3.8rem; |
|
|
|
@ -186,7 +184,6 @@ export default { |
|
|
|
|
} |
|
|
|
|
.texts { |
|
|
|
|
width: 500px; |
|
|
|
|
margin-right: 100px; |
|
|
|
|
} |
|
|
|
|
.date { |
|
|
|
|
margin-bottom: 15px; |
|
|
|
|