可视化自适应

src/views/VisualDisplay/src/compontent/header.vue

@@ -57,7 +57,7 @@ onBeforeUnmount(() => {
   right: 4%;
   top: 45%;
   transform: translate(0, -50%);
-  font-size: 20px;
+  font-size: 0.25rem;
   color: white;
   font-weight: 500;
   font-family: '黑体';
@@ -65,12 +65,12 @@ onBeforeUnmount(() => {
 .header .time::before{
   content:"";
   display: inline-block;
-  width: 24px;
-  height: 24px;
+  width: 0.3rem;
+  height: 0.3rem;
   background: url('@/assets/ksh/home/icon-time.png') no-repeat;
   background-size: 100% 100%;
   position: absolute;
-  top: -2px;
-  left: -35px;
+  top: -0.025rem;
+  left: -0.4375rem;
 }
 </style>

src/views/VisualDisplay/src/pages/cf/index.vue

@@ -89,7 +89,7 @@
             </div>
           </div>
         </el-col>
-        <el-col :span="15" style="padding-right: 15px">
+        <el-col :span="15" style="padding-right: 0.1875rem">
           <div class="map-area">
             <div class="operation-box">
               <el-radio-group v-model="tabPosition" @change="tabClick" style="width: 80%">
@@ -104,7 +104,7 @@
                   @change="cangSelect"
                   v-model="cangName"
                   placeholder="选择货位"
-                  style="width: 150px"
+                  style="width: 1.875rem"
                 >
                   <el-option
                     v-for="(item, index) in cangOptions"
@@ -121,7 +121,7 @@
             <div class="hw-rightcon">
               <div v-if="tabPosition == 'hwk'">
                 <h3 class="hwk_title"><i></i>货位信息</h3>
-                <el-form class="formstyletwo" ref="form" :model="baseformhw" label-width="140px">
+                <el-form class="formstyletwo" ref="form" :model="baseformhw" label-width="1.75rem">
                   <el-row :gutter="30">
                     <!-- <el-col :span="16"> -->
                     <el-col :span="8">
@@ -143,7 +143,7 @@
                     <!-- <el-col :span="8">
                   <div class="img" style="width: 100%;text-align:center">
                       <el-image
-                        style="width: 240px; height: 240px;cursor: pointer;margin-top: -28px;"
+                        style="width: 240px; height: 240px;cursor: pointer;margin-top: -0.35rem;"
                         :src="qrCodeUrl"
                         fit="fill"
                         @click="handleCodeShow"
@@ -204,7 +204,7 @@
                 <el-form :inline="true" class="formstylethree" ref="form" :model="searchform">
                   <el-form-item label="业务日期">
                     <el-date-picker
-                      style="width: 180px"
+                      style="width: 2.25rem"
                       @change="searchCrk"
                       clearable
                       v-model="searchform.ywrq"
@@ -216,7 +216,7 @@
                   </el-form-item>
                   <el-form-item label="出入库类型">
                     <el-select
-                      style="width: 180px"
+                      style="width: 2.25rem"
                       @change="searchCrk"
                       v-model="searchform.crklx"
                       placeholder="请选择"
@@ -248,13 +248,13 @@
                       </el-table-column>
                       <el-table-column prop="ywrq" label="业务时间" align="center" />
                       <el-table-column prop="lspzmc" label="粮食品种" align="center">
-                        <template #default="scope">
+                        <!-- <template #default="scope">
                           <dict-tag
                             v-if="scope.row.lspzmc"
                             :type="DICT_TYPE.SYSTEM_LSPZ"
                             :value="scope.row.lspzmc"
                           />
-                        </template>
+                        </template> -->
                       </el-table-column>
                       <el-table-column prop="lsdjbm" label="粮食等级" align="center" />
                       <el-table-column prop="jz" label="净重（公斤）" align="center" />
@@ -289,8 +289,8 @@
               </div>
               <div v-if="tabPosition == 'zj'">
                 <!-- <h3><i></i>检测记录</h3> -->
-                <div class="resettablewrap resettablewrap-spe" style="margin-bottom: 10px">
-                  <el-scrollbar style="height: 500px">
+                <div class="resettablewrap resettablewrap-spe" style="margin-bottom: 0.125rem">
+                  <el-scrollbar style="height: 6.25rem">
                     <el-table
                       :data="zhijTableData"
                       style="width: 100%; overflow-x: hidden"
@@ -313,13 +313,13 @@
                         </template>
                       </el-table-column>
                       <el-table-column prop="lspzmc" label="粮食品种" align="center">
-                        <template #default="scope">
+                        <!-- <template #default="scope">
                           <dict-tag
                             v-if="scope.row.lspzmc"
                             :type="DICT_TYPE.SYSTEM_LSPZ"
                             :value="scope.row.lspzmc"
                           />
-                        </template>
+                        </template> -->
                       </el-table-column>
                       <el-table-column prop="lsdjbm" label="粮食等级" align="center" />
                       <el-table-column prop="jcrrxm" label="检测人员姓名" align="center" />
@@ -349,7 +349,7 @@
                   </el-radio-group>
                 </div> -->
                 <div>
-                  <el-form class="formstyletwo" ref="form" :model="wensdform" label-width="200px">
+                  <el-form class="formstyletwo" ref="form" :model="wensdform" label-width="2.5rem">
                     <el-row :gutter="30">
                       <el-col :span="8">
                         <el-form-item label="仓廒名称">
@@ -432,7 +432,7 @@
                 </div>
               </div>
               <div v-if="tabPosition == 'sy'">
-                <el-scrollbar style="height: 600px">
+                <el-scrollbar style="height: 7.5rem">
                   <div class="resettablewrap">
                     <el-table
                       :data="crkTableDataSy"
@@ -497,19 +497,19 @@
     </div>
 
     <div class="dialog_file">
-      <el-dialog title="" v-model="Dialogfiles" width="1150px" top="15vh">
+      <el-dialog title="" v-model="Dialogfiles" width="14.375rem" top="15vh">
         <template #header="{}">
           <div class="dialog_title">
             <span class="dialog_title_text">{{ searchform.crklx == 0 ? '出库' : '入库' }}单</span>
           </div>
         </template>
-        <el-scrollbar class="hw-rightcon" style="height: 600px; margin: 0">
+        <el-scrollbar class="hw-rightcon" style="height: 7.5rem; margin: 0">
           <el-form
             class="formstyletwo"
-            style="height: 600px; padding: 15px"
+            style="height: 7.5rem; padding: 0.1875rem"
             ref="form"
             :model="crkDetail"
-            label-width="140px"
+            label-width="1.75rem"
           >
             <h3 class="hwk_title"><i></i>基础信息</h3>
             <el-row :gutter="20">
@@ -586,6 +586,7 @@
 </template>
 
 <script lang="ts" setup>
+import '@/utils/flexible'
 import * as Api from '../../api'
 import Header from '@/views/VisualDisplay/src/compontent/header.vue'
 import { DICT_TYPE } from '@/utils/dict'
@@ -845,18 +846,19 @@ onMounted(() => {
 .container-page {
   width: 100%;
   height: 100%;
-  overflow: auto;
+  overflow-x: hidden;
+  overflow-y: auto;
   background: url('@/assets/ksh/home/bj.jpg') no-repeat;
   background-size: 100% 100%;
   color: #ffffff;
 }
 .header {
-  width: 1920px;
-  height: 110px;
+  width: 24rem;
+  height: 1.375rem;
 }
 .container-body {
-  width: 1920px;
-  height: 970px;
+  width: 24rem;
+  height: 12.125rem;
 }
 @media (min-width: 1920px) and (min-height: 1080px) {
   .container-page {
@@ -868,8 +870,8 @@ onMounted(() => {
   width: 100%;
   // height: 88vh;
   // height: 100%;
-  height: 930px;
-  padding: 10px 15px;
+  height: 11.625rem;
+  padding: 0.125rem 0.1875rem;
 }
 .kqxx_box .box_khxx {
   width: 100%;
@@ -887,18 +889,18 @@ onMounted(() => {
 }
 .kqxx_box .box_title {
   width: 100%;
-  height: 45px;
-  padding-left: 50px;
+  height: 0.5625rem;
+  padding-left: 0.625rem;
   display: flex;
   align-items: center;
   margin-bottom: 0;
 }
 .kqxx_box .box_title .title-top {
-  font-size: 28px;
+  font-size: 0.35rem;
   font-family: 'Pangmen';
   position: relative;
-  letter-spacing: 4px;
-  // margin-top: 5px;
+  letter-spacing: 0.05rem;
+  // margin-top: 0.0625rem;
   background: linear-gradient(to bottom, #f2fcfd, #a3e0fb);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
@@ -906,65 +908,67 @@ onMounted(() => {
 .kqxx_box .box_title .title-top::before {
   content: '';
   display: inline-block;
-  width: 13px;
-  height: 16px;
+  width: 0.1625rem;
+  height: 0.2rem;
   background: url('@/assets/ksh/home/icon-square.png') no-repeat;
   background-size: 100% 100%;
   position: absolute;
-  left: -28px;
-  top: 8px;
+  left: -0.35rem;
+  top: 0.1rem;
 }
 .kqxx_box .box_khxx .kqxx_content {
   width: 100%;
-  height: calc(100% - 45px);
-  padding: 20px;
+  height: calc(100% - 0.5625rem);
+  padding: 0.25rem;
   display: flex;
   flex-direction: column;
   justify-content: space-around;
 }
 .kqxx_box .box_khxx .box_item {
   display: flex;
-  height: 50px;
+  height: 0.625rem;
 }
 
 .kqxx_content .box_item .box_icon {
-  width: 50px;
-  height: 50px;
-  background-size: 100% 100%;
+  width: 0.625rem;
+  height: 0.625rem;
 }
 .kqxx_content .box_item .icon_kh1 {
   background: url('@/assets/ksh/cf/icon-dwmc.png') no-repeat;
+  background-size: 100% 100%;
 }
 .kqxx_content .box_item .icon_kh2 {
   background: url('@/assets/ksh/cf/icon-lxdh.png') no-repeat;
+  background-size: 100% 100%;
 }
 .kqxx_content .box_item .icon_kh3 {
   background: url('@/assets/ksh/cf/icon-xydm.png') no-repeat;
+  background-size: 100% 100%;
 }
 .kqxx_content .box_content {
   display: flex;
-  padding-right: 24px;
-  margin-left: 28px;
+  padding-right: 0.3rem;
+  margin-left: 0.35rem;
   justify-content: space-between;
   background: #203e72;
   width: 88%;
-  border-radius: 8px;
+  border-radius: 0.1rem;
 }
 .kqxx_content .box_content span {
-  height: 35px;
-  line-height: 35px;
-  margin-top: 8px;
-  font-size: 18px;
+  height: 0.4375rem;
+  line-height: 0.4375rem;
+  margin-top: 0.1rem;
+  font-size: 0.225rem;
 }
 .kqxx_content .box_content .span_left {
   width: 50%;
-  padding-left: 20px;
+  padding-left: 0.25rem;
   text-align: left;
 }
 .kqxx_content .box_content .span_right {
-  margin-left: 10px;
+  margin-left: 0.125rem;
   width: 50%;
-  border-radius: 9px;
+  border-radius: 0.1125rem;
   text-align: right;
   background: linear-gradient(to bottom, #fefefe, #f2d349);
   -webkit-background-clip: text;
@@ -972,7 +976,7 @@ onMounted(() => {
 }
 
 .cfxx_content {
-  padding: 25px 20px 0;
+  padding: 0.3125rem 0.25rem 0;
   display: flex;
   flex-direction: column;
   justify-content: space-around;
@@ -982,32 +986,32 @@ onMounted(() => {
   display: flex;
 }
 .cfxx_content .box_content span {
-  height: 41px;
-  line-height: 41px;
-  font-size: 18px;
+  height: 0.5125rem;
+  line-height: 0.5125rem;
+  font-size: 0.225rem;
 }
 .cfxx_content .box_content .span_left {
-  width: 167px;
+  width: 2.0875rem;
   color: #ffffff;
-  padding-left: 10px;
+  padding-left: 0.125rem;
   background: url('@/assets/ksh/cf/cf-bj.png') no-repeat;
   background-size: 100% 100%;
 }
 .cfxx_content .box_content .span_right {
   flex: 1;
-  margin-left: 25px;
-  border-radius: 9px;
+  margin-left: 0.3125rem;
+  border-radius: 0.1125rem;
   background: #214076;
   color: #ffffff;
-  padding-left: 10px;
+  padding-left: 0.125rem;
 }
 
 .map-area {
-  padding-top: 20px;
+  padding-top: 0.25rem;
   height: 98%;
   background: url('@/assets/ksh/cf/right-bj.png') no-repeat;
   background-size: 100% 100%;
-  margin-top: 14px;
+  margin-top: 0.175rem;
 }
 
 /*最外层透明*/
@@ -1016,7 +1020,7 @@ onMounted(() => {
   background-color: transparent;
   color: rgba(255, 255, 255, 0.5);
   opacity: 0.8;
-  font-size: 12px;
+  font-size: 0.15rem;
 }
 
 :deep(
@@ -1029,7 +1033,7 @@ onMounted(() => {
 }
 
 :deep(.el-table--medium .el-table__cell) {
-  padding: 2px 0;
+  padding: 0.025rem 0;
 }
 
 .el-table {
@@ -1038,14 +1042,14 @@ onMounted(() => {
 
 :deep(.el-table),
 :deep(.el-table__expanded-cell) {
-  font-size: 14px;
+  font-size: 0.175rem;
 }
 :deep(.el-table th),
 :deep(.el-table tr),
 :deep(.el-table td) {
   background-color: transparent;
   color: #ffffff;
-  height: 45px;
+  height: 0.5625rem;
 }
 
 :deep(.el-table--striped .el-table__body tr.el-table__row--striped td) {
@@ -1068,7 +1072,7 @@ onMounted(() => {
 }
 :deep(.el-table th.el-table__cell.is-leaf, .el-table td.el-table__cell) {
   border-bottom: 0px solid #dfe6ec;
-  font-size: 18px;
+  font-size: 0.225rem;
   font-weight: 500;
   color: #ffffff !important;
 }
@@ -1088,7 +1092,7 @@ onMounted(() => {
 }
 :deep(.el-table tbody tr.two-row) {
   background: url('@/assets/ksh/cf/crk-bj3.png') 0 50% no-repeat !important;
-  background-size: 100% 15px !important;
+  background-size: 100% 0.1875rem !important;
 }
 :deep(.resettablewrap2 .el-table tbody tr) {
   cursor: pointer;
@@ -1109,36 +1113,36 @@ onMounted(() => {
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
-    max-height: calc(100% - 30px);
+    max-height: calc(100% - 0.375rem);
   }
   .el-dialog__body::-webkit-scrollbar {
     display: none;
   }
   .dialog_title {
     color: #ffffff;
-    font-size: 24px;
-    line-height: 20px;
+    font-size: 0.3rem;
+    line-height: 0.25rem;
     position: relative;
     .dialog_title_text {
-      margin-left: 30px;
-      // margin-top: -10px;
+      margin-left: 0.375rem;
+      // margin-top: -0.125rem;
       position: relative;
     }
     .dialog_title_text::before {
       content: '';
       display: inline-block;
-      width: 13px;
-      height: 16px;
+      width: 0.1625rem;
+      height: 0.2rem;
       background: url('@/assets/ksh/home/icon-square.png') no-repeat;
       background-size: 100% 100%;
       position: absolute;
-      top: 8px;
-      left: -24px;
+      top: 0.1rem;
+      left: -0.3rem;
     }
   }
   .el-dialog__headerbtn {
-    top: 6px;
-    right: 6px;
+    top: 0.075rem;
+    right: 0.075rem;
   }
   .el-dialog__headerbtn .el-dialog__close {
     display: none;
@@ -1146,8 +1150,8 @@ onMounted(() => {
   .el-dialog__headerbtn::before {
     content: '';
     display: inline-block;
-    width: 15px;
-    height: 15px;
+    width: 0.1875rem;
+    height: 0.1875rem;
     background: url('@/assets/ksh/dialog/close.png') no-repeat;
     background-size: 100% 100%;
   }
@@ -1158,37 +1162,37 @@ onMounted(() => {
   background-color: transparent;
   border-width: 0;
   color: #ffffff;
-  font-size: 16px;
+  font-size: 0.2rem;
   padding: 0;
 }
 .resettablewrap .el-tag {
   background-color: transparent;
   border-width: 0;
   color: #ffffff;
-  font-size: 14px;
+  font-size: 0.175rem;
   padding: 0;
 }
 .resettablewrap2 .el-tag {
   background-color: transparent;
   border-width: 0;
   color: #ffffff;
-  font-size: 14px;
+  font-size: 0.175rem;
   padding: 0;
 }
 .operation-box {
   position: relative;
-  margin: 0 20px 20px;
+  margin: 0 0.25rem 0.25rem;
   .el-radio-button {
-    margin-right: 10px;
-    margin-bottom: 10px;
+    margin-right: 0.125rem;
+    margin-bottom: 0.125rem;
   }
   .el-radio-button__inner {
     background: linear-gradient(to bottom, #152c61 25%, #183a72 50%, #4780db 100%);
     color: #c2c7d6;
-    padding: 10px 40px;
-    border: 1px solid #6caad7 !important;
-    border-radius: 5px;
-    font-size: 16px;
+    padding: 0.125rem 0.5rem;
+    border: 0.0125rem solid #6caad7 !important;
+    border-radius: 0.0625rem;
+    font-size: 0.2rem;
     // border-left: 0;
   }
   .is-active .el-radio-button__inner {
@@ -1198,7 +1202,7 @@ onMounted(() => {
   }
   .el-radio-button:first-child .el-radio-button__inner,
   .el-radio-button:last-child .el-radio-button__inner {
-    border-radius: 5px;
+    border-radius: 0.0625rem;
   }
   .changecang {
     position: absolute;
@@ -1208,84 +1212,91 @@ onMounted(() => {
     width: 23%;
     justify-content: space-between;
     // .el-input__inner {
-    //   font-size: 18px;
-    //   border: 1px solid #4187b5;
+    //   font-size: 0.225rem;
+    //   border: 0.0125rem solid #4187b5;
     //   color: #ffffff;
     //   background: linear-gradient(
     //     rgba(13, 69, 121, 0.3) 0%,
     //     rgba(22, 37, 73, 0.3) 50%,
     //     rgba(13, 69, 121, 0.3) 100%
     //   );
-    //   box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    //   box-shadow: 0 0.025rem 0.15rem 0 rgba(0, 0, 0, 0.1);
     // }
     .el-select__wrapper {
       background: linear-gradient(to bottom, #152c61 25%, #183a72 50%, #4780db 100%) !important;
-
-      border: 1px solid #6caad7 !important;
-      border-radius: 5px;
+      border: 0.0125rem solid #6caad7 !important;
+      border-radius: 0.0625rem;
       box-shadow: none;
-      height: 38px;
+      height: 0.475rem;
+      font-size: 0.175rem;
+      gap: 0.075rem;
+      line-height: 0.3rem;
+      min-height: 0.4rem;
+      padding: 0.05rem 0.15rem;
     }
     .el-select__placeholder {
       color: #c2c7d6;
     }
     .changecangBtn {
-      width: 100px;
-      height: 38px;
+      width: 1.25rem;
+      height: 0.475rem;
       background: linear-gradient(to bottom, #152c61 25%, #183a72 50%, #4780db 100%) !important;
       color: #c2c7d6;
-      border-radius: 5px;
-      font-size: 16px;
+      border-radius: 0.0625rem;
+      font-size: 0.2rem;
     }
   }
 }
 .hw-rightcon {
-  margin: 0px 20px;
+  margin: 0px 0.25rem;
   h3 {
     background: #2c498b;
-    height: 36px;
-    padding: 5px 0;
-    font-size: 20px;
+    height: 0.45rem;
+    padding: 0.0625rem 0;
+    font-size: 0.25rem;
     font-weight: bold;
-    margin: 10px 0px 20px;
+    margin: 0.125rem 0px 0.25rem;
     color: #ffffff;
     i {
       float: left;
-      width: 5px;
-      height: 5px;
+      width: 0.0625rem;
+      height: 0.0625rem;
       background: #ebd35a;
-      margin: 12px 10px 0 0;
+      margin: 0.15rem 0.125rem 0 0;
     }
   }
   .formstyletwo .el-form-item {
-    margin-bottom: 30px;
+    margin-bottom: 0.375rem;
   }
   .formstyletwo .el-form-item__label {
     color: #ffffff;
     background: #1d3770;
-    font-size: 16px;
-    margin-right: 5px;
+    font-size: 0.2rem;
+    margin-right: 0.0625rem;
     justify-content: flex-start;
-    padding-left: 15px;
+    padding-left: 0.1875rem;
     text-align: center;
   }
   .formstyletwo .el-input {
-    font-size: 16px;
+    font-size: 0.2rem;
   }
   .formstyletwo .el-form-item {
-    margin-bottom: 18px;
+    margin-bottom: 0.225rem;
   }
   .formstyletwo .el-form-item__content {
-    padding-left: 10px;
+    padding-left: 0.125rem;
   }
   .formstyletwo .el-input__wrapper {
     background: url('@/assets/ksh/cf/streak-bg.png') center left repeat;
     border-radius: 0;
-    border-bottom-right-radius: 20px;
+    border-bottom-right-radius: 0.25rem;
     border: 0px none;
     color: #9fbae3;
-    padding-left: 25px;
+    padding-left: 0.3125rem;
     box-shadow: none;
+    font-size: 0.175rem;
+    padding: 0.0125rem 0.1375rem;
+    height: 0.4rem;
   }
   .formstyletwo .el-input__inner {
     color: #9fbae3;
@@ -1298,14 +1309,14 @@ onMounted(() => {
   }
 
   .primaryBtn {
-    margin-bottom: 18px;
+    margin-bottom: 0.225rem;
   }
 
   .radiobox {
-    margin-bottom: 20px;
+    margin-bottom: 0.25rem;
     .el-radio {
       color: #9dc0d0;
-      font-size: 18px;
+      font-size: 0.225rem;
     }
     .el-radio__inner {
       background: #415078;
@@ -1315,19 +1326,48 @@ onMounted(() => {
 }
 
 .formstylethree {
+  .el-form-item--default {
+    --font-size: 0.175rem;
+    margin-bottom: 0.225rem;
+  }
+  .el-form-item {
+    --font-size: 0.175rem;
+    margin-bottom: 0.225rem;
+    margin-right: 0.4rem;
+  }
+  .el-form-item__label {
+    height: 0.4rem;
+    line-height: 0.4rem;
+    padding: 0 0.15rem 0 0;
+  }
+  .el-date-editor.el-input,
+  .el-date-editor.el-input__wrapper {
+    height: 0.4rem;
+  }
+  .el-form-item--default .el-form-item__content {
+    line-height: 0.4rem;
+  }
   .el-input__wrapper {
     background: linear-gradient(to bottom, #1d366f 25%, #1f57a7 100%) !important;
-    border: 1px solid #6caad7 !important;
-    border-radius: 5px;
+    border: 0.0125rem solid #6caad7 !important;
+    border-radius: 0.0625rem;
     box-shadow: none;
     color: #ffffff;
+    font-size: 0.175rem;
+    padding: 0.0125rem 0.1375rem;
+    height: 0.4rem;
   }
   .el-select__wrapper {
     background: linear-gradient(to bottom, #1d366f 25%, #1f57a7 100%) !important;
-    border: 1px solid #6caad7 !important;
-    border-radius: 5px;
+    border: 0.0125rem solid #6caad7 !important;
+    border-radius: 0.0625rem;
     box-shadow: none;
-    height: 30px;
+    height: 0.375rem;
+    font-size: 0.175rem;
+    gap: 0.075rem;
+    line-height: 0.3rem;
+    min-height: 0.4rem;
+    padding: 0.05rem 0.15rem;
   }
   .el-input__inner {
     color: #c2c7d6;
@@ -1339,42 +1379,42 @@ onMounted(() => {
     color: #ffffff;
   }
   .searchBtn {
-    width: 100px;
-    height: 30px;
+    width: 1.25rem;
+    height: 0.375rem;
     background: linear-gradient(to bottom, #1d366f 25%, #1f57a7 100%) !important;
     color: #ffffff;
-    border-radius: 5px;
-    font-size: 16px;
-    margin-bottom: 18px;
+    border-radius: 0.0625rem;
+    font-size: 0.2rem;
+    margin-bottom: 0.225rem;
   }
 }
 
 .el-pagination {
-  margin-top: 10px;
+  margin-top: 0.125rem;
   text-align: center;
   color: #8baecd;
-  font-size: 16px;
+  font-size: 0.2rem;
   .el-pagination__total {
     color: #8baecd;
-    font-size: 16px !important;
+    font-size: 0.2rem !important;
   }
   .el-pagination__jump {
     color: #8baecd;
-    font-size: 16px;
+    font-size: 0.2rem;
   }
   .el-pager li {
     background: none;
-    font-size: 16px !important;
+    font-size: 0.2rem !important;
     color: #8baecd;
   }
   span:not([class*='suffix']) {
-    font-size: 16px;
+    font-size: 0.2rem;
   }
   .el-select .el-input .el-input__inner {
     background: none;
-    border: 1px solid #3d6fbe;
+    border: 0.0125rem solid #3d6fbe;
     color: #ffffff;
-    font-size: 16px;
+    font-size: 0.2rem;
   }
   .btn-next,
   .btn-prev {
@@ -1383,35 +1423,43 @@ onMounted(() => {
   }
   .btn-next .el-icon,
   .btn-prev .el-icon {
-    font-size: 16px !important;
+    font-size: 0.2rem !important;
   }
   button:disabled {
     background: none;
   }
   .el-pagination__editor.el-input .el-input__inner {
     // background: #162d60;
-    // border: 1px solid #3d6fbe;
+    // border: 0.0125rem solid #3d6fbe;
     background: none;
     border: 0;
     color: #ffffff;
   }
   .el-input__wrapper {
     background: none;
-    box-shadow: 0 0 0 1px #4f78d9 inset;
+    box-shadow: 0 0 0 0.0125rem #4f78d9 inset;
+    font-size: 0.175rem;
+    padding: 0.0125rem 0.1375rem;
+    height: 0.4rem;
   }
 
   .el-select__wrapper {
     // background: linear-gradient(to bottom, #1d366f 25%, #1f57a7 100%) !important;
     background: #162b65;
-    border: 1px solid #4f78d9 !important;
-    border-radius: 5px;
+    border: 0.0125rem solid #4f78d9 !important;
+    border-radius: 0.0625rem;
     box-shadow: none;
-    // height: 30px;
+    height: 0.375rem;
     color: #ffffff;
+    font-size: 0.175rem;
+    gap: 0.075rem;
+    line-height: 0.3rem;
+    min-height: 0.4rem;
+    padding: 0.05rem 0.15rem;
   }
   .el-select__wrapper.is-hovering:not(.is-focused) {
     // box-shadow: none;
-    box-shadow: 0 0 0 1px #4f78d9 inset;
+    box-shadow: 0 0 0 0.0125rem #4f78d9 inset;
   }
   .el-select__placeholder {
     color: #ffffff;
@@ -1424,19 +1472,19 @@ onMounted(() => {
 
 .image_preview {
   width: 95%;
-  height: 280px;
-  // padding: 0 20px;
-  // margin: 20px;
-  // margin: 20px 20px 0;
+  height: 3.5rem;
+  // padding: 0 0.25rem;
+  // margin: 0.25rem;
+  // margin: 0.25rem 0.25rem 0;
   // .demo-image__error .image-slot {
-  //   font-size: 20px;
+  //   font-size: 0.25rem;
   // }
   // .demo-image__error .image-slot .el-icon {
-  //   font-size: 20px;
+  //   font-size: 0.25rem;
   // }
   // .demo-image__error .el-image {
   //   width: 100%;
-  //   height: 100px;
+  //   height: 1.25rem;
   // }
   .el-image {
     position: relative;
@@ -1450,4 +1498,10 @@ onMounted(() => {
     transform: translate(-50%, -50%);
   }
 }
+.el-select-dropdown__wrap .el-select-dropdown__item {
+  font-size: 0.175rem;
+  height: 0.425rem;
+  line-height: 0.425rem;
+  padding: 0 0.4rem 0 0.25rem;
+}
 </style>

src/views/VisualDisplay/src/pages/compontent/Map2.vue

@@ -338,7 +338,7 @@ const initEcharts = (geoJson, name, chart) => {
         // symbol: 'circle',
         symbol: img2,
         // symbol: isBack.value ? 'image://' + img3 : img2,
-        symbolSize: [20, 30],
+        symbolSize: [20, 25],
         // symbolSize: 18,
         // symbolOffset: [0, -20],
         z: 999,

src/views/VisualDisplay/src/pages/compontent/cbkc.vue

@@ -243,9 +243,9 @@ const chartRander2 = () => {
 const setClass = () => {
   const spanElement = document.querySelectorAll('.title_all')
   const spanWidth = spanElement[0].offsetWidth
-  console.log(spanElement, 'spanWidth-==========')
-
-  if (spanWidth > 284) {
+  // console.log(window.innerWidth, 'document-==========')
+  let data = window.innerWidth / 6.9
+  if (spanWidth > data) {
     spanElement[0].classList.add('title_sp')
     spanElement[1].classList.add('title_sp')
   }
@@ -285,26 +285,26 @@ onMounted(() => {
 .cbkc_box {
   // padding: 0 0 0 55px;
   width: 95%;
-  height: 930px;
+  height: 11.625rem;
   // background: pink;
   background: url('@/assets/ksh/home/right-bj.png') no-repeat;
   background-size: 100% 100%;
-  margin-top: 5px;
+  margin-top: 0.0625rem;
 }
 .cbkc_box .box_title {
   width: 100%;
-  height: 45px;
+  height: 0.5625rem;
   display: flex;
-  padding-left: 50px;
+  padding-left: 0.625rem;
   align-items: center;
   position: relative;
 }
 .cbkc_box .box_title .title-top {
   font-family: 'Pangmen';
-  font-size: 30px;
+  font-size: 0.375rem;
   position: relative;
-  letter-spacing: 4px;
-  margin-top: 5px;
+  letter-spacing: 0.05rem;
+  margin-top: 0.0625rem;
   background: linear-gradient(to bottom, #f2fcfd, #a3e0fb);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
@@ -312,28 +312,28 @@ onMounted(() => {
 .cbkc_box .box_title .title-top::before {
   content: '';
   display: inline-block;
-  width: 13px;
-  height: 16px;
+  width: 0.1625rem;
+  height: 0.2rem;
   background: url('@/assets/ksh/home/icon-square.png') no-repeat;
   background-size: 100% 100%;
   position: absolute;
-  left: -28px;
-  top: 8px;
+  left: -0.35rem;
+  top: 0.1rem;
 }
 
 .cbkc_box .box_title .title-unit {
   // font-family: "Youyuan";
-  font-size: 16px;
+  font-size: 0.2rem;
   color: #c6e9fc;
   position: absolute;
-  right: 20px;
+  right: 0.25rem;
   bottom: 0;
 }
 .cbkc_box .box_content {
   height: 40%;
   width: 100%;
   position: relative;
-  // padding-top: 20px;
+  // padding-top: 0.25rem;
   // background: rgba(255, 192, 203, 0.188);
 }
 .cbkc_box .box_content .title {
@@ -345,37 +345,38 @@ onMounted(() => {
 }
 .cbkc_box .box_content .title div {
   flex: 50%;
-  font-size: 22px;
+  font-size: 0.275rem;
   color: #ffffff;
   height: 34px;
-  line-height: 34px;
-  padding-left: 15px;
+  line-height: 0.425rem;
+  padding-left: 0.1875rem;
 }
 .title_left {
   display: flex;
 }
 .title_left .title_bg {
-  width: 150px;
+  width: 1.85rem;
+  height: 0.385rem;
   background: url('@/assets/ksh/home/right-span-bj.png') no-repeat;
   background-size: 100% 100%;
   text-align: left;
-  padding-left: 25px;
+  padding-left: 0.3125rem;
   // padding-right: 20px;
 }
 .title_left .title_all {
-  font-size: 18px;
-  line-height: 40px;
+  font-size: 0.225rem;
+  line-height: 0.5rem;
   color: #efb929;
 }
 .title_left .title_kq {
-  font-size: 16px;
+  font-size: 0.2rem;
 }
 .title_left .title_sp {
-  line-height: 22px !important;
+  line-height: 0.275rem !important;
 }
 .cbkc_box .echarts_box {
   width: 100%;
-  height: 198px;
+  height: 2.475rem;
   display: flex;
   justify-content: center;
   position: relative;
@@ -384,54 +385,56 @@ onMounted(() => {
   // left: -8%;
 }
 .cbkc_box .charts {
-  width: 315px;
-  height: 198px;
+  width: 3.9375rem;
+  height: 2.475rem;
   background: url('@/assets/ksh/home/chart-bj.png') no-repeat;
-  // background-size: 300px;
-  background-position: 0 -2px;
+  background-size: 100% 100%;
+  background-position: 0 -0.025rem;
 }
 .cbkc_box .box_content .img_bg {
-  width: 61px;
-  height: 58px;
+  width: 0.7625rem;
+  height: 0.725rem;
   // background: url('@/assets/ksh/home/icon-pzjg.png') no-repeat;
   /* background-size: 300px;
   background-position: -30px -28px; */
   position: absolute;
   top: 50%;
   left: 50%;
-  transform: translate(-30px, -28px);
+  transform: translate(-0.375rem, -0.35rem);
   // transform: scale(75%);
   /* z-index: -1; */
   pointer-events: none;
 }
 .cbkc_box .pjzg .img_bg {
   background: url('@/assets/ksh/home/icon-pzjg.png') no-repeat;
+  background-size: 100% 100%;
 }
 .cbkc_box .shnf .img_bg {
   background: url('@/assets/ksh/home/icon-shnf.png') no-repeat;
+  background-size: 100% 100%;
 }
 
 .echarts_list {
   width: 100%;
   height: 40%;
-  padding-top: 20px;
+  padding-top: 0.25rem;
   // background: pink;
   display: flex;
   flex-wrap: wrap;
   // justify-content: space-around;
   .list_item {
     width: 44%;
-    height: 30px;
-    line-height: 30px;
+    height: 0.375rem;
+    line-height: 0.375rem;
     margin-left: 5%;
     display: flex;
     // justify-content: space-around;
     align-items: center;
-    font-size: 12px;
+    font-size: 0.15rem;
     // font-weight: 700;
     // border-bottom: 1px dashed #8ec4ff;
     text-align: center;
-    background-size: 100% 30px;
+    background-size: 100% 0.375rem;
     // .item_color {
     //   width: 8px;
     //   height: 8px;
@@ -440,8 +443,8 @@ onMounted(() => {
     .item_name {
       flex: 1;
       color: #e9f3f9;
-      margin-left: 25px;
-      font-size: 16px;
+      margin-left: 0.3125rem;
+      font-size: 0.2rem;
       text-align: left;
       white-space: nowrap;
       overflow: hidden;
@@ -473,29 +476,29 @@ onMounted(() => {
   }
   .list_item2 {
     width: 40%;
-    height: 30px;
-    line-height: 30px;
+    height: 0.375rem;
+    line-height: 0.375rem;
     margin-left: 5%;
     display: flex;
     justify-content: space-around;
     align-items: center;
-    font-size: 12px;
+    font-size: 0.15rem;
     // font-weight: 700;
     border-bottom: 1px solid #384568;
     text-align: center;
     background-size: 100% 30px;
     position: relative;
     .item_color {
-      width: 8px;
-      height: 8px;
+      width: 0.1rem;
+      height: 0.1rem;
       // transform: rotate(45deg);
       border-radius: 50%;
     }
     .item_name {
-      width: 100px;
+      width: 1.25rem;
       color: #e9f3f9;
-      margin: 0 15px;
-      font-size: 16px;
+      margin: 0 0.1875rem;
+      font-size: 0.2rem;
       text-align: left;
     }
     .item_percentage {
@@ -509,10 +512,10 @@ onMounted(() => {
     .item_line {
       display: inline-block;
       width: 45%;
-      height: 1px;
+      height: 0.0125rem;
       position: absolute;
       left: 0;
-      bottom: -1px;
+      bottom: -0.0125rem;
       // background: pink;
     }
   }

src/views/VisualDisplay/src/pages/compontent/mapPop.vue

@@ -117,7 +117,6 @@ export default {
 }
 </script>
 <script setup lang="ts">
-import '@/utils/flexible'
 import { defineProps, watch, ref } from 'vue'
 import { number } from 'vue-types'
 const props = defineProps(

src/views/VisualDisplay/src/pages/index.vue

@@ -6,15 +6,10 @@
     <div class="container-body">
       <el-row style="height: 100%" :gutter="10">
         <el-col :span="18">
-          <el-form
-            style="padding-left: 20px; margin-top: 15px"
-            inline
-            ref="mapFormRef"
-            :model="mapFormData"
-          >
+          <el-form class="map_form" inline ref="mapFormRef" :model="mapFormData">
             <el-form-item label="日期" name="cxrq">
               <el-date-picker
-                style="width: 160px"
+                class="w-160"
                 v-model="mapFormData.cxrq"
                 value-format="YYYY-MM-DD"
                 placeholder="选择日期"
@@ -22,12 +17,7 @@
               />
             </el-form-item>
             <el-form-item label="行政区划" name="xzqhdm">
-              <el-select
-                style="width: 160px"
-                v-model="mapFormData.xzqhdm"
-                placeholder="请选择"
-                clearable
-              >
+              <el-select class="w-160" v-model="mapFormData.xzqhdm" placeholder="请选择" clearable>
                 <el-option
                   v-for="item in xzqhdmOptions"
                   :key="item.areaCode"
@@ -37,12 +27,7 @@
               </el-select>
             </el-form-item>
             <el-form-item label="粮食品种" name="lspzmc">
-              <el-select
-                style="width: 160px"
-                v-model="mapFormData.lspzmc"
-                placeholder="请选择"
-                clearable
-              >
+              <el-select class="w-160" v-model="mapFormData.lspzmc" placeholder="请选择" clearable>
                 <el-option
                   v-for="item in lspzOptions"
                   :key="item.value"
@@ -53,7 +38,7 @@
             </el-form-item>
             <el-form-item label="粮食等级" name="lsdjdm">
               <el-select
-                style="width: 160px"
+                class="w-160"
                 v-model="mapFormData.lsdjdm"
                 placeholder="请选择"
                 :options="lsdjOptions"
@@ -68,15 +53,8 @@
               </el-select>
             </el-form-item>
             <el-form-item label="库区名称" name="kqmc">
-              <!-- <el-input
-              style="width: 160px"
-              v-model="mapFormData.kqmc"
-              placeholder="请输入"
-              clearable
-            /> -->
-
               <el-select
-                style="width: 160px"
+                class="w-160"
                 value-key="id"
                 v-model="mapFormData.kqmc"
                 filterable
@@ -180,6 +158,7 @@
 </template>
 
 <script lang="ts" setup>
+import '@/utils/flexible'
 import Map from './compontent/Map2.vue'
 import Cbkc from './compontent/cbkc.vue'
 import Header from '../compontent/header.vue'
@@ -303,6 +282,7 @@ const getMapList = (data: any, isBackData: any) => {
   mapFormData.value.xzqhdm = data.xzqhdm + ''
   xzqhName.value = data.mapName
   isBack.value = isBackData.isBack
+
   if (isSearch.value) {
     router.push({
       query: {
@@ -320,51 +300,43 @@ onMounted(() => {
 </script>
 
 <style scoped>
-.ant-form-item {
-  margin-bottom: 0 !important;
-}
-.primaryAdd {
-  margin-right: 10px;
-}
 .snowy-buttom-left {
-  margin-left: 8px;
+  margin-left: 0.1rem;
 }
 .map-area {
-  margin-top: 10px;
-  /* height: 100vh; */
+  margin-top: 0.125rem;
   height: 100%;
 }
 .datacard {
   width: 100%;
-  /* height: 100%; */
-  height: 860px;
+  height: 10.75rem;
   background: url('@/assets/ksh/home/left-bj.png') no-repeat;
   background-size: 100% 100%;
   display: flex;
   flex-direction: column;
-  padding: 8px 20px;
+  padding: 0.1rem 0.25rem;
 }
 .datacard-title {
   width: 70%;
-  height: 30px;
+  height: 0.375rem;
   background: url('@/assets/ksh/home/left-span-bj.png') no-repeat;
   background-size: 100% 100%;
-  margin-top: 15px;
+  margin-top: 0.1875rem;
 }
 .datacard-title span {
   color: #ffffff;
-  font-size: 22px;
+  font-size: 0.275rem;
   font-weight: 700;
-  margin-left: 24px;
+  margin-left: 0.3rem;
 }
 .datacard-item {
   width: 100%;
-  height: 99px;
+  height: 1.2375rem;
   background: url('@/assets/ksh/home/left-kuang-bj.png') no-repeat;
   background-size: 100% 100%;
-  font-size: 18px;
+  font-size: 0.225rem;
   display: flex;
-  margin-top: 20px;
+  margin-top: 0.25rem;
 }
 .datacard-item .item-left {
   flex: 35%;
@@ -373,83 +345,54 @@ onMounted(() => {
   justify-content: flex-end;
 }
 .datacard-item .item-left span {
-  width: 80px;
-  height: 80px;
-  margin-top: 4px;
+  width: 1rem;
+  height: 1rem;
+  margin-top: 0.05rem;
   background: url('@/assets/ksh/home/left-icon.png') no-repeat;
   background-size: 100% 100%;
   position: relative;
 }
-.datacard-item .item-left .item-icon1::after {
+.datacard-item .item-left .item-icon1::after,
+.datacard-item .item-left .item-icon2::after,
+.datacard-item .item-left .item-icon3::after,
+.datacard-item .item-left .item-icon4::after,
+.datacard-item .item-left .item-icon5::after,
+.datacard-item .item-left .item-icon6::after {
   content: '';
   display: inline-block;
-  width: 30px;
-  height: 30px;
+  width: 0.375rem;
+  height: 0.375rem;
   position: absolute;
-  top: 24px;
-  left: 25px;
+  top: 0.3rem;
+  left: 0.3125rem;
+}
+.datacard-item .item-left .item-icon1::after {
   background: url('@/assets/ksh/home/icon-cckd.png') no-repeat;
   background-size: 100% 100%;
 }
 .datacard-item .item-left .item-icon2::after {
-  content: '';
-  display: inline-block;
-  width: 30px;
-  height: 30px;
-  position: absolute;
-  top: 24px;
-  left: 25px;
   background: url('@/assets/ksh/home/icon-cfgs.png') no-repeat;
   background-size: 100% 100%;
 }
 .datacard-item .item-left .item-icon3::after {
-  content: '';
-  display: inline-block;
-  width: 30px;
-  height: 30px;
-  position: absolute;
-  top: 24px;
-  left: 25px;
   background: url('@/assets/ksh/home/icon-crzl.png') no-repeat;
   background-size: 100% 100%;
 }
 .datacard-item .item-left .item-icon4::after {
-  content: '';
-  display: inline-block;
-  width: 30px;
-  height: 30px;
-  position: absolute;
-  top: 24px;
-  left: 25px;
   background: url('@/assets/ksh/home/icon-ckl.png') no-repeat;
   background-size: 100% 100%;
 }
 .datacard-item .item-left .item-icon5::after {
-  content: '';
-  display: inline-block;
-  width: 30px;
-  height: 30px;
-  position: absolute;
-  top: 24px;
-  left: 25px;
   background: url('@/assets/ksh/home/icon-rkl.png') no-repeat;
   background-size: 100% 100%;
 }
 .datacard-item .item-left .item-icon6::after {
-  content: '';
-  display: inline-block;
-  width: 30px;
-  height: 30px;
-  position: absolute;
-  top: 24px;
-  left: 25px;
   background: url('@/assets/ksh/home/icon-cbkc.png') no-repeat;
   background-size: 100% 100%;
 }
 .datacard-item .item-right {
   flex: 65%;
   height: 100%;
-  /* background: aqua; */
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -457,7 +400,7 @@ onMounted(() => {
 }
 .datacard-item .item-right .item-title {
   color: #e0e6f9;
-  margin-bottom: 15px;
+  margin-bottom: 0.1875rem;
 }
 .datacard-item .item-right .item-content {
   font-weight: 700;
@@ -466,25 +409,24 @@ onMounted(() => {
   -webkit-text-fill-color: transparent;
 }
 .container-page {
-  /* width: 1920px !important;
-  height: 1080px !important; */
   width: 100%;
   height: 100%;
-  overflow: auto;
+  overflow-x: hidden;
+  overflow-y: auto;
   background: url('@/assets/ksh/home/bj.jpg') no-repeat;
   background-size: 100% 100%;
 }
 .header {
-  width: 1920px;
-  height: 110px;
+  width: 24rem;
+  height: 1.375rem;
   text-align: center;
-  font-size: 24px;
+  font-size: 0.3rem;
   font-weight: 700;
   font-family: '黑体';
 }
 .container-body {
-  width: 1920px;
-  height: 970px;
+  width: 24rem;
+  height: 12.125rem;
 }
 @media (min-width: 1920px) and (min-height: 1080px) {
   .container-page {
@@ -492,16 +434,6 @@ onMounted(() => {
   }
 }
 
-.primarySele {
-  background: linear-gradient(to bottom, #081f4e, #1b5198);
-  border: #3c4d7e;
-  border-radius: 3px;
-  box-shadow: #3c4d7e 0 0 1px 1px;
-  color: #dee3ed;
-  margin-left: 15px;
-  margin-top: -16px;
-  width: 80px;
-}
 :deep(.el-input__wrapper) {
   background: linear-gradient(to bottom, #0a2354, #1b5198);
   border: #4385b5;
@@ -536,4 +468,62 @@ onMounted(() => {
   /* box-shadow: none; */
   box-shadow: 0 0 0 1px #4f78d9 inset;
 }
+.primarySele {
+  background: linear-gradient(to bottom, #081f4e, #1b5198);
+  border: #3c4d7e;
+  border-radius: 0.0375rem;
+  box-shadow: #3c4d7e 0 0 1px 1px;
+  color: #dee3ed;
+  margin-left: 0.1875rem;
+  margin-top: -0.2rem;
+  width: 1rem;
+}
+</style>
+<style lang="scss">
+.map_form {
+  padding-left: 0.25rem;
+  margin-top: 0.1875rem;
+  .w-160 {
+    width: 2rem;
+  }
+  .el-form-item--default {
+    --font-size: 0.175rem;
+    margin-bottom: 0.225rem;
+  }
+  .el-form-item {
+    --font-size: 0.175rem;
+    margin-bottom: 0.225rem;
+    margin-right: 0.4rem;
+  }
+  .el-form-item__label {
+    height: 0.4rem;
+    line-height: 0.4rem;
+    padding: 0 0.15rem 0 0;
+  }
+  .el-form-item--default .el-form-item__content {
+    line-height: 0.4rem;
+  }
+  .el-select__wrapper {
+    font-size: 0.175rem;
+    gap: 0.075rem;
+    line-height: 0.3rem;
+    min-height: 0.4rem;
+    padding: 0.05rem 0.15rem;
+  }
+  .el-input__wrapper {
+    font-size: 0.175rem;
+    padding: 0.0125rem 0.1375rem;
+  }
+}
+.el-date-editor.el-input,
+.el-date-editor.el-input__wrapper {
+  height: 0.4rem;
+}
+.el-select__selection {
+  max-height: 0.3rem;
+}
+.el-button {
+  font-size: 0.175rem;
+  height: 0.4rem;
+}
 </style>

src/views/VisualDisplay/src/pages/kq/index.vue

@@ -129,13 +129,13 @@
     </div>
 
     <div class="dialog_splb">
-      <el-dialog title="" v-model="Dialogvideo" width="1050px" top="15vh">
+      <el-dialog title="" v-model="Dialogvideo" width="13.125rem" top="15vh">
         <template #header="{}">
           <div class="dialog_title">
             <span class="dialog_title_text">视频列表</span>
             <div class="search_splb">
               <el-input
-                style="width: 260px"
+                style="width: 3.25rem"
                 v-model="kqmc"
                 @keyup.enter="searchClick()"
                 placeholder="请输入库区"
@@ -144,10 +144,10 @@
             </div>
           </div>
         </template>
-        <el-row style="height: 600px">
-          <el-col :span="6" style="margin-left: 20px" class="content_list">
+        <el-row style="height: 7.5rem">
+          <el-col :span="6" style="margin-left: 0.25rem" class="content_list">
             <div class="check_box">
-              <el-scrollbar class="custom-scrollbar" style="height: 500px">
+              <el-scrollbar class="custom-scrollbar" style="height: 6.25rem">
                 <el-checkbox-group @change="handleSetVideo" v-model="checkList" class="">
                   <el-checkbox
                     :label="item.jkdmc"
@@ -167,7 +167,7 @@
       </el-dialog>
     </div>
     <div class="dialog_cwxx">
-      <el-dialog title="" v-model="dialogVisibleDetail" width="840px" top="15vh">
+      <el-dialog title="" v-model="dialogVisibleDetail" width="10.5rem" top="15vh">
         <template #header="{}">
           <div class="dialog_title">
             <span class="dialog_title_text">财务信息补充</span>
@@ -184,8 +184,8 @@
             </div>
             <div class="cwxx_top_item">
               <span>上一年度总资产：</span>
-              <el-input style="width: 120px" v-model="cwxxData.syndzzc" placeholder="" />
-              <span style="margin-left: 5px">万元</span>
+              <el-input style="width: 1.5rem" v-model="cwxxData.syndzzc" placeholder="" />
+              <span style="margin-left: 0.0625rem">万元</span>
             </div>
           </div>
           <div class="cwxx_center">
@@ -197,17 +197,17 @@
               <div class="cwxx_item cwxx_title"> {{ item.cn }}年财务情况 </div>
               <div class="cwxx_item">
                 <span>总负债：</span>
-                <el-input style="width: 100px" v-model="item.zfz" placeholder="" />
+                <el-input style="width: 1.25rem" v-model="item.zfz" placeholder="" />
                 <span class="item_span">万元</span>
               </div>
               <div class="cwxx_item">
                 <span>营业收入：</span>
-                <el-input style="width: 100px" v-model="item.yysr" placeholder="" />
+                <el-input style="width: 1.25rem" v-model="item.yysr" placeholder="" />
                 <span class="item_span">万元</span>
               </div>
               <div class="cwxx_item">
                 <span>净利润：</span>
-                <el-input style="width: 100px" v-model="item.jlr" placeholder="" />
+                <el-input style="width: 1.25rem" v-model="item.jlr" placeholder="" />
                 <span class="item_span">万元</span>
               </div>
             </div>
@@ -227,6 +227,7 @@
 </template>
 
 <script lang="ts" setup>
+import '@/utils/flexible'
 import './static/h5play/h5player.min'
 import { Msg } from '@/utils/jytools'
 import Header from '@/views/VisualDisplay/src/compontent/header.vue'
@@ -521,18 +522,19 @@ onMounted(() => {
 .container-page {
   width: 100%;
   height: 100%;
-  overflow: auto;
+  overflow-x: hidden;
+  overflow-y: auto;
   background: url('@/assets/ksh/home/bj.jpg') no-repeat;
   background-size: 100% 100%;
   color: #ffffff;
 }
 .header {
-  width: 1920px;
-  height: 110px;
+  width: 24rem;
+  height: 1.375rem;
 }
 .container-body {
-  width: 1920px;
-  height: 970px;
+  width: 24rem;
+  height: 12.125rem;
 }
 @media (min-width: 1920px) and (min-height: 1080px) {
   .container-page {
@@ -542,25 +544,25 @@ onMounted(() => {
 .kqxx_box {
   width: 95%;
   margin-left: 5%;
-  height: 930px;
-  padding: 0 10px;
+  height: 11.625rem;
+  padding: 0 0.125rem;
   background: url('@/assets/ksh/kq/left-bj.png') no-repeat;
   background-size: 100% 100%;
-  margin-top: 5px;
+  margin-top: 0.0625rem;
 }
 .kqxx_box .box_title {
   width: 100%;
-  height: 45px;
-  padding-left: 40px;
+  height: 0.5625rem;
+  padding-left: 0.5rem;
   display: flex;
   align-items: center;
-  margin-bottom: 20px;
+  margin-bottom: 0.25rem;
 }
 .kqxx_box .box_title .title-top {
-  font-size: 28px;
+  font-size: 0.35rem;
   font-family: 'Pangmen';
   position: relative;
-  letter-spacing: 4px;
+  letter-spacing: 0.05rem;
   // margin-top: 5px;
   background: linear-gradient(to bottom, #f2fcfd, #a3e0fb);
   -webkit-background-clip: text;
@@ -569,13 +571,13 @@ onMounted(() => {
 .kqxx_box .box_title .title-top::before {
   content: '';
   display: inline-block;
-  width: 13px;
-  height: 16px;
+  width: 0.1625rem;
+  height: 0.2rem;
   background: url('@/assets/ksh/home/icon-square.png') no-repeat;
   background-size: 100% 100%;
   position: absolute;
-  left: -28px;
-  top: 8px;
+  left: -0.35rem;
+  top: 0.1rem;
 }
 .kqxx_box .box_table {
   width: 100%;
@@ -584,7 +586,7 @@ onMounted(() => {
 }
 
 .map-area {
-  margin-top: 10px;
+  margin-top: 0.125rem;
   height: 100%;
 }
 .map-area .map_top {
@@ -603,18 +605,18 @@ onMounted(() => {
 }
 .map-area .kqxx_title {
   width: 100%;
-  height: 45px;
-  padding-left: 50px;
+  height: 0.5625rem;
+  padding-left: 0.625rem;
   display: flex;
   justify-content: space-between;
   align-content: center;
 }
 .map-area .kqxx_title .kqxx_title_top {
-  font-size: 28px;
+  font-size: 0.35rem;
   font-family: 'Pangmen';
   position: relative;
-  letter-spacing: 4px;
-  margin-top: 12px;
+  letter-spacing: 0.05rem;
+  margin-top: 0.15rem;
   background: linear-gradient(to bottom, #f2fcfd, #a3e0fb);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
@@ -622,57 +624,57 @@ onMounted(() => {
 .map-area .kqxx_title .kqxx_title_top::before {
   content: '';
   display: inline-block;
-  width: 13px;
-  height: 16px;
+  width: 0.1625rem;
+  height: 0.2rem;
   background: url('@/assets/ksh/home/icon-square.png') no-repeat;
   background-size: 100% 100%;
   position: absolute;
-  left: -28px;
-  top: 8px;
+  left: -0.35rem;
+  top: 0.1rem;
 }
 .map-area .kqxx_title .title_btn {
   cursor: pointer;
-  width: 120px;
-  height: 36px;
-  padding-top: 7px;
-  padding-right: 10px;
+  width: 1.5rem;
+  height: 0.45rem;
+  padding-top: 0.0875rem;
+  padding-right: 0.125rem;
   text-align: right;
   float: right;
-  margin-top: 20px;
-  margin-right: 25px;
+  margin-top: 0.25rem;
+  margin-right: 0.3125rem;
   background: linear-gradient(to bottom, #1e3372, #1e5aa2);
   border: 1px solid #397ca9;
-  border-radius: 5px;
+  border-radius: 0.0625rem;
 }
 .map-area .kqxx_title .title_btn span {
-  font-size: 16px;
+  font-size: 0.2rem;
   position: relative;
 }
 .map-area .kqxx_title .title_btn span::before {
   content: '';
   display: inline-block;
-  width: 20px;
-  height: 20px;
+  width: 0.25rem;
+  height: 0.25rem;
   position: absolute;
-  top: 2px;
-  left: -26px;
+  top: 0.025rem;
+  left: -0.325rem;
   background: url('@/assets/ksh/kq/icon-sp.png') no-repeat;
   background-size: 100% 100%;
 }
 .map-area .kqxx_title .title_btn2 {
   cursor: pointer;
-  width: 120px;
-  height: 36px;
-  padding-top: 8px;
+  width: 1.5rem;
+  height: 0.45rem;
+  padding-top: 0.1rem;
   // padding-right: 12px;
   text-align: center;
   float: right;
-  margin-top: 20px;
-  margin-right: 25px;
+  margin-top: 0.25rem;
+  margin-right: 0.3125rem;
   background: linear-gradient(to bottom, #1e3372, #1e5aa2);
   border: 1px solid #397ca9;
-  border-radius: 5px;
-  font-size: 16px;
+  border-radius: 0.0625rem;
+  font-size: 0.2rem;
 }
 .map-area .img_content {
   width: 100%;
@@ -681,7 +683,7 @@ onMounted(() => {
   justify-content: center;
 }
 .map-area .img_content img {
-  margin-top: 30px;
+  margin-top: 0.375rem;
   // width: 90%;
   // height: auto;
   object-fit: contain;
@@ -689,60 +691,60 @@ onMounted(() => {
 .kqxx_content {
   width: 100%;
   height: 75%;
-  padding-top: 30px;
+  padding-top: 0.375rem;
   display: flex;
   flex-wrap: wrap;
   justify-content: flex-start;
 }
 .kqxx_content .box_item {
   width: 45%;
-  height: 50px;
+  height: 0.625rem;
   margin-left: 3.5%;
   display: flex;
 }
 .kqxx_content .box_item .box_icon {
-  width: 50px;
-  height: 50px;
+  width: 0.625rem;
+  height: 0.625rem;
   background: url('@/assets/ksh/kq/ku-icon-bj.png') no-repeat;
   background-size: 100% 100%;
   position: relative;
 }
 .kqxx_content .box_content {
   display: flex;
-  padding-right: 18px;
-  margin-left: 10px;
+  padding-right: 0.225rem;
+  margin-left: 0.125rem;
   justify-content: space-between;
   background: url('@/assets/ksh/kq/kq-bj.png') no-repeat;
   background-size: 100% 100%;
   width: 85%;
 }
 .kqxx_content .box_content span {
-  height: 35px;
-  line-height: 35px;
-  margin-top: 8px;
-  font-size: 18px;
+  height: 0.4375rem;
+  line-height: 0.4375rem;
+  margin-top: 0.1rem;
+  font-size: 0.225rem;
 }
 .kqxx_content .box_content .span_left {
-  width: 160px;
-  padding-left: 20px;
+  width: 2rem;
+  padding-left: 0.25rem;
 }
 .kqxx_content .box_content .span_tyshxydm {
-  font-size: 16px;
-  line-height: 20px;
-  margin-top: 6px;
+  font-size: 0.2rem;
+  line-height: 0.25rem;
+  margin-top: 0.075rem;
 }
 .kqxx_content .box_content .span_right {
-  margin-left: 10px;
+  margin-left: 0.125rem;
   width: 80%;
-  border-radius: 9px;
+  border-radius: 0.1125rem;
   color: #0df5f0;
   text-align: right;
 }
 .kqxx_content .box_content .span_special {
-  line-height: 20px;
+  line-height: 0.25rem;
 }
 .kqxx_content .box_content .span_special2 {
-  font-size: 16px;
+  font-size: 0.2rem;
 }
 .kqxx_content .box_content .span_detail {
   cursor: pointer;
@@ -754,7 +756,7 @@ onMounted(() => {
   background-color: transparent;
   color: rgba(255, 255, 255, 0.5);
   opacity: 0.8;
-  font-size: 12px;
+  font-size: 0.15rem;
 }
 
 :deep(
@@ -767,7 +769,7 @@ onMounted(() => {
 }
 
 :deep(.el-table--medium .el-table__cell) {
-  padding: 2px 0;
+  padding: 0.025rem 0;
 }
 
 .el-table {
@@ -776,14 +778,14 @@ onMounted(() => {
 
 :deep(.el-table),
 :deep(.el-table__expanded-cell) {
-  font-size: 14px;
+  font-size: 0.175rem;
 }
 :deep(.el-table th),
 :deep(.el-table tr),
 :deep(.el-table td) {
   background-color: transparent;
   color: #ffffff;
-  height: 60px;
+  height: 0.75rem;
 }
 
 :deep(.el-table--striped .el-table__body tr.el-table__row--striped td) {
@@ -806,7 +808,7 @@ onMounted(() => {
 }
 :deep(.el-table th.el-table__cell.is-leaf, .el-table td.el-table__cell) {
   border-bottom: 0px solid #dfe6ec;
-  font-size: 20px;
+  font-size: 0.25rem;
   font-weight: 500;
 }
 :deep(.el-table thead tr) {
@@ -825,7 +827,7 @@ onMounted(() => {
 }
 :deep(.el-table tbody tr.two-row) {
   background: url('@/assets/ksh/kq/list-bj2.png') 0 50% no-repeat !important;
-  background-size: 100% 15px !important;
+  background-size: 100% 0.1875rem !important;
 }
 :deep(.el-table tbody tr) {
   cursor: pointer;
@@ -833,36 +835,43 @@ onMounted(() => {
 
 .kqxx_content .box_item .box_icon::before {
   content: '';
-  width: 25px;
-  height: 25px;
+  width: 0.3125rem;
+  height: 0.3125rem;
   position: absolute;
-  top: 12px;
-  left: 12px;
-  background-size: 100% 100%;
+  top: 0.15rem;
+  left: 0.15rem;
 }
 .kqxx_content .box_item .icon_kq1::before {
   background: url('@/assets/ksh/kq/icon-kqmc.png') no-repeat;
+  background-size: 100% 100%;
 }
 .kqxx_content .box_item .icon_kq2::before {
   background: url('@/assets/ksh/kq/icon-kqbm.png') no-repeat;
+  background-size: 100% 100%;
 }
 .kqxx_content .box_item .icon_kq3::before {
   background: url('@/assets/ksh/kq/icon-qymc.png') no-repeat;
+  background-size: 100% 100%;
 }
 .kqxx_content .box_item .icon_kq4::before {
   background: url('@/assets/ksh/kq/icon-xydm.png') no-repeat;
+  background-size: 100% 100%;
 }
 .kqxx_content .box_item .icon_kq5::before {
   background: url('@/assets/ksh/kq/icon-cfsl.png') no-repeat;
+  background-size: 100% 100%;
 }
 .kqxx_content .box_item .icon_kq6::before {
   background: url('@/assets/ksh/kq/icon-ygsl.png') no-repeat;
+  background-size: 100% 100%;
 }
 .kqxx_content .box_item .icon_kq7::before {
   background: url('@/assets/ksh/kq/icon-sjcr.png') no-repeat;
+  background-size: 100% 100%;
 }
 .kqxx_content .box_item .icon_kq8::before {
   background: url('@/assets/ksh/kq/icon-cwzk.png') no-repeat;
+  background-size: 100% 100%;
 }
 
 // 弹窗
@@ -880,31 +889,31 @@ onMounted(() => {
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
-    max-height: calc(100% - 30px);
+    max-height: calc(100% - 0.375rem);
   }
   .el-dialog__body::-webkit-scrollbar {
     display: none;
   }
   .dialog_title {
     color: #ffffff;
-    font-size: 24px;
-    line-height: 20px;
+    font-size: 0.3rem;
+    line-height: 0.25rem;
     position: relative;
     .dialog_title_text {
-      margin-left: 30px;
+      margin-left: 0.375rem;
       // margin-top: -10px;
       position: relative;
     }
     .dialog_title_text::before {
       content: '';
       display: inline-block;
-      width: 13px;
-      height: 16px;
+      width: 0.1625rem;
+      height: 0.2rem;
       background: url('@/assets/ksh/home/icon-square.png') no-repeat;
       background-size: 100% 100%;
       position: absolute;
-      top: 8px;
-      left: -24px;
+      top: 0.1rem;
+      left: -0.3rem;
     }
     .search_splb {
       position: absolute;
@@ -914,19 +923,19 @@ onMounted(() => {
     }
     .search_splb .search_icon {
       display: inline-block;
-      width: 17px;
-      height: 17px;
+      width: 0.2125rem;
+      height: 0.2125rem;
       background: url('@/assets/ksh/dialog/icon-search.png') no-repeat;
       background-size: 100% 100%;
       position: absolute;
-      right: 8px;
-      top: 7px;
+      right: 0.1rem;
+      top: 0.0875rem;
       cursor: pointer;
     }
   }
   .el-dialog__headerbtn {
-    top: 6px;
-    right: 6px;
+    top: 0.075rem;
+    right: 0.075rem;
   }
   .el-dialog__headerbtn .el-dialog__close {
     display: none;
@@ -934,8 +943,8 @@ onMounted(() => {
   .el-dialog__headerbtn::before {
     content: '';
     display: inline-block;
-    width: 15px;
-    height: 15px;
+    width: 0.1875rem;
+    height: 0.1875rem;
     background: url('@/assets/ksh/dialog/close.png') no-repeat;
     background-size: 100% 100%;
   }
@@ -945,9 +954,12 @@ onMounted(() => {
   // background: linear-gradient(to bottom, #121e42, #304687);
   background: transparent;
   border: #1863ad;
-  border-radius: 3px;
+  border-radius: 0.0375rem;
   box-shadow: #1863ad 0 0 1px 1px;
   color: #ffffff;
+  font-size: 0.175rem;
+  padding: 0.0125rem 0.1375rem;
+  height: 0.4rem;
 }
 :deep(.el-input__inner) {
   color: #e1e7f3;
@@ -962,7 +974,7 @@ onMounted(() => {
 :deep(.content_list) {
   width: 100%;
   height: 100%;
-  padding: 18px 0;
+  padding: 0.225rem 0;
   .check_box {
     width: 100%;
     height: 100%;
@@ -970,24 +982,24 @@ onMounted(() => {
     background-size: 100% 100%;
     .list_item {
       width: 100%;
-      padding: 20px 20px;
-      margin-top: 15px;
+      padding: 0.25rem 0.25rem;
+      margin-top: 0.1875rem;
     }
     .el-checkbox__label {
-      font-size: 18px;
-      padding-left: 18px;
+      font-size: 0.225rem;
+      padding-left: 0.225rem;
       color: #ffffff;
     }
     .el-checkbox__inner {
-      width: 18px;
-      height: 18px;
-      border: 1px solid #1f77d1;
+      width: 0.225rem;
+      height: 0.225rem;
+      border: 0.0125rem solid #1f77d1;
       background: transparent;
     }
     .el-checkbox__inner::after {
-      height: 8px;
-      left: 5px;
-      width: 5px;
+      height: 0.1rem;
+      left: 0.0625rem;
+      width: 0.0625rem;
       border-color: #7cbbed;
     }
   }
@@ -1002,26 +1014,26 @@ onMounted(() => {
   flex-wrap: wrap;
   width: 100%;
   height: 100%;
-  padding: 15px;
+  padding: 0.1875rem;
 }
 .view_box .view_item {
   width: 45%;
   height: 48%;
   background: #cccccc7e;
-  border-radius: 10px;
+  border-radius: 0.125rem;
 }
 
 .table-box {
-  margin-top: 20px;
+  margin-top: 0.25rem;
   background: url('@/assets/ksh/dialog/sp-list-bj.png') no-repeat;
   background-size: 100% 100%;
 }
 
 .video-box {
-  width: 756px !important;
-  height: 608px !important;
+  width: 9.45rem !important;
+  height: 7.6rem !important;
   // overflow: hidden;
-  padding: 30px 20px 15px;
+  padding: 0.375rem 0.25rem 0.1875rem;
 }
 
 // 弹窗2
@@ -1039,35 +1051,35 @@ onMounted(() => {
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
-    max-height: calc(100% - 30px);
+    max-height: calc(100% - 0.375rem);
   }
   .el-dialog__body::-webkit-scrollbar {
     display: none;
   }
   .dialog_title {
     color: #ffffff;
-    font-size: 24px;
-    line-height: 20px;
+    font-size: 0.3rem;
+    line-height: 0.25rem;
     position: relative;
     .dialog_title_text {
-      margin-left: 30px;
+      margin-left: 0.375rem;
       position: relative;
     }
     .dialog_title_text::before {
       content: '';
       display: inline-block;
-      width: 13px;
-      height: 16px;
+      width: 0.1625rem;
+      height: 0.2rem;
       background: url('@/assets/ksh/home/icon-square.png') no-repeat;
       background-size: 100% 100%;
       position: absolute;
-      top: 8px;
-      left: -24px;
+      top: 0.1rem;
+      left: -0.3rem;
     }
   }
   .el-dialog__headerbtn {
-    top: 6px;
-    right: 6px;
+    top: 0.075rem;
+    right: 0.075rem;
   }
   .el-dialog__headerbtn .el-dialog__close {
     display: none;
@@ -1075,8 +1087,8 @@ onMounted(() => {
   .el-dialog__headerbtn::before {
     content: '';
     display: inline-block;
-    width: 15px;
-    height: 15px;
+    width: 0.1875rem;
+    height: 0.1875rem;
     background: url('@/assets/ksh/dialog/close.png') no-repeat;
     background-size: 100% 100%;
   }
@@ -1085,7 +1097,7 @@ onMounted(() => {
     // background: linear-gradient(to bottom, #121e42, #304687);
     background: #14538c;
     border: #14538c;
-    border-radius: 5px;
+    border-radius: 0.0625rem;
     box-shadow: #14538c 0 0 1px 1px;
     color: #ffffff;
   }
@@ -1097,23 +1109,23 @@ onMounted(() => {
 
 .cwxx_content {
   width: 100%;
-  height: 420px;
-  padding: 5px 10px;
+  height: 5.25rem;
+  padding: 0.0625rem 0.125rem;
   color: #ffffff;
-  font-size: 16px;
+  font-size: 0.2rem;
   .cwxx_top {
     display: flex;
     justify-content: space-between;
-    padding: 25px 0;
+    padding: 0.3125rem 0;
     .cwxx_top_item_span {
-      margin-right: 15px;
+      margin-right: 0.1875rem;
     }
   }
   .cwxx_center {
     display: flex;
     justify-content: space-between;
     width: 100%;
-    height: 260px;
+    height: 3.25rem;
   }
   .cwxx_center_item {
     width: 30%;
@@ -1124,23 +1136,23 @@ onMounted(() => {
     flex-direction: column;
     align-items: center;
     .cwxx_item {
-      margin: 15px 0;
+      margin: 0.1875rem 0;
       span {
         display: inline-block;
-        width: 85px;
+        width: 1.0625rem;
         text-align: right;
       }
       .item_span {
-        width: 40px;
+        width: 0.5rem;
       }
     }
   }
   .cwxx_bottom {
     display: flex;
     align-items: center;
-    margin-top: 15px;
+    margin-top: 0.1875rem;
     .cwxx_bottom_span {
-      width: 60px;
+      width: 0.75rem;
     }
   }
 }