大屏调整

fuliqi

2024-09-23 22d285974b8c6552b4cb5901d613e7d715d18182

 src/views/screen/index.vue

@@ -192,7 +192,7 @@
<script>
import itemSubheading from '../screen/components/subheading.vue' // 环形统计图
import lineChart from '../screen/components/lineChart.vue' // 折线统计图
import mapApp from '../screen/components/map.vue' // 地图
import mapApp from '../screen/components/map3.vue' // 地图
import {
  getDepartmentData,
  getDeviceData,
@@ -405,7 +405,6 @@
      item2.color = '#ff7b72'
      item2.title = '未处理'
      this.statistics.push(item2)
      console.log( this.statistics)
    },

    videoData() {
@@ -916,8 +915,8 @@
            background-repeat: no-repeat;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            //justify-content: center;
            //align-items: center;

            .item-facility-icon {
              margin: 0 auto;
@@ -935,9 +934,9 @@
              flex-direction: column;
              justify-content: space-around;
              text-align: center;
              font-size: 14px;
              list-style-type: none;
              padding-left: 0;
              //font-size: 14px;
              //padding-left: 0;

              li:nth-child(1) {
                .value {
@@ -979,7 +978,7 @@
        display: flex;
        flex-direction: column;
        height: 0;
        overflow: hidden;
        //overflow: hidden;

        .title {
          width: 100%;
@@ -1020,9 +1019,11 @@

          .list-title-container {
            width: 100%;
            height: 45px;
            margin: 4px 0 0 0;
            line-height: 45px;
            //height: 45px;
            //margin: 4px 0 0 0;
            //line-height: 45px;
            height: 4.17vh;
            line-height: 4.17vh;
            list-style-type: none;
            display: flex;
            flex-direction: row;
@@ -1095,9 +1096,9 @@

            .list-content-to {
              height: 100%;
              overflow-y: auto;
              overflow-y: hidden;
              overflow-x: hidden;
              padding: 10px 0;
              //padding: 10px 0;
            }

            .item-list {
@@ -1106,19 +1107,22 @@
              align-items: center;
              list-style-type: none;
              border-bottom: 1px dashed #223654;
              margin: 10px 0;
              margin: 8px 0;
              li {
                width: 25%;
                text-align: center;
                font-size: 14px;
                //font-size: 14px;
                font-size: 0.72916667vw !important;
                color: #dcf8ff;
                flex-shrink: 0;
                flex-grow: 0;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                height: 28px;
                line-height: 28px;
                //height: 28px;
                //line-height: 28px;
                height: 2.59vh;
                line-height: 2.59vh;
              }

              .name {
@@ -1201,7 +1205,8 @@
    }

    .footer-container {
      height: 220px;
      //height: 220px;
      height: 24.15vh;
      box-sizing: border-box;
      position: relative;
      background-image: url("../../assets/images/footer-bg.png");
@@ -1227,19 +1232,10 @@
          position: relative;

          background-image: url("../../assets/images/face-bg.png");
          background-size: 500px 200px;
          //background-size: 500px 200px;
          background-size: 26.04166vw auto;
          background-position: center;
          background-repeat: no-repeat;

          // .face-bj-img {
          //   position: absolute;
          //   left: 50%;
          //   top: 50%;
          //   transform: translate(-50%, -50%);
          //   width: 83.1946755%;
          //   display: block;
          //   z-index: 2;
          // }

          .item-face-container {
            position: absolute;
@@ -1247,7 +1243,8 @@
            width: 22.296173%;

            .proportion {
              width: 50px;
              //width: 50px;
              width: 2.60416vw;
              margin: 0 auto;
              color: #00eaff;
              text-shadow: 2px 2px 4px #152944;
@@ -1263,13 +1260,14 @@
                left: 50%;
                top: 53%;
                transform: translate(-50%, -50%);
                font-size: 14px;
                //font-size: 14px;
              }
            }

            .title {
              text-align: center;
              font-size: 12px;
              //font-size: 12px;
              font-size: 0.625vw;
              color: #dcf8ff;
              white-space: nowrap; /* 不换行 */
              overflow: hidden; /* 隐藏超出的内容 */
@@ -1281,7 +1279,8 @@
        .car-container {
          position: relative;
          background-image: url("../../assets/images/car-bg2.png");
          background-size: 500px 200px;
          //background-size: 500px 200px;
          background-size: 26.04166vw auto;
          background-position: center;
          background-repeat: no-repeat;

@@ -1302,6 +1301,7 @@
            font-size: 12px;
            line-height: 26px;
            padding: 0 15px;
            font-size: 0.625vw;
            position: absolute;
            z-index: 5;

@@ -1349,7 +1349,8 @@
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                font-size: 20px;
                //font-size: 20px;
                font-size: 1.04166vw;
                font-weight: bold;
                color: #00fcff;
                text-shadow: 2px 2px 4px #152944;
@@ -1359,10 +1360,13 @@
            .item-video-title {
              text-align: center;
              color: #dcf8ff;
              height: 32px;
              font-size: 13px;
              //height: 32px;
              //font-size: 13px;
              //flex-shrink: 0;
              //flex-grow: 0;
              flex-shrink: 0;
              flex-grow: 0;
              height: 3.51851vh;
              display: -webkit-box;
              -webkit-line-clamp: 2; /* 显示的行数 */
              -webkit-box-orient: vertical;