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

ZhangXianQiang

2024-03-05 5300255dd40ac2ed67676da5568f0e4fd25a7078

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

 package-lock.json

@@ -23,7 +23,8 @@
        "viewerjs": "^1.11.6",
        "vue": "^3.3.4",
        "vue-echarts": "^6.6.1",
        "vue-router": "^4.2.5"
        "vue-router": "^4.2.5",
        "vue-seamless-scroll": "^1.1.23"
      },
      "devDependencies": {
        "@types/mockjs": "^1.0.8",
@@ -1258,6 +1259,11 @@
      "engines": {
        "node": "^12.20.0 || >=14"
      }
    },
    "node_modules/comutils": {
      "version": "1.1.19",
      "resolved": "https://registry.npmjs.org/comutils/-/comutils-1.1.19.tgz",
      "integrity": "sha512-JxXB67juILiwhdLwOsYyjUqwWEhHdObI0EClOPk+JDtEuTbac59s0pxGpfCBnNNQ5JommifmcMGneW/4Cg7YWw=="
    },
    "node_modules/concat-map": {
      "version": "0.0.1",
@@ -3712,6 +3718,14 @@
        "vue": "^3.2.0"
      }
    },
    "node_modules/vue-seamless-scroll": {
      "version": "1.1.23",
      "resolved": "https://registry.npmjs.org/vue-seamless-scroll/-/vue-seamless-scroll-1.1.23.tgz",
      "integrity": "sha512-HBjUub8WwsKJzbFCrwKPDrZn4e+SSbkKgwWtjKtfLwesiFGwSsVxP44/Z6d3kpXy94qIFOiflJH6l0/9pj7SGA==",
      "dependencies": {
        "comutils": "^1.1.9"
      }
    },
    "node_modules/vue-template-compiler": {
      "version": "2.7.14",
      "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.7.14.tgz",

 package.json

@@ -25,7 +25,8 @@
    "viewerjs": "^1.11.6",
    "vue": "^3.3.4",
    "vue-echarts": "^6.6.1",
    "vue-router": "^4.2.5"
    "vue-router": "^4.2.5",
    "vue-seamless-scroll": "^1.1.23"
  },
  "devDependencies": {
    "@types/mockjs": "^1.0.8",

 src/assets/css/200-SSBoYaTi.woff

Binary files differ

 src/assets/css/200-SSBoYaTi.woff2

Binary files differ

 src/assets/css/PangMenZhengDaoBiaoTiTiMianFeiBan-4Regular.woff

Binary files differ

 src/assets/css/PangMenZhengDaoBiaoTiTiMianFeiBan-4Regular.woff2

Binary files differ

 src/assets/css/PingFangSC.woff

Binary files differ

 src/assets/css/PingFangSC.woff2

Binary files differ

 src/assets/css/font.css

New file
@@ -0,0 +1,37 @@
@font-face {
  font-family: 'PangMenZhengDao';
  src: url('PangMenZhengDaoBiaoTiTiMianFeiBan-4Regular.woff2') format('woff2'),
    url('PangMenZhengDaoBiaoTiTiMianFeiBan-4Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'pingfang';
  src: url('pingfangheifangti-Regular.woff2') format('woff2'),
      url('pingfangheifangti-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'PingFang SC';
  src: url('PingFangSC.woff2') format('woff2'),
      url('PingFangSC.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: '200-SSBoYaTi';
  src: url('200-SSBoYaTi.woff2') format('woff2'),
      url('200-SSBoYaTi.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}



 src/assets/css/font236.ttf

Binary files differ

 src/assets/css/pingfangheifangti-Regular.woff

Binary files differ

 src/assets/css/pingfangheifangti-Regular.woff2

Binary files differ

 src/assets/img/aqyh.png

Binary files differ

 src/assets/img/djyjq.png

Binary files differ

 src/assets/img/dwsg.png

Binary files differ

 src/assets/img/gjxl.png

Binary files differ

 src/assets/img/icon/icon1.png

 src/assets/img/icon/icon2.png

 src/assets/img/icon/icon3.png

 src/assets/img/icon/icon4.png

 src/assets/img/icon/icon5.png

 src/assets/img/icon/icon6.png

 src/assets/img/icon/icon7.png

 src/assets/img/icon/icon8.png

 src/assets/img/icon/icon9.png

 src/assets/img/jlpb.png

Binary files differ

 src/assets/img/jtysqy.png

Binary files differ

 src/assets/img/sgyfd.png

Binary files differ

 src/assets/img/title_img.png

 src/components/item-wrap/item-wrap.vue

@@ -15,7 +15,7 @@
<template>



     <div class="item_title" v-if="title !== ''">

       <span class="title-inner"> &nbsp;&nbsp;{{ title }}&nbsp;&nbsp; </span>

       <span class="title-inner">{{ title }} </span>

     </div>

    <div

      :class="title !== '' ? 'item_title_content' : 'item_title_content_def'"

@@ -32,6 +32,7 @@


.item_title {

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

  background-size: 231px 100%;

  background-repeat: no-repeat;

  height: $item-title-height;

  line-height: $item-title-height;

@@ -55,11 +56,14 @@
    transform: rotate(180deg);

  }

  .title-inner {

    margin-left: 15px;

    margin-left: 25px;

    margin-top: 4px;

    color: #fff;

    font-weight: 900;

    font-weight: 400;

    letter-spacing: 2px;

    font-size: 20px;

    font-style: italic;

    font-family: '200-SSBoYaTi';

    //background: linear-gradient(

    //  92deg,

    //  #0072ff 0%,


 src/components/right-title/index.vue

@@ -14,7 +14,7 @@
<template>
  <div class="flex justify-between item-center">
    <div class="item_title" v-if="title !== ''">
      <span class="title-inner"> &nbsp;&nbsp;{{ title }}&nbsp;&nbsp; </span>
      <span class="title-inner"> {{ title }} </span>
    </div>
    <slot name="top"></slot>
  </div>
@@ -46,12 +46,14 @@
  //justify-content: center;

  .title-inner {
    margin-left: 15px;
    margin-left: 25px;
    margin-top: 4px;
    color: #fff;
    font-weight: 900;
    font-weight: 400;
    letter-spacing: 2px;
    font-style: italic;
    font-size: 20px;
    font-style: italic;
    font-family: '200-SSBoYaTi';
    //background: linear-gradient(
    //  92deg,
    //  #0072ff 0%,

 src/main.ts

@@ -4,10 +4,11 @@
import App from './App.vue'
import router from './router'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import '@/assets/css/main.scss'
import '@/assets/css/tailwind.css'
import '@/assets/css/main.scss';
import '@/assets/css/tailwind.css';
import 'swiper/swiper-bundle.css';
import 'viewerjs/dist/viewer.css';
import '@/assets/css/font.css';

import {registerEcharts} from "@/plugins/echarts"
//不使用mock 请注释掉

 src/views/HomeView.vue

@@ -74,5 +74,6 @@
  background-size: contain;
  background-position: center center;
  margin-bottom: 4px;

}
</style>

 src/views/daoAnOffice/center-map.vue

@@ -215,7 +215,7 @@
        font-style: italic;
        background: linear-gradient(180deg, #FFFFFF 0%, #70B2F4 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        // -webkit-text-fill-color: transparent;
      }
    }
  }
@@ -239,4 +239,8 @@
  }

}

.info-lable {
  font-family: 'PingFang SC' !important;
}
</style>

 src/views/daoAnOffice/center/map.vue

@@ -2,7 +2,7 @@
  <div class="map-container">
    <div class="map-content" id="map" ref="map"></div>


    <div class="shadow"></div>
    <!-- 图标菜单 -->
    <div class="info-box">
      <!--      right菜单-->
@@ -35,15 +35,15 @@

import { require } from '@/utils/require.js';

import icon1 from '@/assets/img/sgyfd.png';
import icon2 from '@/assets/img/zdlytd.png';
import icon3 from '@/assets/img/djyjq.png';
import icon4 from '@/assets/img/jlpb.png';
import icon5 from '@/assets/img/dwsg.png';
import icon6 from '@/assets/img/jtysqy.png';
import icon7 from '@/assets/img/zdlytd.png';
import icon8 from '@/assets/img/gjxl.png';
import icon9 from '@/assets/img/aqyh.png';
import icon1 from '@/assets/img/icon/icon1.png';
import icon2 from '@/assets/img/icon/icon2.png';
import icon3 from '@/assets/img/icon/icon3.png';
import icon4 from '@/assets/img/icon/icon4.png';
import icon5 from '@/assets/img/icon/icon5.png';
import icon6 from '@/assets/img/icon/icon6.png';
import icon7 from '@/assets/img/icon/icon7.png';
import icon8 from '@/assets/img/icon/icon8.png';
import icon9 from '@/assets/img/icon/icon9.png';


const map = ref(null);
@@ -177,9 +177,9 @@
// 创建图标
const createIcon = (img) => {
  return new AMap.Icon({
    size: new AMap.Size(34, 41),    // 图标尺寸
    // size: new AMap.Size(43.8, 49.2),    // 图标尺寸
    image: img,  // Icon的图像
    imageSize: new AMap.Size(34, 41)   // 根据所设置的大小拉伸或压缩图片
    imageSize: new AMap.Size(43.8, 49.2)   // 根据所设置的大小拉伸或压缩图片
  });
}

@@ -259,6 +259,7 @@
  height: 100%;
  position: absolute;
  z-index: 0;
  box-shadow: inset 0px 0px 100px 18px #081729;

  .map-content {
    width: 100%;
@@ -282,7 +283,8 @@

  .item-tb-img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    margin-right: 5px;
  }

  .info-div-p {
@@ -327,11 +329,30 @@
  cursor: pointer;

  .item-tb-p {
    font-family: PingFang SC;
    font-family: 'PingFang SC';

    font-weight: 400;
    font-size: 16px;
    color: #FFFFFF;
    line-height: 42px;
  }
}

.shadow {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  box-shadow: inset 0px 0px 100px 120px #081729;
  pointer-events: none;
}

:deep(.amap-logo) {
  display: none !important;
}

:deep(.amap-copyright) {
  visibility: hidden !important;
}
</style>

 src/views/daoAnOffice/index.vue

@@ -277,6 +277,7 @@
  z-index: 99;
  text-align: center;
  cursor: pointer;
  font-family: 'PingFang SC';
}

.gddt {

 src/views/daoAnOffice/left-bottom.vue

@@ -5,67 +5,67 @@
import { useSettingStore } from "@/stores";
import { storeToRefs } from "pinia";
import EmptyCom from "@/components/empty-com"
const  options = reactive([
const options = reactive([
  {
    title:"青城山风景区",
    num1:56,
    num2:54,
    num3:47,
    num4:35,
    num5:48,
    num6:21,
    num7:87,
    title: "青城山风景区",
    num1: 56,
    num2: 54,
    num3: 47,
    num4: 35,
    num5: 48,
    num6: 21,
    num7: 87,
  },
  {
    title:"都江堰风景区",
    num1:356,
    num2:354,
    num3:347,
    num4:335,
    num5:348,
    num6:321,
    num7:387,
    title: "都江堰风景区",
    num1: 356,
    num2: 354,
    num3: 347,
    num4: 335,
    num5: 348,
    num6: 321,
    num7: 387,
  },
  {
    title:"虹口旅游景区",
    num1:256,
    num2:254,
    num3:247,
    num4:235,
    num5:248,
    num6:221,
    num7:287,
    title: "虹口旅游景区",
    num1: 256,
    num2: 254,
    num3: 247,
    num4: 235,
    num5: 248,
    num6: 221,
    num7: 287,
  },
  {
    title:"灌县古城",
    num1:156,
    num2:154,
    num3:147,
    num4:135,
    num5:148,
    num6:121,
    num7:187,
    title: "灌县古城",
    num1: 156,
    num2: 154,
    num3: 147,
    num4: 135,
    num5: 148,
    num6: 121,
    num7: 187,
  }
])
</script>

<template>
  <div class="left_boottom_wrap beautify-scroll-def"  >
      <div class="left-bottom-fj" v-for="(item,index) in options" :key="index">
     <div>
       <div class="left-bottom-fj-title">{{item.title}}</div>
       <div class="left-bottom-fj-info">
         <p class="left-fj-p">车流量:<span class="left-p">{{ item.num1 }}</span><span class="left-fj-sp">辆</span></p>
         <p class="left-fj-p">游客预约:<span class="left-p">{{ item.num2 }}</span><span class="left-fj-sp">人</span></p>
         <p class="left-fj-p">在岗警力:<span class="left-p">{{ item.num3 }}</span><span class="left-fj-sp">人</span></p>
         <p class="left-fj-p">备用警力:<span class="left-p">{{ item.num4 }}</span><span class="left-fj-sp">辆</span></p>
         <p class="left-fj-p">人流量:<span class="left-p">{{ item.num5 }}</span><span class="left-fj-sp">人</span></p>
         <p class="left-fj-p">入园人数:<span class="left-p">{{ item.num6 }}</span><span class="left-fj-sp">人</span></p>
         <p class="left-fj-p">在岗警车:<span class="left-p">{{ item.num7 }}</span><span class="left-fj-sp">辆</span></p>
       </div>
     </div>

  <div class="left_boottom_wrap beautify-scroll-def">
    <div class="left-bottom-fj" v-for="(item, index) in options" :key="index">
      <div>
        <div class="left-bottom-fj-title">{{ item.title }}</div>
        <div class="left-bottom-fj-info">
          <p class="left-fj-p">车流量:<span class="left-p">{{ item.num1 }}</span><span class="left-fj-sp">辆</span></p>
          <p class="left-fj-p">游客预约:<span class="left-p">{{ item.num2 }}</span><span class="left-fj-sp">人</span></p>
          <p class="left-fj-p">在岗警力:<span class="left-p">{{ item.num3 }}</span><span class="left-fj-sp">人</span></p>
          <p class="left-fj-p">备用警力:<span class="left-p">{{ item.num4 }}</span><span class="left-fj-sp">辆</span></p>
          <p class="left-fj-p">人流量:<span class="left-p">{{ item.num5 }}</span><span class="left-fj-sp">人</span></p>
          <p class="left-fj-p">入园人数:<span class="left-p">{{ item.num6 }}</span><span class="left-fj-sp">人</span></p>
          <p class="left-fj-p">在岗警车:<span class="left-p">{{ item.num7 }}</span><span class="left-fj-sp">辆</span></p>
        </div>
      </div>

    </div>
  </div>
</template>

@@ -75,37 +75,50 @@
  overflow: hidden;
  width: 100%;
  height: 100%;
  .left-bottom-fj{
    margin-bottom:20px ;

  .left-bottom-fj {
    margin-bottom: 20px;
    border: 1px solid #29466A;
    .left-bottom-fj-info{
    background-color: rgba(17, 34, 58, 0.6);

    .left-bottom-fj-info {
      padding: 10px;
      .left-fj-p{

      .left-fj-p {
        width: 23%;
        margin-top: 3px;
        margin-right: 10px;
        color: #4481DD;
        .left-fj-sp{
        font-family: 'PingFang SC';

        .left-fj-sp {
          color: #fff;
        }
      }

      display: flex;
      flex-wrap: wrap;
      .left-p{

      .left-p {
        color: #FAE67D;
      }
    }
    .left-bottom-fj-title{
      font-family: PingFang SC;
      font-weight: 800;

    .left-bottom-fj-title {
      font-family: 'PingFang SC';
      font-weight: 400;
      font-size: 20px;
      color: #44DBDD;
      line-height: 40px;
      height: 80px;
      text-align: center;
      background-image: url("@/assets/img/fjbg.png");
      background-position: center; /* 水平和垂直都居中对齐 */
      background-repeat: no-repeat; /* 不重复平铺背景图像 */
      background-size: cover; /* 自动调整大小以完全覆盖元素 */
      background-position: center;
      /* 水平和垂直都居中对齐 */
      background-repeat: no-repeat;
      /* 不重复平铺背景图像 */
      background-size: cover;
      /* 自动调整大小以完全覆盖元素 */
    }
  }
}
@@ -130,6 +143,7 @@
    padding: 8px;
    font-size: 14px;
    margin: 10px 0;

    .orderNum {
      margin: 0 16px 0 -20px;
    }
@@ -171,6 +185,7 @@
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;

      .dibu {
        position: absolute;
        height: 2px;
@@ -180,6 +195,7 @@
        left: -2%;
        background-size: cover;
      }

      .addresswrap {
        width: 100%;
        display: flex;
@@ -221,4 +237,6 @@
    }
  }
}

.left-p {}
</style>

 src/views/daoAnOffice/left-center.vue

@@ -111,7 +111,8 @@

<style scoped lang="scss">
.x-a{
  background-color: #111E3C;
  background-color: rgba(17, 34, 58, 0.6);

  border: 1px solid #29466A;
  padding: 10px 10px 20px;
}
@@ -147,4 +148,9 @@
    }
  }
}

.roadMileage-item-num {
  font-family: 'PangMenZhengDao' !important;
  letter-spacing: 1px !important;
}
</style>

 src/views/daoAnOffice/left-top.vue

@@ -26,68 +26,78 @@

<template>
  <ul class="user_Overview flex">
    <li class="user_Overview-item" >
    <li class="user_Overview-item">
      <div class="user_Overview_nums allnum">
        <div class="user_Overview_nums_img" >
        <div class="user_Overview_nums_img">
          <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" />-->
        <!--        <CountUp :endVal="state.totalNum" :duration="duration" />-->
      </div>
<!--      <p>总设备数1</p>-->
      <!--      <p>总设备数1</p>-->
    </li>
    <li class="user_Overview-item" >
    <li class="user_Overview-item">
      <div class="user_Overview_nums online">
        <div class="user_Overview_nums_img" >
        <div class="user_Overview_nums_img">
          <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" />-->
        <!--        <CountUp :endVal="state.onlineNum" :duration="duration" />-->
      </div>
<!--      <p>在线数</p>-->
      <!--      <p>在线数</p>-->
    </li>
    <li class="user_Overview-item" >
    <li class="user_Overview-item">
      <div class="user_Overview_nums offline">
        <div class="user_Overview_nums_img" >
        <div class="user_Overview_nums_img">
          <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" />-->
        <!--        <CountUp :endVal="state.offlineNum" :duration="duration" />-->
      </div>
<!--      <p>掉线数</p>-->
      <!--      <p>掉线数</p>-->
    </li>
    <li class="user_Overview-item" >
    <li class="user_Overview-item">
      <div class="user_Overview_nums laramnum">
        <div class="user_Overview_nums_img" >
        <div class="user_Overview_nums_img">
          <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" />-->
        <!--        <CountUp :endVal="state.alarmNum" :duration="duration" />-->
      </div>
<!--      <p>告警次数</p>-->
      <!--      <p>告警次数</p>-->
    </li>
  </ul>
</template>

<style scoped lang="scss">
.user_Overview-item{
  background-color: #11223A;
.user_Overview-item {
  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,26 +139,28 @@
      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{

    .user_Overview_nums_img {
      //background-color: floralwhite;
      //padding: 6px;
      border-radius: 8px;
      width: 72px;
    }
    .user_Overview_nums_img_p{

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

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

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

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

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

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

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

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

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

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

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

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

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

 src/views/daoAnOffice/right/analysis/index.vue

@@ -355,6 +355,7 @@
  border: 1px solid rgba(47, 91, 157, 0.8);
  flex-shrink: 0;
  color: #5B83BD;
  font-family: 'PingFang SC';
}

.select-active {

 src/views/daoAnOffice/right/danger/dataTable.vue

@@ -215,6 +215,8 @@
  font-size: 16px;
  color: #447ED6;
  margin-left: 20px;
  font-family: 'PingFang SC';

}

.select-item {
@@ -222,6 +224,8 @@
  height: 100%;
  border-bottom: 2px solid RGBA(98, 137, 230, 0);
  color: rgba(94, 134, 194, 1);
  font-family: 'PingFang SC';

}

.item-active {
@@ -235,6 +239,8 @@
  width: 100%;
  height: 100%;
  background: transparent;
  font-family: 'PingFang SC';

}

::v-deep .el-table__inner-wrapper::before {

 src/views/daoAnOffice/right/danger/dataView.vue

@@ -49,6 +49,8 @@
.data-red {
  color: rgba(254, 49, 70, 1);
  font-size: 16px;
  font-family: 'PangMenZhengDao';

}

.data-num {
@@ -58,5 +60,8 @@
.data-label {
  color: rgba(68, 219, 221, 1);
  font-size: 16px;
  font-family: 'PingFang SC';
  margin-top: -10px;

}
</style>

 src/views/daoAnOffice/right/danger/index.vue

@@ -62,6 +62,7 @@
  border: 1px solid rgba(47, 91, 157, 0.8);
  flex-shrink: 0;
  color: #5B83BD;
  font-family: 'PingFang SC';
}

.select-active {

 src/views/daoAnOffice/right/danger/infoView.vue

@@ -115,9 +115,9 @@

.info-item {
  font-size: 12px;

  font-family: 'PingFang SC';
  .info-label {
    color: rgba(91, 131, 189, 1);
    color: #5b83bd;
  }
}
</style>

 src/views/daoAnOffice/right/publicize/index.vue

@@ -131,6 +131,7 @@
  border: 1px solid rgba(47, 91, 157, 0.8);
  flex-shrink: 0;
  color: #5B83BD;
  font-family: 'PingFang SC';
}

.select-active {
@@ -155,6 +156,7 @@
  width: 279px;
  flex-shrink: 0;
  cursor: pointer;
  font-family: 'PingFang SC';
  // margin-bottom: 24px;
}


 src/views/header.vue

@@ -29,7 +29,10 @@
    </div>

    <div class="d-flex jc-center">

      <div class="title">

        <span class="title-text">道安办市域治理数据大屏</span>

        <div class="title-img">

          <img src="@/assets/img/title_img.png" alt="">

        </div>

        <!-- <span class="title-text">道安办市域治理数据大屏</span> -->

      </div>

    </div>

<!--    <div class="timers">-->

@@ -130,7 +133,13 @@
  color: transparent;

  height: 60px;

  line-height: 46px;



  .title-img {

    width: 560px;

    position: absolute;

    left: 50%;

    top: 9px;

    transform: translateX(-50%);

  }

  .title-text {

    font-style: italic;

    //text-shadow: 0px 2px 10px rgba(0,0,0,0.5);