直升机、机动无人机、卫星电话增加分页

src/components/HKVideo/index.vue

@@ -15,7 +15,7 @@
           <div class="err_inner_box">
             <div class="err_icon"></div>
             <div class="err_text">视频解析错误</div>
-            <div class="refresh_btn" @click="play_now">刷新</div>
+            <div class="refresh_btn" @click="play">刷新</div>
           </div>
         </div>
       </div>
@@ -88,7 +88,7 @@ watch(
     nextTick(() => {
       if (props.autoplay) {
         reload.value = false;
-        play_now();
+        play_now(true);
       }
     });
   },
@@ -96,9 +96,12 @@ watch(
     deep: true
   }
 );
-const play_now = async () => {
-  console.log('play_now');
+const play_now = async (check?: boolean) => {
   posterVisible.value = false;
+  // if (check === true && props.dot_data.status === '离线') {
+  //   errBKVisible.value = true;
+  //   isPlaying.value = false;
+  // } else {
   errBKVisible.value = false;
   isPlaying.value = true;
   // 视频监控数据
@@ -106,6 +109,8 @@ const play_now = async () => {
     wsUrl.value = res.data;
     videoPlayer.value.play(wsUrl.value);
   });
+  // }
+  console.log('play_now');
 };
 
 const stop_now = async () => {
@@ -130,7 +135,7 @@ defineExpose({
 });
 onMounted(() => {
   if (!!props.autoplay) {
-    play_now();
+    play_now(true);
   }
 });
 </script>

src/types/components.d.ts

@@ -24,14 +24,24 @@ declare module 'vue' {
     DistributionMap: typeof import('./../components/Map/YztMap/DistributionMap.vue')['default']
     DrawMap: typeof import('./../components/Map/YztMap/DrawMap.vue')['default']
     Editor: typeof import('./../components/Editor/index.vue')['default']
+    ElAnchor: typeof import('element-plus/es')['ElAnchor']
+    ElAnchorLink: typeof import('element-plus/es')['ElAnchorLink']
     ElAutocomplete: typeof import('element-plus/es')['ElAutocomplete']
     ElBadge: typeof import('element-plus/es')['ElBadge']
     ElButton: typeof import('element-plus/es')['ElButton']
+    ElCard: typeof import('element-plus/es')['ElCard']
     ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
+    ElCheckboxButton: typeof import('element-plus/es')['ElCheckboxButton']
+    ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
     ElCol: typeof import('element-plus/es')['ElCol']
+    ElCollapse: typeof import('element-plus/es')['ElCollapse']
+    ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem']
     ElColorPicker: typeof import('element-plus/es')['ElColorPicker']
     ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
+    ElContainer: typeof import('element-plus/es')['ElContainer']
     ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
+    ElDescriptions: typeof import('element-plus/es')['ElDescriptions']
+    ElDescriptionsItem: typeof import('element-plus/es')['ElDescriptionsItem']
     ElDialog: typeof import('element-plus/es')['ElDialog']
     ElDivider: typeof import('element-plus/es')['ElDivider']
     ElDrawer: typeof import('element-plus/es')['ElDrawer']
@@ -41,28 +51,45 @@ declare module 'vue' {
     ElEmpty: typeof import('element-plus/es')['ElEmpty']
     ElForm: typeof import('element-plus/es')['ElForm']
     ElFormItem: typeof import('element-plus/es')['ElFormItem']
+    ElHeader: typeof import('element-plus/es')['ElHeader']
     ElIcon: typeof import('element-plus/es')['ElIcon']
     ElImage: typeof import('element-plus/es')['ElImage']
     ElInput: typeof import('element-plus/es')['ElInput']
+    ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
+    ElLink: typeof import('element-plus/es')['ElLink']
+    ElMain: typeof import('element-plus/es')['ElMain']
     ElMenu: typeof import('element-plus/es')['ElMenu']
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
     ElOption: typeof import('element-plus/es')['ElOption']
     ElPagination: typeof import('element-plus/es')['ElPagination']
     ElPopover: typeof import('element-plus/es')['ElPopover']
+    ElRadio: typeof import('element-plus/es')['ElRadio']
+    ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
+    ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
     ElRow: typeof import('element-plus/es')['ElRow']
     ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
+    ElSegmented: typeof import('element-plus/es')['ElSegmented']
     ElSelect: typeof import('element-plus/es')['ElSelect']
+    ElSkeleton: typeof import('element-plus/es')['ElSkeleton']
+    ElSkeletonItem: typeof import('element-plus/es')['ElSkeletonItem']
     ElSlider: typeof import('element-plus/es')['ElSlider']
+    ElSpace: typeof import('element-plus/es')['ElSpace']
+    ElStep: typeof import('element-plus/es')['ElStep']
+    ElSteps: typeof import('element-plus/es')['ElSteps']
     ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
     ElSwitch: typeof import('element-plus/es')['ElSwitch']
     ElTable: typeof import('element-plus/es')['ElTable']
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
+    ElTabPane: typeof import('element-plus/es')['ElTabPane']
+    ElTabs: typeof import('element-plus/es')['ElTabs']
     ElTag: typeof import('element-plus/es')['ElTag']
     ElText: typeof import('element-plus/es')['ElText']
     ElTimeline: typeof import('element-plus/es')['ElTimeline']
     ElTimelineItem: typeof import('element-plus/es')['ElTimelineItem']
+    ElTimePicker: typeof import('element-plus/es')['ElTimePicker']
     ElTooltip: typeof import('element-plus/es')['ElTooltip']
     ElTree: typeof import('element-plus/es')['ElTree']
+    ElTreeSelect: typeof import('element-plus/es')['ElTreeSelect']
     ElUpload: typeof import('element-plus/es')['ElUpload']
     ExcelEditor: typeof import('./../components/ExcelEditor/index.vue')['default']
     FileUpload: typeof import('./../components/FileUpload/index.vue')['default']
@@ -74,6 +101,9 @@ declare module 'vue' {
     HikvisionPlayer: typeof import('./../components/HKVideo/hikvision-player.vue')['default']
     HKVideo: typeof import('./../components/HKVideo/index.vue')['default']
     IconSelect: typeof import('./../components/IconSelect/index.vue')['default']
+    IEpCaretBottom: typeof import('~icons/ep/caret-bottom')['default']
+    IEpCaretTop: typeof import('~icons/ep/caret-top')['default']
+    IEpUploadFilled: typeof import('~icons/ep/upload-filled')['default']
     IFrame: typeof import('./../components/iFrame/index.vue')['default']
     ImagePreview: typeof import('./../components/ImagePreview/index.vue')['default']
     ImageUpload: typeof import('./../components/ImageUpload/index.vue')['default']

src/views/emergencyCommandMap/LeftSection/VideoMonitorEdit.vue

@@ -12,9 +12,7 @@
               class="custom-select"
               popper-class="custom-select-popper"
               :teleported="false"
-              placeholder="全部"
             >
-              <el-option label="全部" value="" />
               <el-option v-for="item in video_type" :key="item.value" :label="item.label" :value="item.value" />
             </el-select>
           </el-form-item>

src/views/globalMap/RightMenu/Helicopter.vue

@@ -18,15 +18,26 @@
         <div class="td" style="width: 80px; flex: unset">操作</div>
       </div>
       <div class="table-content">
-        <div v-for="(item, index) in dataList" :key="item.id" class="tr">
+        <div v-for="item in dataList" :key="item.id" class="tr">
           <div class="td">{{ item.drone_name }}</div>
           <div class="td" style="width: 80px; flex: unset">
-            <div class="text" @click="handleConnect(index, item)">连线</div>
+            <div class="text" @click="handleConnect">连线</div>
             <!--            <div class="text" @click="handleCollaborate(index, item)">协同</div>-->
             <div class="text" @click="handleTrack(item)">轨迹</div>
           </div>
         </div>
       </div>
+      <div class="footer">
+        <el-pagination
+          background
+          :hide-on-single-page="true"
+          layout="total, prev, pager, next"
+          :total="total"
+          :page-size="queryParams.size"
+          :current-page="queryParams.current"
+          @current-change="handleChangePage"
+        />
+      </div>
     </div>
   </div>
 </template>
@@ -37,31 +48,37 @@ import { onMounted, reactive } from 'vue';
 import { getDroneResourcesList, getDroneResourcesTrajectory } from '@/api/globalMap/MobileCommandVehicle';
 const trackPlayback = inject('trackPlayback');
 // 数据列表,直接定义为数组
-const dataList = reactive([]);
-//入参
+const dataList = ref([]);
+// 入参
 const queryParams = reactive({
+  current: 1,
+  size: 10,
   keywords: ''
 });
+const total = ref(0);
 //调接口
 const initData = () => {
   getDroneResourcesList({
+    current: queryParams.current,
+    size: queryParams.size,
     query: {
       keywords: queryParams.keywords
     }
   }).then((res) => {
-    if (res.code === 0 && Array.isArray(res.rows)) {
-      dataList.splice(0, dataList.length, ...res.rows); // 使用 splice 替换数组内容，保持响应性
-    } else {
-      console.error('Invalid response from server:', res);
-      // 可以选择清空数据列表或显示错误消息
-      dataList.splice(0, dataList.length); // 清空数据列表
-    }
+    dataList.value = res.rows;
+    total.value = res.total;
   });
 };
 
+const handleChangePage = (newNum) => {
+  queryParams.current = newNum;
+  initData();
+};
+
 // 取消按钮的逻辑，搜索框清空并重新加载数据
 const handleCancel = () => {
   queryParams.keywords = '';
+  queryParams.current = 1;
   initData();
 };
 const handleConnect = () => {};
@@ -110,11 +127,13 @@ onMounted(() => {
   }
 }
 .custom-table {
-  width: 550px;
+  width: 100%;
+  height: 470px;
+  display: flex;
+  flex-direction: column;
   .table-content {
-    height: 385px;
+    flex: 1;
     overflow-y: auto;
-    overflow-x: hidden;
   }
   .th {
     background: url('@/assets/images/map/rightMenu/th.png') no-repeat;
@@ -184,4 +203,47 @@ onMounted(() => {
   font-size: 14px; /* 根据需要设置字体大小 */
   line-height: 1; /* 确保行高一致 */
 }
+.footer {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 8px;
+  .pagination-container {
+    margin: 0;
+  }
+  :deep(.el-pagination__total) {
+    color: #a7ccdf !important;
+  }
+  :deep(.el-pagination) {
+    .btn-next,
+    .btn-prev {
+      background-color: transparent !important;
+      border: none !important;
+      .el-icon {
+        color: #a7ccdf !important;
+      }
+    }
+    .btn-prev:disabled,
+    .btn-next:disabled {
+      background-color: transparent !important;
+      border: none;
+    }
+    .el-pager li {
+      text-align: center;
+      color: #a7ccdf !important;
+      background-color: #0e3064 !important;
+      border: 1px solid #0c57a7 !important;
+      &:hover {
+        background-color: #038dff !important;
+        border: 1px solid #038dff !important;
+      }
+    }
+    .el-pager li.is-active {
+      background-color: #038dff !important;
+      border: 1px solid #038dff !important;
+    }
+    .el-pagination__goto {
+      color: #a7ccdf !important;
+    }
+  }
+}
 </style>

src/views/globalMap/RightMenu/KeyVehicles.vue

@@ -207,38 +207,38 @@ onMounted(() => {
     margin: 0;
   }
   :deep(.el-pagination__total) {
-    color: #a7ccdf;
+    color: #a7ccdf !important;
   }
   :deep(.el-pagination) {
     .btn-next,
     .btn-prev {
-      background-color: transparent;
-      border: none;
+      background-color: transparent !important;
+      border: none !important;
       .el-icon {
-        color: #a7ccdf;
+        color: #a7ccdf !important;
       }
     }
     .btn-prev:disabled,
     .btn-next:disabled {
-      background-color: transparent;
+      background-color: transparent !important;
       border: none;
     }
     .el-pager li {
       text-align: center;
-      color: #a7ccdf;
-      background-color: #0e3064;
-      border: 1px solid #0c57a7;
+      color: #a7ccdf !important;
+      background-color: #0e3064 !important;
+      border: 1px solid #0c57a7 !important;
       &:hover {
-        background-color: #038dff;
-        border: 1px solid #038dff;
+        background-color: #038dff !important;
+        border: 1px solid #038dff !important;
       }
     }
     .el-pager li.is-active {
-      background-color: #038dff;
-      border: 1px solid #038dff;
+      background-color: #038dff !important;
+      border: 1px solid #038dff !important;
     }
     .el-pagination__goto {
-      color: #a7ccdf;
+      color: #a7ccdf !important;
     }
   }
 }

src/views/globalMap/RightMenu/MobileCommandVehicle.vue

@@ -58,7 +58,7 @@ const queryParams = reactive({
 const total = ref(0);
 //调接口
 const initData = () => {
-  getMobileCommandVehicleList({
+  getDroneResourcesList({
     current: queryParams.current,
     size: queryParams.size,
     query: {
@@ -127,11 +127,13 @@ onMounted(() => {
   }
 }
 .custom-table {
-  width: 550px;
+  width: 100%;
+  height: 470px;
+  display: flex;
+  flex-direction: column;
   .table-content {
-    height: 385px;
+    flex: 1;
     overflow-y: auto;
-    overflow-x: hidden;
   }
   .th {
     background: url('@/assets/images/map/rightMenu/th.png') no-repeat;
@@ -201,4 +203,47 @@ onMounted(() => {
   font-size: 14px; /* 根据需要设置字体大小 */
   line-height: 1; /* 确保行高一致 */
 }
+.footer {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 8px;
+  .pagination-container {
+    margin: 0;
+  }
+  :deep(.el-pagination__total) {
+    color: #a7ccdf !important;
+  }
+  :deep(.el-pagination) {
+    .btn-next,
+    .btn-prev {
+      background-color: transparent !important;
+      border: none !important;
+      .el-icon {
+        color: #a7ccdf !important;
+      }
+    }
+    .btn-prev:disabled,
+    .btn-next:disabled {
+      background-color: transparent !important;
+      border: none;
+    }
+    .el-pager li {
+      text-align: center;
+      color: #a7ccdf !important;
+      background-color: #0e3064 !important;
+      border: 1px solid #0c57a7 !important;
+      &:hover {
+        background-color: #038dff !important;
+        border: 1px solid #038dff !important;
+      }
+    }
+    .el-pager li.is-active {
+      background-color: #038dff !important;
+      border: 1px solid #038dff !important;
+    }
+    .el-pagination__goto {
+      color: #a7ccdf !important;
+    }
+  }
+}
 </style>

src/views/globalMap/RightMenu/MobilePlatform.vue

@@ -201,38 +201,38 @@ onMounted(() => {
     margin: 0;
   }
   :deep(.el-pagination__total) {
-    color: #a7ccdf;
+    color: #a7ccdf !important;
   }
   :deep(.el-pagination) {
     .btn-next,
     .btn-prev {
-      background-color: transparent;
-      border: none;
+      background-color: transparent !important;
+      border: none !important;
       .el-icon {
-        color: #a7ccdf;
+        color: #a7ccdf !important;
       }
     }
     .btn-prev:disabled,
     .btn-next:disabled {
-      background-color: transparent;
+      background-color: transparent !important;
       border: none;
     }
     .el-pager li {
       text-align: center;
-      color: #a7ccdf;
-      background-color: #0e3064;
-      border: 1px solid #0c57a7;
+      color: #a7ccdf !important;
+      background-color: #0e3064 !important;
+      border: 1px solid #0c57a7 !important;
       &:hover {
-        background-color: #038dff;
-        border: 1px solid #038dff;
+        background-color: #038dff !important;
+        border: 1px solid #038dff !important;
       }
     }
     .el-pager li.is-active {
-      background-color: #038dff;
-      border: 1px solid #038dff;
+      background-color: #038dff !important;
+      border: 1px solid #038dff !important;
     }
     .el-pagination__goto {
-      color: #a7ccdf;
+      color: #a7ccdf !important;
     }
   }
 }

src/views/globalMap/RightMenu/MobileUnmannedVehicle.vue

@@ -14,7 +14,7 @@
     </div>
     <div class="flex-container">
       <div class="text-item">机动无人机</div>
-      <div class="button-item common-btn-primary2 edit-icon" style="margin-top: -10px">全部播放</div>
+      <div class="button-item common-btn-primary2 edit-icon">全部播放</div>
     </div>
     <div class="custom-table">
       <div class="th">
@@ -22,15 +22,26 @@
         <div class="td" style="width: 80px; flex: unset">操作</div>
       </div>
       <div class="table-content">
-        <div v-for="(item, index) in dataList" :key="item.id" class="tr">
+        <div v-for="item in dataList" :key="item.id" class="tr">
           <div class="td">{{ item.drone_name }}</div>
           <div class="td" style="width: 80px; flex: unset">
-            <div class="text" @click="handleConnect(index, item)">视频</div>
+            <div class="text" @click="handleConnect">视频</div>
 <!--            <div class="text" @click="handleCollaborate(index, item)">协同</div>-->
             <div class="text" @click="handleTrack(item)">轨迹</div>
           </div>
         </div>
       </div>
+      <div class="footer">
+        <el-pagination
+          background
+          :hide-on-single-page="true"
+          layout="total, prev, pager, next"
+          :total="total"
+          :page-size="queryParams.size"
+          :current-page="queryParams.current"
+          @current-change="handleChangePage"
+        />
+      </div>
     </div>
   </div>
 </template>
@@ -41,31 +52,37 @@ import { onMounted, reactive } from 'vue';
 import { getDroneResourcesList, getDroneResourcesTrajectory } from '@/api/globalMap/MobileUnmannedVehicle';
 const trackPlayback = inject('trackPlayback');
 // 数据列表,直接定义为数组
-const dataList = reactive([]);
-//入参
+const dataList = ref([]);
+// 入参
 const queryParams = reactive({
+  current: 1,
+  size: 10,
   keywords: ''
 });
+const total = ref(0);
 //调接口
 const initData = () => {
   getDroneResourcesList({
+    current: queryParams.current,
+    size: queryParams.size,
     query: {
       keywords: queryParams.keywords
     }
   }).then((res) => {
-    if (res.code === 0 && Array.isArray(res.rows)) {
-      dataList.splice(0, dataList.length, ...res.rows); // 使用 splice 替换数组内容，保持响应性
-    } else {
-      console.error('Invalid response from server:', res);
-      // 可以选择清空数据列表或显示错误消息
-      dataList.splice(0, dataList.length); // 清空数据列表
-    }
+    dataList.value = res.rows;
+    total.value = res.total;
   });
 };
 
+const handleChangePage = (newNum) => {
+  queryParams.current = newNum;
+  initData();
+};
+
 // 取消按钮的逻辑，搜索框清空并重新加载数据
 const handleCancel = () => {
   queryParams.keywords = '';
+  queryParams.current = 1;
   initData();
 };
 const handleConnect = () => {};
@@ -114,11 +131,13 @@ onMounted(() => {
   }
 }
 .custom-table {
-  width: 550px;
+  width: 100%;
+  height: 470px;
+  display: flex;
+  flex-direction: column;
   .table-content {
-    height: 385px;
+    flex: 1;
     overflow-y: auto;
-    overflow-x: hidden;
   }
   .th {
     background: url('@/assets/images/map/rightMenu/th.png') no-repeat;
@@ -178,6 +197,7 @@ onMounted(() => {
   display: flex;
   justify-content: space-between; /* 左右两端对齐 */
   align-items: center; /* 垂直居中对齐 */
+  margin: 8px 0;
 }
 .text-item {
   font-size: 16px; /* 根据需要设置字体大小 */
@@ -188,4 +208,47 @@ onMounted(() => {
   font-size: 14px; /* 根据需要设置字体大小 */
   line-height: 1; /* 确保行高一致 */
 }
+.footer {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 8px;
+  .pagination-container {
+    margin: 0;
+  }
+  :deep(.el-pagination__total) {
+    color: #a7ccdf !important;
+  }
+  :deep(.el-pagination) {
+    .btn-next,
+    .btn-prev {
+      background-color: transparent !important;
+      border: none !important;
+      .el-icon {
+        color: #a7ccdf !important;
+      }
+    }
+    .btn-prev:disabled,
+    .btn-next:disabled {
+      background-color: transparent !important;
+      border: none;
+    }
+    .el-pager li {
+      text-align: center;
+      color: #a7ccdf !important;
+      background-color: #0e3064 !important;
+      border: 1px solid #0c57a7 !important;
+      &:hover {
+        background-color: #038dff !important;
+        border: 1px solid #038dff !important;
+      }
+    }
+    .el-pager li.is-active {
+      background-color: #038dff !important;
+      border: 1px solid #038dff !important;
+    }
+    .el-pagination__goto {
+      color: #a7ccdf !important;
+    }
+  }
+}
 </style>

src/views/globalMap/RightMenu/SatellitePhone.vue

@@ -18,55 +18,72 @@
         <div class="td" style="width: 120px; flex: unset">操作</div>
       </div>
       <div class="table-content">
-        <div v-for="(item, index) in dataList" :key="item.id" class="tr">
+        <div v-for="item in dataList" :key="item.id" class="tr">
           <div class="td">{{ item.name }}</div>
           <div class="td">{{ item.unit_name }}</div>
           <div class="td" style="width: 120px; flex: unset">
-            <div class="text" @click="handleConnect(index, item)">连线</div>
-            <div class="text" size="small" @click="handleCollaborate(index, item)">电话</div>
+            <div class="text" @click="handleConnect">连线</div>
+            <div class="text" size="small" @click="handleCollaborate">电话</div>
             <div class="text" size="small" @click="handleTrack(item)">轨迹</div>
           </div>
         </div>
       </div>
     </div>
+    <div class="footer">
+      <el-pagination
+        background
+        :hide-on-single-page="true"
+        layout="total, prev, pager, next"
+        :total="total"
+        :page-size="queryParams.size"
+        :current-page="queryParams.current"
+        @current-change="handleChangePage"
+      />
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { Search } from '@element-plus/icons-vue';
 import { onMounted, reactive } from 'vue';
-import { getSatellitePhoneList, getSatellitePhoneTrajectory } from "@/api/globalMap/SatellitePhone";
+import { getSatellitePhoneList, getSatellitePhoneTrajectory } from '@/api/globalMap/SatellitePhone';
 
 const trackPlayback = inject('trackPlayback');
 
 // 数据列表,直接定义为数组
-const dataList = reactive([]);
-//入参
+const dataList = ref([]);
+// 入参
 const queryParams = reactive({
+  current: 1,
+  size: 10,
   keywords: '',
   unit_name: ''
 });
+const total = ref(0);
 //调接口
 const initData = () => {
   getSatellitePhoneList({
+    current: queryParams.current,
+    size: queryParams.size,
     query: {
       keywords: queryParams.keywords,
       unit_name: queryParams.unit_name
     }
   }).then((res) => {
-    if (res.code === 0 && Array.isArray(res.rows)) {
-      dataList.splice(0, dataList.length, ...res.rows); // 使用 splice 替换数组内容，保持响应性
-    } else {
-      console.error('Invalid response from server:', res);
-      // 可以选择清空数据列表或显示错误消息
-      dataList.splice(0, dataList.length); // 清空数据列表
-    }
+    dataList.value = res.rows;
+    total.value = res.total;
   });
 };
 
+const handleChangePage = (newNum) => {
+  queryParams.current = newNum;
+  initData();
+};
+
 // 取消按钮的逻辑，搜索框清空并重新加载数据
 const handleCancel = () => {
   queryParams.keywords = '';
+  queryParams.current = 1;
   initData();
 };
 
@@ -117,11 +134,13 @@ onMounted(() => {
   }
 }
 .custom-table {
-  width: 550px;
+  width: 100%;
+  height: 430px;
+  display: flex;
+  flex-direction: column;
   .table-content {
-    height: 385px;
+    flex: 1;
     overflow-y: auto;
-    overflow-x: hidden;
   }
   .th {
     background: url('@/assets/images/map/rightMenu/th.png') no-repeat;
@@ -176,4 +195,47 @@ onMounted(() => {
     margin-right: 0;
   }
 }
+.footer {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 8px;
+  .pagination-container {
+    margin: 0;
+  }
+  :deep(.el-pagination__total) {
+    color: #a7ccdf !important;
+  }
+  :deep(.el-pagination) {
+    .btn-next,
+    .btn-prev {
+      background-color: transparent !important;
+      border: none !important;
+      .el-icon {
+        color: #a7ccdf !important;
+      }
+    }
+    .btn-prev:disabled,
+    .btn-next:disabled {
+      background-color: transparent !important;
+      border: none;
+    }
+    .el-pager li {
+      text-align: center;
+      color: #a7ccdf !important;
+      background-color: #0e3064 !important;
+      border: 1px solid #0c57a7 !important;
+      &:hover {
+        background-color: #038dff !important;
+        border: 1px solid #038dff !important;
+      }
+    }
+    .el-pager li.is-active {
+      background-color: #038dff !important;
+      border: 1px solid #038dff !important;
+    }
+    .el-pagination__goto {
+      color: #a7ccdf !important;
+    }
+  }
+}
 </style>