fix:修改柱状图提示框样式

ZhangXianQiang

2024-03-08 2aa1d87680e9351bf027bab73f61290b7f00efe4

 src/views/index/left-top.vue

@@ -1,20 +1,168 @@
<script setup lang="ts">

import { ref } from "vue";

import { reactive, ref } from "vue";

import { currentGET } from "@/api";

currentGET("leftTop").then((res) => {

  console.log(res);

import CountUp from "@/components/count-up";

const duration = ref(2);

const state = reactive({

  alarmNum: 759,

  offlineNum: 44,

  onlineNum: 654,

  totalNum: 698,

});



const getData = () => {

  currentGET("leftTop").then((res) => {

    console.log(res);

    if (res.success) {

      state.alarmNum = res.data.alarmNum;

      state.offlineNum = res.data.offlineNum;

      state.onlineNum = res.data.onlineNum;

      state.totalNum = res.data.totalNum;

    }

  });

};

getData();

</script>



<template>

  <div class="left-top">

            
  </div>

  <ul class="user_Overview flex">

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

      <div class="user_Overview_nums allnum">

        <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>总设备数1</p>-->

    </li>

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

      <div class="user_Overview_nums online">

        <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>-->

    </li>

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

      <div class="user_Overview_nums offline">

        <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>-->

    </li>

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

      <div class="user_Overview_nums laramnum">

        <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>-->

    </li>

  </ul>

</template>



<style scoped lang="scss">

.left-top{

    width: 100%;

    height: 100%;

.left-top {

  width: 100%;

  height: 100%;

}



.user_Overview {

  li {

    flex: 1;



    p {

      text-align: center;

      height: 16px;

      font-size: 16px;

    }



    .user_Overview_nums {

      display: flex;

      justify-content: center;

      align-items: center;

      //width: auto;

      //height: 100px;

      text-align: center;

      //line-height: 100px;

      font-size: 22px;

      margin: 50px auto 30px;

      background-size: cover;

      background-position: center center;

      position: relative;



      &::before {

        content: "";

        position: absolute;

        width: 100%;

        height: 100%;

        top: 0;

        left: 0;

      }



      &.bgdonghua::before {

        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 {

      //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");

      //}

    }



    .offline {

      //&::before {

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

      //}

    }



    .laramnum {

      //&::before {

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

      //}

    }

  }

}

</style>