fix:修改字体、图标、背景、阴影问题

ZhangXianQiang

2024-03-05 5300255dd40ac2ed67676da5568f0e4fd25a7078

 src/views/daoAnOffice/left-top.vue

@@ -32,8 +32,10 @@
          <img src="@/assets/img/sgjb.png" />
        </div>
        <div class="user_Overview_nums_img_p">
            <p class="user_Overview_nums_img_p_num">{{state.totalNum}}<span class="user_Overview_nums_img_p_num_nan">件</span><span class="user_Overview_nums_img_p_num_ss">↑ 28.1%</span></p>
           <p>交通事故接报</p>
          <p class="user_Overview_nums_img_p_num"> <span class="info-num">{{ state.totalNum }}</span> <span
              class="user_Overview_nums_img_p_num_nan">件</span><span class="user_Overview_nums_img_p_num_ss">↑
              28.1%</span></p>
          <p class="info-lable">交通事故接报</p>
        </div>
<!--        <CountUp :endVal="state.totalNum" :duration="duration" />-->
      </div>
@@ -45,8 +47,10 @@
          <img src="@/assets/img/la.png" />
        </div>
        <div class="user_Overview_nums_img_p">
          <p class="user_Overview_nums_img_p_numt">{{state.onlineNum}}<span class="user_Overview_nums_img_p_num_nan">件</span><span class="user_Overview_nums_img_p_num_ss">↑ 28.1%</span></p>
          <p>立案</p>
          <p class="user_Overview_nums_img_p_numt"><span class="info-num">{{ state.onlineNum }}</span><span
              class="user_Overview_nums_img_p_num_nan">件</span><span class="user_Overview_nums_img_p_num_ss">↑
              28.1%</span></p>
          <p class="info-lable">立案</p>
        </div>

<!--        <CountUp :endVal="state.onlineNum" :duration="duration" />-->
@@ -59,8 +63,10 @@
          <img src="@/assets/img/ssrs.png" />
        </div>
        <div class="user_Overview_nums_img_p">
          <p class="user_Overview_nums_img_p_nums">{{state.offlineNum}}<span class="user_Overview_nums_img_p_num_nan">件</span><span class="user_Overview_nums_img_p_num_ss">↑ 28.1%</span></p>
          <p>受伤人数</p>
          <p class="user_Overview_nums_img_p_nums"><span class="info-num">{{ state.offlineNum }}</span><span
              class="user_Overview_nums_img_p_num_nan">件</span><span class="user_Overview_nums_img_p_num_ss">↑
              28.1%</span></p>
          <p class="info-lable">受伤人数</p>
        </div>

<!--        <CountUp :endVal="state.offlineNum" :duration="duration" />-->
@@ -73,8 +79,10 @@
          <img src="@/assets/img/swrs.png" />
        </div>
        <div class="user_Overview_nums_img_p">
          <p class="user_Overview_nums_img_p_numf">{{state.alarmNum}}<span class="user_Overview_nums_img_p_num_nan">件</span><span class="user_Overview_nums_img_p_num_ss">↑ 28.1%</span></p>
          <p>死亡人数</p>
          <p class="user_Overview_nums_img_p_numf"><span class="info-num">{{ state.alarmNum }}</span><span
              class="user_Overview_nums_img_p_num_nan">件</span><span class="user_Overview_nums_img_p_num_ss">↑
              28.1%</span></p>
          <p class="info-lable">死亡人数</p>
        </div>

<!--        <CountUp :endVal="state.alarmNum" :duration="duration" />-->
@@ -86,8 +94,10 @@

<style scoped lang="scss">
.user_Overview-item{
  background-color: #11223A;
  background-color: rgba(17, 34, 58, 0.6);

}

.left-top {
  width: 100%;
  height: 100%;
@@ -99,14 +109,17 @@
    margin: 0 20px;
    padding: 15px 0;
    border: 1px solid #29466A;

    p {
      text-align: left;
      //height: 16px;
      font-size: 16px;
    }

    &:first-of-type {
      margin-left: 0;
    }

    &:last-of-type {
      margin-right: 0;
    }
@@ -126,25 +139,27 @@
      background-position: center center;
      position: relative;

      &::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
      }
      // &::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: 72px;
    }

    .user_Overview_nums_img_p{
      //display: flex;
      flex-direction: column;
@@ -153,59 +168,72 @@
      //height: 90px;
      //line-height: 40px;
      margin-left: 10px;

      .user_Overview_nums_img_p_numt{
        color: #0071F8;
        font-size: 25px;
        font-weight: 800;

        .user_Overview_nums_img_p_num_nan{
          font-size: 14px;
          color: #fff;
        }

        .user_Overview_nums_img_p_num_ss{
          font-size: 14px;
          color: #D44233;
        }
      }

      .user_Overview_nums_img_p_num{
        color: #F96FF8;
        font-size: 25px;
        font-weight: 800;

        .user_Overview_nums_img_p_num_nan{
          font-size: 14px;
          color: #fff;
        }

        .user_Overview_nums_img_p_num_ss{
          font-size: 14px;
          color: #D44233;
        }
      }

      .user_Overview_nums_img_p_nums{
        color: #FE3146;
        font-size: 25px;
        font-weight: 800;

        .user_Overview_nums_img_p_num_nan{
          font-size: 14px;
          color: #fff;
        }

        .user_Overview_nums_img_p_num_ss{
          font-size: 14px;
          color: #D44233;
        }
      }

      .user_Overview_nums_img_p_numf{
        color: #EA7039;
        font-size: 25px;
        font-weight: 800;

        .user_Overview_nums_img_p_num_nan{
          font-size: 14px;
          color: #fff;
        }

        .user_Overview_nums_img_p_num_ss{
          font-size: 14px;
          color: #D44233;
        }
      }
    }

    .allnum {
      //background-image: url("@/assets/img/bbiao.png");
      //&::before {
@@ -232,4 +260,12 @@
    }
  }
}

.info-num {
  font-family: 'PangMenZhengDao';
}
.info-lable {
  font-family: 'PingFang SC';
}

</style>