<template>
  <div class="common-layout">
    <div class="top"><a class="clearCacheBtn" @click="clearCache">清除缓存</a></div>
    <div class="content"><slot></slot></div>
    <page-footer :link-list="footerLinks" :copyright="copyright" :copyrightStyle="copyrightStyle"></page-footer>
  </div>
</template>

<script>
import PageFooter from '@vue2-client/layouts/footer/PageFooter'
import { mapState } from 'vuex'
import { indexedDB } from '@vue2-client/utils/indexedDB'

export default {
  name: 'CommonLayout',
  components: { PageFooter },
  computed: {
    ...mapState('setting', ['footerLinks', 'copyright', 'copyrightStyle'])
  },
  methods: {
    clearCache () {
      indexedDB.clearCache()
    }
  }
}
</script>

<style scoped lang="less">
.common-layout{
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: auto;
  background-color: @layout-body-background;
  background-image: url('https://gw.alipayobjects.com/zos/rmsportal/TVYTbAXWheQpRcWDaDMu.svg');
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: 110px;
  background-size: 100%;
  .top {
    padding: 5px 10px;
    text-align: right;
    .clearCacheBtn {
      color: #fff !important;
    }
  }
  .content{
    padding: 32px 0;
    flex: 1;
    @media (min-width: 768px){

      padding: 112px 0 24px;
    }
  }
}
</style>
