已迁入模块样式的详细更改

frontend/src/components/RightDrawer/index.vue

@@ -20,7 +20,7 @@
         <div @click="handleToggle" class="drawerController">
           <img src="../../assets/components/arrow-right.png" alt="" />
         </div>
-        <div style="padding:16px 8px 0;" class="text_she">
+        <div style="padding:16px 16px 0;" class="text_she">
           <slot />
         </div>
       </a-drawer>

frontend/src/components/developStatusChart/index.vue

@@ -40,47 +40,32 @@ const initChart = () => {
          tooltip: {
                 trigger: 'item',
                 formatter: '{a} <br/>{b}: {c} ({d}%)',
-            // position: function (point, params, dom, rect, size) {
+                position: 'right'
-
-            //     // 固定在图表右侧显示，再往右挪一点
-            //     return [size.viewSize.width - 120, point[1]];
-            // }
             },
         legend: {
-            bottom: '25%',
+           
-            right: '2%',
-            orient: 'vertical', // 垂直排列
             data: ['已建', '在建'],
-            itemWidth: 21,
+               left: '60%',
-            itemHeight: 11,
+                orient: 'vertical',
-            itemStyle: {
+                top: 'center',
-                borderRadius: 0
+                itemWidth: 20,
-            },
+                itemHeight: 12
-            textStyle: {
-                fontSize: 11
-            },
-            itemGap: 12 // 图例项之间的间距
         },
         series: [
             {
-                name: '建设状态',
+                name: '装机容量',
                 type: 'pie',
-                radius: ['80%', '95%'], // 外环
+                radius: ['70%', '90%'], // 外环
-                center: ['35%', '50%'], // 整体向下移动一点
+                center: ['30%', '50%'], // 整体向下移动一点
-                avoidLabelOverlap: false,
+         
                   itemStyle: {
-                    borderRadius: 0,
+                        borderRadius: 2,
                         borderColor: '#fff',
-                    borderWidth: 1
+                        borderWidth: 2
                     },
                 label: {
                     show: false // 不显示外侧标签
                 },
-                emphasis: {
-                    label: {
-                        show: false
-                    }
-                },
                 labelLine: {
                     show: false // 不显示引导线
                 },
@@ -90,24 +75,18 @@ const initChart = () => {
                 ]
             },
             {
-                name: '中心圆',
+                name: '数量(座)',
                 type: 'pie',
-                radius: ['0%', '55%'], // 中心圆
+                radius: ['0%', '50%'], // 中心圆
-                center: ['35%', '50%'], // 与外环保持一致，整体向下移动
+                center: ['30%', '50%'], // 与外环保持一致，整体向下移动
-                avoidLabelOverlap: false,
                 itemStyle: {
-                    borderRadius: 0,
+                        borderRadius: 2,
                         borderColor: '#fff',
-                    borderWidth: 0
+                        borderWidth: 2
                     },
                 label: {
                     show: false
                 },
-                emphasis: {
-                    label: {
-                        show: false
-                    }
-                },
                 labelLine: {
                     show: false
                 },
@@ -128,13 +107,13 @@ const initChart = () => {
 };
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .basic_body {
     width: 100%;
     height: 100%;
 
     .chart-container {
-        width: 185px; // 容器宽度
+        width: 203px; // 容器宽度
         height: 100px; // 容器高度
     }
 }

frontend/src/components/engEnvironmentData/index.vue

@@ -60,23 +60,27 @@ onMounted(() => {
         font-weight: 500;
         color: #333;
         text-align: center;
+        margin-bottom: 4px;
     }
 
     .data-list {
+        display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-content: space-between;
+    height: 85%;
         .data-item {
             border: 1px solid #edf2f8;
-            margin-bottom: 3px;
             cursor: pointer;
-            padding: 0px 3px;
 
             .item-content {
                 display: flex;
                 align-items: center;
-                padding: 6px 4px;
+                padding: 6px;
 
                 .color-bar {
                     width: 2px;
-                    height: 14px;
+                    height: 19px;
                     margin-right: 6px;
                     border-radius: 2px;
                     display: block;
@@ -84,6 +88,7 @@ onMounted(() => {
 
                 .label {
                     flex: 1;
+                    line-height: 10px;
                 }
             }
         }

frontend/src/modules/huanbaoMod/index.vue

@@ -1,20 +1,21 @@
 <!-- SidePanelItem.vue -->
 <template>
-    <div>
         <SidePanelItem title="环保设施情况">
             <div class="facility-grid" >
                 <div v-for="facility in facilities" :key="facility.name" class="facility-card">
+                    <div style="width: 60px;height: 62px;display: flex;align-items: center;justify-content: center;">
                         <div class="facility-icon">
                             <i style="color: #fff;" :class="facility.icon" type="icon-shengtailiuliang2"></i>
                         </div>
+                    </div>
+
                     <div class="facility-info">
                         <div class="facility-name">{{ facility.name }}</div>
-                        <div style="font-size: 18px;"> <span class="facility-count">{{ facility.count }}</span> 个</div>
+                        <div style="font-size: 16px;"> <span class="facility-count">{{ facility.count }}</span><span>个</span></div>
                     </div>
                 </div>
             </div>
         </SidePanelItem>
-    </div>
 </template>
 
 <script lang="ts" setup>
@@ -73,21 +74,26 @@ onMounted(() => {
 
 <style lang="scss" scoped>
 .facility-grid {
-    display: grid;
+    width: 406px;
-    grid-template-columns: repeat(2, 1fr);
+    flex-flow: wrap;
-    gap: 8px;
+    display: flex;
+    justify-content: space-between;
     font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
 }
 
 .facility-card {
+    width: 200px;
+    height: 64px;
     display: flex;
     align-items: center;
-    padding: 6px;
+    justify-content: space-between;
+    margin: 4px 0px;
     background: #fff;
     border: 1px solid #e8e8e8;
     border-radius: 2px;
     transition: all 0.3s;
     cursor: pointer;
+    box-sizing: border-box;
 }
 
 .facility-icon {
@@ -96,7 +102,7 @@ onMounted(() => {
     justify-content: center;
     width: 40px;
     height: 40px;
-    margin-right: 8px;
+    // margin-right: 8px;
     background: #2f6b98;
     border-radius: 50%;
 
@@ -113,7 +119,7 @@ onMounted(() => {
 .facility-name {
     font-size: 16px;
     color: #333;
-    margin-bottom: 4px;
+    // margin-bottom: 4px;
     // font-weight: 500;
 }
 

frontend/src/modules/huanbaozdjcgzkzQK/index.vue

@@ -1,20 +1,22 @@
 <!-- SidePanelItem.vue -->
+
 <template>
-    <div>
         <SidePanelItem title="环保自动监测工作开展情况">
             <div class="facility-grid" >
                 <div v-for="facility in facilities" :key="facility.name" class="facility-card">
+                    <div style="width: 60px;height: 62px;display: flex;align-items: center;justify-content: center;">
                         <div class="facility-icon">
                              <img width="18" height="14" :src="facility.icon ">
                         </div>
+                    </div>
+
                     <div class="facility-info">
                         <div class="facility-name">{{ facility.name }}</div>
-                        <div> <span class="facility-count">{{ facility.count }}</span> 个</div>
+                        <div style="font-size: 16px;"> <span class="facility-count">{{ facility.count }}</span><span>个</span></div>
                     </div>
                 </div>
             </div>
         </SidePanelItem>
-    </div>
 </template>
 
 <script lang="ts" setup>
@@ -84,20 +86,27 @@ onMounted(() => {
 
 <style lang="scss" scoped>
 .facility-grid {
-    display: grid;
+    // width: 406px;
-    grid-template-columns: repeat(2, 1fr);
+    flex-flow: wrap;
-    gap: 8px;
+    display: flex;
+    justify-content: space-between;
+    margin-top: -7px;
+    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
 }
 
 .facility-card {
+    width: 200px;
+    height: 64px;
     display: flex;
     align-items: center;
-    padding: 6px;
+    justify-content: space-between;
+    margin: 4px 0px;
     background: #fff;
     border: 1px solid #e8e8e8;
-    border-radius: 4px;
+    border-radius: 2px;
     transition: all 0.3s;
     cursor: pointer;
+    box-sizing: border-box;
 }
 
 .facility-icon {
@@ -106,7 +115,7 @@ onMounted(() => {
     justify-content: center;
     width: 40px;
     height: 40px;
-    margin-right: 8px;
+    // margin-right: 8px;
     background: #2f6b98;
     border-radius: 50%;
 
@@ -123,13 +132,13 @@ onMounted(() => {
 .facility-name {
     font-size: 16px;
     color: #333;
-    margin-bottom: 4px;
+    // margin-bottom: 4px;
     // font-weight: 500;
 }
 
 .facility-count {
     font-size: 18px;
     color: #2f6b98;
-    font-weight: 600;
+    // font-weight: 600;
 }
 </style>

frontend/src/modules/jidiInfoMod/index.vue

@@ -44,5 +44,6 @@ onMounted(() => {});
 
 .basic_body1 {
     width: 100%;
+    line-break: anywhere;
 }
 </style>

frontend/src/modules/shuidianhuangjingjieruMod/DataTable.vue

@@ -35,28 +35,28 @@ const columns: ColumnsType = [
                 title: '总计',
                 dataIndex: 'total',
                 key: 'total',
-                width: 70,
+                width: 73.6,
                 align: 'center'
             },
             {
                 title: '已建',
                 dataIndex: 'built',
                 key: 'built',
-                width: 70,
+                width: 73.6,
                 align: 'center'
             },
             {
                 title: '在建',
                 dataIndex: 'building',
                 key: 'building',
-                width: 70,
+                width: 73.6,
                 align: 'center'
             },
             {
                 title: '未建',
                 dataIndex: 'unbuilt',
                 key: 'unbuilt',
-                width: 70,
+                width: 73.6,
                 align: 'center'
             },
         ]
@@ -206,7 +206,7 @@ onMounted(() => {
 .data-table-container {
     padding: 0;
     background: #fff;
-    margin-top: 10px;
+    padding: 16px 0px;
 }
 
 .custom-table {

frontend/src/styles/index.scss

@@ -95,3 +95,13 @@ svg {
   height: 98%;
   position: relative;
 }
+//滚动条统一样式
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+::-webkit-scrollbar-thumb {
+    border-radius: 4px;
+    background: #bbb;
+    -webkit-box-shadow: inset 0 0 6px #ddd;
+}