基于风机发电量全寿命周期管控的研究与应用项目中，首页接口服务联调（天气预测部分，预测电量部分，实际功率部分，计划电量完成情况部分）；

src/App.vue

@@ -439,20 +439,20 @@
                         svg: `<svg t="1711617136510" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="53900" width="25" height="25"><path d="M768 960H128c-17.67 0-32-14.33-32-32V224c0-17.67 14.33-32 32-32h640c17.67 0 32 14.33 32 32v704c0 17.67-14.33 32-32 32z m-608-64h576V256H160v640z" p-id="53901" fill="#33CAB7"></path><path d="M896 864c-17.67 0-32-14.33-32-32V128H225c-17.67 0-32-14.33-32-32s14.33-32 32-32h671c17.67 0 32 14.33 32 32v736c0 17.67-14.33 32-32 32zM288 832h-64V608c0-17.67 14.33-32 32-32s32 14.33 32 32v224zM480 832h-64V672c0-17.67 14.33-32 32-32s32 14.33 32 32v160z" p-id="53902" fill="#33CAB7"></path><path d="M672 832h-64V544c0-17.67 14.33-32 32-32s32 14.33 32 32v288z" p-id="53903" fill="#33CAB7"></path><path d="M448.02 512c-9.07 0-18.03-3.84-24.31-11.18L352 417.17l-71.7 83.65c-11.5 13.42-31.7 14.97-45.12 3.47-13.42-11.5-14.97-31.7-3.47-45.12l96-112a32 32 0 0 1 24.3-11.17 32 32 0 0 1 24.3 11.17l77.55 90.47 168.41-112.27c14.7-9.8 34.57-5.83 44.38 8.88 9.8 14.71 5.83 34.57-8.88 44.38l-192 128a32.008 32.008 0 0 1-17.75 5.37z" p-id="53904" fill="#33CAB7"></path></svg>`,
                         name: '场站自由报表'
                     },
