parent
20b94f55fe
commit
cdf6ce2826
7 changed files with 134 additions and 12 deletions
After Width: | Height: | Size: 1.3 MiB |
@ -0,0 +1,115 @@ |
||||
<template> |
||||
<div class="wrap"> |
||||
<div class="banner"> |
||||
<img width="100%" height="280" src="@/assets/images/publication-bg.png" alt="" /> |
||||
<div class="texts"> |
||||
<p class="text">{{ info.columnName }}</p> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="tab-content"> |
||||
<Breadcrumb style="margin-bottom: 30px" ref="breadcrumb" :data.sync="routes"/> |
||||
<!-- 根据栏目的listStyleId判断是哪个列表样式,这个出版物页面只显示下面三个列表样式 --> |
||||
<!-- 论文 --> |
||||
<Thesis v-if="type === 46" :id.sync="id" /> |
||||
<!-- 专利 --> |
||||
<Patent v-if="type === 44" :id.sync="id" /> |
||||
<!-- 专著 --> |
||||
<Monograph v-if="type === 45" :id.sync="id" /> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import mixins from '@/mixins/article' |
||||
import Thesis from './thesis' |
||||
import Patent from './patent' |
||||
import Monograph from './monograph' |
||||
import Breadcrumb from '@/components/breadcrumb' |
||||
export default { |
||||
mixins: [mixins], |
||||
data() { |
||||
return { |
||||
routes: [ |
||||
{ |
||||
name: '科学研究' |
||||
}, |
||||
{ |
||||
name: '科研成果' |
||||
} |
||||
], |
||||
info: {}, |
||||
type: +this.$route.query.type, // 栏目的listStyleId |
||||
} |
||||
}, |
||||
components: { |
||||
Breadcrumb, |
||||
Thesis, |
||||
Patent, |
||||
Monograph |
||||
}, |
||||
mounted() { |
||||
this.getInfo() |
||||
}, |
||||
methods: { |
||||
// 获取栏目详情 |
||||
getInfo() { |
||||
this.id && |
||||
this.$post(`${this.api.findColumn}?id=${this.id}`) |
||||
.then(({ data }) => { |
||||
this.info = data |
||||
}) |
||||
.catch((res) => { }) |
||||
}, |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.wrap { |
||||
background-color: #f9f9f9; |
||||
} |
||||
.banner { |
||||
position: relative; |
||||
height: 280px; |
||||
color: #fff; |
||||
.texts { |
||||
position: absolute; |
||||
top: 123px; |
||||
left: 243px; |
||||
} |
||||
|
||||
.text { |
||||
font-size: 3.42rem; |
||||
font-weight: 600; |
||||
@include ellipsis; |
||||
} |
||||
|
||||
.sub { |
||||
margin-top: 10px; |
||||
font-size: 2rem; |
||||
} |
||||
} |
||||
.tab-content { |
||||
width: 1000px; |
||||
padding: 20px 0; |
||||
margin: 0 auto; |
||||
} |
||||
@media (max-width: 1200px) { |
||||
.banner { |
||||
.texts { |
||||
.text { |
||||
font-size: 1.5rem; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
@media (max-width: 320px) { |
||||
.banner { |
||||
.texts { |
||||
left: 6rem; |
||||
top: 6rem; |
||||
} |
||||
} |
||||
} |
||||
</style> |
Loading…
Reference in new issue