diff --git a/src/pages/views/WatershedOneMap/modalPart/legend.vue b/src/pages/views/WatershedOneMap/modalPart/legend.vue
index 03c0dfc..afedcd7 100644
--- a/src/pages/views/WatershedOneMap/modalPart/legend.vue
+++ b/src/pages/views/WatershedOneMap/modalPart/legend.vue
@@ -59,9 +59,8 @@
     </n-modal>
 
     <!-- 湖泊详情弹窗页面 -->
-    <n-modal v-model:show="showModalHP" :show-icon="false" :mask-closable="false" preset="card" title="站点详情" style="width: 950px">
-      <HuPoModal />
-      9999999
+    <n-modal v-model:show="showModalHP" :show-icon="false" :mask-closable="false" preset="card" title="站点详情" style="width: 580px">
+      <HuPoModal :valueModalhp="valueModalhp" />
     </n-modal>
   </div>
 </template>
@@ -189,9 +188,10 @@
         },
       ],
       legendList: legendData,
-      showModalHP: true,
+      showModalHP: false,
       showModalNld: false,
       valueModalNld: {},
+      valueModalhp: {},
       valueModal: {},
     });
     // 初始化默认选中的图层判断显示
@@ -2147,8 +2147,9 @@
             } else if (feature.newFiberId == 'waterLoging') {
               allData.showModalNld = true;
               allData.valueModalNld = properties;
-
-              console.log(allData.valueModalNld);
+            } else if (feature.newFiberId == 'Riversging') {
+              allData.showModalHP = true;
+              allData.valueModalhp = properties;
             } else {
               newfiberMap.flyTo({
                 lon: clickPointCoordinates[0] + 0.05,

diff --git a/src/pages/views/WatershedOneMap/modalPart/legend.vue b/src/pages/views/WatershedOneMap/modalPart/legend.vue
index 03c0dfc..afedcd7 100644
--- a/src/pages/views/WatershedOneMap/modalPart/legend.vue
+++ b/src/pages/views/WatershedOneMap/modalPart/legend.vue
@@ -59,9 +59,8 @@
     </n-modal>
 
     <!-- 湖泊详情弹窗页面 -->
-    <n-modal v-model:show="showModalHP" :show-icon="false" :mask-closable="false" preset="card" title="站点详情" style="width: 950px">
-      <HuPoModal />
-      9999999
+    <n-modal v-model:show="showModalHP" :show-icon="false" :mask-closable="false" preset="card" title="站点详情" style="width: 580px">
+      <HuPoModal :valueModalhp="valueModalhp" />
     </n-modal>
   </div>
 </template>
@@ -189,9 +188,10 @@
         },
       ],
       legendList: legendData,
-      showModalHP: true,
+      showModalHP: false,
       showModalNld: false,
       valueModalNld: {},
+      valueModalhp: {},
       valueModal: {},
     });
     // 初始化默认选中的图层判断显示