-                    {
-                        icon: 'Finished',
-                        index: '/intelligentReport/reporting',
-                        img: report_bbsb,
-                        svg: `<svg t="1711617560802" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="69812" width="25" height="25"><path d="M495.7 495.2v-17.3H270.9c-6.7 0-18.2 14.1-18.2 21v7.5c0 6.8 11.6 23.4 18.2 23.4h172.9c12.6-19.4 33.2-22.3 51.9-34.6z" p-id="69813" fill="#33CAB7"></path><path d="M461.4 858.2H170.6c-13.4 0-20.8-3.4-20.8-17.2V183.9c0-13.7 3.9-17.3 17.3-17.3h518.7c13.4 0 17.4 8.7 17.4 22.5V426c16.6 1.4 33.5 0.6 51.9 0V166.6c0-27.4-25-51.9-51.7-51.9h-557c-26.7 0-48.4 22.2-48.4 49.6v693.8c0 27.4 25.2 52 51.9 52H513c-18.5-14.3-37.3-33.4-51.6-51.9z" p-id="69814" fill="#33CAB7"></path><path d="M409.3 650.8c0.6-5.1-1.7-12.4 0-17.3H270.9c-6.7 0-18.2 7.2-18.2 14v24.8c0 6.8 11.6 13.1 18.2 13.1h138.3c-0.2-9.4-1.7-19.4 0.3-28.8 0.1-0.4 0.8-16.6-0.2-5.8zM597.1 374.9l2.4-0.8v-17.3c0-6.8-10.6-17.3-17.3-17.3H270.9c-6.7 0-18.2 3.8-18.2 10.6v24.8c0 6.8 11.6 16.5 18.2 16.5h311.2c6.8 0 15-9.6 15-16.5zM712.9 564.4c-5.1-5.1-11.7-7.6-18.3-7.6-6.6 0-13.3 2.5-18.3 7.6l-97.8 97.8c-10.1 10.1-10.1 26.6 0 36.7 5.1 5.1 11.7 7.6 18.3 7.6 6.6 0 13.3-2.5 18.3-7.6l53.5-53.5v152.5c0 14.3 11.6 25.9 25.9 25.9 14.3 0 25.9-11.6 25.9-25.9V645.3l53.5 53.5c5.1 5.1 11.7 7.6 18.3 7.6 6.6 0 13.3-2.5 18.3-7.6 10.1-10.1 10.1-26.5 0-36.7l-97.6-97.7z" p-id="69815" fill="#33CAB7"></path><path d="M694.6 460.6c-128.9 0-233.4 104.5-233.4 233.4s104.5 233.4 233.4 233.4C823.5 927.5 928 822.9 928 694S823.5 460.6 694.6 460.6z m0 415C594.4 875.6 513 794.1 513 694s81.4-181.6 181.6-181.6c100.1 0 181.6 81.4 181.6 181.6s-81.5 181.6-181.6 181.6z" p-id="69816" fill="#33CAB7"></path></svg>`,
-                        name: '报表上报'
-                    },
-                    {
-                        icon: 'Odometer',
-                        index: '/intelligentReport/scriptgeneration',
-                        img: report_bbjb,
-                        svg: `<svg t="1711617616189" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="71308" width="25" height="25"><path d="M787.4 918H238.8c-72 0-130.6-58.6-130.6-130.6V238.8c0-72 58.6-130.6 130.6-130.6h548.6c72 0 130.6 58.6 130.6 130.6v548.6c0 72-58.6 130.6-130.6 130.6zM238.8 168.2c-38.9 0-70.6 31.7-70.6 70.6v548.6c0 38.9 31.7 70.6 70.6 70.6h548.6c38.9 0 70.6-31.7 70.6-70.6V238.8c0-38.9-31.7-70.6-70.6-70.6H238.8z" p-id="71309" fill="#33CAB7"></path><path d="M451.1 728.8c-3.1 0-6.3-0.5-9.5-1.5-15.7-5.2-24.2-22.2-19-38l128-383.9c5.2-15.7 22.2-24.2 38-19 15.7 5.2 24.2 22.2 19 38l-128 383.9c-4.2 12.5-15.9 20.5-28.5 20.5zM643.1 661.9c-8.3 0-16.5-3.4-22.4-10.1-11-12.4-9.9-31.3 2.5-42.4l105.6-94-107.5-113c-11.4-12-10.9-31 1.1-42.4 12-11.4 31-10.9 42.4 1.1l128.8 135.6c5.6 5.9 8.6 13.8 8.2 21.9-0.3 8.1-4 15.7-10 21.2L663 654.3c-5.7 5.1-12.8 7.6-19.9 7.6zM385.9 661.9c-7.1 0-14.2-2.5-19.9-7.6L237.2 539.7c-6.1-5.4-9.7-13-10-21.2-0.3-8.1 2.6-16 8.2-21.9L364.2 361c11.4-12 30.4-12.5 42.4-1.1s12.5 30.4 1.1 42.4L300.2 515.5l105.6 94c12.4 11 13.5 30 2.5 42.4-5.9 6.6-14.2 10-22.4 10z" p-id="71310" fill="#33CAB7"></path></svg>`,
-                        name: '报表脚本'
-                    },
+                    // {
+                    //     icon: 'Finished',
+                    //     index: '/intelligentReport/reporting',
+                    //     img: report_bbsb,
+                    //     svg: `<svg t="1711617560802" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="69812" width="25" height="25"><path d="M495.7 495.2v-17.3H270.9c-6.7 0-18.2 14.1-18.2 21v7.5c0 6.8 11.6 23.4 18.2 23.4h172.9c12.6-19.4 33.2-22.3 51.9-34.6z" p-id="69813" fill="#33CAB7"></path><path d="M461.4 858.2H170.6c-13.4 0-20.8-3.4-20.8-17.2V183.9c0-13.7 3.9-17.3 17.3-17.3h518.7c13.4 0 17.4 8.7 17.4 22.5V426c16.6 1.4 33.5 0.6 51.9 0V166.6c0-27.4-25-51.9-51.7-51.9h-557c-26.7 0-48.4 22.2-48.4 49.6v693.8c0 27.4 25.2 52 51.9 52H513c-18.5-14.3-37.3-33.4-51.6-51.9z" p-id="69814" fill="#33CAB7"></path><path d="M409.3 650.8c0.6-5.1-1.7-12.4 0-17.3H270.9c-6.7 0-18.2 7.2-18.2 14v24.8c0 6.8 11.6 13.1 18.2 13.1h138.3c-0.2-9.4-1.7-19.4 0.3-28.8 0.1-0.4 0.8-16.6-0.2-5.8zM597.1 374.9l2.4-0.8v-17.3c0-6.8-10.6-17.3-17.3-17.3H270.9c-6.7 0-18.2 3.8-18.2 10.6v24.8c0 6.8 11.6 16.5 18.2 16.5h311.2c6.8 0 15-9.6 15-16.5zM712.9 564.4c-5.1-5.1-11.7-7.6-18.3-7.6-6.6 0-13.3 2.5-18.3 7.6l-97.8 97.8c-10.1 10.1-10.1 26.6 0 36.7 5.1 5.1 11.7 7.6 18.3 7.6 6.6 0 13.3-2.5 18.3-7.6l53.5-53.5v152.5c0 14.3 11.6 25.9 25.9 25.9 14.3 0 25.9-11.6 25.9-25.9V645.3l53.5 53.5c5.1 5.1 11.7 7.6 18.3 7.6 6.6 0 13.3-2.5 18.3-7.6 10.1-10.1 10.1-26.5 0-36.7l-97.6-97.7z" p-id="69815" fill="#33CAB7"></path><path d="M694.6 460.6c-128.9 0-233.4 104.5-233.4 233.4s104.5 233.4 233.4 233.4C823.5 927.5 928 822.9 928 694S823.5 460.6 694.6 460.6z m0 415C594.4 875.6 513 794.1 513 694s81.4-181.6 181.6-181.6c100.1 0 181.6 81.4 181.6 181.6s-81.5 181.6-181.6 181.6z" p-id="69816" fill="#33CAB7"></path></svg>`,
+                    //     name: '报表上报'
+                    // },
+                    // {
+                    //     icon: 'Odometer',
+                    //     index: '/intelligentReport/scriptgeneration',
+                    //     img: report_bbjb,
+                    //     svg: `<svg t="1711617616189" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="71308" width="25" height="25"><path d="M787.4 918H238.8c-72 0-130.6-58.6-130.6-130.6V238.8c0-72 58.6-130.6 130.6-130.6h548.6c72 0 130.6 58.6 130.6 130.6v548.6c0 72-58.6 130.6-130.6 130.6zM238.8 168.2c-38.9 0-70.6 31.7-70.6 70.6v548.6c0 38.9 31.7 70.6 70.6 70.6h548.6c38.9 0 70.6-31.7 70.6-70.6V238.8c0-38.9-31.7-70.6-70.6-70.6H238.8z" p-id="71309" fill="#33CAB7"></path><path d="M451.1 728.8c-3.1 0-6.3-0.5-9.5-1.5-15.7-5.2-24.2-22.2-19-38l128-383.9c5.2-15.7 22.2-24.2 38-19 15.7 5.2 24.2 22.2 19 38l-128 383.9c-4.2 12.5-15.9 20.5-28.5 20.5zM643.1 661.9c-8.3 0-16.5-3.4-22.4-10.1-11-12.4-9.9-31.3 2.5-42.4l105.6-94-107.5-113c-11.4-12-10.9-31 1.1-42.4 12-11.4 31-10.9 42.4 1.1l128.8 135.6c5.6 5.9 8.6 13.8 8.2 21.9-0.3 8.1-4 15.7-10 21.2L663 654.3c-5.7 5.1-12.8 7.6-19.9 7.6zM385.9 661.9c-7.1 0-14.2-2.5-19.9-7.6L237.2 539.7c-6.1-5.4-9.7-13-10-21.2-0.3-8.1 2.6-16 8.2-21.9L364.2 361c11.4-12 30.4-12.5 42.4-1.1s12.5 30.4 1.1 42.4L300.2 515.5l105.6 94c12.4 11 13.5 30 2.5 42.4-5.9 6.6-14.2 10-22.4 10z" p-id="71310" fill="#33CAB7"></path></svg>`,
+                    //     name: '报表脚本'
+                    // },
                 ],
                 generatingCapDatas: [{
                         icon: 'Coin',

src/views/generatingCapacity/dataAnalysis/agcAnalysis/index.vue

@@ -49,9 +49,9 @@
     import httpRequest from '@/utils/request.js'
     import dayjs from 'dayjs';
     /**配置参数 */
-    const tableHeight = ref(window.innerHeight - 180 + 'px')
-    const treeHeight = ref(window.innerHeight - 180 + 'px') //tree高度
-    const excelHeight = ref(window.innerHeight - 180 + 'px') //excel高度
+    const tableHeight = ref(window.innerHeight - 170 + 'px')
+    const treeHeight = ref(window.innerHeight - 170 + 'px') //tree高度
+    const excelHeight = ref(window.innerHeight - 170 + 'px') //excel高度
     /**excel 开始 */
     const excelList = ref([])
     const funExcelChange = async (obj) => { //点击excel项时
@@ -303,13 +303,13 @@
     onMounted(() => {
         theme.value = store.state.theme
         echartsTheme.value = !theme.value ? 'dark' : ''
-        tableHeight.value = window.innerHeight - 180 + 'px'
-        excelHeight.value = window.innerHeight - 180 + 'px'
-        treeHeight.value = window.innerHeight - 180 + 'px'
+        tableHeight.value = window.innerHeight - 170 + 'px'
+        excelHeight.value = window.innerHeight - 170 + 'px'
+        treeHeight.value = window.innerHeight - 170 + 'px'
         window.addEventListener('resize', () => {
-            tableHeight.value = window.innerHeight - 180 + 'px'
-            excelHeight.value = window.innerHeight - 180 + 'px'
-            treeHeight.value = window.innerHeight - 180 + 'px'
+            tableHeight.value = window.innerHeight - 170 + 'px'
+            excelHeight.value = window.innerHeight - 170 + 'px'
+            treeHeight.value = window.innerHeight - 170 + 'px'
         })
     })
     /**activated */

src/views/generatingCapacity/dataAnalysis/angleAnalysis/index.vue

@@ -45,9 +45,9 @@
     import CurrentScatterChart from './components/current-scatter-chart.vue'
     import httpRequest from '@/utils/request.js'
     /**配置参数 */
-    const tableHeight = ref(window.innerHeight - 130 + 'px')
-    const treeHeight = ref(window.innerHeight - 130 + 'px') //tree高度
-    const excelHeight = ref(window.innerHeight - 130 + 'px') //excel高度
+    const tableHeight = ref(window.innerHeight - 120 + 'px')
+    const treeHeight = ref(window.innerHeight - 120 + 'px') //tree高度
+    const excelHeight = ref(window.innerHeight - 120 + 'px') //excel高度
     /**excel 开始 */
     const excelList = ref([])
     const funExcelChange = async (obj) => { //点击excel项时
@@ -224,13 +224,13 @@
         funGetTree()
         theme.value = store.state.theme
         echartsTheme.value = !theme.value ? 'dark' : ''
-        tableHeight.value = window.innerHeight - 130 + 'px'
-        excelHeight.value = window.innerHeight - 130 + 'px'
-        treeHeight.value = window.innerHeight - 130 + 'px'
+        tableHeight.value = window.innerHeight - 120 + 'px'
+        excelHeight.value = window.innerHeight - 120 + 'px'
+        treeHeight.value = window.innerHeight - 120 + 'px'
         window.addEventListener('resize', () => {
-            tableHeight.value = window.innerHeight - 130 + 'px'
-            excelHeight.value = window.innerHeight - 130 + 'px'
-            treeHeight.value = window.innerHeight - 130 + 'px'
+            tableHeight.value = window.innerHeight - 120 + 'px'
+            excelHeight.value = window.innerHeight - 120 + 'px'
+            treeHeight.value = window.innerHeight - 120 + 'px'
         })
     })
     /**activated */
@@ -264,27 +264,29 @@
 
             .main {
                 display: flex;
-                justify-content: space-between;
-                // width: calc(100% - 40px);
                 width: 100%;
 
                 .treeDataMain,
                 .excelDataMain,
                 .tableDataMain {
-                    padding: 10px;
                     border-radius: 10px;
                 }
 
                 .treeDataMain {
-                    width: calc(20% - 20px);
+                    margin-right: 10px;
+                    padding: 10px 0 10px 10px;
+                    width: calc(19% - 20px);
 
                 }
 
                 .excelDataMain {
-                    width: calc(13% - 20px);
+                    margin-right: 10px;
+                    padding: 10px 0 10px 10px;
+                    width: calc(15% - 20px);
                 }
 
                 .tableDataMain {
+                    padding: 10px;
                     width: calc(66% - 20px);
                     position: relative;
 

src/views/generatingCapacity/dataAnalysis/combine/index.vue

@@ -124,9 +124,9 @@
     // import tableRes from '@/data/table.json'
     // import areaDataRes from '@/data/areaData.json'
     /**配置参数 */
-    const tableHeight = ref(window.innerHeight - 180 + 'px')
-    const excelHeight = ref((window.innerHeight - 150) / 2 + 'px')
-    const treeHeight = ref((window.innerHeight - 150) / 2 + 'px')
+    const tableHeight = ref(window.innerHeight - 170 + 'px')
+    const excelHeight = ref((window.innerHeight - 131) / 2 + 'px')
+    const treeHeight = ref((window.innerHeight - 131) / 2 + 'px')
     /**excel 开始 */
     const excelCheckboxShow = ref(false)
     const excelType = ref('')
@@ -704,13 +704,13 @@
         theme.value = store.state.theme
         echartsTheme.value = !theme.value ? 'dark' : ''
         dataRadom.value = (new Date().getTime()).toString()
-        tableHeight.value = window.innerHeight - 180 + 'px'
-        excelHeight.value = (window.innerHeight - 150) / 2 + 'px'
-        treeHeight.value = (window.innerHeight - 150) / 2 + 'px'
+        tableHeight.value = window.innerHeight - 170 + 'px'
+        excelHeight.value = (window.innerHeight - 131) / 2 + 'px'
+        treeHeight.value = (window.innerHeight - 131) / 2 + 'px'
         window.addEventListener('resize', () => {
-            tableHeight.value = window.innerHeight - 180 + 'px'
-            excelHeight.value = (window.innerHeight - 150) / 2 + 'px'
-            treeHeight.value = (window.innerHeight - 150) / 2 + 'px'
+            tableHeight.value = window.innerHeight - 170 + 'px'
+            excelHeight.value = (window.innerHeight - 131) / 2 + 'px'
+            treeHeight.value = (window.innerHeight - 131) / 2 + 'px'
         })
         /**test */
         // funExcelChange({
@@ -747,24 +747,25 @@
 
             .main {
                 display: flex;
-                justify-content: space-between;
-                // width: calc(100% - 40px);
                 width: 100%;
 
                 .treeDataMain,
                 .excelDataMain,
                 .tableDataMain {
-                    padding: 10px;
                     border-radius: 10px;
                 }
 
                 .treeDataMain {
-                    width: calc(20% - 20px);
+                    margin-right: 10px;
+                    padding: 10px 0 10px 10px;
+                    width: calc(19% - 20px);
 
                 }
 
                 .excelDataMain {
-                    width: calc(13% - 20px);
+                    margin-right: 10px;
+                    padding: 10px 0 10px 10px;
+                    width: calc(15% - 20px);
 
                     .excelDataMain_top {
                         padding: 5px 0;
@@ -776,6 +777,7 @@
                 }
 
                 .tableDataMain {
+                    padding: 10px;
                     width: calc(66% - 20px);
                     position: relative;
 

src/views/generatingCapacity/dataAnalysis/hotAnalysis/index.vue

@@ -135,9 +135,9 @@
     import util from "@tools/util";
     import CurrentScatterChart from './components/current-scatter-chart.vue'
     /**配置参数 */
-    const treeHeight = ref(window.innerHeight - 120 + 'px') //tree高度
-    const excelHeight = ref(window.innerHeight - 120 + 'px') //excel高度
-    const tableHeight = ref(window.innerHeight - 180 + 'px')
+    const treeHeight = ref(window.innerHeight - 111 + 'px') //tree高度
+    const excelHeight = ref(window.innerHeight - 111 + 'px') //excel高度
+    const tableHeight = ref(window.innerHeight - 171 + 'px')
     /** 额定功率 */
     const powerproduction = ref("")
     /**excel 开始 */
@@ -923,13 +923,13 @@
         funGetProcessTree()
         theme.value = store.state.theme
         echartsTheme.value = !theme.value ? 'dark' : ''
-        tableHeight.value = window.innerHeight - 180 + 'px'
-        excelHeight.value = (window.innerHeight - 120) + 'px'
-        treeHeight.value = (window.innerHeight - 120) + 'px'
+        tableHeight.value = window.innerHeight - 171 + 'px'
+        excelHeight.value = (window.innerHeight - 111) + 'px'
+        treeHeight.value = (window.innerHeight - 111) + 'px'
         window.addEventListener('resize', () => {
-            tableHeight.value = window.innerHeight - 180 + 'px'
-            excelHeight.value = (window.innerHeight - 120) + 'px'
-            treeHeight.value = (window.innerHeight - 120) + 'px'
+            tableHeight.value = window.innerHeight - 171 + 'px'
+            excelHeight.value = (window.innerHeight - 111) + 'px'
+            treeHeight.value = (window.innerHeight - 111) + 'px'
         })
         /**test */
         // funExcelChange({
@@ -969,27 +969,29 @@
 
             .main {
                 display: flex;
-                justify-content: space-between;
-                // width: calc(100% - 40px);
                 width: 100%;
 
                 .treeDataMain,
                 .excelDataMain,
                 .tableDataMain {
-                    padding: 10px;
                     border-radius: 10px;
                 }
 
                 .treeDataMain {
-                    width: calc(20% - 20px);
+                    margin-right: 10px;
+                    padding: 10px 0 10px 10px;
+                    width: calc(19% - 20px);
 
                 }
 
                 .excelDataMain {
-                    width: calc(13% - 20px);
+                    margin-right: 10px;
+                    padding: 10px 0 10px 10px;
+                    width: calc(15% - 20px);
                 }
 
                 .tableDataMain {
+                    padding: 10px;
                     width: calc(66% - 20px);
                     position: relative;
 

src/views/generatingCapacity/dataAnalysis/lineAnalysis/index.vue

@@ -100,9 +100,9 @@
     // import tableRes from '@/data/table.json'
     // import areaDataRes from '@/data/areaData.json'
     /**配置参数 */
-    const treeHeight = ref(window.innerHeight - 150 + 'px') //tree高度
-    const excelHeight = ref(window.innerHeight - 150 + 'px') //excel高度
-    const tableHeight = ref(window.innerHeight - 150 + 'px')
+    const treeHeight = ref(window.innerHeight - 140 + 'px') //tree高度
+    const excelHeight = ref(window.innerHeight - 140 + 'px') //excel高度
+    const tableHeight = ref(window.innerHeight - 140 + 'px')
     /**excel 开始 */
     const excelCheckboxShow = ref(false)
     const excelCheckIds = ref([])
@@ -652,13 +652,13 @@
         funGetTree()
         theme.value = store.state.theme
         echartsTheme.value = !theme.value ? 'dark' : ''
-        tableHeight.value = window.innerHeight - 150 + 'px'
-        excelHeight.value = window.innerHeight - 150 + 'px'
-        treeHeight.value = window.innerHeight - 150 + 'px'
+        tableHeight.value = window.innerHeight - 140 + 'px'
+        excelHeight.value = window.innerHeight - 140 + 'px'
+        treeHeight.value = window.innerHeight - 140 + 'px'
         window.addEventListener('resize', () => {
-            tableHeight.value = window.innerHeight - 150 + 'px'
-            excelHeight.value = window.innerHeight - 150 + 'px'
-            treeHeight.value = window.innerHeight - 150 + 'px'
+            tableHeight.value = window.innerHeight - 140 + 'px'
+            excelHeight.value = window.innerHeight - 140 + 'px'
+            treeHeight.value = window.innerHeight - 140 + 'px'
         })
         /**test */
         // funExcelChange({
@@ -698,27 +698,29 @@
 
             .main {
                 display: flex;
-                justify-content: space-between;
-                // width: calc(100% - 40px);
                 width: 100%;
 
                 .treeDataMain,
                 .excelDataMain,
                 .tableDataMain {
-                    padding: 10px;
                     border-radius: 10px;
                 }
 
                 .treeDataMain {
-                    width: calc(20% - 20px);
+                    margin-right: 10px;
+                    padding: 10px 0 10px 10px;
+                    width: calc(19% - 20px);
 
                 }
 
                 .excelDataMain {
-                    width: calc(13% - 20px);
+                    margin-right: 10px;
+                    padding: 10px 0 10px 10px;
+                    width: calc(15% - 20px);
                 }
 
                 .tableDataMain {
+                    padding: 10px;
                     width: calc(66% - 20px);
                     position: relative;
 

src/views/generatingCapacity/dataAnalysis/posAnalysis/index.vue

@@ -165,9 +165,9 @@
     import httpRequest from '@/utils/request.js'
     const router = useRouter();
     /**配置参数 */
-    const treeHeight = ref(window.innerHeight - 125 + "px"); //tree高度
-    const excelHeight = ref(window.innerHeight - 125 + "px"); //excel高度
-    const tableHeight = ref(window.innerHeight - 125 + "px");
+    const treeHeight = ref(window.innerHeight - 115 + "px"); //tree高度
+    const excelHeight = ref(window.innerHeight - 115 + "px"); //excel高度
+    const tableHeight = ref(window.innerHeight - 115 + "px");
     /**excel 开始 */
     const excelCheckboxShow = ref(false);
     const excelCheckIds = ref([]);
@@ -1215,13 +1215,13 @@
 
         theme.value = store.state.theme
         echartsTheme.value = !theme.value ? 'dark' : ''
-        tableHeight.value = window.innerHeight - 125 + "px";
-        excelHeight.value = window.innerHeight - 125 + "px";
-        treeHeight.value = window.innerHeight - 125 + "px";
+        tableHeight.value = window.innerHeight - 115 + "px";
+        excelHeight.value = window.innerHeight - 115 + "px";
+        treeHeight.value = window.innerHeight - 115 + "px";
         window.addEventListener("resize", () => {
-            tableHeight.value = window.innerHeight - 125 + "px";
-            excelHeight.value = window.innerHeight - 125 + "px";
-            treeHeight.value = window.innerHeight - 125 + "px";
+            tableHeight.value = window.innerHeight - 115 + "px";
+            excelHeight.value = window.innerHeight - 115 + "px";
+            treeHeight.value = window.innerHeight - 115 + "px";
         });
         /**test */
         // funExcelChange({
@@ -1267,24 +1267,25 @@
 
             .main {
                 display: flex;
-                justify-content: space-between;
-                // width: calc(100% - 40px);
                 width: 100%;
 
                 .treeDataMain,
                 .excelDataMain,
                 .tableDataMain {
-                    padding: 10px;
                     border-radius: 10px;
                 }
 
                 .treeDataMain {
-                    width: calc(20% - 20px);
+                    margin-right: 10px;
+                    padding: 10px 0 10px 10px;
+                    width: calc(19% - 20px);
 
                 }
 
                 .excelDataMain {
-                    width: calc(13% - 20px);
+                    margin-right: 10px;
+                    padding: 10px 0 10px 10px;
+                    width: calc(15% - 20px);
 
                     .excelDataMain_top {
                         height: 49%;
@@ -1297,6 +1298,7 @@
                 }
 
                 .tableDataMain {
+                    padding: 10px;
                     width: calc(66% - 20px);
                     position: relative;
 

src/views/generatingCapacity/dataAnalysis/rateAnalysis/index.vue

@@ -123,9 +123,9 @@
     // import flowerRes from '@/data/flower.json'
     // import lineChartRes from '@/data/lineNew.json'
     /**配置参数 */
-    const treeHeight = ref(window.innerHeight - 125 + 'px') //tree高度
-    const excelHeight = ref(window.innerHeight - 125 + 'px') //excel高度
-    const tableHeight = ref(window.innerHeight - 125 + 'px')
+    const treeHeight = ref(window.innerHeight - 116 + 'px') //tree高度
+    const excelHeight = ref(window.innerHeight - 116 + 'px') //excel高度
+    const tableHeight = ref(window.innerHeight - 116 + 'px')
     /**excel 开始 */
     const excelCheckIds = ref([])
     const excelList = ref([])
@@ -882,13 +882,13 @@
         //
         theme.value = store.state.theme
         echartsTheme.value = !theme.value ? 'dark' : ''
-        tableHeight.value = window.innerHeight - 125 + 'px'
-        excelHeight.value = (window.innerHeight - 125) + 'px'
-        treeHeight.value = (window.innerHeight - 125) + 'px'
+        tableHeight.value = window.innerHeight - 116 + 'px'
+        excelHeight.value = (window.innerHeight - 116) + 'px'
+        treeHeight.value = (window.innerHeight - 116) + 'px'
         window.addEventListener('resize', () => {
-            tableHeight.value = window.innerHeight - 125 + 'px'
-            excelHeight.value = (window.innerHeight - 125) + 'px'
-            treeHeight.value = (window.innerHeight - 125) + 'px'
+            tableHeight.value = window.innerHeight - 116 + 'px'
+            excelHeight.value = (window.innerHeight - 116) + 'px'
+            treeHeight.value = (window.innerHeight - 116) + 'px'
         })
     })
 </script>
@@ -918,24 +918,25 @@
 
             .main {
                 display: flex;
-                justify-content: space-between;
-                // width: calc(100% - 40px);
                 width: 100%;
 
                 .treeDataMain,
                 .excelDataMain,
                 .tableDataMain {
-                    padding: 10px;
                     border-radius: 10px;
                 }
 
                 .treeDataMain {
-                    width: calc(20% - 20px);
+                    margin-right: 10px;
+                    padding: 10px 0 10px 10px;
+                    width: calc(19% - 20px);
 
                 }
 
                 .excelDataMain {
-                    width: calc(13% - 20px);
+                    margin-right: 10px;
+                    padding: 10px 0 10px 10px;
+                    width: calc(15% - 20px);
 
                     .excelDataMain_top {
                         padding: 5px 0;
@@ -947,6 +948,7 @@
                 }
 
                 .tableDataMain {
+                    padding: 10px;
                     width: calc(66% - 20px);
 
                     .chartRowTop {

src/views/generatingCapacity/dataAnalysis/spaceAnalysis/index.vue

@@ -86,9 +86,9 @@
     import httpRequest from '@/utils/request.js'
     import tools from '@tools/htmlToPdf.js'
     /**配置参数 */
-    const treeHeight = ref(window.innerHeight - 125 + 'px') //tree高度
-    const excelHeight = ref(window.innerHeight - 125 + 'px') //excel高度
-    const tableHeight = ref(window.innerHeight - 125 + 'px')
+    const treeHeight = ref(window.innerHeight - 116 + 'px') //tree高度
+    const excelHeight = ref(window.innerHeight - 116 + 'px') //excel高度
+    const tableHeight = ref(window.innerHeight - 116 + 'px')
     /**excel 开始 */
     const excelCheckIds = ref([])
     const excelList = ref([])
@@ -644,13 +644,13 @@
         funGetTree()
         theme.value = store.state.theme
         echartsTheme.value = !theme.value ? 'dark' : ''
-        tableHeight.value = window.innerHeight - 125 + 'px'
-        excelHeight.value = (window.innerHeight - 125) + 'px'
-        treeHeight.value = (window.innerHeight - 125) + 'px'
+        tableHeight.value = window.innerHeight - 116 + 'px'
+        excelHeight.value = (window.innerHeight - 116) + 'px'
+        treeHeight.value = (window.innerHeight - 116) + 'px'
         window.addEventListener('resize', () => {
-            tableHeight.value = window.innerHeight - 125 + 'px'
-            excelHeight.value = (window.innerHeight - 125) + 'px'
-            treeHeight.value = (window.innerHeight - 125) + 'px'
+            tableHeight.value = window.innerHeight - 116 + 'px'
+            excelHeight.value = (window.innerHeight - 116) + 'px'
+            treeHeight.value = (window.innerHeight - 116) + 'px'
         })
     })
     onActivated(() => {
@@ -683,27 +683,29 @@
 
             .main {
                 display: flex;
-                justify-content: space-between;
-                // width: calc(100% - 40px);
                 width: 100%;
 
                 .treeDataMain,
                 .excelDataMain,
                 .tableDataMain {
-                    padding: 10px;
                     border-radius: 10px;
                 }
 
                 .treeDataMain {
-                    width: calc(20% - 20px);
+                    margin-right: 10px;
+                    padding: 10px 0 10px 10px;
+                    width: calc(19% - 20px);
 
                 }
 
                 .excelDataMain {
-                    width: calc(13% - 20px);
+                    margin-right: 10px;
+                    padding: 10px 0 10px 10px;
+                    width: calc(15% - 20px);
                 }
 
                 .tableDataMain {
+                    padding: 10px;
                     width: calc(66% - 20px);
                     position: relative;
 

src/views/generatingCapacity/dataAnalysis/windAnalysis/index.vue

@@ -58,9 +58,9 @@
     } from 'vuex';
     import httpRequest from '@/utils/request.js'
     /**配置参数 */
-    const treeHeight = ref(window.innerHeight - 120 + 'px') //tree高度
-    const excelHeight = ref(window.innerHeight - 120 + 'px') //excel高度
-    const tableHeight = ref(window.innerHeight - 184 + 'px')
+    const treeHeight = ref(window.innerHeight - 111 + 'px') //tree高度
+    const excelHeight = ref(window.innerHeight - 111 + 'px') //excel高度
+    const tableHeight = ref(window.innerHeight - 175 + 'px')
     /**table 开始 */
     const tableShowId = ref('')
     const tableName = ref('损失电量分析')
@@ -341,13 +341,13 @@
         funGetTree()
         theme.value = store.state.theme
         echartsTheme.value = !theme.value ? 'dark' : ''
-        tableHeight.value = window.innerHeight - 184 + 'px'
-        excelHeight.value = window.innerHeight - 120 + 'px'
-        treeHeight.value = window.innerHeight - 120 + 'px'
+        tableHeight.value = window.innerHeight - 175 + 'px'
+        excelHeight.value = window.innerHeight - 111 + 'px'
+        treeHeight.value = window.innerHeight - 111 + 'px'
         window.addEventListener('resize', () => {
-            tableHeight.value = window.innerHeight - 184 + 'px'
-            excelHeight.value = window.innerHeight - 120 + 'px'
-            treeHeight.value = window.innerHeight - 120 + 'px'
+            tableHeight.value = window.innerHeight - 175 + 'px'
+            excelHeight.value = window.innerHeight - 111 + 'px'
+            treeHeight.value = window.innerHeight - 111 + 'px'
         })
     })
     /**activated */
@@ -380,27 +380,29 @@
 
             .main {
                 display: flex;
-                justify-content: space-between;
-                // width: calc(100% - 40px);
                 width: 100%;
 
                 .treeDataMain,
                 .excelDataMain,
                 .tableDataMain {
-                    padding: 10px;
                     border-radius: 10px;
                 }
 
                 .treeDataMain {
-                    width: calc(20% - 20px);
+                    margin-right: 10px;
+                    padding: 10px 0 10px 10px;
+                    width: calc(19% - 20px);
 
                 }
 
                 .excelDataMain {
-                    width: calc(13% - 20px);
+                    margin-right: 10px;
+                    padding: 10px 0 10px 10px;
+                    width: calc(15% - 20px);
                 }
 
                 .tableDataMain {
+                    padding: 10px;
                     width: calc(66% - 20px);
                     position: relative;
 

src/views/generatingCapacity/dataFilter/prepare/index.vue

@@ -55,9 +55,9 @@
     // } from '@/api/axios.js'
 
     /**配置参数 */
-    const treeHeight = ref(window.innerHeight - 130 + 'px') //tree高度
-    const excelHeight = ref(window.innerHeight - 130 + 'px') //excel高度
-    const tableHeight = ref(window.innerHeight - 130 + 'px')
+    const treeHeight = ref(window.innerHeight - 115 + 'px') //tree高度
+    const excelHeight = ref(window.innerHeight - 115 + 'px') //excel高度
+    const tableHeight = ref(window.innerHeight - 115 + 'px')
     /**excel 开始 */
     const excelList = ref([])
     const funExcelChange = async (obj) => { //点击excel项时
@@ -216,13 +216,13 @@
         // funWebSocket()
         funGetTree()
         theme.value = store.state.theme
-        tableHeight.value = window.innerHeight - 130 + 'px'
-        excelHeight.value = window.innerHeight - 130 + 'px'
-        treeHeight.value = window.innerHeight - 130 + 'px'
+        tableHeight.value = window.innerHeight - 115 + 'px'
+        excelHeight.value = window.innerHeight - 115 + 'px'
+        treeHeight.value = window.innerHeight - 115 + 'px'
         window.addEventListener('resize', () => {
-            tableHeight.value = window.innerHeight - 130 + 'px'
-            excelHeight.value = window.innerHeight - 130 + 'px'
-            treeHeight.value = window.innerHeight - 130 + 'px'
+            tableHeight.value = window.innerHeight - 115 + 'px'
+            excelHeight.value = window.innerHeight - 115 + 'px'
+            treeHeight.value = window.innerHeight - 115 + 'px'
         })
     })
     /**activated */
@@ -256,29 +256,32 @@
 
             .main {
                 display: flex;
-                justify-content: space-between;
-                // width: calc(100% - 40px);
+                // justify-content: space-between;
+                // width: calc(100% - 50px);
                 width: 100%;
-                height: calc(100% - 100px);
 
                 .treeDataMain,
                 .excelDataMain,
                 .tableDataMain {
-                    padding: 10px;
                     border-radius: 10px;
                 }
 
                 .treeDataMain {
-                    width: calc(20% - 20px);
+                    margin-right: 10px;
+                    padding: 10px 0 10px 10px;
+                    width: calc(19% - 20px);
+
                 }
 
                 .excelDataMain {
-                    width: calc(13% - 20px);
+                    margin-right: 10px;
+                    padding: 10px 0 10px 10px;
+                    width: calc(15% - 20px);
                 }
 
                 .tableDataMain {
+                    padding: 10px;
                     width: calc(66% - 20px);
-                    // width: 66%;
                 }
 
             }

src/views/generatingCapacity/dataFilter/process/index.vue

@@ -51,9 +51,9 @@
         ElMessage
     } from 'element-plus'
     /**配置参数 */
-    const treeHeight = ref((window.innerHeight - 135) / 2 + 'px') //tree高度
-    const excelHeight = ref(window.innerHeight - 125 + 'px') //excel高度
-    const tableHeight = ref(window.innerHeight - 125 + 'px')
+    const treeHeight = ref((window.innerHeight - 120) / 2 + 'px') //tree高度
+    const excelHeight = ref(window.innerHeight - 116 + 'px') //excel高度
+    const tableHeight = ref(window.innerHeight - 116 + 'px')
     /**excel 开始 */
     const excelCheckboxShow = ref(false)
     const excelCheckIds = ref([])
@@ -286,13 +286,13 @@
         await funGetTree()
         funGetProcessTree()
         theme.value = store.state.theme
-        tableHeight.value = window.innerHeight - 125 + 'px'
-        excelHeight.value = window.innerHeight - 125 + 'px'
-        treeHeight.value = (window.innerHeight - 135) / 2 + 'px'
+        tableHeight.value = window.innerHeight - 116 + 'px'
+        excelHeight.value = window.innerHeight - 116 + 'px'
+        treeHeight.value = (window.innerHeight - 120) / 2 + 'px'
         window.addEventListener('resize', () => {
-            tableHeight.value = window.innerHeight - 125 + 'px'
-            excelHeight.value = window.innerHeight - 125 + 'px'
-            treeHeight.value = (window.innerHeight - 135) / 2 + 'px'
+            tableHeight.value = window.innerHeight - 116 + 'px'
+            excelHeight.value = window.innerHeight - 116 + 'px'
+            treeHeight.value = (window.innerHeight - 120) / 2 + 'px'
         })
     })
     /**activated */
@@ -327,27 +327,31 @@
 
             .main {
                 display: flex;
-                justify-content: space-between;
+                // justify-content: space-between;
                 // width: calc(100% - 50px);
                 width: 100%;
 
                 .treeDataMain,
                 .excelDataMain,
                 .tableDataMain {
-                    padding: 10px;
                     border-radius: 10px;
                 }
 
                 .treeDataMain {
-                    width: calc(20% - 20px);
+                    margin-right: 10px;
+                    padding: 10px 0 10px 10px;
+                    width: calc(19% - 20px);
 
                 }
 
                 .excelDataMain {
-                    width: calc(13% - 20px);
+                    margin-right: 10px;
+                    padding: 10px 0 10px 10px;
+                    width: calc(15% - 20px);
                 }
 
                 .tableDataMain {
+                    padding: 10px;
                     width: calc(66% - 20px);
                 }
 

src/views/generatingCapacity/report/index.vue

@@ -221,7 +221,7 @@
     const stoptime = ref([]);
     const nbdata = ref({});
     const loading = ref(false)
-    const tableHeight = ref(window.innerHeight - 120 + 'px')
+    const tableHeight = ref(window.innerHeight - 110 + 'px')
 
     const exportPDF = () => {
         loading.value = true;
@@ -338,7 +338,7 @@
     onMounted(() => {
         funGetStation();
         theme.value = store.state.theme
-        tableHeight.value = window.innerHeight - 120 + 'px'
+        tableHeight.value = window.innerHeight - 110 + 'px'
         addform()
     });
 </script>

src/views/home/index.vue

@@ -62,12 +62,12 @@
                             <div class="powerCharts">
                                 <div class="powerName">{{ item[0].name }}</div>
                                 <div class="powerItem">
+                                    <forecast-bar-component :list="item" height="40px" width="370px"
+                                        :theme="swichTheme" />
                                     <div class="powerValue">
                                         <span style="background-color:#FF9B23"></span>
-                                        <span>{{ item[0].total }}</span>
+                                        <span>{{ item[0].value }}</span>
                                     </div>
-                                    <forecast-bar-component :list="item" height="40px" width="410px"
-                                        :theme="swichTheme" />
                                 </div>
                             </div>
                         </div>
@@ -76,12 +76,12 @@
                                 <div class="powerCharts">
                                     <div class="powerName">{{ item[0].name }}</div>
                                     <div class="powerItem">
-                                        <div class="powerValue">
-                                            <span style="background-color:#FF9B23"></span>
-                                            <span>{{ item[0].total }}</span>
-                                        </div>
                                         <forecast-bar-component :list="item" height="40px" width="410px"
                                             :theme="swichTheme" />
+                                        <div class="powerValue powerValuesc">
+                                            <span style="background-color:#FF9B23"></span>
+                                            <span>{{ item[0].value }}</span>
+                                        </div>
                                     </div>
                                 </div>
                             </div>
@@ -491,32 +491,32 @@
                                 [{
                                     name: "日发电量",
                                     id: "day",
-                                    value: it.rfdl || 200,
+                                    value: it.rfdl,
                                     color: '#FF9B23',
-                                    total: 1000,
+                                    total: 1500,
                                 }, ],
                                 [{
                                     name: "日预测电量",
                                     id: "day2",
-                                    value: it.rycdl || 200,
+                                    value: it.rycdl,
                                     color: '#FF9B23',
-                                    total: 1000,
+                                    total: 1500,
                                 }, ],
                             ]
                             that.monthFa = [
                                 [{
                                     name: "月发电量",
                                     id: "day",
-                                    value: it.yfdl || 200,
+                                    value: it.yfdl,
                                     color: '#1C99FF',
-                                    total: 100000,
+                                    total: 45000,
                                 }, ],
                                 [{
                                     name: "月预测电量",
                                     id: "day2",
-                                    value: it.yycdl || 200,
+                                    value: it.yycdl,
                                     color: '#1C99FF',
-                                    total: 100000,
+                                    total: 45000,
                                 }, ],
                             ]
                             that.powerDataHome = [{
@@ -948,13 +948,13 @@
 
                                 .powerItem {
                                     display: flex;
-                                    position: relative;
+                                    // position: relative;
 
                                     .powerValue {
                                         font-size: 12px;
                                         font-family: Bicubik;
-                                        position: absolute;
-                                        right: -12px;
+                                        position: relative;
+                                        left: 3px;
                                         top: 17px;
 
                                         span:nth-child(1) {
@@ -973,6 +973,10 @@
                                             top: 2px;
                                         }
                                     }
+
+                                    .powerValuesc {
+                                        left: -35px;
+                                    }
                                 }
                             }
                         }

src/views/powerPrediction/homePageNoMap.vue

@@ -1655,10 +1655,72 @@
                             }
                         }
                     }
+
+
+                }
+            }
+
+            .mainLeft {
+                .styleData {
+                    span {
+                        width: 90px;
+                    }
+
+                    span:nth-child(1) {
+                        border-right: none;
+                        border-radius: 4px 0px 0px 4px;
+                    }
+
+                    span:nth-child(2) {
+                        border-radius: 0px 4px 4px 0px;
+                    }
+
+                    .changeStyle {
+                        color: #fff;
+                        background: linear-gradient(90deg, rgba(28, 108, 255, 0.7), rgba(28, 108, 255, 0));
+                        border: 1px solid #404858;
+                    }
+
+                    .defaultSty {
+                        color: #A1A7B9;
+                        background: linear-gradient(90deg, rgba(64, 72, 88, 0.7), rgba(64, 72, 88, 0));
+                        border: 1px solid #404858;
+                    }
                 }
             }
 
             .mainRight {
+                .styleData {
+                    span {
+                        width: 45px;
+                    }
+
+                    span:nth-child(1) {
+                        border-right: none;
+                        border-radius: 4px 0px 0px 4px;
+                    }
+
+                    span:nth-child(2) {
+                        border-right: none;
+                    }
+
+                    span:nth-child(3) {
+                        border-radius: 0px 4px 4px 0px;
+                    }
+
+                    .changeStyle {
+                        color: #fff;
+                        background: linear-gradient(90deg, rgba(28, 108, 255, 0.7), rgba(28, 108, 255, 0));
+                        border: 1px solid #404858;
+                    }
+
+                    .defaultSty {
+                        color: #A1A7B9;
+                        background: linear-gradient(90deg, rgba(64, 72, 88, 0.7), rgba(64, 72, 88, 0));
+                        border: 1px solid #404858;
+                    }
+                }
+
                 .messageData {
                     background: #161f1e;
 
@@ -1723,10 +1785,103 @@
             .mainRight {
                 .lineStyle {
                     background: #fff;
+
+                    .chart-name {
+                        display: flex;
+                        align-items: center;
+                        position: absolute;
+                        top: 0;
+                        height: 39px;
+                        width: 96%;
+                        border-bottom: 1px solid #E1E3EA;
+
+                        .point {
+                            width: 6px;
+                            height: 1px;
+                            background-color: #E1E3EA;
+                            position: absolute;
+
+                            &.point-left {
+                                left: 0;
+                            }
+
+                            &.point-right {
+                                right: 0;
+                            }
+
+                            &.top {
+                                top: -1px;
+                            }
+
+                            &.bottom {
+                                bottom: -1px;
+                            }
+                        }
+                    }
+                }
+            }
+
+            .mainLeft {
+                .styleData {
+                    span {
+                        width: 90px;
+                    }
+
+                    span:nth-child(1) {
+                        border-right: none;
+                        border-radius: 4px 0px 0px 4px;
+                    }
+
+                    span:nth-child(2) {
+                        border-radius: 0px 4px 4px 0px;
+                    }
+
+                    .changeStyle {
+                        color: #fff;
+                        background: #4F70EC;
+                        border: 1px solid #4F70EC;
+                    }
+
+                    .defaultSty {
+                        color: #A1A7B9;
+                        background: #D0D3E1;
+                        border: 1px solid #D0D3E1;
+                    }
                 }
             }
 
             .mainRight {
+                .styleData {
+                    span {
+                        width: 45px;
+                    }
+
+                    span:nth-child(1) {
+                        border-right: none;
+                        border-radius: 4px 0px 0px 4px;
+                    }
+
+                    span:nth-child(2) {
+                        border-right: none;
+                    }
+
+                    span:nth-child(3) {
+                        border-radius: 0px 4px 4px 0px;
+                    }
+
+                    .changeStyle {
+                        color: #fff;
+                        background: #4F70EC;
+                        border: 1px solid #4F70EC;
+                    }
+
+                    .defaultSty {
+                        color: #A1A7B9;
+                        background: #D0D3E1;
+                        border: 1px solid #D0D3E1;
+                    }
+                }
+
                 .messageData {
                     background: #fff;
 

src/viewsCss/homePageNoMapLess.less

@@ -86,29 +86,29 @@
 
                 .styleData {
                     position: absolute;
-                    top: 10px;
-                    left: 135px;
+                    top: 5px;
+                    right: 40px;
                     z-index: 111;
 
                     span {
                         color: #fff;
                         font-weight: 600;
                         font-size: 14px;
-                        margin-right: 5px;
+                        line-height: 28px;
                         border: 1px solid #fff;
-                        padding: 1px 10px;
                         display: inline-block;
                         cursor: pointer;
+                        width: 90px;
+                        text-align: center;
                     }
 
-                    .changeStyle {
-                        color: #f2a91f;
-                        border: 1px solid #f2a91f;
+                    span:nth-child(1) {
+                        border-right: none;
+                        border-radius: 4px 0px 0px 4px;
                     }
 
-                    .defaultSty {
-                        color: #c7c7c7;
-                        border: 1px solid #c7c7c7;
+                    span:nth-child(2) {
+                        border-radius: 0px 4px 4px 0px;
                     }
                 }
             }
@@ -127,29 +127,19 @@
 
                 .styleData {
                     position: absolute;
-                    top: 10px;
-                    right: 20px;
+                    top: 5px;
+                    right: 40px;
                     z-index: 111;
 
                     span {
                         color: #fff;
                         font-weight: 600;
                         font-size: 14px;
-                        margin-right: 5px;
+                        line-height: 28px;
                         border: 1px solid #fff;
-                        padding: 1px 10px;
                         display: inline-block;
                         cursor: pointer;
-                    }
-
-                    .changeStyle {
-                        color: #f2a91f;
-                        border: 1px solid #f2a91f;
-                    }
-
-                    .defaultSty {
-                        color: #c7c7c7;
-                        border: 1px solid #c7c7c7;
+                        text-align: center;
                     }
                 }
             }