<template>
    <div class="PayOffCard">
        <div class="PayOffCard-wrap">
            <div class="PayOffCard-header">
                <p>
                    <span class="PayOffCard-header-first">本期账单</span>
                    <span class="PayOffCard-header-second">5/12-8/11</span>
                </p>
                <p class="PayOffCard-header-third">
                    <span>全部账单</span>
                </p>
            </div>
            <div class="PayOffCard-payment">
                <div class="PayOffCard-content">
                     <p class="PayOffCard-content_total"> 本期已缴清</p>
                </div>
                <div class="PayOffCard-footer">
                  <div class="PayOffCard-footer-sig_fir">
                    <div class="PayOffCard-footer_sex">
                        <p class="PayOffCard-footer_mon">应缴</p>
                    </div>
                    <div>
                        <p class="PayOffCard-footer_yuan">4060.00元</p>
                    </div>
                </div>
                <div class="PayOffCard-footer-sig_fir">
                    <div class="PayOffCard-footer_sex">
                        <p class="PayOffCard-footer_mon">实缴</p>
                    </div>
                    <div>
                        <p class="PayOffCard-footer_yuan">4060.00元</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</template>

<script>
//import { mapState } from 'vuex'

export default {
  name: "this",
  props: ["data", "iconType"],
  components: {
    //addPane
  },
  computed: {
    // ...mapState({

    // })
  },
  mounted() {

  },
  data: function() {
    return {
      name: "template"
    };
  },
  methods: {

  }
};
</script>
<style scoped lang='less'>
@nice-gold: #e0b914;
@mainHeightSize:25px;
@footerHeightSize:20px;
.PayOffCard {
    margin: auto;
    width: 343px;
    background: linear-gradient(to right, #E2CD5F, #E0B914);
    border-radius: 10px;
    color: #FFFFFF;
    .PayOffCard-wrap {
      margin-left: 12px;
      margin-right: 10px;
      .PayOffCard-header {
        opacity: 0.63;
        border-bottom: 1px solid #F2F2F2;
        height: 40px;
        line-height: 40px;
        display: flex;
        justify-content: space-between;
        .PayOffCard-header-first {
          font-size: 17px;
        };
        .PayOffCard-header-second {
            margin-left: 10px;
            font-size: 13px;
        };
        .PayOffCard-header-third {
            font-size: 13px;
            width: 87px;
            height: @mainHeightSize;
            line-height: @mainHeightSize;
            text-align: center;
            margin: auto;
            margin-right: 0;
            border-radius: 20px;
            background: #E2CD5F;
        }
  }
}
.PayOffCard-content {
    margin-top: 15px;
    height: @mainHeightSize;
    line-height: @mainHeightSize;
    margin-bottom: 15px;
    text-align: left;
    .PayOffCard-content_total{
        font-size: 33px;
    }
}
.PayOffCard-footer {
    margin-top: 20px;
    .PayOffCard-footer-sig_fir {
        padding-bottom: 8px;
        opacity: 0.63;
        display: flex;
        justify-content:space-between;
        margin-bottom: 5px;
        .PayOffCard-footer_sex {
            display: flex;
            .PayOffCard-footer_icon {
                font-size: 20px;
                height: @mainHeightSize;
                line-height: @mainHeightSize;
            }
            .PayOffCard-footer_mon {
                font-size: 14px;
                margin-left: 5px;
                height: @footerHeightSize;
                line-height: @footerHeightSize;
            }
        }
        .PayOffCard-footer_yuan {
            font-size: 14px;
            height: @footerHeightSize;
            line-height: @footerHeightSize;
        }
    }
}
.PayOffCard-payoff-complete{
    margin-bottom: 10px;
    .PayOffCard-payoff-should{
        font-size: 14px;
        margin-top: 5px;
        display: flex;
        justify-content: space-between;
    }
}
}
</style>