DX-LargeScreen/src/components2/iOTNetworkCard/index.vue

<template>
  <el-col :span="24" class="iOTNetworkCard modular" style="padding:10px 20px 0;">
    <el-col class="title" style="margin-left:0">物联网卡状态</el-col>
    <el-col :span="24" class="card cardTop" :gutter="20">
      <el-row :span="24" class="nh">
        <el-col :span="10" class="title">ICCID</el-col>
        <el-col :span="12" class="num">89860619140067308922</el-col>
      </el-row>
      <el-row :span="24" class="nh">
        <el-col :span="10" class="title">Sim卡状态</el-col>
        <el-col :span="12" class="num green">在用</el-col>
      </el-row>
       <el-row :span="24" class="nh">
        <el-col :span="10" class="title">剩余流量</el-col>
        <el-col :span="12" class="num orange">172.3M</el-col>
      </el-row>
      <el-row :span="24" class="nh">
        <el-col :span="10" class="title">流量套餐</el-col>
        <el-col :span="12" class="num">中国联通 300M/月包</el-col>
      </el-row>
      <el-row :span="24" class="nh">
        <el-col :span="10" class="title">到期时间</el-col>
        <el-col :span="12" class="num">2022年12月31日</el-col>
      </el-row>
    </el-col>
     <el-col :span="24" class="card" :gutter="20">
      <el-row :span="24" class="nh">
        <el-col :span="10" class="title">ICCID</el-col>
        <el-col :span="12" class="num">89860619140067346468</el-col>
      </el-row>
      <el-row :span="24" class="nh">
        <el-col :span="10" class="title">Sim卡状态</el-col>
        <el-col :span="12" class="num green">在用</el-col>
      </el-row>
       <el-row :span="24" class="nh">
        <el-col :span="10" class="title">剩余流量</el-col>
        <el-col :span="12" class="num orange">154.5M</el-col>
      </el-row>
      <el-row :span="24" class="nh">
        <el-col :span="10" class="title">流量套餐</el-col>
        <el-col :span="12" class="num">中国联通 300M/月包</el-col>
      </el-row>
      <el-row :span="24" class="nh">
        <el-col :span="10" class="title">到期时间</el-col>
        <el-col :span="12" class="num">2022年12月31日</el-col>
      </el-row>
    </el-col>

  </el-col>
</template>
<script>
export default {
  name: "iOTNetworkCard",
  data() {
    return {
    };
  },
};
</script>
<style lang="scss" scoped>
@import '@/assets/styles/common.scss';
.iOTNetworkCard{
  height:60.27777vh;
  .card{
    width:410px;
    height:230px;
    padding: 36px 15px;
    border-radius: 10px 10px 0 10px;
    margin-top:16px;
    background-color: $modularHoverBackGround;
    background: linear-gradient(-45deg, transparent 40px, $modularHoverBackGround 0);
    .nh {
      margin-top: 6px;
      font-size: 16px;
      line-height: 28px;
      .title {
        color:$grey;
        opacity: 0.5;
      }
    }
    .nh:nth-child(1){
      margin-top:0px;
    }
  }
}
.cardTop{
  margin-top:32px !important;
}
.green{
  color:$green !important;
}
.orange{
  color:$orange !important;
}

</style>