@@ -2147,8 +2147,9 @@
             } else if (feature.newFiberId == 'waterLoging') {
               allData.showModalNld = true;
               allData.valueModalNld = properties;
-
-              console.log(allData.valueModalNld);
+            } else if (feature.newFiberId == 'Riversging') {
+              allData.showModalHP = true;
+              allData.valueModalhp = properties;
             } else {
               newfiberMap.flyTo({
                 lon: clickPointCoordinates[0] + 0.05,
diff --git a/src/pages/views/WatershedOneMap/modalPart/modal/GangQuModal.vue b/src/pages/views/WatershedOneMap/modalPart/modal/GangQuModal.vue
new file mode 100644
index 0000000..f30bfae
--- /dev/null
+++ b/src/pages/views/WatershedOneMap/modalPart/modal/GangQuModal.vue
@@ -0,0 +1,191 @@
+<template>
+  <!-- 湖泊监测站详情弹窗 -->
+  <div class="shuiweiModals">
+    <div class="hpjcz">
+      <div class="contLeft">
+        <div class="title">站点基本信息</div>
+        <div class="part">
+          <n-space>
+            <div class="infoContent flexs">
+              <div class="infoName">经度：</div>
+              <div class="infoData">999</div>
+            </div>
+            <div class="infoContent flexs">
+              <div class="infoName">纬度：</div>
+              <div class="infoData">888</div>
+            </div>
+          </n-space>
+
+          <n-space>
+            <div class="infoContent flexs">
+              <div class="infoName">测站编号：</div>
+              <div class="infoData">999</div>
+            </div>
+            <div class="infoContent flexs">
+              <div class="infoName">测站类型：</div>
+              <div class="infoData">888</div>
+            </div>
+          </n-space>
+        </div>
+      </div>
+      <div class="conttable">
+        <n-data-table
+          :columns="columnsJ"
+          :max-height="200"
+          style="margin-top: 10px"
+          striped
+          :data="tableDataJ"
+          :loading="tableLoadingJ"
+          :bordered="false"
+          :row-key="(row) => row.id"
+          @row-click="handleRowClick"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ref, toRefs, onMounted, reactive, onBeforeUnmount, nextTick } from 'vue';
+import { lyInfoStationDetail, lyInfoSwlljcData, lakelistdata } from '@/services';
+import * as echarts from 'echarts';
+export default {
+  name: 'shuiweiModals',
+  props: {
+    YWstationCode: String,
+  },
+  setup(props) {
+    const allData = reactive({
+      yinziValue: 'q',
+      columnsJ: [
+        { title: '序号', width: '150', key: 'STNM' },
+        {
+          title: '监测时间',
+          key: 'Z',
+          render(row) {
+            return row.Z || '--';
+          },
+        },
+        {
+          title: '实时水位(米)',
+          key: 'TM',
+          width: '160',
+          render(row) {
+            return row.TM || '--';
+          },
+        },
+      ],
+      tableDataJ: [],
+      detailVal: {},
+    });
+    //分页
+    const paginationReactive = reactive({
+      page: 1,
+      pageSize: 10,
+      showSizePicker: true,
+      pageSizes: [10, 20, 50],
+      showQuickJumper: true,
+      pageCount: 0,
+      itemCount: 0,
+      prefix: () => {
+        return '共 ' + paginationReactive.itemCount + ' 项';
+      },
+      onChange: (page) => {
+        paginationReactive.page = page;
+        // getTableList();
+      },
+      onPageSizeChange: (pageSize) => {
+        paginationReactive.pageSize = pageSize;
+        paginationReactive.page = 1;
+        // getTableList();
+      },
+    });
+    // 流域内流量监测
+    let echartHxhsw = null;
+    const echartCount = () => {
+      echartHxhsw = echarts.init(document.getElementById('echartSw'));
+      echartHxhsw.clear();
+      echartHxhsw.setOption(allData.liuliangOption);
+    };
+
+    // 加载基本信息数据
+    const getBaseData = async () => {
+      let params = {
+        stCode: props.YWstationCode,
+      };
+      let res = await lyInfoStationDetail(params);
+      if (res && res.code == 1) {
+        let datas = res.data;
+        allData.detailVal = datas;
+      }
+    };
+    onMounted(() => {
+      console.log('11111');
+    });
+    onBeforeUnmount(() => {
+      if (!!echartHxhsw) echartHxhsw.dispose();
+    });
+    return {
+      ...toRefs(allData),
+      pagination: paginationReactive,
+      getBaseData,
+    };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.shuiweiModals {
+  color: #b4c9e0;
+  height: 475px;
+  .title {
+    font-size: 18px;
+    font-weight: bold;
+  }
+  .hpjcz {
+    // display: flex;
+    margin: 10px 0px;
+    .contLeft {
+      width: 100%;
+      height: 50%;
+      .part {
+        margin-top: 10px;
+
+        .detail {
+          width: 100%;
+          display: flex;
+          font-size: 14px;
+          background: rgba(1, 27, 46, 0.6);
+          p {
+            height: 34px;
+            line-height: 34px;
+            width: 100%;
+          }
+
+          p:nth-of-type(1) {
+            width: 35%;
+            text-align: center;
+          }
+          p:nth-of-type(2) {
+            flex: 1;
+            text-align: left;
+          }
+        }
+        .detail:nth-of-type(odd) {
+          background: rgba(1, 27, 46, 0.3);
+        }
+      }
+    }
+    .conttable {
+      width: 100%;
+      flex: 1;
+    }
+  }
+}
+.flexs {
+  display: flex;
+}
+.infoContent {
+  width: 200px;
+}
+</style>

diff --git a/src/pages/views/WatershedOneMap/modalPart/legend.vue b/src/pages/views/WatershedOneMap/modalPart/legend.vue
index 03c0dfc..afedcd7 100644
--- a/src/pages/views/WatershedOneMap/modalPart/legend.vue
+++ b/src/pages/views/WatershedOneMap/modalPart/legend.vue
@@ -59,9 +59,8 @@
     </n-modal>
 
     <!-- 湖泊详情弹窗页面 -->
-    <n-modal v-model:show="showModalHP" :show-icon="false" :mask-closable="false" preset="card" title="站点详情" style="width: 950px">
-      <HuPoModal />
-      9999999
+    <n-modal v-model:show="showModalHP" :show-icon="false" :mask-closable="false" preset="card" title="站点详情" style="width: 580px">
+      <HuPoModal :valueModalhp="valueModalhp" />
     </n-modal>
   </div>
 </template>
@@ -189,9 +188,10 @@
         },
       ],
       legendList: legendData,
-      showModalHP: true,
+      showModalHP: false,
       showModalNld: false,
       valueModalNld: {},
+      valueModalhp: {},
       valueModal: {},
     });
     // 初始化默认选中的图层判断显示
