<template>
  <!-- <div class="planItem">
      <div class="left">
            <img src="../../../../assets/images/dataBoard/stage3.png" v-if="status === 6" >
            <img src="../../../../assets/images/dataBoard/stage1.png" v-else-if="status === 2" alt="">
            <img src="../../../../assets/images/dataBoard/stage3.png" v-else alt="">
            <div class="title">
                {{title}}
            </div>
            <div class="starDate">计划完成:{{starDate}}</div>
            <div class="endDate">实际完成:{{endDate}}</div>
      </div>  
      <img src="../../../../assets/images/dataBoard/line.png" alt=""  class="right" v-show="[4,13,22,31].indexOf(item) !== -1">
      <img src="../../../../assets/images/dataBoard/left.png" alt="" class="left2" v-show="[5,14,23,31].indexOf(item) !== -1">
  </div> -->
</template>

<script>
export default {
    props:['starDate','endDate','title','item','status']
}
</script>

<style lang="less" scoped>
.planItem{
    height: 140px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
 .left{
     display: flex;
     align-items: center;
     flex-direction: column;
       img{
       width: 36px;
       height: 47px;
    }
   .title{
       font-size: 15px;
       color: white;
       white-space: nowrap;
       margin-left: 50%;
       display: flex;
       align-items: center;
        &::after{
           width: 80px;
           height: 2px;
           background: url('../../../../assets/images/dataBoard/right.png');
           content: '';
           display: inline-block;
           margin-left: 10px;
       }    
    }
   .starDate{
       color: rgba(255,255,255,0.6);
       margin-top: 5px;
   }
   .endDate{
       color: rgba(255,255,255,0.6);
        margin-top: 5px;
   }
 }
 .right{
     height: 165px;
     transform: translate3d(-20%,50.5%,0);
 }
 .left2{
     height: 165px;
     transform: translate3d(-500%,51%,0);
 }
}
</style>