Compare commits
No commits in common. 'master' and 'mobile' have entirely different histories.
|
Before Width: | Height: | Size: 471 KiB After Width: | Height: | Size: 646 KiB |
@ -1,22 +1,20 @@ |
|||||||
<!DOCTYPE html> |
<!DOCTYPE html> |
||||||
<html lang="en"> |
<html lang="en"> |
||||||
<head> |
<head> |
||||||
<meta charset="utf-8" /> |
<meta charset="utf-8"> |
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> |
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
||||||
<meta name="keywords" content="深圳综合粒子设施研究院" /> |
<meta name="keywords" content="粒子研究院"> |
||||||
<meta name="description" content="深圳综合粒子设施研究院" /> |
<meta name="description" content="粒子研究院"/> |
||||||
<meta name="referrer" content="no-referrer" /> |
<meta name="referrer" content="no-referrer"> |
||||||
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> |
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"> |
||||||
<!-- <meta name="viewport" content="width=device-width, user-scalable=yes, shrink-to-fit=no" /> --> |
<title>粒子研究院</title> |
||||||
<link rel="icon" href="favcion.ico" type="image/x-icon"></link> |
</head> |
||||||
<link rel="shortcut icon" href="favicon.ico?v=20240710"> |
<body> |
||||||
<title>深圳综合粒子设施研究院</title> |
<noscript> |
||||||
</head> |
<strong>We're sorry but vms doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> |
||||||
<body> |
</noscript> |
||||||
<noscript> |
<div id="app"></div> |
||||||
<strong>We're sorry but vms doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> |
<!-- built files will be auto injected --> |
||||||
</noscript> |
</body> |
||||||
<div id="app"></div> |
|
||||||
<!-- built files will be auto injected --> |
|
||||||
</body> |
|
||||||
</html> |
</html> |
||||||
|
|||||||
|
Before Width: | Height: | Size: 19 MiB |
|
Before Width: | Height: | Size: 1.0 KiB After Width: | Height: | Size: 1.0 KiB |
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 877 B |
|
After Width: | Height: | Size: 443 KiB |
|
After Width: | Height: | Size: 791 KiB |
|
After Width: | Height: | Size: 92 KiB |
|
After Width: | Height: | Size: 44 KiB |
|
After Width: | Height: | Size: 904 KiB |
|
After Width: | Height: | Size: 857 KiB |
|
After Width: | Height: | Size: 1.0 MiB |
|
After Width: | Height: | Size: 501 KiB |
|
After Width: | Height: | Size: 30 KiB |
|
Before Width: | Height: | Size: 26 KiB After Width: | Height: | Size: 25 KiB |
|
After Width: | Height: | Size: 31 KiB |
|
After Width: | Height: | Size: 1.2 MiB |
|
After Width: | Height: | Size: 569 KiB |
|
After Width: | Height: | Size: 225 KiB |
|
After Width: | Height: | Size: 37 KiB |
|
Before Width: | Height: | Size: 602 B |
|
Before Width: | Height: | Size: 741 B |
|
Before Width: | Height: | Size: 1002 B |
|
Before Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 46 KiB After Width: | Height: | Size: 5.9 KiB |
|
Before Width: | Height: | Size: 51 KiB |
|
Before Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 164 KiB |
|
Before Width: | Height: | Size: 2.6 KiB |
|
Before Width: | Height: | Size: 118 KiB |
|
Before Width: | Height: | Size: 623 B |
|
Before Width: | Height: | Size: 87 KiB |
|
Before Width: | Height: | Size: 1.9 KiB |
|
Before Width: | Height: | Size: 95 KiB |
|
Before Width: | Height: | Size: 4.1 KiB |
|
Before Width: | Height: | Size: 230 KiB |
|
Before Width: | Height: | Size: 2.7 KiB |
|
Before Width: | Height: | Size: 122 KiB |
|
Before Width: | Height: | Size: 2.6 KiB |
|
Before Width: | Height: | Size: 149 KiB |
|
Before Width: | Height: | Size: 2.6 KiB |
|
Before Width: | Height: | Size: 106 KiB |
|
Before Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 139 KiB |
|
Before Width: | Height: | Size: 915 B |
|
Before Width: | Height: | Size: 140 KiB |
|
Before Width: | Height: | Size: 3.0 KiB |
|
Before Width: | Height: | Size: 136 KiB |
|
Before Width: | Height: | Size: 1.9 KiB |
|
Before Width: | Height: | Size: 105 KiB |
|
Before Width: | Height: | Size: 2.4 KiB |
|
Before Width: | Height: | Size: 130 KiB |
|
Before Width: | Height: | Size: 3.0 KiB |
|
Before Width: | Height: | Size: 132 KiB |
|
Before Width: | Height: | Size: 2.1 KiB |
|
Before Width: | Height: | Size: 139 KiB |
|
Before Width: | Height: | Size: 2.3 KiB |
|
Before Width: | Height: | Size: 111 KiB |
|
Before Width: | Height: | Size: 69 KiB |
|
Before Width: | Height: | Size: 572 B |
|
Before Width: | Height: | Size: 682 B |
|
Before Width: | Height: | Size: 892 B |
|
Before Width: | Height: | Size: 27 KiB |
|
Before Width: | Height: | Size: 1.3 MiB |
|
Before Width: | Height: | Size: 2.4 KiB |
|
Before Width: | Height: | Size: 669 B After Width: | Height: | Size: 527 B |
|
Before Width: | Height: | Size: 867 B After Width: | Height: | Size: 527 B |
|
Before Width: | Height: | Size: 534 B |
|
After Width: | Height: | Size: 962 KiB |
@ -1,160 +0,0 @@ |
|||||||
<template> |
|
||||||
<div :class="['right', { party }]"> |
|
||||||
<el-tree class="column" ref="column" :data="columns" highlight-current :expand-on-click-node="false" |
|
||||||
:props="defaultProps" node-key="id" @node-click="columnTo"></el-tree> |
|
||||||
|
|
||||||
<template v-if="site == 2"> |
|
||||||
<p class="l-title">{{ $t('column.latestNews') }}</p> |
|
||||||
<ul class="list"> |
|
||||||
<li v-for="(item, i) in site2News" :key="i" :title="item.title" @click="toArtice(item)"> |
|
||||||
<p class="text">{{ item.title }}</p> |
|
||||||
<span class="date">{{ item.releaseTime }}</span> |
|
||||||
</li> |
|
||||||
</ul> |
|
||||||
</template> |
|
||||||
<template v-else> |
|
||||||
<p class="l-title">{{ $t('column.hot') }}</p> |
|
||||||
<ul class="list"> |
|
||||||
<li v-for="(item, i) in hots" :key="i" :title="item.title" @click="toArtice(item)"> |
|
||||||
<p class="text">{{ item.title }}</p> |
|
||||||
<span class="date">{{ item.releaseTime }}</span> |
|
||||||
</li> |
|
||||||
</ul> |
|
||||||
|
|
||||||
<p class="l-title">{{ $t('column.latestNews') }}</p> |
|
||||||
<ul class="list"> |
|
||||||
<li v-for="(item, i) in news" :key="i" :title="item.title" @click="toArtice(item)"> |
|
||||||
<p class="text">{{ item.title }}</p> |
|
||||||
<span class="date">{{ item.releaseTime }}</span> |
|
||||||
</li> |
|
||||||
</ul> |
|
||||||
</template> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
import Util from '@/libs/util' |
|
||||||
import mixins from '@/mixins/article' |
|
||||||
export default { |
|
||||||
props: ['party'], |
|
||||||
mixins: [mixins], |
|
||||||
data () { |
|
||||||
return { |
|
||||||
columns: [], |
|
||||||
defaultProps: { |
|
||||||
value: 'id', |
|
||||||
label: 'columnName' |
|
||||||
}, |
|
||||||
news: [], |
|
||||||
site2News: [], |
|
||||||
hots: [] |
|
||||||
} |
|
||||||
}, |
|
||||||
mounted () { |
|
||||||
this.getColumn() |
|
||||||
}, |
|
||||||
methods: { |
|
||||||
// 资讯 |
|
||||||
getColumn () { |
|
||||||
this.$post(this.api.listWithTreeMenuVisible, Util.rsa({ |
|
||||||
siteId: this.site, |
|
||||||
columnName: '', |
|
||||||
templateId: '', |
|
||||||
typeId: '', |
|
||||||
isSort: 1 |
|
||||||
})).then(({ data }) => { |
|
||||||
this.columns = data |
|
||||||
this.$parent.getInfo && this.$parent.getInfo() |
|
||||||
}).catch(err => { }) |
|
||||||
|
|
||||||
this.$post(this.api.hotContent, Util.rsa(this.site)).then(({ data }) => { |
|
||||||
this.hots = Util.removeTag(data) |
|
||||||
}).catch(err => { }) |
|
||||||
|
|
||||||
if (this.site == 2) { |
|
||||||
this.$post(this.api.newlyPublishedArticles, Util.rsa({ |
|
||||||
siteId: this.site, |
|
||||||
columnIds: [411, 412, 413], |
|
||||||
pageNum: 1, |
|
||||||
pageSize: 5, |
|
||||||
})).then(({ data }) => { |
|
||||||
this.site2News = Util.removeTag(data.records); |
|
||||||
}).catch((res) => { }); |
|
||||||
} else { |
|
||||||
this.$post(this.api.newlyPublishedArticles, Util.rsa({ |
|
||||||
pageNum: 1, |
|
||||||
pageSize: 5, |
|
||||||
siteId: this.site |
|
||||||
})).then(({ data }) => { |
|
||||||
this.news = Util.removeTag(data.records) |
|
||||||
}).catch(res => { }) |
|
||||||
} |
|
||||||
}, |
|
||||||
} |
|
||||||
} |
|
||||||
</script> |
|
||||||
<style lang="scss" scoped> |
|
||||||
.right { |
|
||||||
width: 20%; |
|
||||||
|
|
||||||
/deep/ .el-tree-node__label { |
|
||||||
font-size: 0.78rem; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.column { |
|
||||||
width: 100%; |
|
||||||
margin-bottom: 1.56rem; |
|
||||||
|
|
||||||
.el-tree-node:focus>.el-tree-node__content { |
|
||||||
background-color: #e5edf8; |
|
||||||
} |
|
||||||
|
|
||||||
/deep/.el-tree-node__content { |
|
||||||
height: 2.75rem; |
|
||||||
background-color: #e5edf8; |
|
||||||
border-bottom: 2px solid #fff; |
|
||||||
} |
|
||||||
|
|
||||||
/deep/.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content { |
|
||||||
color: #fff; |
|
||||||
background-color: #0f5698; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.list { |
|
||||||
margin-bottom: 20px; |
|
||||||
|
|
||||||
li { |
|
||||||
padding: 16px 0; |
|
||||||
border-bottom: 1px solid #d8d8d8; |
|
||||||
} |
|
||||||
|
|
||||||
.text { |
|
||||||
margin-bottom: 5px; |
|
||||||
font-size: 14px; |
|
||||||
cursor: pointer; |
|
||||||
|
|
||||||
&:hover { |
|
||||||
color: $main-color; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.date { |
|
||||||
font-size: 12px; |
|
||||||
color: #999; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.party { |
|
||||||
|
|
||||||
.el-tree-node:focus>.el-tree-node__content, |
|
||||||
/deep/.el-tree-node__content { |
|
||||||
background-color: $lightPartyTheme; |
|
||||||
} |
|
||||||
|
|
||||||
/deep/.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content { |
|
||||||
background-color: $partyTheme; |
|
||||||
} |
|
||||||
} |
|
||||||
</style> |
|
||||||
@ -1,272 +1,248 @@ |
|||||||
<template> |
<template> |
||||||
<div class="footer"> |
<div> |
||||||
<div class="info"> |
<div v-if="showDefaultPath.includes($route.path)" class="footer"> |
||||||
<div class="left"> |
<div class="info"> |
||||||
<img class="logo" src="@/assets/images/logo3.png" alt=""> |
<div class="leftBox"> |
||||||
<div class="texts"> |
<img class="m-b-20" src="@/assets/images/iasf.png" alt=""> |
||||||
<div class="line"> |
<p class="meta">Copyright ©2002- 2021</p> |
||||||
<img class="icon" src="@/assets/images/address.png" alt=""> |
<p class="meta">Institute of Advanced Science Facilities, ShenzhenIASF</p> |
||||||
深圳市光明区新湖街道圳园路268号A3栋 |
<p class="meta">Tel：400-0010-998</p> |
||||||
</div> |
</div> |
||||||
<div class="line"> |
<div v-for="(item, i) in columns" :key="i" class="column"> |
||||||
<img class="icon" src="@/assets/images/tel.png" alt=""> |
<h6 @click="columnTo(item)">{{ item.columnName }}</h6> |
||||||
{{ site == 1 ? |
<ul v-if="item.children.length" class="children"> |
||||||
'0755-21096026' : |
<li v-for="(column, j) in item.children" :key="j" @click="columnTo(column)">{{ column.columnName }}</li> |
||||||
site == 5 || site == 6 ? |
</ul> |
||||||
'0755-21096067' : |
|
||||||
site == 3 || site == 4 ? |
|
||||||
'0755-21096052' : |
|
||||||
'0755-21096000' }} |
|
||||||
</div> |
|
||||||
<div class="line"> |
|
||||||
<img class="icon" src="@/assets/images/mail.png" alt=""> |
|
||||||
{{ site == 1 ? |
|
||||||
'std@mail.iasf.ac.cn' : |
|
||||||
site == 5 || site == 6 ? |
|
||||||
'srgcb@mail.iasf.ac.cn' : |
|
||||||
site == 3 || site == 4 ? |
|
||||||
'FEL@mail.iasf.ac.cn' : |
|
||||||
'gad@mail.iasf.ac.cn' }} |
|
||||||
</div> |
|
||||||
</div> |
</div> |
||||||
</div> |
</div> |
||||||
<div v-if="site == 1 || site == 2" class="qrcodes"> |
<a class="copyright">粤ICP备2020131940号 粤公安网34565432456765432号</a> |
||||||
<div class="item"> |
</div> |
||||||
<img class="qrcode" src="@/assets/images/officialAccount.jpg" alt=""> |
|
||||||
<p class="text">官方公众号</p> |
<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 class="item"> |
|
||||||
<img class="qrcode" src="@/assets/images/qrcode.png" alt=""> |
|
||||||
<p class="text">官方微信</p> |
|
||||||
</div> --> |
|
||||||
</div> |
</div> |
||||||
</div> |
</div> |
||||||
<div class="copyright">Copyright ©深圳综合粒子设施研究院 粤ICP备2020131940号-1 粤公网安备44031102000586号</div> |
|
||||||
</div> |
</div> |
||||||
</template> |
</template> |
||||||
<script> |
<script> |
||||||
import mixins from '@/mixins/article' |
import mixins from '@/mixins/article' |
||||||
import Util from '@/libs/util' |
|
||||||
export default { |
export default { |
||||||
mixins: [mixins], |
mixins: [mixins], |
||||||
data () { |
data() { |
||||||
return { |
return { |
||||||
isIasf: false, |
showDefaultPath: ['/home'], // 展示默认页脚的页面 |
||||||
showDefaultPath: ['/home', '/iasf', '/estate/index'], // 展示默认页脚的页面 |
|
||||||
showContactPath: ['/news', '/sfel', '/talent', '/about', '/careers', '/edu', '/news'], // 展示联系我们页脚的页面 |
showContactPath: ['/news', '/sfel', '/talent', '/about', '/careers', '/edu', '/news'], // 展示联系我们页脚的页面 |
||||||
columns: [], |
columns: [], |
||||||
modules: [] |
|
||||||
}; |
}; |
||||||
}, |
}, |
||||||
computed: { |
computed: { |
||||||
// 是否是sfel网站 |
// 是否是sfel网站 |
||||||
isSfel () { |
isSfel() { |
||||||
const id = this.$route.query.siteId || this.$store.state.content.site |
const id = this.$route.query.siteId || this.$store.state.content.site |
||||||
return id == 3 |
return id == 3 |
||||||
} |
} |
||||||
}, |
}, |
||||||
watch: { |
mounted(){ |
||||||
'$route': { |
|
||||||
handler () { |
|
||||||
if (this.$route.path === '/iasf') { |
|
||||||
this.isIasf = true |
|
||||||
this.getInfo() |
|
||||||
} |
|
||||||
}, |
|
||||||
deep: true, |
|
||||||
immediate: true |
|
||||||
}, |
|
||||||
}, |
|
||||||
mounted () { |
|
||||||
this.getColumn() |
this.getColumn() |
||||||
}, |
}, |
||||||
methods: { |
methods: { |
||||||
// 资讯 |
// 资讯 |
||||||
getColumn () { |
getColumn() { |
||||||
this.$post(this.api.listWithTreeMenuVisible, Util.rsa({ |
this.$post(this.api.listWithTreeMenuVisible, { |
||||||
siteId: this.$route.query.siteId || this.$store.state.content.site, |
siteId: this.$route.query.siteId || this.$store.state.content.site, |
||||||
columnName: '', |
columnName: '', |
||||||
templateId: '', |
templateId: '', |
||||||
typeId: '', |
typeId : '', |
||||||
isSort: 1 |
isSort: 1 |
||||||
})).then(({ data }) => { |
}).then(({ data }) => { |
||||||
// this.columns = data.slice(0, 5) |
this.columns = data.slice(0, 6) |
||||||
this.columns = data |
}).catch(err => {}) |
||||||
}).catch(err => { }) |
|
||||||
}, |
|
||||||
// 获取iasf中文首页应用模块数据 |
|
||||||
getInfo () { |
|
||||||
// 预览/详情 |
|
||||||
this.$post(this.api[this.preview ? 'getRedisCache' : 'findPage'], Util.rsa(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, Util.rsa(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, Util.rsa(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, Util.rsa(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> |
</script> |
||||||
<style lang="scss" scoped> |
<style lang="scss" scoped> |
||||||
.footer { |
.leftBox{ |
||||||
z-index: 2; |
margin-right: 100px; |
||||||
position: relative; |
} |
||||||
|
.footer{ |
||||||
|
padding: 64px 10% 25px; |
||||||
|
color: #fff; |
||||||
background-color: #091733; |
background-color: #091733; |
||||||
border-top: 10px solid #2870ff; |
overflow: hidden; |
||||||
|
|
||||||
.logo { |
|
||||||
width: 180px; |
|
||||||
} |
|
||||||
|
|
||||||
.info { |
.info { |
||||||
display: flex; |
display: flex; |
||||||
justify-content: space-between; |
} |
||||||
align-items: center; |
.meta { |
||||||
width: 1200px; |
margin-bottom: 10px; |
||||||
padding: 20px 0; |
font-size: 14px; |
||||||
|
} |
||||||
|
.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; |
||||||
|
} |
||||||
|
} |
||||||
|
.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; |
margin: 0 auto; |
||||||
color: #fff; |
|
||||||
} |
} |
||||||
|
.title { |
||||||
.left { |
|
||||||
display: inline-flex; |
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; |
align-items: center; |
||||||
|
font-size: 20px; |
||||||
|
color: #fff; |
||||||
|
img { |
||||||
|
margin-right: 20px; |
||||||
|
} |
||||||
} |
} |
||||||
|
.info { |
||||||
.texts { |
margin: 55px 0 0 8px; |
||||||
padding: 30px; |
.texts { |
||||||
margin-left: 20px; |
display: flex; |
||||||
border-left: 2px solid #ccc; |
align-items: center; |
||||||
|
margin-top: 24px; |
||||||
|
} |
||||||
|
.item { |
||||||
|
margin-right: 75px; |
||||||
|
} |
||||||
.line { |
.line { |
||||||
display: flex; |
display: flex; |
||||||
align-items: center; |
align-items: center; |
||||||
margin-bottom: 10px; |
margin-bottom: 20px; |
||||||
font-size: 14px; |
font-size: 16px; |
||||||
color: #fff; |
color: #fff; |
||||||
|
|
||||||
&:last-child { |
|
||||||
margin-bottom: 0; |
|
||||||
} |
|
||||||
|
|
||||||
img { |
img { |
||||||
margin-right: 8px; |
margin-right: 8px; |
||||||
} |
} |
||||||
} |
} |
||||||
} |
} |
||||||
|
.qrcode { |
||||||
.qrcodes { |
|
||||||
display: flex; |
|
||||||
justify-content: center; |
|
||||||
text-align: center; |
text-align: center; |
||||||
font-size: 12px; |
.text { |
||||||
|
margin-top: 10px; |
||||||
.item { |
font-size: 12px; |
||||||
margin-right: 15px; |
color: #fff; |
||||||
} |
|
||||||
|
|
||||||
.qrcode { |
|
||||||
width: 100px; |
|
||||||
height: 100px; |
|
||||||
margin-bottom: 10px; |
|
||||||
} |
} |
||||||
} |
} |
||||||
|
|
||||||
.copyright { |
|
||||||
padding: 16px 0; |
|
||||||
font-size: 14px; |
|
||||||
color: #c3c3c3; |
|
||||||
text-align: center; |
|
||||||
background-image: linear-gradient(to bottom, rgb(16, 41, 93), rgb(10, 24, 54) 40%); |
|
||||||
} |
|
||||||
} |
} |
||||||
|
@media (max-width: 1200px) { |
||||||
@media (max-width: 1200px) { |
body{ |
||||||
.footer { |
width: 100% !important; |
||||||
.info { |
} |
||||||
flex-direction: column; |
.inner { |
||||||
width: 90%; |
width: 100% !important; |
||||||
|
.title{ |
||||||
|
width: 100%; |
||||||
|
text-align: center; |
||||||
} |
} |
||||||
|
.region{ |
||||||
.left { |
top: 300px; |
||||||
flex-direction: column; |
left: 50%; |
||||||
margin-bottom: 20px; |
|
||||||
} |
} |
||||||
|
.info{ |
||||||
.texts { |
margin-top: 90px; |
||||||
border-left: 0; |
|
||||||
} |
} |
||||||
|
} |
||||||
|
} |
||||||
|
@media (min-width: 280px) and (max-width: 750px) { |
||||||
|
.footer { |
||||||
|
.info{ |
||||||
|
flex-direction: column; |
||||||
|
.column{ |
||||||
|
margin-top: 20px; |
||||||
|
margin-left: 0; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
.copyright { |
@media (min-width: 751px) and (max-width: 1200px) { |
||||||
padding: 16px; |
.footer { |
||||||
|
.info{ |
||||||
|
flex-direction: column; |
||||||
|
.column{ |
||||||
|
margin-top: 20px; |
||||||
|
margin-left: 0; |
||||||
|
} |
||||||
} |
} |
||||||
} |
} |
||||||
} |
} |
||||||
|
|
||||||
</style> |
</style> |
||||||
@ -1,56 +0,0 @@ |
|||||||
import Util from '@/libs/util' |
|
||||||
export default { |
|
||||||
data() { |
|
||||||
return { |
|
||||||
active: +this.$route.query.id, |
|
||||||
tabs: [], |
|
||||||
} |
|
||||||
}, |
|
||||||
mounted() { |
|
||||||
this.getColumn() |
|
||||||
}, |
|
||||||
methods: { |
|
||||||
// 获取文章详情
|
|
||||||
getInfo() { |
|
||||||
// 预览/详情
|
|
||||||
this.$post(this.api[this.preview ? 'getRedisCache' : 'findPage'], Util.rsa(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 |
|
||||||
} |
|
||||||
}).catch(err => {}) |
|
||||||
}, |
|
||||||
// 获取所有栏目
|
|
||||||
getColumn() { |
|
||||||
this.$post(this.api.listWithTreeMenuVisible, Util.rsa({ |
|
||||||
siteId: this.site, |
|
||||||
columnName: '', |
|
||||||
templateId: '', |
|
||||||
typeId: '', |
|
||||||
isSort: 1 |
|
||||||
})) |
|
||||||
.then(({ data }) => { |
|
||||||
this.getParent(data) |
|
||||||
}) |
|
||||||
.catch((err) => { }); |
|
||||||
}, |
|
||||||
// 获取父级
|
|
||||||
getParent(data, parent = {}) { |
|
||||||
for (const e of data) { |
|
||||||
if (e.id == this.id) { |
|
||||||
this.tabs = parent.children |
|
||||||
break |
|
||||||
} else if (e.children.length) { |
|
||||||
this.getParent(e.children, e) |
|
||||||
} |
|
||||||
} |
|
||||||
}, |
|
||||||
// tab回调
|
|
||||||
tabChange(item) { |
|
||||||
this.$router.push(`/${item.path}?id=${item.id}&siteId=${item.siteId}`) |
|
||||||
}, |
|
||||||
} |
|
||||||
}; |
|
||||||
@ -1,57 +0,0 @@ |
|||||||
import Util from '@/libs/util' |
|
||||||
export default { |
|
||||||
data() { |
|
||||||
return { |
|
||||||
active: +this.$route.query.id, |
|
||||||
tabs: [], |
|
||||||
} |
|
||||||
}, |
|
||||||
mounted() { |
|
||||||
this.getColumn() |
|
||||||
}, |
|
||||||
methods: { |
|
||||||
// 获取文章详情
|
|
||||||
getInfo() { |
|
||||||
// 预览/详情
|
|
||||||
this.$post(this.api[this.preview ? 'getRedisCache' : 'findPage'], Util.rsa(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 => {}) |
|
||||||
}, |
|
||||||
// 获取所有栏目
|
|
||||||
getColumn() { |
|
||||||
this.$post(this.api.listWithTreeMenuVisible, Util.rsa({ |
|
||||||
siteId: this.site, |
|
||||||
columnName: '', |
|
||||||
templateId: '', |
|
||||||
typeId: '', |
|
||||||
isSort: 1 |
|
||||||
})) |
|
||||||
.then(({ data }) => { |
|
||||||
this.getParent(data) |
|
||||||
}) |
|
||||||
.catch((err) => { }); |
|
||||||
}, |
|
||||||
// 获取父级
|
|
||||||
getParent(data, parent = {}) { |
|
||||||
for (const e of data) { |
|
||||||
if (e.id == this.id) { |
|
||||||
this.tabs = parent.children |
|
||||||
break |
|
||||||
} else if (e.children.length) { |
|
||||||
this.getParent(e.children, e) |
|
||||||
} |
|
||||||
} |
|
||||||
}, |
|
||||||
// tab回调
|
|
||||||
tabChange(item) { |
|
||||||
this.$router.push(`/${item.path}?id=${item.id}&siteId=${item.siteId}`) |
|
||||||
}, |
|
||||||
}, |
|
||||||
}; |
|
||||||
@ -1,576 +0,0 @@ |
|||||||
<template> |
|
||||||
<div class="wrap" v-if="modules.length >= 1"> |
|
||||||
<el-carousel height="24rem" :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 history gray"> |
|
||||||
<div :class="['inner', { 'cursor-pointer': isLink(modules[1].form.link.linkName) }]" |
|
||||||
@click="openLink(modules[1].form)"> |
|
||||||
<h2 class="wow fadeInLeft" style="margin-left: 3.56rem">{{ modules[1].form.title }}</h2> |
|
||||||
<div class="texts wow fadeInDown" data-wow-delay="0.5s"> |
|
||||||
<div class="left"> |
|
||||||
<h2>{{ modules[1].form.subTitle }}</h2> |
|
||||||
<div class="line"></div> |
|
||||||
<div class="des">{{ modules[1].form.des }}</div> |
|
||||||
</div> |
|
||||||
<img class="bg" :src="modules[1].form.pic" alt=""> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="block gray"> |
|
||||||
<div class="inner"> |
|
||||||
<h2 class="b-title wow fadeInUp">{{ modules[7].form.title }}</h2> |
|
||||||
<p class="intro wow fadeInUp" data-wow-delay="0.5s">{{ modules[7].form.des }}</p> |
|
||||||
<ul class="stat"> |
|
||||||
<li class="wow fadeInLeft" data-wow-delay="0.2s"> |
|
||||||
<p class="num">{{ modules[8].form.title }}</p> |
|
||||||
<p class="text">{{ modules[8].form.des }}</p> |
|
||||||
</li> |
|
||||||
<li class="wow fadeInLeft" data-wow-delay="0.4s"> |
|
||||||
<p class="num">{{ modules[9].form.title }}</p> |
|
||||||
<p class="text">{{ modules[9].form.des }}</p> |
|
||||||
</li> |
|
||||||
<li class="wow fadeInLeft" data-wow-delay="0.6s"> |
|
||||||
<p class="num">{{ modules[10].form.title }}</p> |
|
||||||
<p class="text">{{ modules[10].form.des }}</p> |
|
||||||
</li> |
|
||||||
<li class="wow fadeInLeft" data-wow-delay="0.9s"> |
|
||||||
<p class="num">{{ modules[11].form.title }}</p> |
|
||||||
<p class="text">{{ modules[11].form.des }}</p> |
|
||||||
</li> |
|
||||||
<li class="wow fadeInLeft" data-wow-delay="1.1s"> |
|
||||||
<p class="num">{{ modules[12].form.title }}</p> |
|
||||||
<p class="text">{{ modules[12].form.des }}</p> |
|
||||||
</li> |
|
||||||
<li class="wow fadeInLeft" data-wow-delay="1.3s"> |
|
||||||
<p class="num">{{ modules[13].form.title }}</p> |
|
||||||
<p class="text">{{ modules[13].form.des }}</p> |
|
||||||
</li> |
|
||||||
</ul> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="plan"> |
|
||||||
<div :class="['inner', { 'cursor-pointer': isLink(modules[14].form.link.linkName) }]" |
|
||||||
@click="openLink(modules[14].form)"> |
|
||||||
<img class="pic wow fadeInLeft" :src="modules[14].form.pic" alt=""> |
|
||||||
<div class="texts wow fadeInRight"> |
|
||||||
<h6>{{ modules[14].form.title }}</h6> |
|
||||||
<div class="des">{{ modules[14].form.des }}</div> |
|
||||||
<img src="@/assets/images/arrow-white.png" alt=""> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="block"> |
|
||||||
<div class="inner"> |
|
||||||
<h2 class="b-title wow fadeInUp hide-bd">{{ modules[15].form.title }}</h2> |
|
||||||
<p class="intro wow fadeInUp" data-wow-delay="0.5s">{{ modules[15].form.des }}</p> |
|
||||||
<ul class="people"> |
|
||||||
<template v-for="(item, i) in modules[16].list"> |
|
||||||
<li v-if="item.isEnable" :key="i" class="wow fadeInDown" data-wow-delay="0.5s"> |
|
||||||
<img class="pic" :src="item.pic" alt=""> |
|
||||||
<div class="texts"> |
|
||||||
<p class="sub">{{ item.subTitle }}</p> |
|
||||||
<h6>{{ item.title }}</h6> |
|
||||||
<p class="des">{{ item.des }}</p> |
|
||||||
<img :class="{ 'arrow': isLink(item.link.linkName) }" src="@/assets/images/arrow.png" alt="" |
|
||||||
@click="openLink(item)"> |
|
||||||
</div> |
|
||||||
</li> |
|
||||||
</template> |
|
||||||
</ul> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="block list-block gray"> |
|
||||||
<div class="inner"> |
|
||||||
<h2 class="b-title wow fadeInUp">{{ modules[17].form.title }}</h2> |
|
||||||
<p class="intro wow fadeInUp" data-wow-delay="0.5s">{{ modules[17].form.des }}</p> |
|
||||||
<ul class="list"> |
|
||||||
<li class="wow fadeInDown" data-wow-delay="0.6s" |
|
||||||
:class="{ 'cursor-pointer': isLink(modules[18].form.link.linkName) }" @click="openLink(modules[18].form)"> |
|
||||||
<img class="pic" :src="modules[18].form.pic" alt=""> |
|
||||||
<h6>{{ modules[18].form.title }}</h6> |
|
||||||
<p class="des">{{ modules[18].form.des }}</p> |
|
||||||
</li> |
|
||||||
<li class="wow fadeInDown" data-wow-delay="0.8s" |
|
||||||
:class="{ 'cursor-pointer': isLink(modules[19].form.link.linkName) }" @click="openLink(modules[19].form)"> |
|
||||||
<img class="pic" :src="modules[19].form.pic" alt=""> |
|
||||||
<h6>{{ modules[19].form.title }}</h6> |
|
||||||
<p class="des">{{ modules[19].form.des }}</p> |
|
||||||
</li> |
|
||||||
<li class="wow fadeInDown" data-wow-delay="1s" |
|
||||||
:class="{ 'cursor-pointer': isLink(modules[20].form.link.linkName) }" @click="openLink(modules[20].form)"> |
|
||||||
<img class="pic" :src="modules[20].form.pic" alt=""> |
|
||||||
<h6>{{ modules[20].form.title }}</h6> |
|
||||||
<p class="des">{{ modules[20].form.des }}</p> |
|
||||||
</li> |
|
||||||
</ul> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="block"> |
|
||||||
<div class="inner staff-inner"> |
|
||||||
<h2 class="b-title wow fadeInUp hide-bd">{{ modules[21].form.title }}</h2> |
|
||||||
<p class="intro wow fadeInUp" data-wow-delay="0.5s">{{ modules[21].form.des }}</p> |
|
||||||
<div :class="['staff wow fadeInDown', { 'cursor-pointer': isLink(modules[22].form.link.linkName) }]" |
|
||||||
data-wow-delay="0.7s" @click="openLink(modules[22].form)"> |
|
||||||
<div class="left"> |
|
||||||
<h6>{{ modules[22].form.title }}</h6> |
|
||||||
<div class="des">{{ modules[22].form.des }}</div> |
|
||||||
</div> |
|
||||||
<img class="pic" :src="modules[22].form.pic" alt=""> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
import mixins from '@/mixins/page' |
|
||||||
import Setting from '@/setting' |
|
||||||
import Util from '@/libs/util' |
|
||||||
import WOW from 'wow.js' |
|
||||||
export default { |
|
||||||
mixins: [mixins], |
|
||||||
data () { |
|
||||||
return { |
|
||||||
|
|
||||||
} |
|
||||||
}, |
|
||||||
mounted () { |
|
||||||
new WOW().init() |
|
||||||
}, |
|
||||||
methods: { |
|
||||||
// 获取文章详情 |
|
||||||
getInfo () { |
|
||||||
// 预览/详情 |
|
||||||
this.$post(this.api[this.preview ? 'getRedisCache' : 'findPage'], Util.rsa(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> |
|
||||||
|
|
||||||
<style lang="scss" scoped> |
|
||||||
@import url(../../plugins/wow/animate.css); |
|
||||||
@import '../../styles/page/page.scss'; |
|
||||||
|
|
||||||
.banner-item { |
|
||||||
.banner-name { |
|
||||||
font-size: 2.16rem; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.history { |
|
||||||
h2 { |
|
||||||
font-size: 2.14rem; |
|
||||||
color: #333; |
|
||||||
} |
|
||||||
|
|
||||||
.texts { |
|
||||||
display: flex; |
|
||||||
justify-content: space-between; |
|
||||||
padding: 5rem 3.5rem 1.8rem; |
|
||||||
margin-top: 20px; |
|
||||||
background-color: #fff; |
|
||||||
border-radius: 6.25rem 0px 0px 0px; |
|
||||||
transition: 0.3s; |
|
||||||
|
|
||||||
&:hover { |
|
||||||
transform: scale(1.05); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.left { |
|
||||||
width: 43.4375rem; |
|
||||||
} |
|
||||||
|
|
||||||
.line { |
|
||||||
width: 8.5rem; |
|
||||||
height: 2px; |
|
||||||
margin: 1.25rem 0; |
|
||||||
background: #d7d7d7; |
|
||||||
} |
|
||||||
|
|
||||||
.des { |
|
||||||
font-size: 1.57rem; |
|
||||||
color: #181818; |
|
||||||
line-height: 31px; |
|
||||||
-webkit-line-clamp: 6; |
|
||||||
} |
|
||||||
|
|
||||||
.bg { |
|
||||||
width: 562px; |
|
||||||
height: 506px; |
|
||||||
margin: -122px 0 0 0; |
|
||||||
border-top-right-radius: 40px; |
|
||||||
object-fit: cover; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.card { |
|
||||||
display: flex; |
|
||||||
flex-wrap: wrap; |
|
||||||
|
|
||||||
li { |
|
||||||
width: calc((100% - 28px) / 2); |
|
||||||
// height: 13.85rem; |
|
||||||
padding: 3.5rem 3.344rem; |
|
||||||
margin-bottom: 1.4rem; |
|
||||||
color: #fff; |
|
||||||
transition: 0.3s; |
|
||||||
|
|
||||||
&:hover { |
|
||||||
transform: scale(1.05); |
|
||||||
} |
|
||||||
|
|
||||||
&:nth-child(odd) { |
|
||||||
margin-right: 1.75rem; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.item1 { |
|
||||||
background: url(../../assets/images/about/3.png) 0 0/100% 100% no-repeat; |
|
||||||
} |
|
||||||
|
|
||||||
.item2 { |
|
||||||
background-color: #4984b6; |
|
||||||
} |
|
||||||
|
|
||||||
.item3 { |
|
||||||
background-color: #567180; |
|
||||||
} |
|
||||||
|
|
||||||
.item4 { |
|
||||||
background: url(../../assets/images/about/4.png) 0 0/100% 100% no-repeat; |
|
||||||
} |
|
||||||
|
|
||||||
h6 { |
|
||||||
margin-bottom: 10px; |
|
||||||
font-size: 2.28rem; |
|
||||||
} |
|
||||||
|
|
||||||
.des { |
|
||||||
font-size: 1.024rem; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.plan { |
|
||||||
padding: 3.65rem 0; |
|
||||||
background: #072947; |
|
||||||
|
|
||||||
.inner { |
|
||||||
display: flex; |
|
||||||
justify-content: space-between; |
|
||||||
} |
|
||||||
|
|
||||||
.pic { |
|
||||||
width: 33.2rem; |
|
||||||
height: 24.4rem; |
|
||||||
margin-bottom: -4.8rem; |
|
||||||
transition: 0.3s; |
|
||||||
object-fit: cover; |
|
||||||
|
|
||||||
&:hover { |
|
||||||
transform: scale(1.05); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.texts { |
|
||||||
width: 51%; |
|
||||||
margin-top: 4.25rem; |
|
||||||
color: #fff; |
|
||||||
transition: 0.3s; |
|
||||||
|
|
||||||
&:hover { |
|
||||||
transform: translateY(20px); |
|
||||||
} |
|
||||||
|
|
||||||
img { |
|
||||||
width: 3.5rem; |
|
||||||
height: 3.5rem; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
h6 { |
|
||||||
font-size: 2.056rem; |
|
||||||
} |
|
||||||
|
|
||||||
.des { |
|
||||||
margin: 2rem 0; |
|
||||||
font-size: 1.1424rem; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.people { |
|
||||||
li { |
|
||||||
display: flex; |
|
||||||
justify-content: space-between; |
|
||||||
margin-bottom: 6.296rem; |
|
||||||
transition: 0.3s; |
|
||||||
|
|
||||||
&:hover { |
|
||||||
transform: scale(1.05); |
|
||||||
} |
|
||||||
|
|
||||||
&:nth-child(even) { |
|
||||||
flex-direction: row-reverse; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.pic { |
|
||||||
width: 47%; |
|
||||||
height: auto; |
|
||||||
object-fit: cover; |
|
||||||
} |
|
||||||
|
|
||||||
.texts { |
|
||||||
width: 49%; |
|
||||||
padding-top: 4.45rem; |
|
||||||
} |
|
||||||
|
|
||||||
h6 { |
|
||||||
margin: 1rem 0; |
|
||||||
font-size: 2.28rem; |
|
||||||
font-weight: 600; |
|
||||||
} |
|
||||||
|
|
||||||
.sub { |
|
||||||
font-size: 1.1424rem; |
|
||||||
color: #020202; |
|
||||||
} |
|
||||||
|
|
||||||
.des { |
|
||||||
font-size: 1.024rem; |
|
||||||
color: #020202; |
|
||||||
line-height: 30px; |
|
||||||
} |
|
||||||
|
|
||||||
.arrow { |
|
||||||
height: 3.7rem; |
|
||||||
width: 3.7rem; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.list-block { |
|
||||||
.inner { |
|
||||||
padding: 5.625rem 0; |
|
||||||
background-color: #fff; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.list { |
|
||||||
display: flex; |
|
||||||
justify-content: center; |
|
||||||
|
|
||||||
li { |
|
||||||
flex: 1; |
|
||||||
padding-bottom: 1.875rem; |
|
||||||
margin-right: 1.75rem; |
|
||||||
text-align: center; |
|
||||||
background-color: #f5f5f5; |
|
||||||
transition: 0.3s; |
|
||||||
|
|
||||||
&:hover { |
|
||||||
background-color: #1f5793; |
|
||||||
|
|
||||||
h6, |
|
||||||
.des { |
|
||||||
color: #fff; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
&:last-child { |
|
||||||
margin-right: 0; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.pic { |
|
||||||
width: 100%; |
|
||||||
} |
|
||||||
|
|
||||||
h6 { |
|
||||||
margin: 1.75rem 0 5px; |
|
||||||
font-size: 1.368rem; |
|
||||||
color: #272727; |
|
||||||
transition: 0.3s; |
|
||||||
} |
|
||||||
|
|
||||||
.des { |
|
||||||
font-size: 0.912rem; |
|
||||||
color: #757575; |
|
||||||
transition: 0.3s; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.staff { |
|
||||||
display: flex; |
|
||||||
justify-content: space-between; |
|
||||||
background: #f8f8f8; |
|
||||||
transition: 0.3s; |
|
||||||
|
|
||||||
&:hover { |
|
||||||
transform: scale(1.05); |
|
||||||
background-color: #165191; |
|
||||||
|
|
||||||
h6, |
|
||||||
.des { |
|
||||||
color: #fff; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.staff-inner { |
|
||||||
width: 98rem; |
|
||||||
} |
|
||||||
|
|
||||||
.left { |
|
||||||
width: 50%; |
|
||||||
padding: 5.4rem 2.15rem 0 2.3rem; |
|
||||||
} |
|
||||||
|
|
||||||
h6 { |
|
||||||
margin-bottom: 1.5rem; |
|
||||||
font-size: 1.712rem; |
|
||||||
color: #333; |
|
||||||
transition: 0.3s; |
|
||||||
@include mul-ellipsis(3); |
|
||||||
} |
|
||||||
|
|
||||||
.des { |
|
||||||
font-size: 1.42rem; |
|
||||||
color: #333; |
|
||||||
line-height: 1.94rem; |
|
||||||
transition: 0.3s; |
|
||||||
} |
|
||||||
|
|
||||||
.pic { |
|
||||||
width: 53%; |
|
||||||
height: auto; |
|
||||||
object-fit: cover; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.stat { |
|
||||||
display: flex; |
|
||||||
justify-content: space-around; |
|
||||||
flex-wrap: wrap; |
|
||||||
margin-top: 3rem; |
|
||||||
|
|
||||||
li { |
|
||||||
width: 27%; |
|
||||||
margin-bottom: 2.5rem; |
|
||||||
} |
|
||||||
|
|
||||||
.num { |
|
||||||
margin-bottom: 10px; |
|
||||||
font-size: 2.7rem; |
|
||||||
font-weight: 800; |
|
||||||
color: #035ce1; |
|
||||||
line-height: 2.45rem; |
|
||||||
} |
|
||||||
|
|
||||||
.text { |
|
||||||
font-size: 1.08rem; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
@media (max-width: 1200px) { |
|
||||||
.hide-bd:after { |
|
||||||
display: none; |
|
||||||
} |
|
||||||
|
|
||||||
.history { |
|
||||||
.texts { |
|
||||||
flex-direction: column; |
|
||||||
padding-left: 30px; |
|
||||||
padding-right: 30px; |
|
||||||
} |
|
||||||
|
|
||||||
.left { |
|
||||||
width: 100%; |
|
||||||
margin-right: 0; |
|
||||||
} |
|
||||||
|
|
||||||
.bg { |
|
||||||
width: 100%; |
|
||||||
height: auto; |
|
||||||
margin-top: 20px; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.stat { |
|
||||||
li { |
|
||||||
width: 35%; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.plan { |
|
||||||
.inner { |
|
||||||
flex-direction: column; |
|
||||||
} |
|
||||||
|
|
||||||
.pic { |
|
||||||
width: 100%; |
|
||||||
height: auto; |
|
||||||
margin-bottom: 0; |
|
||||||
} |
|
||||||
|
|
||||||
.texts { |
|
||||||
width: 100%; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.people { |
|
||||||
li { |
|
||||||
flex-direction: column !important; |
|
||||||
} |
|
||||||
|
|
||||||
.pic, |
|
||||||
.texts { |
|
||||||
width: 100%; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.list { |
|
||||||
flex-direction: column; |
|
||||||
|
|
||||||
li { |
|
||||||
margin-right: 0; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.staff { |
|
||||||
flex-direction: column; |
|
||||||
|
|
||||||
.left { |
|
||||||
width: 100%; |
|
||||||
margin-bottom: 20px; |
|
||||||
} |
|
||||||
|
|
||||||
.pic { |
|
||||||
width: 100%; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
</style> |
|
||||||
@ -1,122 +1,71 @@ |
|||||||
.mce-content-body:not([dir='rtl']) blockquote { |
.mce-content-body:not([dir=rtl]) blockquote { |
||||||
padding: 8px 15px; |
padding: 8px 15px; |
||||||
border-left: 0; |
border-left: 0; |
||||||
background-color: #ededed; |
background-color: #ededed; |
||||||
} |
|
||||||
.mce-content-body p { |
|
||||||
margin: 0; |
|
||||||
} |
} |
||||||
.tiny-wrap { |
.tiny-wrap { |
||||||
/* width: 900px; */ |
/* width: 900px; */ |
||||||
margin: 0 auto; |
margin: 0 auto; |
||||||
} |
|
||||||
.tiny-wrap .blue { |
|
||||||
color: #1583ff; |
|
||||||
} |
} |
||||||
.tiny-wrap blockquote p { |
.tiny-wrap blockquote p { |
||||||
margin: 0; |
margin: 0; |
||||||
font-style: italic; |
font-style: italic; |
||||||
} |
} |
||||||
.tiny-wrap .block { |
.tiny-wrap .block { |
||||||
margin-bottom: 20px; |
margin-bottom: 20px; |
||||||
overflow: hidden; |
overflow: hidden; |
||||||
} |
} |
||||||
.tiny-wrap .block .fl { |
.tiny-wrap .block .fl { |
||||||
float: left; |
float: left; |
||||||
margin: 0 20px 0 0; |
margin: 0 20px 0 0; |
||||||
} |
} |
||||||
.tiny-wrap .block .fr { |
.tiny-wrap .block .fr { |
||||||
float: right; |
float: right; |
||||||
margin: 0 0 0 20px; |
margin: 0 0 0 20px; |
||||||
} |
} |
||||||
.tiny-wrap .block p { |
.tiny-wrap .block p { |
||||||
margin: 0 0 10px; |
margin: 0 0 10px; |
||||||
font-size: 19px; |
font-size: 19px; |
||||||
font-weight: 400; |
font-family: SFProDisplay; |
||||||
color: #101010; |
font-weight: 400; |
||||||
line-height: 32px; |
color: #101010; |
||||||
white-space: pre-wrap; |
line-height: 32px; |
||||||
} |
} |
||||||
.tiny-wrap .en-block p, |
.tiny-wrap .en-block p, .tiny-wrap .en-block .img-des { |
||||||
.tiny-wrap .en-block .img-des { |
font-family: ProximaNova; |
||||||
letter-spacing: -0.0135em; |
letter-spacing: -.0135em; |
||||||
line-height: 1.5em; |
line-height: 1.5em; |
||||||
} |
} |
||||||
.tiny-wrap .block .tiny-title { |
.tiny-wrap .block .tiny-title { |
||||||
margin: 10px 0; |
margin: 10px 0; |
||||||
font-size: 24px; |
font-size: 24px; |
||||||
font-weight: 500; |
font-family: SFProDisplay; |
||||||
color: #101010; |
font-weight: 500; |
||||||
line-height: 32px; |
color: #101010; |
||||||
|
line-height: 32px; |
||||||
} |
} |
||||||
.tiny-wrap .quote { |
.tiny-wrap .quote { |
||||||
padding: 15px; |
padding: 15px; |
||||||
margin-bottom: 10px; |
margin-bottom: 10px; |
||||||
font-size: 16px; |
font-size: 16px; |
||||||
font-style: italic; |
font-style: italic; |
||||||
border: 1px solid #e3e3e3; |
border: 1px solid #e3e3e3; |
||||||
background-color: #f1f1f1; |
background-color: #f1f1f1; |
||||||
} |
} |
||||||
.tiny-wrap .img-wrap { |
.tiny-wrap .img-wrap { |
||||||
text-align: center; |
text-align: center; |
||||||
} |
} |
||||||
.tiny-wrap .img-wrap img { |
.tiny-wrap .img-wrap img { |
||||||
max-width: 600px; |
max-width: 600px; |
||||||
max-height: 600px; |
max-height: 600px; |
||||||
} |
} |
||||||
.tiny-wrap .block .img-des { |
.tiny-wrap .block .img-des { |
||||||
margin: 10px 0 0; |
margin: 10px 0 0; |
||||||
font-size: 14px; |
font-size: 14px; |
||||||
color: #8d8d8d; |
color: #8d8d8d; |
||||||
text-align: center; |
text-align: center; |
||||||
} |
} |
||||||
.tiny-wrap .block .pic { |
.tiny-wrap .block .pic { |
||||||
width: 300px; |
width: 300px; |
||||||
height: 190px; |
height: 190px; |
||||||
} |
} |
||||||
.tiny-wrap .people { |
|
||||||
display: flex; |
|
||||||
align-items: center; |
|
||||||
margin-bottom: 30px; |
|
||||||
} |
|
||||||
.tiny-wrap .people .pic { |
|
||||||
max-width: 400px; |
|
||||||
} |
|
||||||
.tiny-wrap .people .texts { |
|
||||||
margin-left: 50px; |
|
||||||
} |
|
||||||
.tiny-wrap .people h6 { |
|
||||||
font-size: 24px; |
|
||||||
font-weight: 500; |
|
||||||
color: #333333; |
|
||||||
} |
|
||||||
.tiny-wrap .people h6 { |
|
||||||
margin-top: 20px; |
|
||||||
font-size: 18px; |
|
||||||
color: #333; |
|
||||||
line-height: 35px; |
|
||||||
} |
|
||||||
.tiny-wrap .p-title { |
|
||||||
display: flex; |
|
||||||
align-items: center; |
|
||||||
margin: 0 0 10px; |
|
||||||
font-size: 22px; |
|
||||||
font-weight: 400; |
|
||||||
color: #333; |
|
||||||
} |
|
||||||
.tiny-wrap .p-title:before { |
|
||||||
content: ''; |
|
||||||
width: 5px; |
|
||||||
height: 19px; |
|
||||||
margin-right: 8px; |
|
||||||
background: #1583ff; |
|
||||||
border-radius: 4px; |
|
||||||
} |
|
||||||
@media (max-width: 640px) { |
|
||||||
.tiny-wrap .people { |
|
||||||
flex-direction: column; |
|
||||||
} |
|
||||||
.tiny-wrap .people .texts { |
|
||||||
margin-left: 0; |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,193 +0,0 @@ |
|||||||
<template> |
|
||||||
<!-- 联系我们 --> |
|
||||||
<div class="wrap"> |
|
||||||
<div class="single-banner"> |
|
||||||
<img class="banner-img" :src="modules[0].form.pic" alt="" /> |
|
||||||
<div class="texts"> |
|
||||||
<h6 class="banner-title">{{ modules[0].form.title }}</h6> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="block"> |
|
||||||
<div class="inner"> |
|
||||||
<Breadcrumb ref="breadcrumb" :data.sync="routes" /> |
|
||||||
<div class="contact"> |
|
||||||
<div class="fields"> |
|
||||||
<h6>{{ modules[1].form.title }}</h6> |
|
||||||
<div v-html="modules[1].form.info"></div> |
|
||||||
</div> |
|
||||||
<img :src="modules[2].form.pic" alt="" class="pic"> |
|
||||||
<el-table :data="modules[3].list" class="patent-table" ref="table" stripe header-align="center"> |
|
||||||
<el-table-column prop="dep" label="部门" align="center" min-width="150"></el-table-column> |
|
||||||
<!-- <el-table-column prop="contacts" label="联系人" align="center" min-width="100"></el-table-column> --> |
|
||||||
<el-table-column prop="phone" align="center" min-width="150"> |
|
||||||
<template slot="header" slot-scope="scope"> |
|
||||||
<img src="@/assets/images/tel1.png" alt=""> 电话 |
|
||||||
</template> |
|
||||||
</el-table-column> |
|
||||||
<el-table-column prop="email" align="center" min-width="150"> |
|
||||||
<template slot="header" slot-scope="scope"> |
|
||||||
<img style="width: 20px" src="@/assets/images/email-white.png" alt=""> 邮箱 |
|
||||||
</template> |
|
||||||
</el-table-column> |
|
||||||
</el-table> |
|
||||||
</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: [], |
|
||||||
list: [] |
|
||||||
}; |
|
||||||
}, |
|
||||||
components: { |
|
||||||
Breadcrumb |
|
||||||
}, |
|
||||||
mounted () { |
|
||||||
new WOW().init(); |
|
||||||
this.getColumn() |
|
||||||
}, |
|
||||||
methods: { |
|
||||||
// 获取文章详情 |
|
||||||
getInfo () { |
|
||||||
// 预览/详情 |
|
||||||
this.$post(this.api[this.preview ? 'getRedisCache' : 'findPage'], Util.rsa(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, Util.rsa({ |
|
||||||
id: this.id, |
|
||||||
isSort: 1, |
|
||||||
siteId: this.site |
|
||||||
})).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'; |
|
||||||
|
|
||||||
.single-banner { |
|
||||||
.banner-img { |
|
||||||
height: 21.6rem; |
|
||||||
} |
|
||||||
|
|
||||||
.texts { |
|
||||||
h6 { |
|
||||||
font-size: 2.16rem; |
|
||||||
margin-bottom: 0.95rem; |
|
||||||
} |
|
||||||
|
|
||||||
.banner-des { |
|
||||||
font-size: 0.96rem; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.block { |
|
||||||
padding: 2rem 0; |
|
||||||
background: url(https://www.iasf.ac.cn/images/contactUs/3.png) 0 130px no-repeat, |
|
||||||
url(https://www.iasf.ac.cn/images/contactUs/4.png) bottom right no-repeat; |
|
||||||
background-color: #f7f8fa; |
|
||||||
} |
|
||||||
|
|
||||||
.inner { |
|
||||||
.contact { |
|
||||||
padding: 3rem 6rem; |
|
||||||
background-color: #fff; |
|
||||||
} |
|
||||||
|
|
||||||
.fields { |
|
||||||
position: relative; |
|
||||||
padding: 2rem; |
|
||||||
border: 4px solid #f9f9f9; |
|
||||||
|
|
||||||
h6 { |
|
||||||
position: absolute; |
|
||||||
top: -16px; |
|
||||||
left: 60px; |
|
||||||
font-size: 1.1rem; |
|
||||||
color: #333; |
|
||||||
background-color: #fff; |
|
||||||
} |
|
||||||
|
|
||||||
.text { |
|
||||||
font-size: 1rem; |
|
||||||
color: #333; |
|
||||||
line-height: 1.6; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.pic { |
|
||||||
width: 100%; |
|
||||||
margin: 2rem 0 1.5rem; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
/deep/.patent-table { |
|
||||||
thead tr, |
|
||||||
thead th { |
|
||||||
color: #fff; |
|
||||||
background-color: #1583ff; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
@media (max-width: 1200px) { |
|
||||||
.inner { |
|
||||||
.contact { |
|
||||||
padding: 3rem 1rem; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
</style> |
|
||||||