Merge branch 'master' of http://42.193.1.25:9521/r/~xiaohui/daoAnOffice

ZhangXianQiang

2024-03-01 773e59cdc3571ad0815f286bb8895a3f27a28961

 src/views/index/left-top.vue

@@ -28,27 +28,55 @@
  <ul class="user_Overview flex">

    <li class="user_Overview-item" style="color: #00fdfa">

      <div class="user_Overview_nums allnum">

        <CountUp :endVal="state.totalNum" :duration="duration" />

        <div class="user_Overview_nums_img" style="background-color: #FCEC0A">

          <img src="@/assets/img/bbiao.png" />

        </div>

        <div class="user_Overview_nums_img_p">

            <p>{{state.totalNum}}</p>

           <p>毒品滥用</p>

        </div>

<!--        <CountUp :endVal="state.totalNum" :duration="duration" />-->

      </div>

      <p>总设备数</p>

<!--      <p>总设备数1</p>-->

    </li>

    <li class="user_Overview-item" style="color: #07f7a8">

      <div class="user_Overview_nums online">

        <CountUp :endVal="state.onlineNum" :duration="duration" />

        <div class="user_Overview_nums_img" style="background-color: #FA743C">

          <img src="@/assets/img/bbiao.png" />

        </div>

        <div class="user_Overview_nums_img_p">

          <p>{{state.onlineNum}}</p>

          <p>毒品滥用</p>

        </div>

<!--        <CountUp :endVal="state.onlineNum" :duration="duration" />-->

      </div>

      <p>在线数</p>

<!--      <p>在线数</p>-->

    </li>

    <li class="user_Overview-item" style="color: #e3b337">

      <div class="user_Overview_nums offline">

        <CountUp :endVal="state.offlineNum" :duration="duration" />

        <div class="user_Overview_nums_img" style="background-color: #EA7DFE">

          <img src="@/assets/img/bbiao.png" />

        </div>

        <div class="user_Overview_nums_img_p">

          <p>{{state.offlineNum}}</p>

          <p>毒品滥用</p>

        </div>

<!--        <CountUp :endVal="state.offlineNum" :duration="duration" />-->

      </div>

      <p>掉线数</p>

<!--      <p>掉线数</p>-->

    </li>

    <li class="user_Overview-item" style="color: #f5023d">

      <div class="user_Overview_nums laramnum">

        <CountUp :endVal="state.alarmNum" :duration="duration" />

        <div class="user_Overview_nums_img" style="background-color: #1B75FF">

          <img src="@/assets/img/bbiao.png" />

        </div>

        <div class="user_Overview_nums_img_p">

          <p>{{state.alarmNum}}</p>

          <p>毒品滥用</p>

        </div>

<!--        <CountUp :endVal="state.alarmNum" :duration="duration" />-->

      </div>

      <p>告警次数</p>

<!--      <p>告警次数</p>-->

    </li>

  </ul>

</template>

@@ -70,10 +98,13 @@
    }



    .user_Overview_nums {

      width: 100px;

      height: 100px;

      display: flex;

      justify-content: center;

      align-items: center;

      //width: auto;

      //height: 100px;

      text-align: center;

      line-height: 100px;

      //line-height: 100px;

      font-size: 22px;

      margin: 50px auto 30px;

      background-size: cover;

@@ -93,29 +124,44 @@
        animation: rotating 14s linear infinite;

      }

    }

    .user_Overview_nums_img{

      background-color: floralwhite;

      padding: 6px;

      border-radius: 8px;

      width: 100px;

    }

    .user_Overview_nums_img_p{

      display: flex;

      flex-direction: column;

      justify-content: space-around;

      align-items: flex-start;

      height: 90px;

      margin-left: 10px;



    }

    .allnum {

      &::before {

        background-image: url("@/assets/img/left_top_lan.png");

      }

      //background-image: url("@/assets/img/bbiao.png");

      //&::before {

      //  background-image: url("@/assets/img/left_top_lan.png");

      //}

    }



    .online {

      &::before {

        background-image: url("@/assets/img/left_top_lv.png");

      }

      //&::before {

      //  background-image: url("@/assets/img/left_top_lv.png");

      //}

    }



    .offline {

      &::before {

        background-image: url("@/assets/img/left_top_huang.png");

      }

      //&::before {

      //  background-image: url("@/assets/img/left_top_huang.png");

      //}

    }



    .laramnum {

      &::before {

        background-image: url("@/assets/img/left_top_hong.png");

      }

      //&::before {

      //  background-image: url("@/assets/img/left_top_hong.png");

      //}

    }

  }

}