<template>
    <van-row class="recordList" >
      <van-row class="titleWrap">
        <span class="line"></span>
        <span class="title">物联网卡状态</span>
      </van-row>
      <van-col :span="24" class="card cardTop" :gutter="20">
        <van-row :span="24" class="nh">
          <span  class="title">ICCID： </span>
          <span  class="num">89860619140067308922</span>
        </van-row>
        <van-row :span="24" class="nh">
          <span  class="title">Sim卡状态：</span>
          <span  class="num green">在用</span>
        </van-row>
        <van-row :span="24" class="nh">
          <span  class="title">剩余流量：</span>
          <span  class="num orange">172.3M</span>
        </van-row>
        <van-row :span="24" class="nh">
          <span  class="title">流量套餐：</span>
          <span  class="num">中国联通 300M/月包</span>
        </van-row>
        <van-row :span="24" class="nh">
          <span  class="title">到期时间：</span>
          <span  class="num">2022年12月31日</span>
        </van-row>
      </van-col>
      <van-col :span="24" class="card" :gutter="20">
        <van-row :span="24" class="nh">
          <span class="title">ICCID：</span>
          <span class="num">89860619140067346468</span>
        </van-row>
        <van-row :span="24" class="nh">
          <span class="title">Sim卡状态：</span>
          <span class="num green">在用</span>
        </van-row>
        <van-row :span="24" class="nh">
          <span class="title">剩余流量：</span>
          <span class="num orange">154.5M</span>
        </van-row>
        <van-row :span="24" class="nh">
          <span class="title">流量套餐：</span>
          <span class="num">中国联通 300M/月包</span>
        </van-row>
        <van-row :span="24" class="nh">
          <span class="title">到期时间：</span>
          <span class="num">2022年12月31日</span>
        </van-row>
      </van-col>
    </van-row>
</template>
<script>
export default {
  data() {
    return {};
  },

  mounted() {},
  methods: {},
};
</script>

<style lang="scss" scoped>
  .card{
    padding: 15px;
    margin-top:16px;
    text-align: left;
    border:1px solid #ccc;
    color:#000000;
    // background-color: $modularHoverBackGround;
    // background: linear-gradient(-45deg, transparent 40px, $modularHoverBackGround 0);
    .nh {
      margin-top: 6px;
      font-size: 16px;
      line-height: 28px;
      .title {
        // opacity: 0.5;
        .num{
          margin-left:10px;
        }
      }
    }
  }
  
.green{
  background-color: #3EBE3D;
  color:#fff !important;
  border-radius: 10px;
  padding:2px 12px;
}
.orange{
  color:#F7784C !important;
}
</style>
