<template>
  <div>
    <div class="background-left-top">
      <div class="col-sm-6" style="height: auto;padding-left: 4%;">
      <span class="font-title">scada</span>
      <span class="normal-font">总累计流量：</span><span class="value-font">1152</span>
      </div>
      <div class="col-sm-12 " style="height: auto;margin-left: 1%">
        <div class="col-sm-6 ">
          <label class="content-label lable-title">高陵</label>
          <div class="background-content-img col-sm-12 col-md-12" style="width: 280px;height: 140px;margin-left: 1%;padding-left: 8%">
            <div class="col-sm-6 col-md-6 auto">
              <span class="normal-font">累计流量</span><br><span v-model="totaluser" class="value-font">1152万</span>
            </div>
            <div class="col-sm-6 col-md-6 auto">
              <span class="normal-font">进站压力</span><br><span v-model="totaluser" class="value-font">800</span>
            </div>
            <div class="col-sm-6 col-md-6 auto">
              <span class="normal-font">瞬时流量</span><br><span v-model="totaluser" class="value-font">1152万</span>
            </div>
            <div class="col-sm-6 col-md-6 auto">
              <span class="normal-font">出站压力</span><br><span v-model="totaluser" class="value-font">800</span>
            </div>
          </div>
        </div>
        <div class="col-sm-6 col-md-6 " >
          <label class="content-label lable-title">狄寨塬</label>
          <div class="background-content-img" style="width: 280px;height: 140px;margin-left: -0.5%;padding-left: 8%">
            <div class="col-sm-6 col-md-6 auto">
              <span class="normal-font">累计流量</span><br><span v-model="totaluser" class="value-font">1152万</span>
            </div>
            <div class="col-sm-6 col-md-6 auto">
              <span class="normal-font">进站压力</span><br><span v-model="totaluser" class="value-font">800</span>
            </div>
            <div class="col-sm-6 col-md-6 auto">
              <span class="normal-font">瞬时流量</span><br><span v-model="totaluser" class="value-font">1152万</span>
            </div>
            <div class="col-sm-6 col-md-6 auto">
              <span class="normal-font">出站压力</span><br><span v-model="totaluser" class="value-font">800</span>
            </div>
          </div>
        </div>
      </div>
      <div class="col-sm-12 " style="margin-top: 10px;height: auto;margin-left: 1%;">
        <div class="col-sm-6 ">
          <label class="content-label lable-title">吕小寨</label>
          <div class="background-content-img" style="width: 280px;height: 140px;margin-left: 1%;padding-left: 8%">
            <div class="col-sm-6 auto" >
              <span class="normal-font">累计流量</span><br><span v-model="totaluser" class="value-font">1152万</span>
            </div>
            <div class="col-sm-6 auto" >
              <span class="normal-font">进站压力</span><br><span v-model="totaluser" class="value-font">800</span>
            </div>
            <div class="col-sm-6 auto" >
              <span class="normal-font">瞬时流量</span><br><span v-model="totaluser" class="value-font">1152万</span>
            </div>
            <div class="col-sm-6 auto" >
              <span class="normal-font">出站压力</span><br><span v-model="totaluser" class="value-font">800</span>
            </div>
          </div>
        </div>
        <div class="col-sm-6 ">
          <label class="content-label lable-title">LNG</label>
          <div class="background-content-img" style="width: 280px;height: 140px;margin-left: -0.5%;padding-left: 8%">
            <div class="col-sm-6 auto" >
              <span class="normal-font">累计流量</span><br><span v-model="totaluser" class="value-font">1152万</span>
            </div>
            <div class="col-sm-6 auto">
              <span class="normal-font">进站压力</span><br><span v-model="totaluser" class="value-font">800</span>
            </div>
            <div class="col-sm-6 auto">
              <span class="normal-font">瞬时流量</span><br><span v-model="totaluser" class="value-font">1152万</span>
            </div>
            <div class="col-sm-6 auto">
              <span class="normal-font">出站压力</span><br><span v-model="totaluser" class="value-font">800</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'scada',
    data () {
      return {}
    },
    methods: {
    },
    ready () {

    }
  }
</script>

<style scoped>
  .lable-title {
    font-family: PingFangSC-Bold;
    margin-left: 1em;
    font-size: 18px;
    font-weight: normal;
    color: #e79450;
  }
  .normal-font {
    font-family: PingFang-SC-Medium;
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 35px;
    letter-spacing: 0px;
    color: #b7cee6;
  }

  .value-font {
    font-family: PingFang-SC-Bold;
    font-size: 18px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 35px;
    letter-spacing: 0px;
    color: #00f6ff;
  }
  .font-title {
    font-family: PingFangSC-Medium;
    font-size: 24px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 26px;
    letter-spacing: 0px;
    color: #ffffff;
  }
</style>
