zhgdyun/src/views/projectAdmin/zjsj/command/rightOne.vue

<template>
  <Card title="安全管理">
    <div class="container">
      <div class="left">
        <div class="top">
          <div class="image">
            <img src="../assets/images/command-center/instrument-panel.png" alt="">
            <div class="value">
              <span class="number">45</span>
              <span class="unit">%</span>
            </div>
          </div>
        </div>
        <div class="bottom">
          <span class="label">巡检总数/已完成整改</span>
          <div class="value">
            <span class="number">200</span>/<span class="number">45</span>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="content">
          <div class="top-title">安全生产天数</div>

          <div class="days">
            <div class="number item">0</div>
            <div class="number item">3</div>
            <div class="number item">6</div>
            <div class="number item">5</div>
            <div class="text item">天</div>
          </div>
          
          <div class="bottom">
            <span class="label">起始日期：</span>
            <div class="value">
              <span>2019</span>年
              <span>03</span>月
              <span>15</span>日
            </div>
          </div>
        </div>
      </div>
    </div>
  </Card>
</template>

<script>
import Card from '../components/Card'
export default {
  components: { Card },
  data() {
    return {}
  }
}
</script>

<style lang="less" scoped>
.container {
  display: flex;
  width: 100%;
  height: 100%;

  .left {
    box-sizing: border-box;
    padding: 10px 0;

    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;

    width: 50%;
    height: 100%;

    .top {
      display: flex;
      align-items: center;
      justify-content: center;

      width: 100%;
      height: 140px;

      .image {
        display: grid;
        place-items: center;
        position: relative;
        width: 100%;
        height: 100%;
        img {
          height: 140px;
        }
        .value {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          font-size: 23px;
        }
      }
    }

    .bottom {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      font-size: 13px;
    }

    .label {
      font-size: 15px;
      color: #a5b2c0;
    }

    .value {
      color: #fff;
      font-size: 20px;
      text-align: center;
      .number:nth-child(1) {
        color: #fff;
      }

      .number:nth-child(2) {
        color: #af5320;
      }
      
    }
  }

  .right {
    display: grid;
    place-items: center;
    width: 50%;
    height: 100%;

    .content {
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;

      padding: 16px 6px 8px;
      width: 175px;
      height: 152px;
      background-image: url('../assets/images/command-center/max-block.png');

      .top-title {
        margin-bottom: 15px;
        font-size: 20px;
        color: #65b3b5;
        text-align: center;
      }

      .days {
        display: flex;
        .item {
          display: grid;
          place-items: center;
          width: 34px;
          height: 64px;
          color: #fff;
          font-size: 20px;
          &.number {
            background-image: url('../assets/images/command-center/block.png');
          }
          &.text {
            width: 28px !important;
            font-size: 17px;
          }
        }
      }

      .bottom {
        width: 100%;
        text-align: right;
        display: flex;
        color: #a5b2c0;
        font-size: 12px;
        white-space: nowrap;
        transform: scale(65%);
      }
    }
  }
}
</style>