<template>
  <m-card title="招投标">
    <div class="sum">
      <div>
        <m-sub>公开招投标数</m-sub>
        <span>招标中 <m-count class="count" :value="31" /></span>
        <span>已完成 <m-count class="count" :value="24" /></span>
      </div>
      <div>
        <m-sub>邀请招标</m-sub>
        <span>招标中 <m-count class="count" :value="31" /></span>
        <span>已完成 <m-count class="count" :value="24" /></span>
      </div>
    </div>
    <div class="rate">
      <Circle
        class="circle"
        color="#F7B500"
        rail-color="#0091FF"
        :value="30"
        :show-info="false"
      />
      <div class="des">
        <p>
          前期物业招标
          <m-count class="count" style="color: #f7b500" :value="120" />
        </p>
        <p>
          业主大会公开招标
          <m-count class="count" style="color: #0091ff" :value="350" />
        </p>
      </div>
    </div>
  </m-card>
</template>

<script lang="ts" setup>
import Circle from './circle.vue'
</script>

<style lang="stylus" scoped>
@import  '../../components/MyComponent/main.styl'
.sum
  display flex
  >div
    flex 1
    margin 0 .05rem
    .count
      font-size .14rem
      margin-left .04rem
      color #fff
      font-weight bold
    span
      margin 0 .04rem
      color #ccc
      &:last-child
        float right
.rate
  display flex
  margin-top .05rem
  padding-left .1rem
  .circle
    width 24%
  .des
    flex 1
    display flex
    flex-direction column
    justify-content center
    margin-left .3rem
    .count
      font-size .14rem
      margin-left .1rem
</style>
