You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
265 lines
8.3 KiB
265 lines
8.3 KiB
2 years ago
|
<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>
|