@@ -2147,8 +2147,9 @@
             } else if (feature.newFiberId == 'waterLoging') {
               allData.showModalNld = true;
               allData.valueModalNld = properties;
-
-              console.log(allData.valueModalNld);
+            } else if (feature.newFiberId == 'Riversging') {
+              allData.showModalHP = true;
+              allData.valueModalhp = properties;
             } else {
               newfiberMap.flyTo({
                 lon: clickPointCoordinates[0] + 0.05,
diff --git a/src/pages/views/WatershedOneMap/modalPart/modal/GangQuModal.vue b/src/pages/views/WatershedOneMap/modalPart/modal/GangQuModal.vue
new file mode 100644
index 0000000..f30bfae
--- /dev/null
+++ b/src/pages/views/WatershedOneMap/modalPart/modal/GangQuModal.vue
@@ -0,0 +1,191 @@
+<template>
+  <!-- 湖泊监测站详情弹窗 -->
+  <div class="shuiweiModals">
+    <div class="hpjcz">
+      <div class="contLeft">
+        <div class="title">站点基本信息</div>
+        <div class="part">
+          <n-space>
+            <div class="infoContent flexs">
+              <div class="infoName">经度：</div>
+              <div class="infoData">999</div>
+            </div>
+            <div class="infoContent flexs">
+              <div class="infoName">纬度：</div>
+              <div class="infoData">888</div>
+            </div>
+          </n-space>
+
+          <n-space>
+            <div class="infoContent flexs">
+              <div class="infoName">测站编号：</div>
+              <div class="infoData">999</div>
+            </div>
+            <div class="infoContent flexs">
+              <div class="infoName">测站类型：</div>
+              <div class="infoData">888</div>
+            </div>
+          </n-space>
+        </div>
+      </div>
+      <div class="conttable">
+        <n-data-table
+          :columns="columnsJ"
+          :max-height="200"
+          style="margin-top: 10px"
+          striped
+          :data="tableDataJ"
+          :loading="tableLoadingJ"
+          :bordered="false"
+          :row-key="(row) => row.id"
+          @row-click="handleRowClick"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ref, toRefs, onMounted, reactive, onBeforeUnmount, nextTick } from 'vue';
+import { lyInfoStationDetail, lyInfoSwlljcData, lakelistdata } from '@/services';
+import * as echarts from 'echarts';
+export default {
+  name: 'shuiweiModals',
+  props: {
+    YWstationCode: String,
+  },
+  setup(props) {
+    const allData = reactive({
+      yinziValue: 'q',
+      columnsJ: [
+        { title: '序号', width: '150', key: 'STNM' },
+        {
+          title: '监测时间',
+          key: 'Z',
+          render(row) {
+            return row.Z || '--';
+          },
+        },
+        {
+          title: '实时水位(米)',
+          key: 'TM',
+          width: '160',
+          render(row) {
+            return row.TM || '--';
+          },
+        },
+      ],
+      tableDataJ: [],
+      detailVal: {},
+    });
+    //分页
+    const paginationReactive = reactive({
+      page: 1,
+      pageSize: 10,
+      showSizePicker: true,
+      pageSizes: [10, 20, 50],
+      showQuickJumper: true,
+      pageCount: 0,
+      itemCount: 0,
+      prefix: () => {
+        return '共 ' + paginationReactive.itemCount + ' 项';
+      },
+      onChange: (page) => {
+        paginationReactive.page = page;
+        // getTableList();
+      },
+      onPageSizeChange: (pageSize) => {
+        paginationReactive.pageSize = pageSize;
+        paginationReactive.page = 1;
+        // getTableList();
+      },
+    });
+    // 流域内流量监测
+    let echartHxhsw = null;
+    const echartCount = () => {
+      echartHxhsw = echarts.init(document.getElementById('echartSw'));
+      echartHxhsw.clear();
+      echartHxhsw.setOption(allData.liuliangOption);
+    };
+
+    // 加载基本信息数据
+    const getBaseData = async () => {
+      let params = {
+        stCode: props.YWstationCode,
+      };
+      let res = await lyInfoStationDetail(params);
+      if (res && res.code == 1) {
+        let datas = res.data;
+        allData.detailVal = datas;
+      }
+    };
+    onMounted(() => {
+      console.log('11111');
+    });
+    onBeforeUnmount(() => {
+      if (!!echartHxhsw) echartHxhsw.dispose();
+    });
+    return {
+      ...toRefs(allData),
+      pagination: paginationReactive,
+      getBaseData,
+    };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.shuiweiModals {
+  color: #b4c9e0;
+  height: 475px;
+  .title {
+    font-size: 18px;
+    font-weight: bold;
+  }
+  .hpjcz {
+    // display: flex;
+    margin: 10px 0px;
+    .contLeft {
+      width: 100%;
+      height: 50%;
+      .part {
+        margin-top: 10px;
+
+        .detail {
+          width: 100%;
+          display: flex;
+          font-size: 14px;
+          background: rgba(1, 27, 46, 0.6);
+          p {
+            height: 34px;
+            line-height: 34px;
+            width: 100%;
+          }
+
+          p:nth-of-type(1) {
+            width: 35%;
+            text-align: center;
+          }
+          p:nth-of-type(2) {
+            flex: 1;
+            text-align: left;
+          }
+        }
+        .detail:nth-of-type(odd) {
+          background: rgba(1, 27, 46, 0.3);
+        }
+      }
+    }
+    .conttable {
+      width: 100%;
+      flex: 1;
+    }
+  }
+}
+.flexs {
+  display: flex;
+}
+.infoContent {
+  width: 200px;
+}
+</style>
diff --git a/src/pages/views/WatershedOneMap/modalPart/modal/HuPoModal.vue b/src/pages/views/WatershedOneMap/modalPart/modal/HuPoModal.vue
index 389dae8..2f9d73b 100644
--- a/src/pages/views/WatershedOneMap/modalPart/modal/HuPoModal.vue
+++ b/src/pages/views/WatershedOneMap/modalPart/modal/HuPoModal.vue
@@ -1,22 +1,61 @@
 <template>
-  <!-- 水质监测站详情弹窗 -->
+  <!-- 湖泊监测站详情弹窗 -->
   <div class="shuiweiModals">
-    <div class="szjcz">
+    <div class="hpjcz">
       <div class="contLeft">
-        <div class="title">站点基本信息</div>
+        <!-- <div class="title">站点基本信息</div> -->
         <div class="part">
-          <div class="detail" v-for="(val, keys, index) in detailName" :key="index">
-            <p>{{ val }}</p>
-            <p v-if="keys != 'status'">{{ detailVal[keys] }}</p>
-            <p v-if="keys == 'status'">{{ detailVal[keys] == 0 ? '在线' : '离线' }}</p>
-          </div>
+          <n-space>
+            <div class="infoContent flexs">
+              <div class="infoName">经度：</div>
+              <div class="infoData">{{ datas.LTTD }}</div>
+            </div>
+            <div class="infoContent flexs">
+              <div class="infoName">纬度：</div>
+              <div class="infoData">{{ datas.LGTD }}</div>
+            </div>
+          </n-space>
+
+          <n-space>
+            <div class="infoContent flexs">
+              <div class="infoName">测站编号：</div>
+              <div class="infoData">{{ datas.STCD }}</div>
+            </div>
+            <div class="infoContent flexs">
+              <div class="infoName">测站类型：</div>
+              <div class="infoData">湖泊</div>
+            </div>
+          </n-space>
+          <n-space>
+            <div class="infoContent flexs">
+              <div class="infoName">汛前控制水位(米)：</div>
+              <div class="infoData">{{ datas.KZR }}</div>
+            </div>
+            <div class="infoContent flexs">
+              <div class="infoName">常规水位(米)：</div>
+              <div class="infoData">{{ datas.CZR }}</div>
+            </div>
+          </n-space>
+          <n-space>
+            <div class="infoContent flexs">
+              <div class="infoName">最高控制水位(米)：</div>
+              <div class="infoData">{{ datas.GZR }}</div>
+            </div>
+          </n-space>
         </div>
       </div>
-      <div class="contRight">
-        <div class="search">
-          <n-select :options="yinziOption" v-model:value="yinziValue" @update:value="checkLljc" style="width: 300px"></n-select>
-        </div>
-        <div id="echartSw"></div>
+      <div class="conttable">
+        <n-data-table
+          :columns="columnsJ"
+          :max-height="280"
+          style="margin-top: 10px"
+          striped
+          :data="tableDataJ"
+          :loading="tableLoadingJ"
+          :bordered="false"
+          :row-key="(row) => row.id"
+          @row-click="handleRowClick"
+        />
       </div>
     </div>
   </div>
@@ -29,97 +68,38 @@
 export default {
   name: 'shuiweiModals',
   props: {
-    YWstationCode: String,
+    valueModalhp: Object,
   },
   setup(props) {
     const allData = reactive({
       yinziValue: 'q',
-      yinziOption: [
-        { value: 'q', label: '瞬时流量(m³/s)' },
-        { value: 'va', label: '流速(m/s)' },
-        { value: 'z', label: '液位(m)' },
+      datas: [],
+      columnsJ: [
+        {
+          title: '序号',
+          key: 'key',
+          render: (_, index) => {
+            return `${index + 1}`;
+          },
+        },
+        {
+          title: '监测时间',
+          key: 'TM',
+          render(row) {
+            return row.TM || '--';
+          },
+        },
+        {
+          title: '实时水位(米)',
+          key: 'RZ',
+          width: '160',
+          render(row) {
+            return row.RZ || '--';
+          },
+        },
       ],
-      dateRange: null,
-      detailName: {
-        lon: '经度',
-        lat: '纬度',
-        stName: '站点名称',
-        stCode: '站点编码',
-        stationType: '站点类型',
-        area: '河道名称',
-        createTime: '安装时间',
-      },
+      tableDataJ: [],
       detailVal: {},
-      liuliangOption: {
-        color: ['rgb(14,192,148)', 'rgb(1,153,217)', 'rgb(240,85,33)'],
-        legend: {
-          show: false,
-        },
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: {
-            type: 'shadow',
-          },
-        },
-        dataZoom: [
-          {
-            type: 'inside', // 内置在坐标系中
-            xAxisIndex: 0,
-            yAxisIndex: [0, 1],
-            start: 0, // 数据窗口范围的起始百分比。范围是：0 ~ 100。表示 0% ~ 100%。
-            end: 100, // 数据窗口范围的结束百分比。范围是：0 ~ 100。
-            zoomLock: true, // 是否锁定选择区域（或叫做数据窗口）的大小。
-          },
-        ],
-        grid: {
-          top: '8%',
-          left: '3%',
-          right: '3%',
-          bottom: '2%',
-          containLabel: true,
-        },
-        xAxis: {
-          data: ['0:00', '3:00', '6:00', '9:00', '12:00', '15:00', '18:00', '21:00', '23:00'],
-          axisTick: {
-            show: false,
-          },
-          axisPointer: {
-            type: 'shadow',
-          },
-          splitLine: {
-            show: true,
-            lineStyle: {
-              color: 'rgba(25,76,90,0.8)',
-            },
-          },
-        },
-        yAxis: {
-          min: 0,
-          axisTick: {
-            show: false,
-          },
-          axisLabel: {
-            show: true,
-            color: 'rgb(41,111,121)',
-          },
-          splitLine: {
-            show: false,
-          },
-        },
-        series: [
-          {
-            name: '监测值',
-            type: 'line',
-            data: [28, 15, 15, 27, 18, 30, 20, 20, 19, 18, 14],
-            tooltip: {
-              valueFormatter: (value) => value,
-            },
-            itemStyle: {
-              borderRadius: [0, 0, 10, 10],
-            },
-          },
-        ],
-      },
     });
     //分页
     const paginationReactive = reactive({
@@ -150,47 +130,23 @@
       echartHxhsw.clear();
       echartHxhsw.setOption(allData.liuliangOption);
     };
-    // 流量监测二级
-    const checkLljc = async () => {
-      let params = {
-        stationCode: props.YWstationCode,
-      };
-      let res = await lyInfoSwlljcData(params);
-      if (res && res.code == 1) {
-        let datas = res.data;
-        allData.liuliangOption.xAxis.data = datas.tt;
-        if (allData.yinziValue == 'va') {
-          allData.liuliangOption.series[0].data = datas.q;
-          allData.liuliangOption.series[0].name = '流速(m/s)';
-        } else if (allData.yinziValue == 'q') {
-          allData.liuliangOption.series[0].data = datas.q;
-          allData.liuliangOption.series[0].name = '瞬时流量(m³/s)';
-        } else if (allData.yinziValue == 'z') {
-          allData.liuliangOption.series[0].data = datas.z;
-          allData.liuliangOption.series[0].name = '液位(m)';
-        }
-      }
-      echartCount();
-    };
+
     // 加载基本信息数据
     const getBaseData = async () => {
       let params = {
-        stCode: props.YWstationCode,
+        stCode: props.valueModalhp.STCD,
+        datatime: '2024-07-10',
       };
-      let res = await lyInfoStationDetail(params);
-      if (res && res.code == 1) {
-        let datas = res.data;
-        allData.detailVal = datas;
+      let res = await lakelistdata(params);
+      if (res) {
+        debugger;
+        allData.tableDataJ = res.result;
+        console.log(allData.tableDataJ, 'res');
       }
     };
-    const getWaterLoging = async () => {
-      console.log('000000');
-      let res = await lakelistdata({ currentPage: 1, pageSize: 99, searchFilters: [], stcd: '0261610960', datatime: '2023-12-15' });
-      console.log(res, 9999999);
-    };
     onMounted(() => {
-      console.log('11111');
-      getWaterLoging(); //获取湖泊列表
+      allData.datas = props.valueModalhp;
+      getBaseData();
     });
     onBeforeUnmount(() => {
       if (!!echartHxhsw) echartHxhsw.dispose();
@@ -199,13 +155,12 @@
       ...toRefs(allData),
       pagination: paginationReactive,
       getBaseData,
-      checkLljc,
     };
   },
 };
 </script>
 
-<style lang="less">
+<style lang="less" scoped>
 .shuiweiModals {
   color: #b4c9e0;
   height: 475px;
@@ -213,13 +168,15 @@
     font-size: 18px;
     font-weight: bold;
   }
-  .szjcz {
-    display: flex;
+  .hpjcz {
+    // display: flex;
     margin: 10px 0px;
     .contLeft {
-      width: 40%;
+      width: 100%;
+      height: 50%;
       .part {
         margin-top: 10px;
+
         .detail {
           width: 100%;
           display: flex;
@@ -245,42 +202,16 @@
         }
       }
     }
-    .contRight {
-      width: 40%;
+    .conttable {
+      width: 100%;
       flex: 1;
-      padding-left: 20px;
-      margin-left: 20px;
-      border-left: 2px solid rgba(1, 27, 46, 0.5);
-      .search {
-        display: flex;
-        .n-date-picker {
-          width: 260px;
-          margin: 0px 20px;
-        }
-        .n-select {
-          width: 150px;
-        }
-      }
-      #echartSw {
-        margin-top: 100px;
-        width: 500px;
-        height: 250px;
-      }
-      .table {
-        width: 100%;
-        margin-top: 20px;
-        overflow: auto;
-        .n-data-table-td,
-        .n-data-table-th {
-          padding: 6px !important;
-          text-align: center;
-        }
-        .n-data-table-tbody {
-          height: 160px;
-          overflow: auto;
-        }
-      }
     }
   }
 }
+.flexs {
+  display: flex;
+}
+.infoContent {
+  width: 250px;
+}
 </style>