parent
dc241c2d01
commit
e3d35d897f
16 changed files with 620 additions and 256 deletions
|
After Width: | Height: | Size: 2.4 MiB |
|
After Width: | Height: | Size: 2.7 KiB |
|
After Width: | Height: | Size: 804 B |
|
After Width: | Height: | Size: 1.8 MiB |
|
After Width: | Height: | Size: 466 KiB |
|
After Width: | Height: | Size: 602 KiB |
|
After Width: | Height: | Size: 5.9 KiB |
|
After Width: | Height: | Size: 74 KiB |
@ -1,56 +1,97 @@ |
||||
<template> |
||||
<div class="footer"> |
||||
<div class="info" v-if="isIndex"> |
||||
<span class="m-r-20">客服邮箱：service@huorantech.cn</span> |
||||
<div class="footer"> |
||||
<div class="inner"> |
||||
<div class="info"> |
||||
<div style="margin-right: 100px"> |
||||
<img class="m-b-20" src="@/assets/images/iasf.png" alt=""> |
||||
<p class="meta">Copyright ©2002- 2021</p> |
||||
<p class="meta">Institute of Advanced Science Facilities, ShenzhenIASF</p> |
||||
<p class="meta">Tel：400-0010-998</p> |
||||
</div> |
||||
<div class="copyright"> |
||||
<span v-if="isIndex">© Copyright 2021 Occupation Lab 职站</span> |
||||
<a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">粤ICP备20072679号</a> |
||||
<div class="column"> |
||||
<h6>关于IASF</h6> |
||||
<ul class="children"> |
||||
<li>研究院概况</li> |
||||
<li>研究院概况</li> |
||||
<li>研究院概况</li> |
||||
<li>研究院概况</li> |
||||
</ul> |
||||
</div> |
||||
<div class="column"> |
||||
<h6>关于IASF</h6> |
||||
<ul class="children"> |
||||
<li>研究院概况</li> |
||||
<li>研究院概况</li> |
||||
<li>研究院概况</li> |
||||
<li>研究院概况</li> |
||||
</ul> |
||||
</div> |
||||
<div class="column"> |
||||
<h6>关于IASF</h6> |
||||
<ul class="children"> |
||||
<li>研究院概况</li> |
||||
<li>研究院概况</li> |
||||
<li>研究院概况</li> |
||||
<li>研究院概况</li> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
<a class="copyright">粤ICP备2020131940号 粤公安网34565432456765432号</a> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
<script> |
||||
import Setting from "@/setting"; |
||||
export default { |
||||
data() { |
||||
return { |
||||
isIndex: this.$route.path !== '/login' && Setting.whiteList.some(e => e === this.$route.path) // 官网3个页面才能显示邮箱和版权号 |
||||
}; |
||||
}, |
||||
mounted(){ |
||||
data() { |
||||
return { |
||||
isIndex: this.$route.path !== '/login' && Setting.whiteList.some(e => e === this.$route.path) // 官网3个页面才能显示邮箱和版权号 |
||||
}; |
||||
}, |
||||
mounted(){ |
||||
|
||||
}, |
||||
methods: { |
||||
}, |
||||
methods: { |
||||
|
||||
}, |
||||
}, |
||||
}; |
||||
</script> |
||||
<style lang="scss" scoped> |
||||
.footer{ |
||||
padding: 17px 0 9px; |
||||
text-align: center; |
||||
background-color: #0F1D2E; |
||||
.info{ |
||||
margin-bottom: 7px; |
||||
font-size: 14px; |
||||
line-height: 20px; |
||||
color: #D7DFE7; |
||||
} |
||||
.copyright{ |
||||
font-size: 12px; |
||||
text-align: center; |
||||
line-height: 17px; |
||||
span{ |
||||
margin-right: 20px; |
||||
color: #757F8A; |
||||
} |
||||
a{ |
||||
color:#757F8A; |
||||
font-size: 12px; |
||||
&:hover{ |
||||
color: #c7c7c7; |
||||
} |
||||
} |
||||
} |
||||
.footer{ |
||||
padding: 64px 0 25px; |
||||
color: #fff; |
||||
background-color: #091733; |
||||
.inner { |
||||
width: 1500px; |
||||
margin: 0 auto; |
||||
} |
||||
.info { |
||||
display: flex; |
||||
// justify-content: center; |
||||
margin-bottom: 100px; |
||||
} |
||||
.meta { |
||||
margin-bottom: 10px; |
||||
font-size: 14px; |
||||
} |
||||
.column { |
||||
margin: 0 50px; |
||||
h6 { |
||||
margin-bottom: 20px; |
||||
font-size: 16px; |
||||
} |
||||
} |
||||
.children { |
||||
li { |
||||
margin: 12px 0; |
||||
font-size: 14px; |
||||
color: #6D7384; |
||||
cursor: pointer; |
||||
} |
||||
} |
||||
.copyright { |
||||
font-size: 14px; |
||||
color: #6D7384; |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,229 @@ |
||||
<template> |
||||
<div class="wrap"> |
||||
<div class="banner" :style="{backgroundImage: form.bannerImg ? ('url(' + form.bannerImg + ')') : ''}"> |
||||
S³FEL概况 |
||||
</div> |
||||
<div class="content"> |
||||
<Breadcrumb ref="breadcrumb" :data="'装置概况/' + form.title"/> |
||||
<div class="article"> |
||||
<div class="left"> |
||||
<h2>{{ form.title }}</h2> |
||||
<div class="meta">{{ form.createTime }} | {{ form.source }} | {{ form.author && form.author + ' | ' }} {{ form.totalBrowsing }} 浏览</div> |
||||
<p class="brief">{{ form.summary }}</p> |
||||
<div v-html="form.mainBody"></div> |
||||
<div class="annex"> |
||||
<h6>附件下载</h6> |
||||
<div class="file"> |
||||
<span class="name">{{ form.file }}</span> |
||||
<span class="download" @click="download">下载</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="right"> |
||||
<el-tree class="column" ref="column" :data="columns" highlight-current :expand-on-click-node="false" default-expand-all :props="defaultProps" node-key="id" ></el-tree> |
||||
|
||||
<p class="l-title">热点内容</p> |
||||
<ul class="list"> |
||||
<li> |
||||
<p class="text">喜报 | 深圳粒子研究院荣获全国科研…</p> |
||||
<span class="date">2022-08-09</span> |
||||
</li> |
||||
<li> |
||||
<p class="text">喜报 | 深圳粒子研究院荣获全国科研…</p> |
||||
<span class="date">2022-08-09</span> |
||||
</li> |
||||
<li> |
||||
<p class="text">喜报 | 深圳粒子研究院荣获全国科研…</p> |
||||
<span class="date">2022-08-09</span> |
||||
</li> |
||||
</ul> |
||||
|
||||
<p class="l-title">最新资讯</p> |
||||
<ul class="list"> |
||||
<li v-for="(item, i) in news" :key="i"> |
||||
<p class="text">{{ item.title }}</p> |
||||
<span class="date">{{ item.createTime }}</span> |
||||
</li> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import Setting from '@/setting' |
||||
import Util from '@/libs/util' |
||||
import Breadcrumb from '@/components/breadcrumb' |
||||
export default { |
||||
data() { |
||||
return { |
||||
id: this.$route.query.id, |
||||
columnId: '', |
||||
form: {}, |
||||
columns: [], |
||||
defaultProps: { |
||||
value: 'id', |
||||
label: 'columnName' |
||||
}, |
||||
news: [] |
||||
} |
||||
}, |
||||
components: { |
||||
Breadcrumb |
||||
}, |
||||
watch: { |
||||
'$route'() { |
||||
this.id = this.$route.query.id |
||||
this.getInfo() |
||||
} |
||||
}, |
||||
mounted() { |
||||
this.getColumn() |
||||
this.getArticle() |
||||
}, |
||||
methods: { |
||||
// 获取文章详情 |
||||
getInfo() { |
||||
this.$post(`${this.api.findArticle}?id=${this.id}`).then(({ data }) => { |
||||
this.form = data |
||||
this.columnId = data.columnId |
||||
this.$refs.breadcrumb.update('装置概况/' + data.title) |
||||
data.bannerImg || this.getBanner(this.columns) |
||||
if (this.columnBanner) this.form.bannerImg = this.columnBanner |
||||
}).catch(err => {}) |
||||
}, |
||||
// 获取banner 规则：当前文章有上传的，用上传的，没有上传的栏目有图片，读取上级栏目的（上级没有读上上级，以此类推）都没有的读取默认的 |
||||
getBanner(data) { |
||||
this.columnBanner = '' |
||||
for (const e of data) { |
||||
if (e.columnBanner) this.columnBanner = e.columnBanner |
||||
if (e.id == this.columnId) { |
||||
break |
||||
} else { |
||||
this.getBanner(e.children) |
||||
} |
||||
} |
||||
}, |
||||
// 资讯 |
||||
getColumn() { |
||||
this.$post(this.api.listWithTree, { |
||||
siteId: 1, |
||||
columnName: '', |
||||
templateId: '', |
||||
typeId : '', |
||||
isSort: 0 |
||||
}).then(({ data }) => { |
||||
this.columns = data |
||||
this.getInfo() |
||||
}).catch(err => {}) |
||||
}, |
||||
// 最新资讯 |
||||
getArticle() { |
||||
this.$post(this.api.newlyPublishedArticles, { |
||||
pageNum: 1, |
||||
pageSize: 5, |
||||
siteId: 1 |
||||
}).then(({ data }) => { |
||||
this.news = data.records |
||||
}).catch(res => {}) |
||||
}, |
||||
// 下载附件 |
||||
download() { |
||||
Util.downloadFile('附件', this.form.file) |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.banner { |
||||
height: 280px; |
||||
padding: 123px 0 0 243px; |
||||
font-size: 48px; |
||||
color: #fff; |
||||
background: url(../../assets/images/intro-bg.png) 0 0/100% 100% no-repeat; |
||||
} |
||||
.article { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
.left { |
||||
width: 1090px; |
||||
} |
||||
h2 { |
||||
font-size: 36px; |
||||
color: #1C1C1C; |
||||
} |
||||
.meta { |
||||
margin: 20px 0; |
||||
font-size: 14px; |
||||
color: #9B9B9B; |
||||
} |
||||
.brief { |
||||
padding-bottom: 30px; |
||||
margin-bottom: 30px; |
||||
font-size: 14px; |
||||
line-height: 20px; |
||||
color: #606060; |
||||
border-bottom: 1px solid #D8D8D8; |
||||
} |
||||
.annex { |
||||
margin-top: 30px; |
||||
h6 { |
||||
padding-left: 8px; |
||||
margin-bottom: 20px; |
||||
font-size: 16px; |
||||
line-height: 1; |
||||
color: #333; |
||||
border-left: 2px solid #1583FF; |
||||
} |
||||
.file { |
||||
display: flex; |
||||
align-items: center; |
||||
} |
||||
.name { |
||||
margin-right: 8px; |
||||
font-size: 14px; |
||||
} |
||||
.download { |
||||
color: #1583FF; |
||||
cursor: pointer; |
||||
} |
||||
} |
||||
.right { |
||||
width: 324px; |
||||
} |
||||
.column { |
||||
width: 100%; |
||||
margin-bottom: 25px; |
||||
} |
||||
/deep/.el-tree-node__content { |
||||
height: 60px; |
||||
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; |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -1,25 +0,0 @@ |
||||
<template> |
||||
<div class="wrap"></div> |
||||
</template> |
||||
|
||||
<script> |
||||
import Setting from '@/setting' |
||||
import util from '@/libs/util' |
||||
export default { |
||||
data() { |
||||
return { |
||||
|
||||
} |
||||
}, |
||||
mounted() { |
||||
|
||||
}, |
||||
methods: { |
||||
|
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
|
||||
</style> |
||||
@ -0,0 +1,14 @@ |
||||
import BasicLayout from '@/layouts/home' |
||||
const name = 'article' |
||||
export default { |
||||
path: `/${name}`, |
||||
component: BasicLayout, |
||||
children: [ |
||||
{ |
||||
name, |
||||
path: `/${name}`, |
||||
component: () => import(`@/pages/${name}`), |
||||
meta: { title: '' } |
||||
} |
||||
] |
||||
}; |
||||
@ -1,14 +0,0 @@ |
||||
import BasicLayout from '@/layouts/home'; |
||||
|
||||
export default { |
||||
path: '/index', |
||||
component: BasicLayout, |
||||
children: [ |
||||
{ |
||||
name: `index`, |
||||
path: `/index`, |
||||
component: () => import('@/pages/index/list'), |
||||
meta: { title: '首页' } |
||||
}, |
||||
] |
||||
}; |
||||
Loading…
Reference in new issue