12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485 |
- <template>
- <page-layout :desc="description" :title="getTitle" :link-list="linkList" :search="search" :tabs="tabs">
- <div slot="extra" class="extra-img">
- <img :src="extraImage"/>
- </div>
- <!-- keep-alive -->
- <route-view ref="content"></route-view>
- </page-layout>
- </template>
- <script>
- import PageLayout from '../page/PageLayout'
- import RouteView from './RouteView'
- export default {
- name: "PageContent",
- components: {
- RouteView,
- PageLayout
- },
- data () {
- return {
- title: '',
- description: '',
- linkList: [],
- extraImage: '',
- search: false,
- tabs: {}
- }
- },
- mounted () {
- this.getPageHeaderInfo()
- },
- updated () {
- this.getPageHeaderInfo()
- },
- computed: {
- getTitle () {
- return this.$route.meta.title
- }
- },
- methods: {
- getPageHeaderInfo () {
- // eslint-disable-next-line
- this.title = this.$route.meta.title
- // 因为套用了一层 route-view 所以要取 ref 对象下的子节点的第一个对象
- const content = this.$refs.content && this.$refs.content.$children[0]
- if (content) {
- this.description = content.description
- this.linkList = content.linkList
- this.extraImage = content.extraImage
- this.search = content.search == true ? true : false
- this.tabs = content.tabs
- }
- }
- }
- }
- </script>
- <style lang="less" scoped>
- .extra-img {
- margin-top: -60px;
- text-align: center;
- width: 195px;
- img {
- width: 100%;
- }
- }
- .mobile {
- .extra-img{
- margin-top: 0;
- text-align: center;
- width: 96px;
- img{
- width: 100%;
- }
- }
- }
- </style>
|