<template>
|
<div class="back-layout">
|
<div v-if="isMobile && !menuShrink" class="back-layout__backdrop" @click="onBackdropClick" />
|
<base-sidebar></base-sidebar>
|
<div class="back-layout__right">
|
<base-nav></base-nav>
|
<tags-view v-if="enableTagView"></tags-view>
|
<div class="back-layout__main">
|
<nuxt />
|
</div>
|
<div class="copyright">
|
<img class="copyright-logo" :src="logoUrl" /> {{ copyright?.base_website_name }} 版权所有 |
|
{{ copyright?.base_regisition_num }}
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { mapState } from 'vuex'
|
import TagsView from '@/components/tags-view'
|
export default {
|
components: {
|
TagsView,
|
},
|
middleware: ['auth', 'permission'],
|
created() {
|
this.getCopyRight()
|
},
|
data() {
|
return {
|
enableTagView: this.$config.enableTagView,
|
copyright: {},
|
logoUrl: '',
|
}
|
},
|
computed: {
|
...mapState({
|
isMobile: (state) => state.app.isMobile,
|
menuShrink: (state) => state.app.menuShrink,
|
}),
|
},
|
methods: {
|
onBackdropClick() {
|
this.$store.commit('app/SET_MENU_SHRINK', true)
|
},
|
|
async getCopyRight() {
|
const { code, data } = await this.$services.base.getBaseInfo()
|
if (code === 0) {
|
this.copyright = data
|
this.copyright.base_bg_url = JSON.parse(data.base_bg_url || [])
|
this.copyright.base_logo_url = JSON.parse(data.base_logo_url || [])
|
this.logoUrl = this.copyright?.base_logo_url[0]?.url
|
}
|
},
|
},
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.back-layout {
|
width: 100%;
|
height: 100%;
|
overflow: hidden;
|
display: flex;
|
|
&__backdrop {
|
background-color: rgba(0, 0, 0, 0.3);
|
width: 100%;
|
top: 0;
|
height: 100%;
|
position: absolute;
|
z-index: 999;
|
}
|
|
&__right {
|
flex: 1;
|
height: 100%;
|
overflow: hidden;
|
position: relative;
|
display: flex;
|
flex-direction: column;
|
}
|
|
&__main {
|
flex: 1;
|
background-color: $bg-color;
|
overflow: auto;
|
padding: 20px;
|
}
|
|
.copyright {
|
margin: auto;
|
margin-top: 10px;
|
height: 20px;
|
display: flex;
|
justify-content: center;
|
align-content: center;
|
font-size: 12px;
|
color: gray;
|
|
.copyright-logo {
|
width: 15px;
|
height: 15px;
|
border-radius: 50px;
|
/* 设置圆角 */
|
}
|
}
|
}
|
</style>
|
