<template>
  <div class="bottom" :class="{ 'theme-white': theme === 'white' }">
    <div class="document">
      <div class="document-item">帮助</div>
      <div class="document-item">隐私</div>
      <div class="document-item">条款</div>
    </div>
    <div class="copyright">copyright© 2023 华天软件</div>
  </div>
</template>

<script>
import { defineComponent } from 'vue';
export default defineComponent({
  props: {
    theme: {
      type: String,
      default: 'black',
    },
  },
  name: 'MyFooter',
});
</script>

<style scoped lang="less">
.theme-white {
  color: white;
  .document-item:hover {
    background-color: rgba(255, 255, 255, 0.2) !important;
  }
}
.bottom {
  .document,
  .copyright {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .document {
    .document-item {
      position: relative;
      margin: 0 4px;
      padding: 2px 10px;
      border-radius: 2px;
      cursor: pointer;
      transition: all 0.3s;
      &:hover {
        background-color: #f1f1f1;
      }
    }
  }
  .copyright {
    padding-bottom: 50px;
  }
}
</style>
