cloudroam
2024-12-31 2eeea7a6431f0b5fb25b338e2512c48deab8652e
layouts/default.vue
@@ -1,16 +1,16 @@
<template>
  <div class="back-layout">
    <div
      v-if="isMobile && !menuShrink"
      class="back-layout__backdrop"
      @click="onBackdropClick"
    />
    <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>
@@ -24,9 +24,14 @@
    TagsView,
  },
  middleware: ['auth', 'permission'],
  created() {
    this.getCopyRight()
  },
  data() {
    return {
      enableTagView: this.$config.enableTagView,
      copyright: {},
      logoUrl: '',
    }
  },
  computed: {
@@ -39,6 +44,16 @@
    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>
@@ -49,6 +64,7 @@
  height: 100%;
  overflow: hidden;
  display: flex;
  &__backdrop {
    background-color: rgba(0, 0, 0, 0.3);
    width: 100%;
@@ -57,6 +73,7 @@
    position: absolute;
    z-index: 999;
  }
  &__right {
    flex: 1;
    height: 100%;
@@ -65,11 +82,30 @@
    display: flex;
    flex-direction: column;
  }
  &__main {
    flex: 1;
    background-color: #ebf2f9;
    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>