Blame view

juvenile-prosecution-vue/src/components/layouts/PageView.vue 1.73 KB
6c637641   wxy   no message
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
  <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>