quality-data-visualization/src/views/hospitalExhibit/components/masterData.vue

<template>
  <div class="container">
    <Row :gutter="20" class-name="data-row">
      <Col span="12" class-name="data-col">
        <div class="data-container">
          <div class="data-title">
            <p>在管设备</p>
            <Icon type="ios-cog-outline" />
          </div>
          <div class="data-number">{{zgsb}}</div>
          <div class="data-tip">在管项目<span>{{zgxm}}</span>个</div>
          <div class="data-tip">在管机房<span>{{zgjf}}</span>个</div>
        </div>
      </Col>
      <Col span="12" class-name="data-col">
        <div class="data-container">
          <div class="data-title">
            <p>设备完好率</p>
            <Icon type="md-trending-up" />
          </div>
          <div class="data-number">{{sbwhl}}%</div>
        </div>
      </Col>
    </Row>
    <Row :gutter="20" class-name="data-row">
      <Col span="12" class-name="data-col">
        <div class="data-container">
          <div class="data-title">
            <p>巡检完成率</p>
            <Icon type="ios-pie-outline" />
          </div>
          <div class="data-number">{{xjwcl}}%</div>
        </div>
      </Col>
      <Col span="12" class-name="data-col">
        <div class="data-container">
          <div class="data-title">
            <p>维保完成率</p>
            <Icon type="md-done-all" />
          </div>
          <div class="data-number">{{wbwcl}}%</div>
        </div>
      </Col>
    </Row>
  </div>
</template>

<script>
export default {
  name: 'masterData',
  data () {
    return {
      zgsb: 1,
      zgxm: 52,
      zgjf: 1110,
      sbwhl: 100,
      xjwcl: 96.08,
      wbwcl: 85.61
    }
  },
  mounted () {
    // 初始化
    this.initial()
  },
  methods: {
    //  初始化
    initial (object) {
    }
  }
}
</script>

<style scoped lang="scss">
  .container{
    flex: auto;
    overflow: hidden;
    position: relative;
    padding: 20px;
    .data-row{
      height: calc(50% - 10px);
    }
    .data-row:first-child{
      margin-bottom: 20px;
    }
    .data-col{
      height: 100%;
      .data-container{
        width: 100%;
        height: 100%;
        padding: 16px;
        background: #20364b;
        color: #5cadff;
        .data-title{
          font-size: 0.9vw;
          display: flex;
          justify-content: space-between;
          align-items: center;
          i{
            color: #ffffff;
            font-size: 2vw;
          }
        }
        .data-number{
          margin: 1vw 0;
          color: #00c172;
          font-size: 1.2vw;
          text-shadow: 0 0 3px rgba(255, 255, 255, 0.8);
        }
        .data-tip{
          line-height: 1.6vw;
          font-size: 0.7vw;
          span{
            color: #00c172;
            text-shadow: 0 0 3px rgba(255, 255, 255, 0.8);
          }
        }
      }
    }
  }
</style>