<!--
 * @Description: 
 * @Author: 陈长吉
 * @Date: 2019-01-22 11:49:45
 * @LastEditTime: 2020-09-02 15:10:56
 * @LastEditors: Please set LastEditors
 -->
<template>
  <div class="attract-button" :style="`height:${height}px;left:${leftNum[layoutGrid ? 0 : 1]}px`">
    <slot></slot>
  </div>
</template>
<script>
// @yunjidoc 布局组件 - 主容器页脚
import { mapGetters } from 'vuex'
export default {
  componentName: 'AttractButton',
  props: {
    /**
     * @prop {Number} leftNum 左侧展开关闭的宽度值，[展开宽度px, 收起宽度px]
     */
    leftNum: {
      type: Array,
      default() {
        return [180, 64]
      }
    },
    /**
     * @prop {Number} height 高度 单位px
     */
    height: {
      type: Number,
      default: 60
    }
  },
  computed: {
    ...mapGetters({
      layoutGrid: 'layoutGrid'
    })
  },
  methods: {}
}
</script>
<style scoped>
.attract-button {
  position: fixed;
  height: 60px;
  background-color: #fff;
  bottom: 0;
  right: 0;
  transition: 0.4s;
  justify-content: center;
  align-items: center;
  display: -webkit-flex;
  z-index: 10;
  box-shadow: 10px 0px 10px #e5e5e5;
}
</style>
