<!--
 * @Description:
 * @Author: 王晓颖
 * @Date:
 -->
<template>
  <div class="chart-layout" @click="refreshData">
    <Title2 class="title">{{title}}</Title2>
    <!--title 占高0.18rem-->
    <div class="module-corner" style="height:calc(100% - 0.28rem); position:relative">
      <div style="width: 100%; height: 100%;padding:0rem;position:absolute;z-index:1">
        <slot></slot>
      </div>
      <slot name="corner"/>
    </div>
  </div>
</template>

<script>
import Title3 from '@/components/text/title/Title3'
import Title2 from '@/components/text/title/Title2'
export default {
  name: 'chartLayout',
  components: {Title2, Title3},
  props: {
    title: {
      type: String,
      default: '标题'
    }
  },
  methods: {
    refreshData () {
      this.$emit('click')
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.chart-layout{
  height: 100%;
  width: 100%
}
  .chart-layout:hover{
    cursor: pointer;
  }
.chart-layout:hover .title
{
  opacity: 1;
  -webkit-animation:oblik 0.4s ease-in;
  -webkit-transform-origin: 0% 100%;
  -moz-animation:oblik 0.4s ease-in;
  -moz-transform-origin: 0% 100%;
  -ms-animation:oblik 0.4s ease-in;
  -ms-transform-origin: 0% 100%;
  animation:oblik 0.4s ease-in;
  transform-origin: 0% 100%;

}
@-webkit-keyframes oblik {
  0% {opacity:0;-webkit-transform: translateX(-100px)}
  100% {opacity:1;-webkit-transform: translateX(0px);}
}
@-moz-keyframes oblik {
  0% {opacity:0;-moz-transform: rotate(-45deg);}
  100% {opacity:1;-moz-transform: rotate(0deg);}
}
@-ms-keyframes oblik {
  0% {opacity:0;-ms-transform: rotate(-45deg);}
  100% {opacity:1;-ms-transform: rotate(0deg);}
}
@keyframes oblik {
  0% {opacity:0;transform: translateX(-100px);}
  100% {opacity:1;transform: translateX(0px);}
}
</style>