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> |
||||
<html lang="en"> |
||||
<head> |
||||
<meta charset="utf-8" /> |
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> |
||||
<meta name="keywords" content="深圳综合粒子设施研究院" /> |
||||
<meta name="description" content="深圳综合粒子设施研究院" /> |
||||
<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, user-scalable=yes, shrink-to-fit=no" /> --> |
||||
<link rel="icon" href="favcion.ico" type="image/x-icon"></link> |
||||
<link rel="shortcut icon" href="favicon.ico?v=20240710"> |
||||
<title>深圳综合粒子设施研究院</title> |
||||
</head> |
||||
<body> |
||||
<noscript> |
||||
<strong>We're sorry but vms doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> |
||||
</noscript> |
||||
<div id="app"></div> |
||||
<!-- built files will be auto injected --> |
||||
</body> |
||||
<head> |
||||
<meta charset="utf-8"> |
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
||||
<meta name="keywords" content="粒子研究院"> |
||||
<meta name="description" content="粒子研究院"/> |
||||
<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"> |
||||
<title>粒子研究院</title> |
||||
</head> |
||||
<body> |
||||
<noscript> |
||||
<strong>We're sorry but vms doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> |
||||
</noscript> |
||||
<div id="app"></div> |
||||
<!-- built files will be auto injected --> |
||||
</body> |
||||
|
||||
</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> |
||||
<div class="footer"> |
||||
<div class="info"> |
||||
<div class="left"> |
||||
<img class="logo" src="@/assets/images/logo3.png" alt=""> |
||||
<div class="texts"> |
||||
<div class="line"> |
||||
<img class="icon" src="@/assets/images/address.png" alt=""> |
||||
深圳市光明区新湖街道圳园路268号A3栋 |
||||
</div> |
||||
<div class="line"> |
||||
<img class="icon" src="@/assets/images/tel.png" alt=""> |
||||
{{ site == 1 ? |
||||
'0755-21096026' : |
||||
site == 5 || site == 6 ? |
||||
'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 v-if="showDefaultPath.includes($route.path)" class="footer"> |
||||
<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 v-for="(item, i) in columns" :key="i" class="column"> |
||||
<h6 @click="columnTo(item)">{{ item.columnName }}</h6> |
||||
<ul v-if="item.children.length" class="children"> |
||||
<li v-for="(column, j) in item.children" :key="j" @click="columnTo(column)">{{ column.columnName }}</li> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
<div v-if="site == 1 || site == 2" class="qrcodes"> |
||||
<div class="item"> |
||||
<img class="qrcode" src="@/assets/images/officialAccount.jpg" alt=""> |
||||
<p class="text">官方公众号</p> |
||||
<a class="copyright">粤ICP备2020131940号 粤公安网34565432456765432号</a> |
||||
</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 class="item"> |
||||
<img class="qrcode" src="@/assets/images/qrcode.png" alt=""> |
||||
<p class="text">官方微信</p> |
||||
</div> --> |
||||
</div> |
||||
</div> |
||||
<div class="copyright">Copyright ©深圳综合粒子设施研究院 粤ICP备2020131940号-1 粤公网安备44031102000586号</div> |
||||
</div> |
||||
</template> |
||||
<script> |
||||
import mixins from '@/mixins/article' |
||||
import Util from '@/libs/util' |
||||
export default { |
||||
mixins: [mixins], |
||||
data () { |
||||
data() { |
||||
return { |
||||
isIasf: false, |
||||
showDefaultPath: ['/home', '/iasf', '/estate/index'], // 展示默认页脚的页面 |
||||
showDefaultPath: ['/home'], // 展示默认页脚的页面 |
||||
showContactPath: ['/news', '/sfel', '/talent', '/about', '/careers', '/edu', '/news'], // 展示联系我们页脚的页面 |
||||
columns: [], |
||||
modules: [] |
||||
}; |
||||
}, |
||||
computed: { |
||||
// 是否是sfel网站 |
||||
isSfel () { |
||||
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 () { |
||||
mounted(){ |
||||
this.getColumn() |
||||
}, |
||||
methods: { |
||||
// 资讯 |
||||
getColumn () { |
||||
this.$post(this.api.listWithTreeMenuVisible, Util.rsa({ |
||||
getColumn() { |
||||
this.$post(this.api.listWithTreeMenuVisible, { |
||||
siteId: this.$route.query.siteId || this.$store.state.content.site, |
||||
columnName: '', |
||||
templateId: '', |
||||
typeId: '', |
||||
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'], 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 |
||||
} |
||||
}).then(({ data }) => { |
||||
this.columns = data.slice(0, 6) |
||||
}).catch(err => {}) |
||||
}, |
||||
}, |
||||
}; |
||||
</script> |
||||
<style lang="scss" scoped> |
||||
.footer { |
||||
z-index: 2; |
||||
position: relative; |
||||
.leftBox{ |
||||
margin-right: 100px; |
||||
} |
||||
.footer{ |
||||
padding: 64px 10% 25px; |
||||
color: #fff; |
||||
background-color: #091733; |
||||
border-top: 10px solid #2870ff; |
||||
|
||||
.logo { |
||||
width: 180px; |
||||
} |
||||
|
||||
overflow: hidden; |
||||
.info { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
width: 1200px; |
||||
padding: 20px 0; |
||||
} |
||||
.meta { |
||||
margin-bottom: 10px; |
||||
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; |
||||
color: #fff; |
||||
} |
||||
|
||||
.left { |
||||
display: inline-flex; |
||||
.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; |
||||
} |
||||
} |
||||
|
||||
.texts { |
||||
padding: 30px; |
||||
margin-left: 20px; |
||||
border-left: 2px solid #ccc; |
||||
|
||||
.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: 10px; |
||||
font-size: 14px; |
||||
margin-bottom: 20px; |
||||
font-size: 16px; |
||||
color: #fff; |
||||
|
||||
&:last-child { |
||||
margin-bottom: 0; |
||||
} |
||||
|
||||
img { |
||||
margin-right: 8px; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.qrcodes { |
||||
display: flex; |
||||
justify-content: center; |
||||
.qrcode { |
||||
text-align: center; |
||||
font-size: 12px; |
||||
|
||||
.item { |
||||
margin-right: 15px; |
||||
} |
||||
|
||||
.qrcode { |
||||
width: 100px; |
||||
height: 100px; |
||||
margin-bottom: 10px; |
||||
.text { |
||||
margin-top: 10px; |
||||
font-size: 12px; |
||||
color: #fff; |
||||
} |
||||
} |
||||
|
||||
.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) { |
||||
.footer { |
||||
.info { |
||||
flex-direction: column; |
||||
width: 90%; |
||||
@media (max-width: 1200px) { |
||||
body{ |
||||
width: 100% !important; |
||||
} |
||||
.inner { |
||||
width: 100% !important; |
||||
.title{ |
||||
width: 100%; |
||||
text-align: center; |
||||
} |
||||
|
||||
.left { |
||||
flex-direction: column; |
||||
margin-bottom: 20px; |
||||
.region{ |
||||
top: 300px; |
||||
left: 50%; |
||||
} |
||||
|
||||
.texts { |
||||
border-left: 0; |
||||
.info{ |
||||
margin-top: 90px; |
||||
} |
||||
} |
||||
} |
||||
@media (min-width: 280px) and (max-width: 750px) { |
||||
.footer { |
||||
.info{ |
||||
flex-direction: column; |
||||
.column{ |
||||
margin-top: 20px; |
||||
margin-left: 0; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.copyright { |
||||
padding: 16px; |
||||
@media (min-width: 751px) and (max-width: 1200px) { |
||||
.footer { |
||||
.info{ |
||||
flex-direction: column; |
||||
.column{ |
||||
margin-top: 20px; |
||||
margin-left: 0; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
</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 { |
||||
padding: 8px 15px; |
||||
border-left: 0; |
||||
background-color: #ededed; |
||||
} |
||||
.mce-content-body p { |
||||
margin: 0; |
||||
.mce-content-body:not([dir=rtl]) blockquote { |
||||
padding: 8px 15px; |
||||
border-left: 0; |
||||
background-color: #ededed; |
||||
} |
||||
.tiny-wrap { |
||||
/* width: 900px; */ |
||||
margin: 0 auto; |
||||
} |
||||
.tiny-wrap .blue { |
||||
color: #1583ff; |
||||
/* width: 900px; */ |
||||
margin: 0 auto; |
||||
} |
||||
.tiny-wrap blockquote p { |
||||
margin: 0; |
||||
font-style: italic; |
||||
margin: 0; |
||||
font-style: italic; |
||||
} |
||||
.tiny-wrap .block { |
||||
margin-bottom: 20px; |
||||
overflow: hidden; |
||||
margin-bottom: 20px; |
||||
overflow: hidden; |
||||
} |
||||
.tiny-wrap .block .fl { |
||||
float: left; |
||||
margin: 0 20px 0 0; |
||||
float: left; |
||||
margin: 0 20px 0 0; |
||||
} |
||||
.tiny-wrap .block .fr { |
||||
float: right; |
||||
margin: 0 0 0 20px; |
||||
float: right; |
||||
margin: 0 0 0 20px; |
||||
} |
||||
.tiny-wrap .block p { |
||||
margin: 0 0 10px; |
||||
font-size: 19px; |
||||
font-weight: 400; |
||||
color: #101010; |
||||
line-height: 32px; |
||||
white-space: pre-wrap; |
||||
} |
||||
.tiny-wrap .en-block p, |
||||
.tiny-wrap .en-block .img-des { |
||||
letter-spacing: -0.0135em; |
||||
line-height: 1.5em; |
||||
margin: 0 0 10px; |
||||
font-size: 19px; |
||||
font-family: SFProDisplay; |
||||
font-weight: 400; |
||||
color: #101010; |
||||
line-height: 32px; |
||||
} |
||||
.tiny-wrap .en-block p, .tiny-wrap .en-block .img-des { |
||||
font-family: ProximaNova; |
||||
letter-spacing: -.0135em; |
||||
line-height: 1.5em; |
||||
} |
||||
.tiny-wrap .block .tiny-title { |
||||
margin: 10px 0; |
||||
font-size: 24px; |
||||
font-weight: 500; |
||||
color: #101010; |
||||
line-height: 32px; |
||||
margin: 10px 0; |
||||
font-size: 24px; |
||||
font-family: SFProDisplay; |
||||
font-weight: 500; |
||||
color: #101010; |
||||
line-height: 32px; |
||||
} |
||||
.tiny-wrap .quote { |
||||
padding: 15px; |
||||
margin-bottom: 10px; |
||||
font-size: 16px; |
||||
font-style: italic; |
||||
border: 1px solid #e3e3e3; |
||||
background-color: #f1f1f1; |
||||
padding: 15px; |
||||
margin-bottom: 10px; |
||||
font-size: 16px; |
||||
font-style: italic; |
||||
border: 1px solid #e3e3e3; |
||||
background-color: #f1f1f1; |
||||
} |
||||
.tiny-wrap .img-wrap { |
||||
text-align: center; |
||||
text-align: center; |
||||
} |
||||
.tiny-wrap .img-wrap img { |
||||
max-width: 600px; |
||||
max-height: 600px; |
||||
max-width: 600px; |
||||
max-height: 600px; |
||||
} |
||||
.tiny-wrap .block .img-des { |
||||
margin: 10px 0 0; |
||||
font-size: 14px; |
||||
color: #8d8d8d; |
||||
text-align: center; |
||||
margin: 10px 0 0; |
||||
font-size: 14px; |
||||
color: #8d8d8d; |
||||
text-align: center; |
||||
} |
||||
.tiny-wrap .block .pic { |
||||
width: 300px; |
||||
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; |
||||
} |
||||
width: 300px; |
||||
height: 190px; |
||||
} |
||||
@ -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> |
||||