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

2026-04-03 16:08:05 +08:00 · 2026-04-03 16:08:05 +08:00 · f1ff182d46
commit f1ff182d46
parent 66a949a7a2
8 changed files with 98 additions and 88 deletions
--- a/frontend/src/components/RightDrawer/index.vue
+++ b/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>
--- a/frontend/src/components/developStatusChart/index.vue
+++ b/frontend/src/components/developStatusChart/index.vue
@ -37,50 +37,35 @@ const initChart = () => {
    chartInstance = echarts.init(chartContainer.value);

    const option = {
-        tooltip: {
-            trigger: 'item',
-            formatter: '{a} <br/>{b}: {c} ({d}%)',
-            // position: function (point, params, dom, rect, size) {
-
-            //     // 固定在图表右侧显示，再往右挪一点
-            //     return [size.viewSize.width - 120, point[1]];
-            // }
-        },
+         tooltip: {
+                trigger: 'item',
+                formatter: '{a} <br/>{b}: {c} ({d}%)',
+                position: 'right'
+            },
        legend: {
-            bottom: '25%',
-            right: '2%',
-            orient: 'vertical', // 垂直排列
+           
            data: ['已建', '在建'],
-            itemWidth: 21,
-            itemHeight: 11,
-            itemStyle: {
-                borderRadius: 0
-            },
-            textStyle: {
-                fontSize: 11
-            },
-            itemGap: 12 // 图例项之间的间距
+               left: '60%',
+                orient: 'vertical',
+                top: 'center',
+                itemWidth: 20,
+                itemHeight: 12
        },
        series: [
            {
-                name: '建设状态',
+                name: '装机容量',
                type: 'pie',
-                radius: ['80%', '95%'], // 外环
-                center: ['35%', '50%'], // 整体向下移动一点
-                avoidLabelOverlap: false,
-                itemStyle: {
-                    borderRadius: 0,
-                    borderColor: '#fff',
-                    borderWidth: 1
-                },
+                radius: ['70%', '90%'], // 外环
+                center: ['30%', '50%'], // 整体向下移动一点
+         
+                  itemStyle: {
+                        borderRadius: 2,
+                        borderColor: '#fff',
+                        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%'], // 中心圆
-                center: ['35%', '50%'], // 与外环保持一致，整体向下移动
-                avoidLabelOverlap: false,
+                radius: ['0%', '50%'], // 中心圆
+                center: ['30%', '50%'], // 与外环保持一致，整体向下移动
                itemStyle: {
-                    borderRadius: 0,
-                    borderColor: '#fff',
-                    borderWidth: 0
-                },
+                        borderRadius: 2,
+                        borderColor: '#fff',
+                        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; // 容器高度
    }
 }
--- a/frontend/src/components/engEnvironmentData/index.vue
+++ b/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;
                }
            }
        }
--- a/frontend/src/modules/huanbaoMod/index.vue
+++ b/frontend/src/modules/huanbaoMod/index.vue
@ -1,20 +1,21 @@
 <!-- SidePanelItem.vue -->
 <template>
-    <div>
        <SidePanelItem title="环保设施情况">
-            <div class="facility-grid">
+            <div class="facility-grid" >
                <div v-for="facility in facilities" :key="facility.name" class="facility-card">
-                    <div class="facility-icon">
-                        <i style="color: #fff;" :class="facility.icon" type="icon-shengtailiuliang2"></i>
+                    <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;
-    grid-template-columns: repeat(2, 1fr);
-    gap: 8px;
+    width: 406px;
+    flex-flow: wrap;
+    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;
 }

--- a/frontend/src/modules/huanbaozdjcgzkzQK/index.vue
+++ b/frontend/src/modules/huanbaozdjcgzkzQK/index.vue
@ -1,20 +1,22 @@
 <!-- SidePanelItem.vue -->
+
 <template>
-    <div>
        <SidePanelItem title="环保自动监测工作开展情况">
-            <div class="facility-grid">
+            <div class="facility-grid" >
                <div v-for="facility in facilities" :key="facility.name" class="facility-card">
-                    <div class="facility-icon">
-                         <img width="18" height="14" :src="facility.icon ">
+                    <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;
-    grid-template-columns: repeat(2, 1fr);
-    gap: 8px;
+    // width: 406px;
+    flex-flow: wrap;
+    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>
--- a/frontend/src/modules/jidiInfoMod/index.vue
+++ b/frontend/src/modules/jidiInfoMod/index.vue
@ -43,6 +43,7 @@ onMounted(() => {});
 }

 .basic_body1 {
-  width: 100%;
+    width: 100%;
+    line-break: anywhere;
 }
 </style>
--- a/frontend/src/modules/shuidianhuangjingjieruMod/DataTable.vue
+++ b/frontend/src/modules/shuidianhuangjingjieruMod/DataTable.vue
@ -27,7 +27,7 @@ const columns: ColumnsType = [
        align: 'left'
    },
    {
-        title: '装机容量 (万 kW)',
+        title: '装机容量 (万kW)',
        key: 'capacity',
        align: 'center',
        children: [
@ -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 {
--- a/frontend/src/styles/index.scss
+++ b/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;
+}