<template>
  <div>
     <!-- 蒙版 Mask-->
    <div
      v-if="isShowTableMask"
      :class="`${maskClass}`"
      @click="closeTableMask"
     ></div>
    
  
  
  
  <div  style="
        "  class="table-dialog" :class="`${centerTableClass}   `" >
    
     <div @click="toCenter"  style="
            margin: 0  0px 40px;
            font-size: 0.4rem;cursor: pointer;
            font-family: Adobe 黑体 Std;
        
            background: linear-gradient(to bottom, #f7f7f7, #21b2fe);
            -webkit-background-clip: text;
            color: transparent;
            font-weight: 700;
          ">
          年度投资目标
        </div>
        <div style="margin-top: 0.3rem" class="">
          <div class="table-container" style="
    margin-left: 0.1rem;">
            
          </div>
        </div>
      </div>
  </div>
</template>

<script>
  export default {

    data() {
      return {
      centerTableClass: "",    
      isShowTableMask: false,    
       maskClass: '',

      }
    },

    methods: {
        toCenter( ) {
          //  去中间
          this.centerTableClass = "to-center";
          this.maskClass = 'table-mask'
          this.isShowTableMask = true
        },
    closeTableMask() {
        this.maskClass='table-mask mask-close'
        this.centerTableClass = ' to-center-return';
        setTimeout(()=>{
          this.isShowTableMask = false
        this.centerTableClass = '';
        },1000) 
    }, 
    }
  }
</script>

<style scoped lang="less" >

.table-dialog {
    background: url(../../assets/images/table-dialog.png)  -2px -6px no-repeat ;
    padding: 38px 59px;
    position: absolute;
    width: 398px;
    left: 206px;
    bottom: 73px;
    height: 154px;
    box-sizing:border-box;
    background-size: 98% 96%;
}

.table-mask {
 z-index: 11;
  left: 0;
  top: 0;
  width: 100%;
  height:   100%;
  position: absolute;
  background: rgba(0, 0, 0, 0.6);
  animation: szhst 1s ease 1 forwards;
}
.mask-close{
  animation: szhstReverse 1s ease 1 forwards;
}
@keyframes szhst {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes szhstReverse {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}
 
  
.to-center{
  z-index: 11;
  animation: toCenter 1s ease 1 forwards;
}

.to-center-return{
  z-index: 11;
  animation: toCenterRight 1s ease 1 forwards;
}

@keyframes toCenter {
  from {
    left: 206px;
    bottom: 73px;
  }
  to {  
      transform: scale(1.7);
      left: 141px;
      bottom: 417px;
  }
}
@keyframes toCenterRight {
  from {
      transform: scale(1.7);
      left: 141px;
      bottom: 417px;
  }

  to {  
    left: 206px;
    bottom: 73px;
  }
}

</style>