<template>
    <page-layout :desc="desc" :linkList="linkList">
        <div v-if="extraImage" slot="extra" :class="$style.extraImg">
            <img :src="extraImage" />
        </div>
        <router-view ref="page" />
    </page-layout>
</template>

<script>
import PageLayout from '../../layouts/PageLayout.vue';
import { mapState } from 'vuex';

export default {
    name: 'PageTemplateView',
    components: { PageLayout },
    data() {
        return {
            page: {},
        };
    },
    computed: {
        ...mapState('settingModule', ['multiPage']),
        desc() {
            return this.page?.desc;
        },
        linkList() {
            return this.page?.linkList;
        },
        extraImage() {
            return this.page?.extraImage;
        },
    },
    mounted() {
        this.page = this.$refs.page;
    },
    updated() {
        this.page = this.$refs.page;
    },
};
</script>

<style lang="less" modle>
.extraImg {
    margin-top: -60px;
    text-align: center;
    width: 195px;
    img {
        width: 100%;
    }
}
</style>
