<template>
  <div class="desCard" :style="'width:'+boxWidth">
    <div class="topstep">
      <Row justify="center" align="middle">
        <Col span="8" >
          <div class="flex-style">
            <img src="@/assets/images/tasklogo.png" style="width:60%;" alt="">
          </div>
        </Col>
        <Col span="16">
          <div style="margin-left:10%;">
            <p class="card_title">任务指标</p>
            <p class="card_num">327 <span class="sec_title">(项)</span></p>
          </div>
        </Col>
      </Row>
    </div>

    <div class="bottom_step">
      <p>同比增长20 &nbsp;&nbsp;&nbsp; 环比增长10</p>
    </div>
  </div>
</template>

<script>
import { defineComponent } from 'vue'
export default defineComponent({
  props:{
    startCor:{
      type:String,
      default:'#23cde4'
    },
    endCor:{
      type:String,
      default:'#4b87f9'
    },
    boxWidth:{
      type:String,
      default:'32%'
    }
  },
  setup() {
    return {
      
    }
  },
  methods: {
    
  }
})
</script>

<style lang="scss" scoped>
.desCard{
  background-color: #fff; margin-bottom: 2%;
  border: 1px solid #ddd;
  height: 16vh;
  .topstep{
    height: 10vh;
    .flex-style{
      height: 10vh;
      display: flex;
      justify-content: center;
      align-items:center;
    }
    .card_title{
      color: #666;
      font-weight: 600;
    }
    .card_num{
      font-size:2.5vh;font-weight: 600;
      color: #2db7f5;
      .sec_title{
        font-size:1vh; font-weight: 500;
      }
    }
  }
  .bottom_step{
    text-align: center; height: 6vh; line-height: 6vh;
    border-top: 2px solid #f1f1f1;
    p{
      font-size: 1.3vh;color: #0f9451;
      font-weight: 500;
    }
  }
}
</style>