<template>
  <div class="cardBox" :style="'width:'+boxWidth">
    <div class="card_border" :style="'background-image: linear-gradient(to right,'+startCor+','+endCor+');'">
      <Row>
        <Col span="16">
          <p class="main_num">
            <count-to :startVal='0' class='main_num' :endVal='numValue' :duration='2500'></count-to>
            <span class="num_unit">{{numUnit}}</span>
          </p>
          <p class="sunTitle">{{mainTitle}}</p>
        </Col>
        <Col span="8">
          <div class="other_conyent">
            <p class="other_title">{{subTitle}}</p>
          </div>
        </Col>
      </Row>
    </div>
  </div>
</template>

<script>
import { defineComponent } from 'vue'
import { CountTo } from 'vue3-count-to';
export default defineComponent({
  components:{
    CountTo
  },
  props:{
    startCor:{
      type:String,
      default:'#23cde4'
    },
    endCor:{
      type:String,
      default:'#4b87f9'
    },
    boxWidth:{
      type:String,
      default:'20%'
    },
    numValue:{
      type:Number,
      default:0
    },
    mainTitle:{
      type:String,
      default:'暂无内容',
    },
    numUnit:{
      type:String,
      default:''
    },
    subTitle:{
      type:String,
      default:''
    }
  },
  setup() {
    return {
      
    }
  },
  methods: {
    
  }
})
</script>

<style lang="scss" scoped>
.cardBox{
  .card_border{
    height: 12vh;
    border-radius: 8px; padding: 5%;
    box-shadow: 0px 35px 30px -20px #ccc;
    .main_num{
      font-size:3.5vh; color: #fff; font-weight: bold;
      .num_unit{
        font-size:1.5vh; color: #fff; font-weight: 200; margin-left: 6px;
      }
    }
    .sunTitle{
      color: #fff; font-size: 1.2vh; margin-left: 2px;
      margin-bottom: 10px;
    }
    .other_conyent{
      text-align: right; margin-right: 5px;
      .other_title{
        color: #fff;
        font-size: 1.5vh;
      }
    }
  }
}
</style>