parent
0f29651c22
commit
a9d0fe6177
8 changed files with 446 additions and 0 deletions
|
After Width: | Height: | Size: 1.1 MiB |
|
After Width: | Height: | Size: 989 KiB |
|
After Width: | Height: | Size: 406 KiB |
|
After Width: | Height: | Size: 8.0 KiB |
@ -0,0 +1,153 @@ |
||||
<template> |
||||
<div class="wrap"> |
||||
<el-carousel height="480px" :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': 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"> |
||||
<div class="inner"> |
||||
<div class="item"> |
||||
<img src="@/assets/images/science/1.png" alt=""> |
||||
<div class="texts"> |
||||
<h6>为什么要建设S³FEL？</h6> |
||||
<div class="des">2006年，世界上第一台软X射线自由电子激光诞生于德国汉堡同步加速器实验室。 2009年，世界第一台硬X 射线自由电子线性相干光源 成功出光， LCLS可提供更高亮度和更好横向相干性的XFEL脉冲…</div> |
||||
</div> |
||||
</div> |
||||
<div class="item"> |
||||
<img src="@/assets/images/science/2.png" alt=""> |
||||
<div class="texts"> |
||||
<h6>X射线是什么</h6> |
||||
<div class="des">光源是人类文明发展的助推器。从火光到激光，每次光源的发展创新都有效推动了科学技术的发展，显著改变了人类认识世界的方式，并引起了人类社会的广泛变革。先进光源是人类探测物质分子、原子和壳和工具。</div> |
||||
</div> |
||||
</div> |
||||
<div class="item"> |
||||
<img src="@/assets/images/science/3.png" alt=""> |
||||
<div class="texts"> |
||||
<h6>X射线自由电子激光</h6> |
||||
<div class="des">FEL是一种以真空中相对论电子束为工作介质、在周期变化磁场中以受激辐射方式放大电磁波的新型强相干光源。FEL的装置通常由加速器、波荡器和光束线站三部分组成的波长连续可调，可覆盖极紫外…</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import mixins from '@/mixins/page' |
||||
import Setting from '@/setting' |
||||
import Util from '@/libs/util' |
||||
import Breadcrumb from '@/components/breadcrumb' |
||||
import WOW from 'wow.js' |
||||
export default { |
||||
mixins: [mixins], |
||||
data() { |
||||
return { |
||||
routes: [] |
||||
} |
||||
}, |
||||
components: { |
||||
Breadcrumb |
||||
}, |
||||
mounted() { |
||||
new WOW().init() |
||||
this.getColumn() |
||||
}, |
||||
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 => {}) |
||||
}, |
||||
// 获取父级所有栏目名称和id |
||||
getParent(data, id) { |
||||
for (const e of data) { |
||||
if (e.id == id) { |
||||
this.routes.push({ |
||||
name: e.columnName, |
||||
query: { |
||||
id: e.id |
||||
} |
||||
}) |
||||
break |
||||
} else if (e.children.length) { |
||||
this.routes.push({ |
||||
name: e.columnName, |
||||
query: { |
||||
id: e.id |
||||
} |
||||
}) |
||||
this.getParent(e.children, id) |
||||
} |
||||
} |
||||
}, |
||||
// 获取上级面包屑 |
||||
getColumn() { |
||||
this.$post(`${this.api.oneLevelChecksThemAll}?id=${this.id}`).then(({ data }) => { |
||||
this.getParent(data, this.id) |
||||
}).catch(err => {}) |
||||
}, |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
@import url(../../plugins/wow/animate.css); |
||||
@import "../../styles/page/page.scss"; |
||||
.inner { |
||||
width: 1200px; |
||||
} |
||||
.item { |
||||
position: relative; |
||||
margin-bottom: 58px; |
||||
img { |
||||
width: 100%; |
||||
height: 508px; |
||||
} |
||||
&:nth-child(2) .texts { |
||||
color: #fff; |
||||
background: #33B3C1; |
||||
} |
||||
&:nth-child(3) .texts { |
||||
color: #fff; |
||||
background: #E47C22; |
||||
} |
||||
&:nth-child(even) .texts { |
||||
left: auto; |
||||
right: -28px; |
||||
} |
||||
.texts { |
||||
position: absolute; |
||||
top: 79px; |
||||
left: -28px; |
||||
width: 532px; |
||||
padding: 70px 38px; |
||||
color: #333; |
||||
background: #FFF6E9; |
||||
} |
||||
h6 { |
||||
margin-bottom: 14px; |
||||
font-size: 36px; |
||||
font-family: PingFangSC-Medium, PingFang SC; |
||||
font-weight: 500; |
||||
} |
||||
.des { |
||||
font-size: 18px; |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,265 @@ |
||||
<template> |
||||
<div class="wrap"> |
||||
<el-carousel height="480px" :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': 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 talent"> |
||||
<div class="inner"> |
||||
<div class="item"> |
||||
<img src="@/assets/images/about/12.png" alt=""> |
||||
<div class="texts"> |
||||
<h6>人才队伍</h6> |
||||
<div class="des">S³FEL已拥有一支高学历、高素质、高技术水平、高执行力，并勇于创新的工程技术团队。团队结构合理，包含研究人员、工程技术人员和管理人员等多种核心技术人才。 |
||||
S³FEL正大力引进国内、外高端创新人才和团队，成长为竞争力和影响力卓越的世界一流科学大装置。 </div> |
||||
</div> |
||||
</div> |
||||
<div class="item"> |
||||
<img src="@/assets/images/about/12.png" alt=""> |
||||
<div class="texts"> |
||||
<h6>人才需求</h6> |
||||
<div class="des">S³FEL是集“世界一流、深圳特色”的标志性、稀缺性、先进性于一体的自由电子激光重大科研平台。S3FEL的建设将紧密围绕高水平建设综合性国家科学中心的战略目标，面向国民经济主战场和世界科技前沿，汇聚全球高端创新资源，依托先行示范区政策、产业、资本、市场和技术等优势。 |
||||
S³FEL将服务于集成电路、生物医药、先进材料和先进制造等大湾区高新技术产业，以及产业核心关键技术发展相关的物理、化学、生物、材料、医学等多学科前沿基础研究。 |
||||
S³FEL欢迎物理学、光学工程、机械工程、动力工程及工程热物理、仪器科学与技术、电气工程、电子科学与技术、控制科学与工程、信息与通信工程、计算机科学与技术、材料科学与工程、化学、生物学、力学、测绘科学与技术等各专业人才的加入，共享发展新机遇，共创湾区大未来。</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="style"> |
||||
<h6>人物风采</h6> |
||||
<ul class="members"> |
||||
<li> |
||||
<el-carousel :interval="4000" type="card" height="510px"> |
||||
<el-carousel-item> |
||||
<div class="item"> |
||||
<img src="@/assets/images/about/12.png" alt=""> |
||||
<p class="text">这是描述</p> |
||||
</div> |
||||
</el-carousel-item> |
||||
<el-carousel-item> |
||||
<div class="item"> |
||||
<img src="@/assets/images/about/12.png" alt=""> |
||||
<p class="text">这是描述</p> |
||||
</div> |
||||
</el-carousel-item> |
||||
<el-carousel-item> |
||||
<div class="item"> |
||||
<img src="@/assets/images/about/12.png" alt=""> |
||||
<p class="text">这是描述</p> |
||||
</div> |
||||
</el-carousel-item> |
||||
</el-carousel> |
||||
</li> |
||||
</ul> |
||||
</div> |
||||
|
||||
<div class="block intro"> |
||||
<div class="inner"> |
||||
<div class="item"> |
||||
<img src="@/assets/images/about/12.png" alt=""> |
||||
<div class="texts"> |
||||
<p class="type">校园招聘</p> |
||||
<h6>在校生/毕业生</h6> |
||||
<div class="des">S³FEL已拥有一支高学历、高素质、高技术水平、高执行力，并勇于创新的工程技术团队。团队结构合理，包含研究人员、工程技术人员和管理人员等多种核心技术人才。 S³FEL正大力引进国内、外高端创新人才和团队，成长为竞争力和影响力卓越的世界一流科学大装置。</div> |
||||
<el-button type="primary">查看更多</el-button> |
||||
</div> |
||||
</div> |
||||
<div class="item"> |
||||
<img src="@/assets/images/about/12.png" alt=""> |
||||
<div class="texts"> |
||||
<p class="type">校园招聘</p> |
||||
<h6>在校生/毕业生</h6> |
||||
<div class="des">S³FEL已拥有一支高学历、高素质、高技术水平、高执行力，并勇于创新的工程技术团队。团队结构合理，包含研究人员、工程技术人员和管理人员等多种核心技术人才。 S³FEL正大力引进国内、外高端创新人才和团队，成长为竞争力和影响力卓越的世界一流科学大装置。</div> |
||||
<el-button type="primary">查看更多</el-button> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import mixins from '@/mixins/page' |
||||
import Setting from '@/setting' |
||||
import Util from '@/libs/util' |
||||
import Breadcrumb from '@/components/breadcrumb' |
||||
import WOW from 'wow.js' |
||||
export default { |
||||
mixins: [mixins], |
||||
data() { |
||||
return { |
||||
routes: [] |
||||
} |
||||
}, |
||||
components: { |
||||
Breadcrumb |
||||
}, |
||||
mounted() { |
||||
new WOW().init() |
||||
this.getColumn() |
||||
}, |
||||
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 => {}) |
||||
}, |
||||
// 获取父级所有栏目名称和id |
||||
getParent(data, id) { |
||||
for (const e of data) { |
||||
if (e.id == id) { |
||||
this.routes.push({ |
||||
name: e.columnName, |
||||
query: { |
||||
id: e.id |
||||
} |
||||
}) |
||||
break |
||||
} else if (e.children.length) { |
||||
this.routes.push({ |
||||
name: e.columnName, |
||||
query: { |
||||
id: e.id |
||||
} |
||||
}) |
||||
this.getParent(e.children, id) |
||||
} |
||||
} |
||||
}, |
||||
// 获取上级面包屑 |
||||
getColumn() { |
||||
this.$post(`${this.api.oneLevelChecksThemAll}?id=${this.id}`).then(({ data }) => { |
||||
this.getParent(data, this.id) |
||||
}).catch(err => {}) |
||||
}, |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
@import url(../../plugins/wow/animate.css); |
||||
@import "../../styles/page/page.scss"; |
||||
.wrap { |
||||
background: #F8F9FB; |
||||
} |
||||
.talent { |
||||
.inner { |
||||
width: 1504px; |
||||
} |
||||
.item { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
padding: 42px; |
||||
margin-bottom: 36px; |
||||
background: #fff; |
||||
&:nth-child(even) { |
||||
flex-direction: row-reverse; |
||||
.texts { |
||||
padding-left: 0; |
||||
} |
||||
} |
||||
} |
||||
.pic { |
||||
width: 602px; |
||||
height: 465px; |
||||
} |
||||
.texts { |
||||
padding: 98px 72px 30px 80px; |
||||
} |
||||
h6 { |
||||
margin-bottom: 24px; |
||||
font-size: 50px; |
||||
font-family: PingFangSC-Light, PingFang SC; |
||||
font-weight: 300; |
||||
color: #333333; |
||||
} |
||||
.des { |
||||
font-size: 18px; |
||||
color: #333; |
||||
line-height: 33px; |
||||
} |
||||
} |
||||
.style { |
||||
h6 { |
||||
margin-bottom: 59px; |
||||
font-size: 48px; |
||||
font-family: PingFangSC-Medium, PingFang SC; |
||||
font-weight: 500; |
||||
text-align: center; |
||||
color: #333333; |
||||
} |
||||
.item { |
||||
position: relative; |
||||
} |
||||
img { |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
.text { |
||||
position: absolute; |
||||
bottom: 45px; |
||||
left: 0; |
||||
width: 100%; |
||||
padding: 0 30px; |
||||
line-height: 68px; |
||||
font-size: 24px; |
||||
color: #fff; |
||||
background: rgba(0,0,0,0.38); |
||||
} |
||||
} |
||||
.intro { |
||||
.inner { |
||||
width: 1504px; |
||||
} |
||||
.item { |
||||
display: flex; |
||||
align-items: center; |
||||
margin-bottom: 36px; |
||||
background: #fff; |
||||
&:nth-child(even) { |
||||
flex-direction: row-reverse; |
||||
} |
||||
} |
||||
.pic { |
||||
width: 848px; |
||||
height: 505px; |
||||
} |
||||
.texts { |
||||
padding: 0 58px; |
||||
} |
||||
.type { |
||||
font-size: 18px; |
||||
color: #333; |
||||
} |
||||
h6 { |
||||
margin: 20px 0; |
||||
font-size: 28px; |
||||
font-family: PingFangSC-Medium, PingFang SC; |
||||
font-weight: 500; |
||||
color: #333333; |
||||
} |
||||
.des { |
||||
margin-bottom: 30px; |
||||
font-size: 16px; |
||||
color: #333; |
||||
line-height: 30px; |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,14 @@ |
||||
import BasicLayout from '@/layouts/home' |
||||
const name = 'science' |
||||
export default { |
||||
path: `/${name}`, |
||||
component: BasicLayout, |
||||
children: [ |
||||
{ |
||||
name, |
||||
path: `/${name}`, |
||||
component: () => import(`@/pages/${name}`), |
||||
meta: { title: '' } |
||||
} |
||||
] |
||||
}; |
||||
@ -0,0 +1,14 @@ |
||||
import BasicLayout from '@/layouts/home' |
||||
const name = 'talent' |
||||
export default { |
||||
path: `/${name}`, |
||||
component: BasicLayout, |
||||
children: [ |
||||
{ |
||||
name, |
||||
path: `/${name}`, |
||||
component: () => import(`@/pages/${name}`), |
||||
meta: { title: '' } |
||||
} |
||||
] |
||||
}; |
||||
Loading…
Reference in new issue