|
|
|
|
@ -1,29 +1,38 @@ |
|
|
|
|
<template> |
|
|
|
|
<div class="wrap"> |
|
|
|
|
<div class="banner">装置介绍</div> |
|
|
|
|
<el-carousel :interval="6000" :arrow="(modules[0] && modules[0].list.filter(e => e.isEnable).length > 1) ? 'hover' : 'never'" :indicator-position="modules[0].list.filter(e => e.isEnable).length > 1 ? '' : 'none'"> |
|
|
|
|
<template v-for="(item, i) in modules[0].list"> |
|
|
|
|
<el-carousel-item v-if="item.pic && item.isEnable" :key="i"> |
|
|
|
|
<div :class="['banner-item', {'cursor-pointer': isLink(item.link.linkName)}]" @click="openLink(item)"> |
|
|
|
|
<img :src="item.pic" alt=""> |
|
|
|
|
<p class="banner-name">{{ item.title }}</p> |
|
|
|
|
</div> |
|
|
|
|
</el-carousel-item> |
|
|
|
|
</template> |
|
|
|
|
</el-carousel> |
|
|
|
|
|
|
|
|
|
<div class="block share"> |
|
|
|
|
<div class="inner"> |
|
|
|
|
<h6>整体布局</h6> |
|
|
|
|
<p class="en">The overall layout</p> |
|
|
|
|
<div class="card">S³FEL装置主要包括一台超导直线加速器（电子束能量为2.5 GeV、重复频率为1 MHz）、4条波荡器线及首批14个实验线站。根据具体的功能可以分为注入器、主加速器、自由电子激光放大器（波荡器线）、光束线和实验站，还有包括束流诊断、控制、激光、同步、数据采集与处理等在内的公共子系统，以及低温、公用设施等配套系统和设施。</div> |
|
|
|
|
<h6>{{ modules[1].form.title }}</h6> |
|
|
|
|
<p class="en">{{ modules[1].form.subTitle }}</p> |
|
|
|
|
<div class="card" v-html="modules[1].form.des"></div> |
|
|
|
|
<div class="flex textBox" > |
|
|
|
|
<div class="left"> |
|
|
|
|
<div class="des"> S³FEL首批拟建设4条波荡器线，分别是2条外种子（EEHG）线和2条自放大自发辐射（SASE）线，以同时满足首批实验站的不同研究需求。按照能区划分，FEL-1、FEL-2工作在自放大自发辐射模式（SASE），并且为将来升级为self-seeding模式预留空间。FEL-1出光波段为1-3 nm（调整电子束能量时可覆盖1-6 nm），FEL-2输出光波长为2.3-15 nm，作为光刻研究专用光束线。FEL-3和4基于回声型谐波产生原理（EEHG），FEL-3输出波长为2.3-15 nm，涵盖水窗波段，FEL-4输出波长为5-30 nm的极紫外FEL脉冲。通过快速束流分配技术，波荡器束线可同时工作。各条波荡器线产生的FEL光，通过光束线系统实现FEL光学参数的实时诊断，包括光强、光谱、光斑位置，光斑尺寸以及相干性等，并通过传输与聚焦系统传输至后端的实验站，以满足各个实验站对光源的不同需求。首批建设实验站共涉及6个前沿科技领域，分别为极紫外光刻、量子材料、能源催化、生物医药、大气与星际科学以及原子分子科学。</div> |
|
|
|
|
<div class="des" v-html="modules[2].form.des"></div> |
|
|
|
|
</div> |
|
|
|
|
<img class="pic" src="@/assets/images/device/16.png" alt=""> |
|
|
|
|
<img class="pic" :src="modules[2].form.pic" alt=""> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<div class="intro"> |
|
|
|
|
<img class="bg" src="@/assets/images/device/7.png" alt=""> |
|
|
|
|
<img class="pic" src="@/assets/images/device/8.png" alt=""> |
|
|
|
|
<img class="bg" src="http://10.10.11.7/images/device/7.png" alt=""> |
|
|
|
|
<img class="pic" :src="modules[3].form.pic" alt=""> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<div class="unit"> |
|
|
|
|
<h6>S³FEL性能指标</h6> |
|
|
|
|
<img class="pic" src="@/assets/images/device/9.png" alt=""> |
|
|
|
|
<h6>{{ modules[4].form.title }}</h6> |
|
|
|
|
<img class="pic" :src="modules[4].form.pic" alt=""> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
@ -42,7 +51,22 @@ export default { |
|
|
|
|
new WOW().init() |
|
|
|
|
}, |
|
|
|
|
methods: { |
|
|
|
|
|
|
|
|
|
// 获取文章详情 |
|
|
|
|
getInfo() { |
|
|
|
|
// 预览/详情 |
|
|
|
|
this.$post(`${this.api[this.preview ? 'getRedisCache' : 'findPage']}?columnId=${this.id}`) |
|
|
|
|
.then(({ data }) => { |
|
|
|
|
if (data.length) { |
|
|
|
|
// state：已发布（1）则取theEditedJson，草稿（0）则取jsonBeforeEditing |
|
|
|
|
const json = JSON.parse( |
|
|
|
|
this.preview ? data : data[data.length - 1][data[data.length - 1].state ? 'theEditedJson' : 'jsonBeforeEditing'] |
|
|
|
|
); |
|
|
|
|
this.modules = json; |
|
|
|
|
console.log('🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json', json); |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
.catch((err) => { }); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
</script> |
|
|
|
|
@ -51,15 +75,23 @@ export default { |
|
|
|
|
@import url(../../plugins/wow/animate.css); |
|
|
|
|
@import "../../styles/page/page.scss"; |
|
|
|
|
.wrap{ |
|
|
|
|
background: url(../../assets/images/device/4.png) bottom right/auto no-repeat; |
|
|
|
|
background: url(http://10.10.11.7/images/device/4.png) bottom right/auto no-repeat; |
|
|
|
|
/deep/ .el-carousel { |
|
|
|
|
height: 12.6rem; |
|
|
|
|
.el-carousel__container{ |
|
|
|
|
height: 12.6rem; |
|
|
|
|
} |
|
|
|
|
.banner { |
|
|
|
|
background: url(../../assets/images/device/14.png) no-repeat center; |
|
|
|
|
background-size: 100% 100%; |
|
|
|
|
font-weight: bold; |
|
|
|
|
height: 17.5rem; |
|
|
|
|
padding: 10.68rem 0 0 16.15rem; |
|
|
|
|
img{ |
|
|
|
|
height: 12.6rem; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.banner-item { |
|
|
|
|
.banner-name { |
|
|
|
|
font-size: 2.16rem; |
|
|
|
|
left: 17%; |
|
|
|
|
bottom: 20%; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.block { |
|
|
|
|
padding: 3.85rem 0; |
|
|
|
|
@ -122,7 +154,7 @@ export default { |
|
|
|
|
font-weight: 500; |
|
|
|
|
color: #FFFFFF; |
|
|
|
|
line-height: 2.375rem; |
|
|
|
|
background: url(../../assets/images/device/5.png) 0 0/cover no-repeat; |
|
|
|
|
background: url(http://10.10.11.7/images/device/5.png) 0 0/cover no-repeat; |
|
|
|
|
} |
|
|
|
|
.des { |
|
|
|
|
margin-top: 25px; |
|
|
|
|
|
