移动轨迹接入

src/assets/styles/element-ui.scss

@@ -522,12 +522,12 @@
 
 .custom-select-popper {
   left: 0 !important;
+  border: 1px solid #2C81FF !important;
   .el-popper.is-light .el-popper__arrow:before {
     background: #0d1d4e;
   }
   .el-scrollbar {
     background-color: rgba(5, 18, 53, 0.85) !important;
-    border: 1px solid #2C81FF !important;
     border-radius: 0;
     box-shadow:inset  0 0 4px rgba(26, 144, 255, 0.5) !important;
     .el-select-dropdown__item {
@@ -586,9 +586,9 @@
 
 .custom-select-popper2 {
   left: 0 !important;
+  border: 1px solid #2C81FF !important;
   .el-scrollbar {
     background-color: rgba(5, 18, 53, 0.85) !important;
-    border: 4px solid #2C81FF !important;
     border-radius: 0;
     box-shadow:inset  0 0 40px rgba(26, 144, 255, 0.5) !important;
     .el-select-dropdown__item {

src/views/globalMap/RightMenu/Helicopter.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="menu-content">
     <div class="container">
-      <div class="gradient-text title">直升机</div>
+      <div class="gradient-text common-dialog-title">直升机</div>
       <!--    <div class="box2">-->
       <div class="box-left">
         <el-input v-model="queryParams.keywords" class="custom-input" placeholder="搜索" @input="initData">
@@ -9,12 +9,12 @@
             <el-icon class="el-input__icon"><search /></el-icon>
           </template>
         </el-input>
-        <el-button class="btn" @click="handleCancel">取消</el-button>
+        <div class="btn" @click="handleCancel">取消</div>
       </div>
     </div>
     <div class="flex-container">
       <div class="text-item">直升机</div>
-      <!--      <div class="button-item common-btn-primary2 edit-icon" style="margin-top: -20px">全部播放</div>-->
+<!--            <div class="button-item common-btn-primary2 edit-icon" style="margin-top: -10px">全部播放</div>-->
     </div>
     <div class="custom-table">
       <div class="th">
@@ -89,69 +89,50 @@ onMounted(() => {
 
 <style lang="scss" scoped>
 .menu-content {
-  width: 1579px;
-  height: 1394px;
+  width: 574px;
+  height: 581px;
   background: url('@/assets/images/map/rightMenu/content.png') no-repeat;
-  padding: 130px 20px 20px 20px;
-  font-size: 36px;
+  background-size: 100% 100%;
+  padding: 60px 10px 10px 15px;
+  font-size: 14px;
   position: relative;
   color: #ffffff;
-}
-.title {
-  font-size: 60px;
-  position: absolute;
-  top: 30px;
-  left: 160px;
-}
-
-.box-left {
-  display: flex;
-  margin-top: 30px;
-  margin-bottom: 20px;
-  .btn {
-    width: 140px;
-    min-width: 140px;
-    height: 60px;
-    background: url('@/assets/images/map/rightMenu/potentialFloodHazard/btn.png') no-repeat;
+  .box-left {
     display: flex;
-    justify-content: center;
     align-items: center;
-    cursor: pointer;
-    margin-left: 20px;
-    color: #ffffff;
-    font-size: 32px;
+    margin-bottom: 10px;
+    .btn {
+      width: 59px;
+      height: 23px;
+      background: url('@/assets/images/map/rightMenu/potentialFloodHazard/btn.png') no-repeat;
+      background-size: 100% 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      cursor: pointer;
+      margin-left: 20px;
+    }
   }
 }
-
-.custom-input {
-  height: 60px;
-  line-height: 40px;
-}
-
 .custom-table {
-  width: 100%;
-  height: 1030px;
-  overflow-y: auto;
-  overflow-x: hidden;
+  width: 550px;
   .table-content {
-    height: 880px;
+    height: 385px;
     overflow-y: auto;
     overflow-x: hidden;
   }
   .th {
-    width: 100%;
-    height: 151px;
     background: url('@/assets/images/map/rightMenu/th.png') no-repeat;
     background-size: 100% 100%;
     display: flex;
+    padding: 7px 12px;
+    height: 32px;
   }
   .tr {
-    width: 100%;
-    height: 139px;
     background: url('@/assets/images/map/rightMenu/td.png') no-repeat;
     background-size: 100% 100%;
     display: flex;
-    padding-right: 20px;
+    padding: 7px 12px;
     &:hover {
       background: url('@/assets/images/map/rightMenu/td_checked.png') no-repeat;
       background-size: 100% 100%;
@@ -160,7 +141,7 @@ onMounted(() => {
   .td {
     flex: 1;
     color: #edfaff;
-    font-size: 38px;
+    font-size: 14px;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -176,7 +157,7 @@ onMounted(() => {
     font-family: 'YouSheBiaoTiHei';
     /* 设置线性渐变，从红色渐变到蓝色 */
     background-image: linear-gradient(to bottom, #ffffff 50%, #3075d3 100%);
-    font-size: 48px;
+    font-size: 14px;
   }
   .text-green {
     background-image: linear-gradient(to bottom, #ffffff 50%, #40c75f 100%);
@@ -186,9 +167,9 @@ onMounted(() => {
   }
 }
 .text {
-  font-size: 38px;
+  font-size: 16px;
   color: #247dff;
-  margin-right: 20px;
+  margin-right: 7px;
   &:last-child {
     margin-right: 0;
   }
@@ -200,12 +181,12 @@ onMounted(() => {
   align-items: center; /* 垂直居中对齐 */
 }
 .text-item {
-  font-size: 32px; /* 根据需要设置字体大小 */
-  line-height: 1; /* 确保行高一致 */
+  font-size: 16px; /* 根据需要设置字体大小 */
+  margin-bottom: 10px;
 }
 
 .button-item {
-  font-size: 32px; /* 根据需要设置字体大小 */
+  font-size: 14px; /* 根据需要设置字体大小 */
   line-height: 1; /* 确保行高一致 */
 }
 </style>

src/views/globalMap/RightMenu/KeyVehicles.vue

@@ -1,17 +1,17 @@
 <template>
   <div class="menu-content">
     <div class="container">
-      <div class="gradient-text title">两客一危一重货</div>
+      <div class="gradient-text common-dialog-title">两客一危一重货</div>
       <div class="box-left">
         <el-input v-model="queryParams.keywords" class="custom-input" placeholder="搜索" @input="initData">
           <template #prefix>
             <el-icon class="el-input__icon"><search /></el-icon>
           </template>
         </el-input>
-        <el-button class="btn" @click="handleCancel">取消</el-button>
+        <div class="btn" @click="handleCancel">取消</div>
       </div>
     </div>
-    <div>两客一危一重货</div>
+    <div style="margin-bottom: 10px; font-size: 16px">两客一危一重货</div>
     <div class="custom-table">
       <div class="th">
         <div class="td">车牌号</div>
@@ -89,69 +89,50 @@ onMounted(() => {
 
 <style lang="scss" scoped>
 .menu-content {
-  width: 1579px;
-  height: 1394px;
+  width: 574px;
+  height: 581px;
   background: url('@/assets/images/map/rightMenu/content.png') no-repeat;
-  padding: 130px 20px 20px 20px;
-  font-size: 36px;
+  background-size: 100% 100%;
+  padding: 60px 10px 10px 15px;
+  font-size: 14px;
   position: relative;
   color: #ffffff;
-}
-.title {
-  font-size: 60px;
-  position: absolute;
-  top: 30px;
-  left: 160px;
-}
-
-.box-left {
-  display: flex;
-  margin-top: 30px;
-  margin-bottom: 20px;
-  .btn {
-    width: 140px;
-    min-width: 140px;
-    height: 60px;
-    background: url('@/assets/images/map/rightMenu/potentialFloodHazard/btn.png') no-repeat;
+  .box-left {
     display: flex;
-    justify-content: center;
     align-items: center;
-    cursor: pointer;
-    margin-left: 20px;
-    color: #ffffff;
-    font-size: 32px;
+    margin-bottom: 10px;
+    .btn {
+      width: 59px;
+      height: 23px;
+      background: url('@/assets/images/map/rightMenu/potentialFloodHazard/btn.png') no-repeat;
+      background-size: 100% 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      cursor: pointer;
+      margin-left: 20px;
+    }
   }
 }
-
-.custom-input {
-  height: 60px;
-  line-height: 40px;
-}
-
 .custom-table {
-  width: 100%;
-  height: 1030px;
-  overflow-y: auto;
-  overflow-x: hidden;
+  width: 550px;
   .table-content {
-    height: 880px;
+    height: 385px;
     overflow-y: auto;
     overflow-x: hidden;
   }
   .th {
-    width: 100%;
-    height: 151px;
     background: url('@/assets/images/map/rightMenu/th.png') no-repeat;
     background-size: 100% 100%;
     display: flex;
+    padding: 7px 12px;
+    height: 32px;
   }
   .tr {
-    width: 100%;
-    height: 139px;
     background: url('@/assets/images/map/rightMenu/td.png') no-repeat;
     background-size: 100% 100%;
     display: flex;
-    padding-right: 20px;
+    padding: 7px 12px;
     &:hover {
       background: url('@/assets/images/map/rightMenu/td_checked.png') no-repeat;
       background-size: 100% 100%;
@@ -160,7 +141,7 @@ onMounted(() => {
   .td {
     flex: 1;
     color: #edfaff;
-    font-size: 38px;
+    font-size: 14px;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -176,7 +157,7 @@ onMounted(() => {
     font-family: 'YouSheBiaoTiHei';
     /* 设置线性渐变，从红色渐变到蓝色 */
     background-image: linear-gradient(to bottom, #ffffff 50%, #3075d3 100%);
-    font-size: 48px;
+    font-size: 14px;
   }
   .text-green {
     background-image: linear-gradient(to bottom, #ffffff 50%, #40c75f 100%);
@@ -186,26 +167,11 @@ onMounted(() => {
   }
 }
 .text {
-  font-size: 38px;
+  font-size: 16px;
   color: #247dff;
-  margin-right: 20px;
+  margin-right: 7px;
   &:last-child {
     margin-right: 0;
   }
 }
-
-.flex-container {
-  display: flex;
-  justify-content: space-between; /* 左右两端对齐 */
-  align-items: center; /* 垂直居中对齐 */
-}
-.text-item {
-  font-size: 32px; /* 根据需要设置字体大小 */
-  line-height: 1; /* 确保行高一致 */
-}
-
-.button-item {
-  font-size: 32px; /* 根据需要设置字体大小 */
-  line-height: 1; /* 确保行高一致 */
-}
 </style>

src/views/globalMap/RightMenu/Mitigation.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="menu-content">
     <div class="container">
-      <div class="gradient-text title">防灾救援</div>
+      <div class="gradient-text common-dialog-title">防灾救援</div>
       <div class="box-left">
         <el-input v-model="queryParams.keyword" class="custom-input" placeholder="搜索" @input="initData">
           <template #prefix>
@@ -73,6 +73,10 @@ const handleShowDialog = (row) => {
     showDialog.value = true;
   });
 };
+const handleCancel = () => {
+  queryParams.keyword = '';
+  initData();
+};
 const initData = () => {
   let newQueryParams = deepClone(queryParams);
   newQueryParams.query = {
@@ -91,48 +95,59 @@ initData();
 
 <style lang="scss" scoped>
 .menu-content {
-  width: 1579px;
-  height: 1394px;
+  width: 574px;
+  height: 581px;
   background: url('@/assets/images/map/rightMenu/content.png') no-repeat;
-  padding: 130px 20px 20px 20px;
-  font-size: 36px;
+  background-size: 100% 100%;
+  padding: 60px 10px 10px 15px;
+  font-size: 14px;
   position: relative;
   color: #ffffff;
-}
-.title {
-  font-size: 60px;
-  position: absolute;
-  top: 30px;
-  left: 160px;
+  .box-left {
+    display: flex;
+    align-items: center;
+    margin-bottom: 10px;
+    .btn {
+      width: 59px;
+      height: 23px;
+      background: url('@/assets/images/map/rightMenu/potentialFloodHazard/btn.png') no-repeat;
+      background-size: 100% 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      cursor: pointer;
+      margin-left: 20px;
+    }
+  }
 }
 .custom-table {
-  width: 1499px;
+  width: 550px;
   .table-content {
-    height: 880px;
+    height: 420px;
     overflow-y: auto;
     overflow-x: hidden;
   }
   .th {
-    width: 1499px;
-    height: 151px;
     background: url('@/assets/images/map/rightMenu/th.png') no-repeat;
+    background-size: 100% 100%;
     display: flex;
+    padding: 7px 12px;
+    height: 32px;
   }
   .tr {
-
-    height: 139px;
     background: url('@/assets/images/map/rightMenu/td.png') no-repeat;
-    //margin-left: -23px;
+    background-size: 100% 100%;
     display: flex;
-    padding-right: 20px;
+    padding: 7px 12px;
     &:hover {
       background: url('@/assets/images/map/rightMenu/td_checked.png') no-repeat;
+      background-size: 100% 100%;
     }
   }
   .td {
     flex: 1;
     color: #edfaff;
-    font-size: 38px;
+    font-size: 14px;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -148,7 +163,7 @@ initData();
     font-family: 'YouSheBiaoTiHei';
     /* 设置线性渐变，从红色渐变到蓝色 */
     background-image: linear-gradient(to bottom, #ffffff 50%, #3075d3 100%);
-    font-size: 48px;
+    font-size: 14px;
   }
   .text-green {
     background-image: linear-gradient(to bottom, #ffffff 50%, #40c75f 100%);
@@ -157,20 +172,4 @@ initData();
     background-image: linear-gradient(to bottom, #ffffff 50%, #ff2f3c 100%);
   }
 }
-.box-left {
-  display: flex;
-  margin-top: 20px;
-  margin-bottom: 20px;
-  .btn {
-    width: 140px;
-    min-width: 140px;
-    height: 56px;
-    background: url('@/assets/images/map/rightMenu/potentialFloodHazard/btn.png') no-repeat;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    cursor: pointer;
-    margin-left: 20px;
-  }
-}
 </style>

src/views/globalMap/RightMenu/MobileCommandVehicle.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="menu-content">
     <div class="container">
-      <div class="gradient-text title">移动指挥车</div>
+      <div class="gradient-text common-dialog-title">移动指挥车</div>
       <!--    <div class="box2">-->
       <div class="box-left">
         <el-input v-model="queryParams.keywords" class="custom-input" placeholder="搜索" @input="initData">
@@ -9,12 +9,12 @@
             <el-icon class="el-input__icon"><search /></el-icon>
           </template>
         </el-input>
-        <el-button class="btn" @click="handleCancel">取消</el-button>
+        <div class="btn" @click="handleCancel">取消</div>
       </div>
     </div>
     <div class="flex-container">
       <div class="text-item">移动指挥车</div>
-<!--      <div class="button-item common-btn-primary2 edit-icon" style="margin-top: -20px">全部播放</div>-->
+<!--      <div class="button-item common-btn-primary2 edit-icon" style="margin-top: -10px">全部播放</div>-->
     </div>
     <div class="custom-table">
       <div class="th">
@@ -89,69 +89,50 @@ onMounted(() => {
 
 <style lang="scss" scoped>
 .menu-content {
-  width: 1579px;
-  height: 1394px;
+  width: 574px;
+  height: 581px;
   background: url('@/assets/images/map/rightMenu/content.png') no-repeat;
-  padding: 130px 20px 20px 20px;
-  font-size: 36px;
+  background-size: 100% 100%;
+  padding: 60px 10px 10px 15px;
+  font-size: 14px;
   position: relative;
   color: #ffffff;
-}
-.title {
-  font-size: 60px;
-  position: absolute;
-  top: 30px;
-  left: 160px;
-}
-
-.box-left {
-  display: flex;
-  margin-top: 30px;
-  margin-bottom: 20px;
-  .btn {
-    width: 140px;
-    min-width: 140px;
-    height: 60px;
-    background: url('@/assets/images/map/rightMenu/potentialFloodHazard/btn.png') no-repeat;
+  .box-left {
     display: flex;
-    justify-content: center;
     align-items: center;
-    cursor: pointer;
-    margin-left: 20px;
-    color: #ffffff;
-    font-size: 32px;
+    margin-bottom: 10px;
+    .btn {
+      width: 59px;
+      height: 23px;
+      background: url('@/assets/images/map/rightMenu/potentialFloodHazard/btn.png') no-repeat;
+      background-size: 100% 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      cursor: pointer;
+      margin-left: 20px;
+    }
   }
 }
-
-.custom-input {
-  height: 60px;
-  line-height: 40px;
-}
-
 .custom-table {
-  width: 100%;
-  height: 1030px;
-  overflow-y: auto;
-  overflow-x: hidden;
+  width: 550px;
   .table-content {
-    height: 880px;
+    height: 385px;
     overflow-y: auto;
     overflow-x: hidden;
   }
   .th {
-    width: 100%;
-    height: 151px;
     background: url('@/assets/images/map/rightMenu/th.png') no-repeat;
     background-size: 100% 100%;
     display: flex;
+    padding: 7px 12px;
+    height: 32px;
   }
   .tr {
-    width: 100%;
-    height: 139px;
     background: url('@/assets/images/map/rightMenu/td.png') no-repeat;
     background-size: 100% 100%;
     display: flex;
-    padding-right: 20px;
+    padding: 7px 12px;
     &:hover {
       background: url('@/assets/images/map/rightMenu/td_checked.png') no-repeat;
       background-size: 100% 100%;
@@ -160,7 +141,7 @@ onMounted(() => {
   .td {
     flex: 1;
     color: #edfaff;
-    font-size: 38px;
+    font-size: 14px;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -176,7 +157,7 @@ onMounted(() => {
     font-family: 'YouSheBiaoTiHei';
     /* 设置线性渐变，从红色渐变到蓝色 */
     background-image: linear-gradient(to bottom, #ffffff 50%, #3075d3 100%);
-    font-size: 48px;
+    font-size: 14px;
   }
   .text-green {
     background-image: linear-gradient(to bottom, #ffffff 50%, #40c75f 100%);
@@ -186,9 +167,9 @@ onMounted(() => {
   }
 }
 .text {
-  font-size: 38px;
+  font-size: 16px;
   color: #247dff;
-  margin-right: 20px;
+  margin-right: 7px;
   &:last-child {
     margin-right: 0;
   }
@@ -200,12 +181,12 @@ onMounted(() => {
   align-items: center; /* 垂直居中对齐 */
 }
 .text-item {
-  font-size: 32px; /* 根据需要设置字体大小 */
-  line-height: 1; /* 确保行高一致 */
+  font-size: 16px; /* 根据需要设置字体大小 */
+  margin-bottom: 10px;
 }
 
 .button-item {
-  font-size: 32px; /* 根据需要设置字体大小 */
+  font-size: 14px; /* 根据需要设置字体大小 */
   line-height: 1; /* 确保行高一致 */
 }
 </style>

src/views/globalMap/RightMenu/MobilePlatform.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="menu-content">
     <div class="container">
-      <div class="gradient-text title">手机工作台</div>
+      <div class="gradient-text common-dialog-title">手机工作台</div>
       <!--    <div class="box2">-->
       <div class="box-left">
         <el-input v-model="queryParams.keywords" class="custom-input" placeholder="搜索" @input="initData">
@@ -9,11 +9,11 @@
             <el-icon class="el-input__icon"><search /></el-icon>
           </template>
         </el-input>
-        <el-button class="btn" @click="handleCancel">取消</el-button>
+        <div class="btn" @click="handleCancel">取消</div>
       </div>
     </div>
     <!--    </div>-->
-    <div>手机工作台</div>
+    <div style="margin-bottom: 10px; font-size: 16px">手机工作台</div>
     <div class="custom-table">
       <div class="th">
         <div class="td">姓名</div>
@@ -90,69 +90,50 @@ onMounted(() => {
 
 <style lang="scss" scoped>
 .menu-content {
-  width: 1579px;
-  height: 1394px;
+  width: 574px;
+  height: 581px;
   background: url('@/assets/images/map/rightMenu/content.png') no-repeat;
-  padding: 130px 20px 20px 20px;
-  font-size: 36px;
+  background-size: 100% 100%;
+  padding: 60px 10px 10px 15px;
+  font-size: 14px;
   position: relative;
   color: #ffffff;
-}
-.title {
-  font-size: 60px;
-  position: absolute;
-  top: 30px;
-  left: 160px;
-}
-
-.box-left {
-  display: flex;
-  margin-top: 30px;
-  margin-bottom: 20px;
-  .btn {
-    width: 140px;
-    min-width: 140px;
-    height: 60px;
-    background: url('@/assets/images/map/rightMenu/potentialFloodHazard/btn.png') no-repeat;
+  .box-left {
     display: flex;
-    justify-content: center;
     align-items: center;
-    cursor: pointer;
-    margin-left: 20px;
-    color: #ffffff;
-    font-size: 32px;
+    margin-bottom: 10px;
+    .btn {
+      width: 59px;
+      height: 23px;
+      background: url('@/assets/images/map/rightMenu/potentialFloodHazard/btn.png') no-repeat;
+      background-size: 100% 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      cursor: pointer;
+      margin-left: 20px;
+    }
   }
 }
-
-.custom-input {
-  height: 60px;
-  line-height: 40px;
-}
-
 .custom-table {
-  width: 100%;
-  height: 1030px;
-  overflow-y: auto;
-  overflow-x: hidden;
+  width: 550px;
   .table-content {
-    height: 880px;
+    height: 385px;
     overflow-y: auto;
     overflow-x: hidden;
   }
   .th {
-    width: 100%;
-    height: 151px;
     background: url('@/assets/images/map/rightMenu/th.png') no-repeat;
     background-size: 100% 100%;
     display: flex;
+    padding: 7px 12px;
+    height: 32px;
   }
   .tr {
-    width: 100%;
-    height: 139px;
     background: url('@/assets/images/map/rightMenu/td.png') no-repeat;
     background-size: 100% 100%;
     display: flex;
-    padding-right: 20px;
+    padding: 7px 12px;
     &:hover {
       background: url('@/assets/images/map/rightMenu/td_checked.png') no-repeat;
       background-size: 100% 100%;
@@ -161,7 +142,7 @@ onMounted(() => {
   .td {
     flex: 1;
     color: #edfaff;
-    font-size: 38px;
+    font-size: 14px;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -177,7 +158,7 @@ onMounted(() => {
     font-family: 'YouSheBiaoTiHei';
     /* 设置线性渐变，从红色渐变到蓝色 */
     background-image: linear-gradient(to bottom, #ffffff 50%, #3075d3 100%);
-    font-size: 48px;
+    font-size: 14px;
   }
   .text-green {
     background-image: linear-gradient(to bottom, #ffffff 50%, #40c75f 100%);
@@ -187,9 +168,9 @@ onMounted(() => {
   }
 }
 .text {
-  font-size: 38px;
+  font-size: 16px;
   color: #247dff;
-  margin-right: 20px;
+  margin-right: 7px;
   &:last-child {
     margin-right: 0;
   }

src/views/globalMap/RightMenu/MobileUnmannedVehicle.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="menu-content">
     <div class="container">
-      <div class="gradient-text title">机动无人机</div>
+      <div class="gradient-text common-dialog-title">机动无人机</div>
       <!--    <div class="box2">-->
       <div class="box-left">
         <el-input v-model="queryParams.keywords" class="custom-input" placeholder="搜索" @input="initData">
@@ -9,12 +9,12 @@
             <el-icon class="el-input__icon"><search /></el-icon>
           </template>
         </el-input>
-        <el-button class="btn" @click="handleCancel">取消</el-button>
+        <div class="btn" @click="handleCancel">取消</div>
       </div>
     </div>
     <div class="flex-container">
       <div class="text-item">机动无人机</div>
-      <div class="button-item common-btn-primary2 edit-icon" style="margin-top: -20px">全部播放</div>
+      <div class="button-item common-btn-primary2 edit-icon" style="margin-top: -10px">全部播放</div>
     </div>
     <div class="custom-table">
       <div class="th">
@@ -89,69 +89,50 @@ onMounted(() => {
 
 <style lang="scss" scoped>
 .menu-content {
-  width: 1579px;
-  height: 1394px;
+  width: 574px;
+  height: 581px;
   background: url('@/assets/images/map/rightMenu/content.png') no-repeat;
-  padding: 130px 20px 20px 20px;
-  font-size: 36px;
+  background-size: 100% 100%;
+  padding: 60px 10px 10px 15px;
+  font-size: 14px;
   position: relative;
   color: #ffffff;
-}
-.title {
-  font-size: 60px;
-  position: absolute;
-  top: 30px;
-  left: 160px;
-}
-
-.box-left {
-  display: flex;
-  margin-top: 30px;
-  margin-bottom: 20px;
-  .btn {
-    width: 140px;
-    min-width: 140px;
-    height: 60px;
-    background: url('@/assets/images/map/rightMenu/potentialFloodHazard/btn.png') no-repeat;
+  .box-left {
     display: flex;
-    justify-content: center;
     align-items: center;
-    cursor: pointer;
-    margin-left: 20px;
-    color: #ffffff;
-    font-size: 32px;
+    margin-bottom: 10px;
+    .btn {
+      width: 59px;
+      height: 23px;
+      background: url('@/assets/images/map/rightMenu/potentialFloodHazard/btn.png') no-repeat;
+      background-size: 100% 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      cursor: pointer;
+      margin-left: 20px;
+    }
   }
 }
-
-.custom-input {
-  height: 60px;
-  line-height: 40px;
-}
-
 .custom-table {
-  width: 100%;
-  height: 1030px;
-  overflow-y: auto;
-  overflow-x: hidden;
+  width: 550px;
   .table-content {
-    height: 880px;
+    height: 385px;
     overflow-y: auto;
     overflow-x: hidden;
   }
   .th {
-    width: 100%;
-    height: 151px;
     background: url('@/assets/images/map/rightMenu/th.png') no-repeat;
     background-size: 100% 100%;
     display: flex;
+    padding: 7px 12px;
+    height: 32px;
   }
   .tr {
-    width: 100%;
-    height: 139px;
     background: url('@/assets/images/map/rightMenu/td.png') no-repeat;
     background-size: 100% 100%;
     display: flex;
-    padding-right: 20px;
+    padding: 7px 12px;
     &:hover {
       background: url('@/assets/images/map/rightMenu/td_checked.png') no-repeat;
       background-size: 100% 100%;
@@ -160,7 +141,7 @@ onMounted(() => {
   .td {
     flex: 1;
     color: #edfaff;
-    font-size: 38px;
+    font-size: 14px;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -176,7 +157,7 @@ onMounted(() => {
     font-family: 'YouSheBiaoTiHei';
     /* 设置线性渐变，从红色渐变到蓝色 */
     background-image: linear-gradient(to bottom, #ffffff 50%, #3075d3 100%);
-    font-size: 48px;
+    font-size: 14px;
   }
   .text-green {
     background-image: linear-gradient(to bottom, #ffffff 50%, #40c75f 100%);
@@ -186,9 +167,9 @@ onMounted(() => {
   }
 }
 .text {
-  font-size: 38px;
+  font-size: 16px;
   color: #247dff;
-  margin-right: 20px;
+  margin-right: 7px;
   &:last-child {
     margin-right: 0;
   }
@@ -200,12 +181,12 @@ onMounted(() => {
   align-items: center; /* 垂直居中对齐 */
 }
 .text-item {
-  font-size: 32px; /* 根据需要设置字体大小 */
-  line-height: 1; /* 确保行高一致 */
+  font-size: 16px; /* 根据需要设置字体大小 */
+  margin-bottom: 10px;
 }
 
 .button-item {
-  font-size: 32px; /* 根据需要设置字体大小 */
+  font-size: 14px; /* 根据需要设置字体大小 */
   line-height: 1; /* 确保行高一致 */
 }
 </style>

src/views/globalMap/RightMenu/PotentialFloodHazard.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="menu-content">
-    <div class="gradient-text title">易涝隐患点</div>
+    <div class="gradient-text common-dialog-title">易涝隐患点</div>
     <div class="box1">
       <div class="title-box">列表</div>
       <div class="date-box">
@@ -176,6 +176,7 @@ onMounted(() => {
     margin-top: -5px;
     .box-left {
       display: flex;
+      align-items: center;
       .btn {
         width: 59px;
         height: 23px;
@@ -265,10 +266,4 @@ onMounted(() => {
     }
   }
 }
-.title {
-  font-size: 24px;
-  position: absolute;
-  top: 12px;
-  left: 55px;
-}
 </style>

src/views/globalMap/RightMenu/SatellitePhone.vue

@@ -1,17 +1,17 @@
 <template>
   <div class="menu-content">
     <div class="container">
-      <div class="gradient-text title">卫星电话</div>
+      <div class="gradient-text common-dialog-title">卫星电话</div>
       <div class="box-left">
         <el-input v-model="queryParams.keywords" class="custom-input" placeholder="搜索" @input="initData">
           <template #prefix>
             <el-icon class="el-input__icon"><search /></el-icon>
           </template>
         </el-input>
-        <el-button class="btn" @click="handleCancel">取消</el-button>
+        <div class="btn" @click="handleCancel">取消</div>
       </div>
     </div>
-    <div>卫星电话</div>
+    <div style="margin-bottom: 10px; font-size: 16px">卫星电话</div>
     <div class="custom-table">
       <div class="th">
         <div class="td">全部</div>
@@ -92,69 +92,50 @@ onMounted(() => {
 
 <style lang="scss" scoped>
 .menu-content {
-  width: 1579px;
-  height: 1394px;
+  width: 574px;
+  height: 581px;
   background: url('@/assets/images/map/rightMenu/content.png') no-repeat;
-  padding: 130px 20px 20px 20px;
-  font-size: 36px;
+  background-size: 100% 100%;
+  padding: 60px 10px 10px 15px;
+  font-size: 14px;
   position: relative;
   color: #ffffff;
-}
-.title {
-  font-size: 60px;
-  position: absolute;
-  top: 30px;
-  left: 160px;
-}
-
-.box-left {
-  display: flex;
-  margin-top: 30px;
-  margin-bottom: 20px;
-  .btn {
-    width: 140px;
-    min-width: 140px;
-    height: 60px;
-    background: url('@/assets/images/map/rightMenu/potentialFloodHazard/btn.png') no-repeat;
+  .box-left {
     display: flex;
-    justify-content: center;
     align-items: center;
-    cursor: pointer;
-    margin-left: 20px;
-    color: #ffffff;
-    font-size: 32px;
+    margin-bottom: 10px;
+    .btn {
+      width: 59px;
+      height: 23px;
+      background: url('@/assets/images/map/rightMenu/potentialFloodHazard/btn.png') no-repeat;
+      background-size: 100% 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      cursor: pointer;
+      margin-left: 20px;
+    }
   }
 }
-
-.custom-input {
-  height: 60px;
-  line-height: 40px;
-}
-
 .custom-table {
-  width: 100%;
-  height: 1030px;
-  overflow-y: auto;
-  overflow-x: hidden;
+  width: 550px;
   .table-content {
-    height: 880px;
+    height: 385px;
     overflow-y: auto;
     overflow-x: hidden;
   }
   .th {
-    width: 100%;
-    height: 151px;
     background: url('@/assets/images/map/rightMenu/th.png') no-repeat;
     background-size: 100% 100%;
     display: flex;
+    padding: 7px 12px;
+    height: 32px;
   }
   .tr {
-    width: 100%;
-    height: 139px;
     background: url('@/assets/images/map/rightMenu/td.png') no-repeat;
     background-size: 100% 100%;
     display: flex;
-    padding-right: 20px;
+    padding: 7px 12px;
     &:hover {
       background: url('@/assets/images/map/rightMenu/td_checked.png') no-repeat;
       background-size: 100% 100%;
@@ -163,7 +144,7 @@ onMounted(() => {
   .td {
     flex: 1;
     color: #edfaff;
-    font-size: 38px;
+    font-size: 14px;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -179,7 +160,7 @@ onMounted(() => {
     font-family: 'YouSheBiaoTiHei';
     /* 设置线性渐变，从红色渐变到蓝色 */
     background-image: linear-gradient(to bottom, #ffffff 50%, #3075d3 100%);
-    font-size: 48px;
+    font-size: 14px;
   }
   .text-green {
     background-image: linear-gradient(to bottom, #ffffff 50%, #40c75f 100%);
@@ -189,9 +170,9 @@ onMounted(() => {
   }
 }
 .text {
-  font-size: 38px;
+  font-size: 16px;
   color: #247dff;
-  margin-right: 20px;
+  margin-right: 7px;
   &:last-child {
     margin-right: 0;
   }

src/views/globalMap/RightMenu/TyphoonVideo.vue

@@ -1,42 +1,44 @@
 <template>
   <div class="menu-content">
     <div class="container">
-      <div class="gradient-text title">台风视频</div>
+      <div class="gradient-text common-dialog-title">台风视频</div>
       <div class="box-left">
         <el-input v-model="queryParams.typhoon_code" class="custom-input" placeholder="搜索" @input="initData">
           <template #prefix>
             <el-icon class="el-input__icon"><search /></el-icon>
           </template>
         </el-input>
-        <el-button class="btn" @click="handleCancel">取消</el-button>
+        <div class="btn" @click="handleCancel">取消</div>
       </div>
     </div>
-    <div class="section-box">
-      <div class="title2">路径列表</div>
-      <div style="display: flex; align-content: center">
-        <span style="margin-right: 10px; white-space: nowrap; font-size: 40px; height: 100px">选择台风:</span>
-        <el-select
-          v-model="selectedYear"
-          placeholder="请选择年份"
-          class="custom-select"
-          popper-class="custom-select-popper"
-          :teleported="false"
-          style="width: 1200px; margin-left: 30px"
-        >
-          <el-option v-for="year in yearList" :key="year" :label="year" :value="year"></el-option>
-        </el-select>
-        <el-select
-          v-model="selectedTyphoon"
-          placeholder="请选择台风名称"
-          class="custom-select"
-          popper-class="custom-select-popper"
-          :teleported="false"
-          style="width: 1200px; margin-left: 30px"
-        >
-          <el-option v-for="typhoon in availableTyphoons" :key="typhoon.id" :label="typhoon.name" :value="typhoon.id"></el-option>
-        </el-select>
-      </div>
+    <!--    <div class="section-box">-->
+    <div class="title2">路径列表</div>
+    <div style="display: flex; align-content: center; justify-content: flex-start">
+      <span style="margin-right: 5px; white-space: nowrap; font-size: 14px; height: 50px">选择台风:</span>
+      <el-select
+        v-model="selectedYear"
+        placeholder="请选择年份"
+        class="custom-select"
+        popper-class="custom-select-popper"
+        :teleported="false"
+        style="width: 1200px; margin-left: 30px"
+        @change="handleYearChange"
+      >
+        <el-option v-for="year in yearList" :key="year" :label="year" :value="year"></el-option>
+      </el-select>
+      <el-select
+        v-model="selectedTyphoon"
+        placeholder="请选择台风名称"
+        class="custom-select"
+        popper-class="custom-select-popper"
+        :teleported="false"
+        style="width: 1200px; margin-left: 30px"
+        @change="handleTyphoonChange"
+      >
+        <el-option v-for="typhoon in TyphoonList" :key="typhoon.id" :label="typhoon.typhoon_name" :value="typhoon.typhoon_name"></el-option>
+      </el-select>
     </div>
+
     <div class="custom-table">
       <div class="th">
         <div class="td">过去时间</div>
@@ -46,9 +48,9 @@
       </div>
       <div class="table-content">
         <div v-for="(item, index) in dataList" :key="item.id" class="tr">
-          <div class="td">{{ item.name }}</div>
-          <div class="td">{{ item.work_unit }}</div>
-          <div class="td">{{ item.position }}</div>
+          <div class="td">{{ item.record_time }}</div>
+          <div class="td">{{ item.longitude }},{{ item.latitude }}</div>
+          <div class="td">{{ item.record_address }}</div>
           <div class="td">
             <div class="text" @click="handleConnect(index, item)">周边视频</div>
           </div>
@@ -57,104 +59,157 @@
     </div>
   </div>
 </template>
+
 <script setup lang="ts">
-import { ref, reactive, onMounted, watch } from 'vue';
-import { getTyphoonTrajectory, getTyphoonYearList } from '@/api/globalMap/TyphoonVideo';
+import { ref, reactive, onMounted } from 'vue';
+import { getTyphoonList, getTyphoonTrajectory, getTyphoonYearList } from '@/api/globalMap/TyphoonVideo';
 
-const selectedYear = ref(''); //selectedYear 用于存储用户选择的年份
+const selectedYear = ref(''); // selectedYear 用于存储用户选择的年份
 const yearList = ref([]); // yearList 用于存储从 getTyphoonYearList 获取的年份列表
-//入参
+const TyphoonList = ref([]);
+const selectedTyphoon = ref('');
+const dataList = reactive([]); // 数据列表
 const queryParams = reactive({
-  typhoon_code: ''
+  typhoon_code: '',
+  year_n: ''
 });
 
-//调用函数
+// 调用函数
 onMounted(() => {
   initData();
 });
 
-//调接口在 initData 函数中，首先调用 getTyphoonYearList 并处理返回的数据，将其赋值给 yearList。
-const initData = () => {
-  getTyphoonYearList().then((res) => {
-    if (res.code === 0) {
-      yearList.value.splice(0, yearList.value.length, ...res.rows.map(item => item.year_n));  // 更新年份列表
-    } else {
-      console.error('Failed to fetch typhoon year list:', res);
+const handleYearChange = async () => {
+  if (selectedYear.value) {
+    try {
+      const typhoons = await getTyphoonList({ query: { year_n: selectedYear.value } });
+      if (typhoons.code === 0) {
+        TyphoonList.value = typhoons.rows;
+        selectedTyphoon.value = typhoons.rows[0]?.typhoon_name || '';
+        initDataByTyphoon();
+      } else {
+        console.error('Failed to fetch typhoon list:', typhoons);
+      }
+    } catch (error) {
+      console.error('Error fetching typhoon list:', error);
     }
-  });
-  getTyphoonTrajectory({
-    query: {
-      typhoon_code: queryParams.typhoon_code
+  }
+};
+
+const handleTyphoonChange = async () => {
+  if (selectedTyphoon.value && selectedYear.value) {
+    initDataByTyphoon();
+  }
+};
+
+const initDataByTyphoon = async () => {
+  const typhoonCode = TyphoonList.value.find((t) => t.typhoon_name === selectedTyphoon.value)?.typhoon_code;
+  if (typhoonCode) {
+    try {
+      const trajectory = await getTyphoonTrajectory({ query: { typhoon_code: typhoonCode } });
+      if (trajectory.code === 0 && Array.isArray(trajectory.rows)) {
+        dataList.splice(0, dataList.length, ...trajectory.rows);
+      } else {
+        console.error('Invalid response from server:', trajectory);
+        dataList.splice(0, dataList.length); // 清空数据列表
+      }
+    } catch (error) {
+      console.error('Error fetching typhoon trajectory:', error);
     }
-  }).then((res) => {
-    if (res.code === 0 && Array.isArray(res.rows)) {
-      dataList.splice(0, dataList.length, ...res.rows); // 使用 splice 替换数组内容，保持响应性
+  } else {
+    console.error('No typhoon code found for selected typhoon name');
+  }
+};
+
+const fetchData = async (apiFunction, params) => {
+  try {
+    const response = await apiFunction(params);
+    if (response.code !== 0) {
+      throw new Error('Invalid response from server');
+    }
+    return response.rows;
+  } catch (error) {
+    console.error('Error fetching data:', error);
+    return [];
+  }
+};
+
+const initData = async () => {
+  try {
+    const years = await fetchData(getTyphoonYearList, {});
+    yearList.value = years.map((item) => item.year_n);
+    const year = years[0]?.year_n;
+    if (year) {
+      const typhoons = await fetchData(getTyphoonList, { query: { year_n: year } });
+      TyphoonList.value = typhoons;
+      const typhoonCode = typhoons[0]?.typhoon_code;
+      if (typhoonCode) {
+        const trajectory = await fetchData(getTyphoonTrajectory, { query: { typhoon_code: typhoonCode } });
+        dataList.splice(0, dataList.length, ...trajectory);
+      } else {
+        console.error('No typhoon code found in the list');
+      }
     } else {
-      console.error('Invalid response from server:', res);
-      // 可以选择清空数据列表或显示错误消息
-      dataList.splice(0, dataList.length); // 清空数据列表
+      console.error('No year found in the list');
     }
-  });
+  } catch (error) {
+    console.error('Error initializing data:', error);
+  }
 };
 
-// 数据列表,直接定义为数组
-const dataList = reactive([]);
+const handleCancel = () => {
+  queryParams.typhoon_code = '';
+  queryParams.year_n = '';
+  initData();
+};
 </script>
 
 <style lang="scss" scoped>
 .menu-content {
-  width: 1579px;
-  height: 1394px;
+  width: 574px;
+  height: 581px;
   background: url('@/assets/images/map/rightMenu/content.png') no-repeat;
-  padding: 130px 20px 20px 20px;
-  font-size: 36px;
+  background-size: 100% 100%;
+  padding: 60px 10px 10px 15px;
+  font-size: 14px;
   position: relative;
   color: #ffffff;
-}
-
-.box-left {
-  display: flex;
-  margin-top: 30px;
-  margin-bottom: 20px;
-  .btn {
-    width: 140px;
-    min-width: 140px;
-    height: 60px;
-    background: url('@/assets/images/map/rightMenu/potentialFloodHazard/btn.png') no-repeat;
+  .box-left {
     display: flex;
-    justify-content: center;
     align-items: center;
-    cursor: pointer;
-    margin-left: 20px;
-    color: #ffffff;
-    font-size: 32px;
+    margin-bottom: 10px;
+    .btn {
+      width: 59px;
+      height: 23px;
+      background: url('@/assets/images/map/rightMenu/potentialFloodHazard/btn.png') no-repeat;
+      background-size: 100% 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      cursor: pointer;
+      margin-left: 20px;
+    }
   }
 }
-
 .custom-table {
-  width: 100%;
-  height: 1030px;
-  overflow-y: auto;
-  overflow-x: hidden;
+  width: 550px;
   .table-content {
-    height: 880px;
+    height: 420px;
     overflow-y: auto;
     overflow-x: hidden;
   }
   .th {
-    width: 100%;
-    height: 151px;
     background: url('@/assets/images/map/rightMenu/th.png') no-repeat;
     background-size: 100% 100%;
     display: flex;
+    padding: 7px 12px;
+    height: 32px;
   }
   .tr {
-    width: 100%;
-    height: 139px;
     background: url('@/assets/images/map/rightMenu/td.png') no-repeat;
     background-size: 100% 100%;
     display: flex;
-    padding-right: 20px;
+    padding: 7px 12px;
     &:hover {
       background: url('@/assets/images/map/rightMenu/td_checked.png') no-repeat;
       background-size: 100% 100%;
@@ -163,7 +218,7 @@ const dataList = reactive([]);
   .td {
     flex: 1;
     color: #edfaff;
-    font-size: 38px;
+    font-size: 14px;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -179,7 +234,7 @@ const dataList = reactive([]);
     font-family: 'YouSheBiaoTiHei';
     /* 设置线性渐变，从红色渐变到蓝色 */
     background-image: linear-gradient(to bottom, #ffffff 50%, #3075d3 100%);
-    font-size: 48px;
+    font-size: 14px;
   }
   .text-green {
     background-image: linear-gradient(to bottom, #ffffff 50%, #40c75f 100%);
@@ -190,7 +245,11 @@ const dataList = reactive([]);
 }
 
 .title2 {
-  font-size: 48px;
-  height: 100px;
+  font-size: 14px;
+  height: 30px;
+}
+
+.text {
+  cursor: pointer;
 }
 </style>

src/views/globalMap/RightMenu/UAV.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="menu-content">
-    <div class="gradient-text title">无人机资源</div>
+    <div class="gradient-text common-dialog-title">无人机资源</div>
     <div class="flex-box">
       <el-select
         v-model="planForm.planType"
@@ -8,7 +8,7 @@
         class="custom-select"
         placeholder="请选择行政区"
         popper-class="custom-select-popper"
-        size="large"
+        style="width: 140px; margin-bottom: 10px;"
       >
         <el-option v-for="item in plan_type" :key="item.value" :label="item.label" :value="item.value"></el-option>
       </el-select>
@@ -21,7 +21,6 @@
             <el-select
               v-model="queryParams.area"
               placeholder="类型"
-              size="large"
               class="custom-select2"
               popper-class="custom-select-popper2"
               :teleported="false"
@@ -82,115 +81,35 @@ const dropdown_options = [{ label: '多旋翼', value: '多旋翼' }];
 </script>
 
 <style lang="scss" scoped>
-.detail-container {
-  font-size: 36px;
-  .dialog-content {
-    display: flex;
-  }
-  .info-box {
-    width: 834px;
-    height: 459px;
-    background: url('@/assets/images/map/rightMenu/box2.png') no-repeat;
-    padding: 11px;
-    .info-header {
-      width: 311px;
-      height: 56px;
-      padding-left: 50px;
-      background: url(@/assets/images/map/rightMenu/titleBox1.png) no-repeat;
-    }
-    .info-content {
-      padding: 0 37px 26px 37px;
-      font-size: 32px;
-      color: #a8ccde;
-    }
-    .info-item {
-      display: flex;
-      align-items: center;
-      height: 72px;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-  }
-  .box1 {
-    width: 776px;
-    height: 459px;
-    display: flex;
-    flex-direction: column;
-    margin-left: 94px;
-    margin-right: 110px;
-    .box1-title {
-      width: 372px;
-      height: 54px;
-      background: url('@/assets/images/map/rightMenu/titleBox2.png');
-      padding-left: 65px;
-      font-size: 44px;
-      color: #f4f7fa;
-    }
-  }
-  .box2 {
-    margin-top: 45px;
-    .box2-title {
-      height: 54px;
-      background: url('@/assets/images/map/rightMenu/titleBox2.png') no-repeat;
-      padding-left: 65px;
-      font-size: 44px;
-      color: #f4f7fa;
-    }
-  }
-}
-
 .menu-content {
-  width: 1579px;
-  height: 1394px;
+  width: 574px;
+  height: 581px;
   background: url('@/assets/images/map/rightMenu/content.png') no-repeat;
-  padding: 130px 20px 20px 20px;
-  font-size: 36px;
+  background-size: 100% 100%;
+  padding: 60px 10px 10px 15px;
+  font-size: 14px;
   position: relative;
-  color: #000000;
-}
-.title {
-  font-size: 60px;
-  position: absolute;
-  top: 30px;
-  left: 160px;
-}
-
-.flex-box {
-  display: flex;
-  width: 100%;
-  color: #fff;
-  font-size: 38px;
-  margin: 20px 0;
-  .custom-select {
-    width: 100%;
-  }
+  color: #ffffff;
 }
-
 .custom-table {
-  width: 100%;
-  height: 1030px;
-  overflow-y: auto;
-  overflow-x: hidden;
+  width: 550px;
   .table-content {
-    height: 880px;
+    height: 290px;
     overflow-y: auto;
     overflow-x: hidden;
   }
   .th {
-    width: 100%;
-    height: 151px;
     background: url('@/assets/images/map/rightMenu/th.png') no-repeat;
     background-size: 100% 100%;
     display: flex;
+    padding: 7px 12px;
+    height: 32px;
   }
   .tr {
-    width: 100%;
-    height: 139px;
     background: url('@/assets/images/map/rightMenu/td.png') no-repeat;
     background-size: 100% 100%;
     display: flex;
-    padding-right: 20px;
+    padding: 7px 12px;
     &:hover {
       background: url('@/assets/images/map/rightMenu/td_checked.png') no-repeat;
       background-size: 100% 100%;
@@ -199,7 +118,7 @@ const dropdown_options = [{ label: '多旋翼', value: '多旋翼' }];
   .td {
     flex: 1;
     color: #edfaff;
-    font-size: 38px;
+    font-size: 14px;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -215,7 +134,7 @@ const dropdown_options = [{ label: '多旋翼', value: '多旋翼' }];
     font-family: 'YouSheBiaoTiHei';
     /* 设置线性渐变，从红色渐变到蓝色 */
     background-image: linear-gradient(to bottom, #ffffff 50%, #3075d3 100%);
-    font-size: 48px;
+    font-size: 14px;
   }
   .text-green {
     background-image: linear-gradient(to bottom, #ffffff 50%, #40c75f 100%);
@@ -224,8 +143,4 @@ const dropdown_options = [{ label: '多旋翼', value: '多旋翼' }];
     background-image: linear-gradient(to bottom, #ffffff 50%, #ff2f3c 100%);
   }
 }
-
-.gradient-text2 {
-  color: transparent !important;
-}
 </style>