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