<template>
  <global-layout>
    <a-spin :spinning="isLoading" class="global-spinning">
      <keep-alive v-if="keepAlive">
        <router-view />
      </keep-alive>
      <router-view v-else />
    </a-spin>
  </global-layout>
</template>

<script>
import GlobalLayout from '@/components/page/GlobalLayout'
import { mapState } from 'vuex'

export default {
  name: 'BasicLayout',
  components: {
    GlobalLayout
  },
  data() {
    return {}
  },
  computed: {
    keepAlive() {
      return this.$route.meta.keepAlive
    },
    ...mapState({
      isLoading: (state) => state.app.isLoading
    })
  },
  methods: {}
}
</script>

<style lang="less">
.global-spinning {
  height: 100%;
  .ant-spin-container {
    max-height: calc(100% - 20px);
    overflow: hidden;
  }
}

/*
 * The following styles are auto-applied to elements with
 * transition="page-transition" when their visibility is toggled
 * by Vue.js.
 *
 * You can easily play with the page transition by editing
 * these styles.
 */

.page-transition-enter {
  opacity: 0;
}

.page-transition-leave-active {
  opacity: 0;
}

.page-transition-enter .page-transition-container,
.page-transition-leave-active .page-transition-container {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

/*上传控件尺寸调整*/
.ant-upload {
  width: 80px !important;
  height: 80px !important;
}
.ant-upload-list-picture-card .ant-upload-list-item {
  width: 80px !important;
  height: 80px !important;
}
.ant-upload-list-item-uploading-text {
  font-size: 10px; // 调整“文件上传中”字体大小
}
.ant-upload-list-picture .ant-upload-list-item,
.ant-upload-list-picture-card .ant-upload-list-item {
  padding: 4px !important; // 调整图片和边框的间隙
}
/*end*/
</style>