SaaS-DataScreen/src/views/components/online-water/index.vue

<template>
  <Card :title="title" :icon="icon" class="online-water">
    <div class="con-top display-flex border">
      <div class="img">
        <img src="./images/icon-total.png" alt="" class="icon">
      </div>
      <div class="info">
        <p class="title">线上流水总额</p>
        <p class="num">34656444444.55</p>
      </div>
    </div>
    <div class="con-bottom display-flex">
      <div class="con-item flex-1 border">
        <div class="top display-flex">
          <div class="img">
            <img src="./images/icon-once.png" alt="" class="icon">
          </div>
          <div class="flex-1">
            <p class="title">单笔缴费金额</p>
            <p class="num">344.55</p>
            <p class="desc">(近12个月平均值)</p>
          </div>
        </div>
        <div class="bottom display-flex">
          <span class="title">单笔最大值</span>
          <span class="num">346544.55</span>
        </div>

      </div>
      <div class="con-item flex-1 border">
        <div class="top display-flex">
          <div class="img">
            <img src="./images/icon-month.png" alt="" class="icon">
          </div>
          <div class="flex-1">
            <p class="title">月在线缴费次数</p>
            <p class="num">346564</p>
            <p class="desc">(近12个月平均值)</p>
          </div>
        </div>
        <div class="bottom display-flex">
          <span class="title">单笔最大值</span>
          <span class="num">346544.55</span>
        </div>
      </div>
    </div>
  </Card>
</template>
<script>
import Card from '@/views/components/card'
import icon from './images/icon-title.png'

export default {
  name: 'OnlineWater',
  components: {
    Card
  },
  data () {
    return {
      title: '线上流水数据',
      icon: icon
    }
  }
}
</script>
<style lang="scss">
@import '@/assets/css/function.scss';
.online-water {
  .img{
    width: halfW(70);
    height: halfH(70);
    margin-right: halfW(27);
    padding: halfH(14) halfW(14);
    box-sizing: border-box;
    background: #12223C;
    border-radius: 50%;
    .icon{
      width: 100%;
      height: 100%;
    }
  }
  .con-top{
    padding: halfH(20) halfW(30);
    background: #0E1629;
    .info{
      .title{
        font-size: halfW(18);
        line-height: halfH(24);
        color: #82D1F6;
      }
      .num{
        font-size: halfW(48);
        line-height: halfH(48);
        color: #9BE3E0;
      }
    }
  }
  .con-bottom{
    margin-top: halfH(30) ;
    .con-item{
      // padding: halfH(30) halfW(30);
      box-sizing: border-box;
      &:first-child{
        margin-right: halfW(30);
      }
      .top{
        padding: halfH(30) halfW(30);
        .title{
          font-size: halfW(20);
          line-height: halfH(22);
          color: #82D1F6;
          margin-bottom: halfH(8);
        }
        .num{
          font-size: halfW(28);
          line-height: halfH(38);
          color: #F6F7FC;
          margin-bottom: halfH(8);
        }
        .desc{
          font-size: halfW(14);
          line-height: halfH(16);
          color: #9FA5B7;
        }
      }
      .bottom{
        justify-content: space-between;
        align-items: center;
        height: halfH(3);
        line-height: halfH(63);
        background: #111C30;
        padding: halfH(30) halfW(30);
        .title{
          font-size: halfW(14);
          line-height: halfH(20);
          color: #9FA5B7;
        }
        .num{
          font-size: halfW(20);
          line-height: halfH(24);
          color: #F6F7FC;
        }
      }
    }
  }
}
</style>