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.
443 lines
13 KiB
443 lines
13 KiB
<template> |
|
<div> |
|
<div v-if="showDefaultPath.includes($route.path)" |
|
:class="['footer', {iasf: isIasf}]"> |
|
<template v-if="isIasf"> |
|
<div class="mask"></div> |
|
<ul v-if="isIasf" |
|
class="entry"> |
|
<li :class="{'cursor-pointer': isLink(modules[13].form.link.linkName)}" |
|
@click="openLink(modules[14].form)"> |
|
<img class="icon" |
|
:src="modules[14].form.pic" |
|
alt=""> |
|
<p class="text">{{ modules[14].form.title }}</p> |
|
</li> |
|
<li :class="{'cursor-pointer': isLink(modules[14].form.link.linkName)}" |
|
@click="openLink(modules[15].form)"> |
|
<img class="icon" |
|
:src="modules[15].form.pic" |
|
alt=""> |
|
<p class="text">{{ modules[15].form.title }}</p> |
|
</li> |
|
<li :class="{'cursor-pointer': isLink(modules[15].form.link.linkName)}" |
|
@click="openLink(modules[16].form)"> |
|
<img class="icon" |
|
:src="modules[16].form.pic" |
|
alt=""> |
|
<p class="text">{{ modules[16].form.title }}</p> |
|
</li> |
|
<li :class="{'cursor-pointer': isLink(modules[16].form.link.linkName)}" |
|
@click="openLink(modules[17].form)"> |
|
<img class="icon" |
|
:src="modules[17].form.pic" |
|
alt=""> |
|
<p class="text">{{ modules[17].form.title }}</p> |
|
</li> |
|
<li :class="{'cursor-pointer': isLink(modules[17].form.link.linkName)}" |
|
@click="openLink(modules[18].form)"> |
|
<img class="icon" |
|
:src="modules[18].form.pic" |
|
alt=""> |
|
<p class="text">{{ modules[18].form.title }}</p> |
|
</li> |
|
</ul> |
|
</template> |
|
<div class="relative"> |
|
<div class="info"> |
|
<div class="leftBox"> |
|
<img class="m-b-20" |
|
src="@/assets/images/iasf.png" |
|
alt=""> |
|
<p class="meta">Copyright ©2002- 2021</p> |
|
<p class="meta">Institute of Advanced Science Facilities, ShenzhenIASF</p> |
|
<p class="meta">Tel：400-0010-998</p> |
|
</div> |
|
<div class="column-wrap"> |
|
<template v-for="(item, i) in columns"> |
|
<div v-if="isIasf || (!isIasf && i < 5)" |
|
:key="i" |
|
class="column"> |
|
<h6 @click="columnTo(item)">{{ item.columnName }}</h6> |
|
<ul v-if="item.children.length && !isIasf" |
|
class="children"> |
|
<li v-for="(column, j) in item.children" |
|
:key="j" |
|
@click="columnTo(column)">{{ column.columnName }}</li> |
|
</ul> |
|
</div> |
|
</template> |
|
</div> |
|
</div> |
|
<a class="copyright">粤ICP备2020131940号 粤公安网34565432456765432号</a> |
|
</div> |
|
</div> |
|
|
|
<div v-if="showContactPath.includes($route.path)" |
|
class="contact"> |
|
<div class="inner"> |
|
<div class="title"> |
|
<h6>Contact us</h6> |
|
<p class="text">CONTACT US</p> |
|
</div> |
|
<div class="region"> |
|
<img class="dot" |
|
src="@/assets/images/dot.png" |
|
alt=""> |
|
<p class="name">Shenzhen</p> |
|
</div> |
|
<div class="info"> |
|
<img class="logo" |
|
src="@/assets/images/logo.png" |
|
alt=""> |
|
<div class="texts"> |
|
<div class="lines"> |
|
<div class="line"> |
|
<img class="icon" |
|
src="@/assets/images/mail.png" |
|
alt=""> |
|
Email: {{ isSfel ? 'fel@mail.iasf.ac.cn' : 'std@mail.iasf.ac.cn' }} |
|
</div> |
|
<div class="line"> |
|
<img class="icon" |
|
src="@/assets/images/tel.png" |
|
alt=""> |
|
Telephone: {{ isSfel ? '0755-21096052' : '0086-755-21096026' }} |
|
</div> |
|
<div class="line"> |
|
<img class="icon" |
|
src="@/assets/images/address.png" |
|
alt=""> |
|
Address: {{ isSfel ? '自由电子激光工程经理部' : '268 Zhenyuan St, Building A3, Floor 3-6, Guangming District, Shenzhen, Guangdong, P.R.China' }} |
|
</div> |
|
</div> |
|
<div class="qrcode"> |
|
<!-- <img src="@/assets/images/about/qrcode.png" alt=""> --> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</template> |
|
<script> |
|
import mixins from '@/mixins/article' |
|
export default { |
|
mixins: [mixins], |
|
data () { |
|
return { |
|
isIasf: false, |
|
showDefaultPath: ['/home', '/iasf', '/estate/index'], // 展示默认页脚的页面 |
|
showContactPath: ['/news', '/sfel', '/talent', '/about', '/careers', '/edu', '/news'], // 展示联系我们页脚的页面 |
|
columns: [], |
|
modules: [] |
|
}; |
|
}, |
|
computed: { |
|
// 是否是sfel网站 |
|
isSfel () { |
|
const id = this.$route.query.siteId || this.$store.state.content.site |
|
return id == 3 |
|
} |
|
}, |
|
watch: { |
|
'$route': { |
|
handler () { |
|
if (this.$route.path === '/iasf') { |
|
this.isIasf = true |
|
this.getInfo() |
|
} |
|
}, |
|
deep: true, |
|
immediate: true |
|
}, |
|
}, |
|
mounted () { |
|
this.getColumn() |
|
}, |
|
methods: { |
|
// 资讯 |
|
getColumn () { |
|
this.$post(this.api.listWithTreeMenuVisible, { |
|
siteId: this.$route.query.siteId || this.$store.state.content.site, |
|
columnName: '', |
|
templateId: '', |
|
typeId: '', |
|
isSort: 1 |
|
}).then(({ data }) => { |
|
// this.columns = data.slice(0, 5) |
|
this.columns = data |
|
}).catch(err => { }) |
|
}, |
|
// 获取iasf中文首页应用模块数据 |
|
getInfo () { |
|
// 预览/详情 |
|
this.$post(`${this.api[this.preview ? 'getRedisCache' : 'findPage']}?columnId=${this.$route.query.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 |
|
} |
|
}).catch(err => { }) |
|
}, |
|
// 判断是否有添加链接 |
|
isLink (linkName) { |
|
return linkName !== '无' && linkName !== '' |
|
}, |
|
// 打开链接 |
|
async openLink (item) { |
|
const { link } = item |
|
if (link.linkName === '无' || link.linkName === '') return false |
|
let href = link.linkAddress |
|
const type = link.connectionType |
|
if (type === 1) { // 站内链接 |
|
if (link.articleId) { // 文章 |
|
// 查询文章详情。禁用的文章要提示 |
|
const data = await this.$post(`${this.api.findArticle}?id=${link.articleId}`) |
|
if (data.data.isDisable) { |
|
return Util.errorMsg('该文章已禁用！') |
|
} else { |
|
href = '/article?articleId=' + link.articleId |
|
} |
|
} else { // 栏目 |
|
href = '/column?id=' + link.columnId[link.columnId.length - 1] |
|
} |
|
href += '&siteId=' + (this.site) |
|
if (!link.articleId) href = this.$router.resolve(href).href |
|
} else if (type === 3) { // 站外链接 |
|
if (link.otherArticleId) { // 文章 |
|
// 查询文章详情。禁用的文章要提示 |
|
const data = await this.$post(`${this.api.findArticle}?id=${link.otherArticleId}`) |
|
if (data.data.isDisable) { |
|
return Util.errorMsg('该文章已禁用！') |
|
} else { |
|
href = '/article?articleId=' + link.otherArticleId |
|
} |
|
} else { // 栏目 |
|
href = '/column?id=' + link.otherColumnId[link.otherColumnId.length - 1] |
|
} |
|
href += '&siteId=' + link.site |
|
if (!link.otherArticleId) href = this.$router.resolve(href).href |
|
} |
|
// 如果是站内/站外链接，并且选择的是文章，则要获取当前长页名称传到文章详情里，面包屑点返回的时候需要返回到当前长页 |
|
if ((type === 1 && link.articleId) || (type === 3 && link.otherArticleId)) { |
|
this.$post(`${this.api.findColumn}?id=${this.id}`).then(({ data }) => { |
|
href = this.$router.resolve(href + '&id=' + this.id + '&columnName=' + data.columnName + '&path=' + this.$route.path.replace('/', '')).href |
|
this.toHref(link.isOpen, href) |
|
}).catch(res => { }) |
|
} else { |
|
this.toHref(link.isOpen, href) |
|
} |
|
}, |
|
// 跳转地址 |
|
toHref (isOpen, href) { |
|
if (isOpen) { |
|
var userAgent = navigator.userAgent; |
|
var isSafari = /Safari/.test(userAgent) && !/Chrome/.test(userAgent); |
|
if (isSafari) { |
|
window.location.href = href |
|
} else { |
|
window.open(href) |
|
} |
|
} else { |
|
window.location.href = href |
|
} |
|
}, |
|
}, |
|
}; |
|
</script> |
|
<style lang="scss" scoped> |
|
.leftBox { |
|
margin-right: 100px; |
|
} |
|
.footer { |
|
position: relative; |
|
padding: 64px 20% 25px; |
|
color: #fff; |
|
background-color: #091733; |
|
overflow: hidden; |
|
.info { |
|
display: flex; |
|
} |
|
.meta { |
|
margin-bottom: 10px; |
|
font-size: 14px; |
|
} |
|
.column-wrap { |
|
display: inline-flex; |
|
flex-wrap: wrap; |
|
} |
|
.column { |
|
margin: 0 20px; |
|
h6 { |
|
margin-bottom: 20px; |
|
font-size: 16px; |
|
white-space: nowrap; |
|
cursor: pointer; |
|
} |
|
} |
|
.children { |
|
li { |
|
margin: 12px 0; |
|
font-size: 14px; |
|
color: #6d7384; |
|
white-space: nowrap; |
|
cursor: pointer; |
|
} |
|
} |
|
.copyright { |
|
font-size: 14px; |
|
color: #6d7384; |
|
} |
|
&.iasf { |
|
padding-top: 50px; |
|
background: url(http://10.10.11.7/images/iasf/footer.jpg) 0 -400px/100% auto no-repeat; |
|
background-color: #091733; |
|
.children { |
|
li { |
|
color: #fff; |
|
} |
|
} |
|
.mask { |
|
position: absolute; |
|
top: 0; |
|
right: 0; |
|
bottom: 0; |
|
left: 0; |
|
background-color: rgba(0, 0, 0, 0.6); |
|
} |
|
} |
|
} |
|
.entry { |
|
position: relative; |
|
display: flex; |
|
justify-content: space-between; |
|
margin-bottom: 100px; |
|
li { |
|
display: inline-flex; |
|
flex-direction: column; |
|
justify-content: center; |
|
align-items: center; |
|
text-align: center; |
|
} |
|
img { |
|
max-width: 100px; |
|
} |
|
.text { |
|
margin-top: 15px; |
|
font-size: 1rem; |
|
font-family: PingFangSC-Medium, PingFang SC; |
|
color: #fff; |
|
} |
|
} |
|
.contact { |
|
position: relative; |
|
padding: 0 0 73px 0; |
|
background: url(../../assets/images/map.png) 0 0 / cover no-repeat; |
|
.inner { |
|
width: 1082px; |
|
margin: 0 auto; |
|
} |
|
.title { |
|
width: 419px; |
|
height: 263px; |
|
padding: 147px 0 0 40px; |
|
background-color: #0854fe; |
|
h6 { |
|
z-index: 2; |
|
position: relative; |
|
margin-bottom: 20px; |
|
font-size: 45px; |
|
font-family: PingFangSC-Semibold, PingFang SC; |
|
font-weight: 600; |
|
color: #fff; |
|
} |
|
.text { |
|
margin-top: -65px; |
|
font-size: 48px; |
|
-webkit-text-fill-color: transparent; |
|
-webkit-text-stroke: 1px #4073e5; |
|
} |
|
} |
|
.region { |
|
position: absolute; |
|
top: 152px; |
|
left: 70%; |
|
display: flex; |
|
align-items: center; |
|
font-size: 20px; |
|
color: #fff; |
|
img { |
|
margin-right: 20px; |
|
} |
|
} |
|
.info { |
|
margin: 55px 0 0 8px; |
|
.texts { |
|
display: flex; |
|
align-items: center; |
|
margin-top: 24px; |
|
} |
|
.item { |
|
margin-right: 75px; |
|
} |
|
.line { |
|
display: flex; |
|
align-items: center; |
|
margin-bottom: 20px; |
|
font-size: 16px; |
|
color: #fff; |
|
img { |
|
margin-right: 8px; |
|
} |
|
} |
|
} |
|
.qrcode { |
|
text-align: center; |
|
.text { |
|
margin-top: 10px; |
|
font-size: 12px; |
|
color: #fff; |
|
} |
|
} |
|
} |
|
@media (max-width: 1500px) { |
|
.footer { |
|
padding: 64px 10% 25px; |
|
} |
|
} |
|
@media (max-width: 1350px) { |
|
.inner { |
|
width: 100% !important; |
|
.title { |
|
width: 100%; |
|
text-align: center; |
|
} |
|
.region { |
|
top: 300px; |
|
left: 50%; |
|
} |
|
.info { |
|
margin-top: 90px; |
|
} |
|
} |
|
.footer { |
|
.info { |
|
flex-direction: column; |
|
.column { |
|
margin-top: 20px; |
|
margin-left: 0; |
|
} |
|
} |
|
} |
|
.entry { |
|
flex-direction: column; |
|
li { |
|
margin-bottom: 30px; |
|
} |
|
} |
|
} |
|
</style> |