<template>
  <info-card :style="cStyle">
    <template v-slot:title>
      {{title}}
    </template>
    <template v-slot:content>
      <div class="card">
        <div class="left">
          <div class="left-top">
            {{lt}}
          </div>
          <div class="left-bottom">
            {{lb}}
          </div>
        </div>
        <div class="right">
          <div class="r_l c_top">{{rtl}}</div>
          <div class="r_m c_top">{{rtm}}</div>
          <div class="r_r c_top c_green">{{rtr}}</div>
          <div class="r_l c_bottom">{{rbl}}</div>
          <div class="r_m c_bottom ">{{rbm}}</div>
          <div class="r_r c_bottom c_red">{{rbr}}</div>
        </div>
      </div>
    </template>
  </info-card>
</template>
<script>
import InfoCard from "./info-card.vue";

export default {
  name:"ContrastCard",
  components: {InfoCard},
  data() {
    return {
    };
  },
  props: {
    cStyle: {
      type: Object,
      default: function(){return {height:"110px"};}
    },
    title: {
      type: String,
    },
    lt: {
      type: String,
    },
    lb: {
      type: String,
    },
    rtl: {
      type: String,
    },
    rtm: {
      type: String,
    },
    rtr: {
      type: String,
    },
    rbl: {
      type: String,
    },
    rbm: {
      type: String,
    },
    rbr: {
      type: String,
    },

  },
  methods: {}
};
</script>
<style scoped>
  .card{
    width: 90%;
    height: 100%;
    margin: auto;
  }
  .left{
    height: 100%;
    width: 40%;
    float:left;
  }
  .right{
    height: 100%;
    width: 60%;
    float:left;
  }
  .c_top{
    height: 60%;
    line-height: 46px;
  }
  .c_bottom{
    height: 40%;
  }
  .left-top{
    color: #a2ef5c;
    font-size: 32px;
    text-align: center;
    line-height: 46px;
    height: 60%;
    width: 100%;
  }
  .left-bottom{
    text-align: right;
    height: 40%;
    width: 100%;
  }
  .right > div{
    float: left;
    text-align: center;
    font-size: 16px;
  }
  .r_l{
    width: 24%;
  }
  .r_m,.r_r{
    width: 38%;
  }

  .c_red{
    color: red;
  }
  .c_green{
    color: #a2ef5c;
  }
</style>
