<!--
 * @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% - 2rem - 1px); position:relative">
      <div style="width: 100%; height: 100%;padding:0rem;position:absolute;z-index:1">
        <slot/>
      </div>
      <slot name="corner"/>

    </div>
    <!--<corner1/>-->
  </div>
</template>

<script>
import Title2 from '../Title/Title2'
import Corner1 from '../Corner/Corner1'
export default {
  name: 'ChartLayout',
  components: { Corner1, Title2 },
  props: {
    title: {
      type: String,
      default: '标题'
    }
  },
  methods: {
    refreshData() {
      this.$emit('click')
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.chart-layout{
  height: 100%;
  width: 100%;
  background-image: url('../../../assets/overview/frame.png');
  background-repeat: no-repeat;
  background-size: cover;
  padding:5px;
  .title{
    color: white;
  }
  .highlight{
    height: 1px;
    width:100%;
  }
}
.chart-layout:hover .title
{
  opacity: 1;
}
</style>