fix(服务强兴军页面)样式修改

src/layout/head.vue

 
 <template>
   <div class="app-head-warpper">
+    <div class="header-bg"></div>
     <!-- 一级导航栏 -->
     <!-- <el-row :gutter="20" class="app-header" type="flex" align="cneter">
       <el-col :span="6" class="title">创新示范绩效评价</el-col>
@@ -22,11 +23,7 @@
 
     <div class="container">
       <!-- 二级导航栏 -->
-      <el-row
-        v-if="(secodndList || []).length > 0"
-        class="second-nav"
-        :gutter="20"
-      >
+      <el-row v-if="(secodndList || []).length > 0" class="second-nav" :gutter="20">
         <el-col v-for="(item, index) in secodndList" :key="index" :span="4">
           <el-card
             shadow="hover"
@@ -34,8 +31,7 @@
               'second-active-nav': index === secondIndex,
             }"
             @click="secondHandle(item, index)"
-            >{{ item.name }}</el-card
-          >
+          >{{ item.name }}</el-card>
         </el-col>
       </el-row>
 
@@ -43,8 +39,9 @@
       <el-row v-if="curRouteHistoy.length > 0" class="proceed-record">
         <el-col class="nav-history" :span="17">
           <el-row class="pointer" @click="$router.go(-1)" align="middle">
-            <el-icon><ArrowLeftBold /></el-icon>
-            返回
+            <el-icon>
+              <ArrowLeftBold />
+            </el-icon>返回
             <el-divider direction="vertical"></el-divider>
           </el-row>
 
@@ -68,8 +65,7 @@
                 :class="{
                   'lignht-color': index === curRouteHistoy.length - 1,
                 }"
-                >{{ item.label }}</span
-              >
+              >{{ item.label }}</span>
             </div>
           </el-col>
         </el-col>
@@ -85,8 +81,7 @@
                 disabed: item.disabed,
               }"
               @click="yearHandle(item, index)"
-              >{{ item.label }}</span
-            >
+            >{{ item.label }}</span>
           </div>
         </el-col>
       </el-row>
@@ -96,7 +91,7 @@
 <script lang="ts">
 import { defineComponent } from "vue";
 import { getNavList } from "./service";
-import NavList from "./navList.json"
+import NavList from "./navList.json";
 import { ArrowLeftBold, CaretRight } from "@element-plus/icons";
 
 const ENV_PARAMS = import.meta.env; // 这是Vite官方指导获取环境变量的方式
@@ -210,14 +205,41 @@ export default defineComponent({
 <style lang="scss" scoped>
 .pointer {
   cursor: pointer;
+  margin-left: 10px;
+  color: #d4f7ff;
   &:hover {
     color: #4198ff;
   }
 }
+.nav-history::after {
+  content: "";
+  width: 11px;
+  height: 42px;
+  position: absolute;
+  left: 0px;
+  background-color: rgba(25, 125, 237, 50%);
+}
+.nav-history::before {
+  content: "";
+  width: 11px;
+  height: 42px;
+  position: absolute;
+  // left: 0px;
+  right: 0px;
+  background-color: rgba(25, 125, 237, 50%);
+}
 .app-head-warpper {
-  background: #f5f9fb;
+  // background: #f5f9fb;
   box-sizing: border-box;
-
+  .header-bg {
+    height: 84px;
+    width: 100%;
+    // border: 1px solid;
+    background-image: url(../assets/img/header_bg.png);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    margin-bottom: 5px;
+  }
   .container {
     // padding: 0 20px;
     box-sizing: border-box;
@@ -288,18 +310,19 @@ export default defineComponent({
     .nav-history {
       padding-left: 10px;
       width: 100%;
-      background: rgba(25, 125, 237, 10%);
+      background: rgba(25, 125, 237, 20%);
       display: flex;
       align-items: center;
       height: 40px;
       border-radius: 5px;
       overflow: hidden;
+      position: relative;
       // box-shadow: 2px 2px 10px #eee;
       .nav-history-item {
         display: flex;
         height: 100%;
         .proceed-item {
-          color: #999;
+          color: #d4f7ff;
           display: flex;
           align-items: center;
           cursor: pointer;
@@ -322,8 +345,8 @@ export default defineComponent({
       overflow: hidden;
       flex: 1;
       height: 40px;
-      background: #fff;
-      box-shadow: 2px 2px 10px #eee;
+      background: rgba(25, 125, 237, 20%);
+       border: 1px solid #125caf;
       .years {
         display: flex;
         align-items: center;
@@ -331,6 +354,8 @@ export default defineComponent({
         height: 40px;
         flex: 1;
         overflow: hidden;
+       
+
         span {
           width: 100%;
           display: flex;
@@ -338,9 +363,10 @@ export default defineComponent({
           padding: 0 12px;
           font-size: 14px;
           height: inherit;
-          color: #949494;
+          color: #d4f7ff;
           justify-content: center;
           cursor: pointer;
+          border-right: 1px solid #125caf;
         }
         .active {
           background-color: #4198ff;

src/views/dataCenter/army/index.vue

@@ -88,6 +88,7 @@ export default defineComponent({
   flex: 1;
   height: 100%;
   box-sizing: border-box;
+  border: 1px solid #10529a;
 }
 
 .map-warpper {

src/views/dataCenter/army/model/EconomicConstruct/index.vue

@@ -169,7 +169,11 @@ export default defineComponent({
             return html;
           },
         },
-        legend: {},
+        legend: {
+          textStyle:{
+                color:"#fff"
+            }
+        },
         grid: {
           top: "20%",
           left: "5%",
@@ -181,11 +185,30 @@ export default defineComponent({
           {
             type: "value",
             name: "金额(亿元)",
+              splitLine: {
+            lineStyle: {
+              // 使用深浅的间隔色
+              type: 'dashed',
+              color: ["#0087ED"],
+            },
+          },
+            axisLine: {
+            lineStyle: {
+              color: "#d4f7ff",
+              // width: 1, //这里是为了突出显示加上的
+            },
+          },
           },
           {
             type: "value",
             name: "进度%",
             min: 0,
+            axisLine: {
+            lineStyle: {
+              color: "#d4f7ff",
+              // width: 1, //这里是为了突出显示加上的
+            },
+          },
             // max: 100,
             splitLine: {
               show: false,
@@ -195,6 +218,12 @@ export default defineComponent({
         xAxis: {
           type: "category",
           data: xAxisValue,
+          axisLine: {
+            lineStyle: {
+              color: "#d4f7ff",
+              // width: 1, //这里是为了突出显示加上的
+            },
+          },
         },
         series: [seriesBar, seriesLine],
       };
@@ -292,7 +321,7 @@ export default defineComponent({
     ptionCirRight() {
       const value = this.provinceData?.process || 0;
       return {
-        backgroundColor: "#fff",
+        // backgroundColor: "#197ded",
         title: [
           {
             text: `建设进度`,
@@ -302,7 +331,7 @@ export default defineComponent({
             textStyle: {
               fontSize: "16",
               fontWeight: "400",
-              color: "#333",
+              color: "#d4f7ff",
               textAlign: "center",
             },
             subtext: `${value * 100}%`,
@@ -353,7 +382,7 @@ export default defineComponent({
             z: 2,
             showBackground: true,
             backgroundStyle: {
-              color: "#e3e3e3",
+              color: "#0d4787",
             },
             data: [value * 100],
             coordinateSystem: "polar",
@@ -468,7 +497,7 @@ export default defineComponent({
   height: 150px;
   box-sizing: border-box;
   .card-text {
-    color: #4198ff;
+    color: #ffffff;
     margin: 8px 0;
   }
   .card-item {
@@ -485,7 +514,7 @@ export default defineComponent({
           }
           .title {
             font-weight: bold;
-            color: #333;
+            color: #d4f7ff;
             font-size: 14px;
             position: relative;
             &::before {
@@ -505,11 +534,11 @@ export default defineComponent({
             display: flex;
             align-items: center;
             font-size: 14px;
-            color: #999;
+            color: #d4f7ff;
             span {
               font-size: 20px;
               margin-right: 5px;
-              color: #4198ff;
+              color: #19ecff;
             }
           }
         }
@@ -531,7 +560,7 @@ export default defineComponent({
 }
 
 .bar-title {
-  color: #4198ff;
+  color: #ffffff;
   margin-bottom: 10px;
 }
 .economic-construct {

src/views/dataCenter/army/model/Munitions/index.vue

@@ -146,7 +146,11 @@ export default defineComponent({
             return html;
           },
         },
-        legend: {},
+        legend: {
+           textStyle:{
+                color:"#d4f7ff"
+            }
+        },
         grid: {
           top: "10%",
           left: "0%",
@@ -160,17 +164,49 @@ export default defineComponent({
             name: "收入(亿元)",
             min: 0,
             max: 200,
+                splitLine: {
+            lineStyle: {
+              // 使用深浅的间隔色
+              type: 'dashed',
+              color: ["#0087ED"],
+            },
+          },
+            axisLine: {
+            lineStyle: {
+              color: "#d4f7ff",
+              // width: 1, //这里是为了突出显示加上的
+            },
+          },
           },
           {
             type: "value",
             name: "增长率%",
             min: 0,
             max: 100,
+                 splitLine: {
+            lineStyle: {
+              // 使用深浅的间隔色
+              type: 'dashed',
+              color: ["#0087ED"],
+            },
+          },
+            axisLine: {
+            lineStyle: {
+              color: "#d4f7ff",
+              // width: 1, //这里是为了突出显示加上的
+            },
+          },
           },
         ],
         xAxis: {
           type: "category",
           data: xAxisCountry,
+          axisLine: {
+            lineStyle: {
+              color: "#d4f7ff",
+              // width: 1, //这里是为了突出显示加上的
+            },
+          },
         },
         series: [...seriesBarList, ...seriesLineList],
       };
@@ -237,7 +273,11 @@ export default defineComponent({
             return html;
           },
         },
-        legend: {},
+        legend: {
+          textStyle:{
+                color:"#d4f7ff"
+            }
+        },
         grid: {
           top: "10%",
           left: "5%",
@@ -251,17 +291,49 @@ export default defineComponent({
             name: "规模(亿元)",
             min: 0,
             max: 50,
+                 splitLine: {
+            lineStyle: {
+              // 使用深浅的间隔色
+              type: 'dashed',
+              color: ["#0087ED"],
+            },
+          },
+           axisLine: {
+            lineStyle: {
+              color: "#d4f7ff",
+              // width: 1, //这里是为了突出显示加上的
+            },
+          },
           },
           {
             type: "value",
             name: "增长率(%)",
             min: -50,
             max: 170,
+             axisLine: {
+            lineStyle: {
+              color: "#d4f7ff",
+              // width: 1, //这里是为了突出显示加上的
+            },
+          },
+                 splitLine: {
+            lineStyle: {
+              // 使用深浅的间隔色
+              type: 'dashed',
+              color: ["#0087ED"],
+            },
+          },
           },
         ],
         xAxis: {
           type: "category",
           data: xAxisCity,
+           axisLine: {
+            lineStyle: {
+              color: "#d4f7ff",
+              // width: 1, //这里是为了突出显示加上的
+            },
+          },
         },
         series: [seriesBar, seriesLine],
       };
@@ -361,6 +433,6 @@ export default defineComponent({
 .title2X {
   margin-top: 15px;
   font-size: 14px;
-  color: #4198ff;
+  color: #ffffff;
 }
 </style>

src/views/dataCenter/army/model/Person/index.vue

@@ -141,7 +141,11 @@ export default defineComponent({
             return html;
           },
         },
-        legend: {},
+        legend: {
+          textStyle:{
+                color:"#d4f7ff"
+            }
+        },
         grid: {
           top: "12%",
           left: "0%",
@@ -155,17 +159,49 @@ export default defineComponent({
             name: "入伍人数",
             min: 0,
             max: 700,
+             axisLine: {
+            lineStyle: {
+              color: "#d4f7ff",
+              // width: 1, //这里是为了突出显示加上的
+            },
+          },
+                   splitLine: {
+            lineStyle: {
+              // 使用深浅的间隔色
+              type: 'dashed',
+              color: ["#0087ED"],
+            },
+          },
           },
           {
             type: "value",
             name: "入伍率(%)",
             min: 0,
             max: 1,
+             axisLine: {
+            lineStyle: {
+              color: "#d4f7ff",
+              // width: 1, //这里是为了突出显示加上的
+            },
+          },
+                   splitLine: {
+            lineStyle: {
+              // 使用深浅的间隔色
+              type: 'dashed',
+              color: ["#0087ED"],
+            },
+          },
           },
         ],
         xAxis: {
           type: "category",
           data: xAxisCity,
+           axisLine: {
+            lineStyle: {
+              color: "#d4f7ff",
+              // width: 1, //这里是为了突出显示加上的
+            },
+          },
         },
         series: [...seriesBar, ...seriesLine],
       };
@@ -257,10 +293,10 @@ export default defineComponent({
       flex: 1;
       padding: 8px 15px;
       margin-right: 15px;
-      background: #f8f9fb;
+      background: #0d4479;
       border-radius: 5px;
       font-size: 14px;
-      color: #333;
+      color: #d4f7ff;
       display: flex;
       align-items: center;
       justify-content: space-between;
@@ -269,19 +305,19 @@ export default defineComponent({
       }
       .value-des {
         font-size: 12px;
-        color: #999;
+        color: #d4f7ff;
         display: flex;
         align-items: center;
         span {
           font-size: 20px;
           margin-right: 5px;
-          color: #4198ff;
+          color: #19ecff;
         }
       }
     }
   }
   .text {
-    color: #4198ff;
+    color: #ffffff;
     margin-top: 10px;
     font-size: 14px;
   }

src/views/dataCenter/army/model/Science/index.vue

@@ -104,6 +104,7 @@ export default defineComponent({
         label: {
           show: true,
           position: "top",
+          color:"#19ecff",
         },
         areaStyle: {
           opacity: 0.8,
@@ -153,6 +154,12 @@ export default defineComponent({
         xAxis: {
           type: "category",
           data: xAxisValue,
+           axisLine: {
+            lineStyle: {
+              color: "#d4f7ff",
+              // width: 1, //这里是为了突出显示加上的
+            },
+          },
         },
         series: [seriesLine],
       };
@@ -222,31 +229,31 @@ export default defineComponent({
   height: 150px;
   box-sizing: border-box;
   .card-item {
-    color: #333;
+    color: #d4f7ff;
     padding: 8px 15px;
     box-sizing: border-box;
-    background: #f8f9fb;
+    background: rgba(25, 125, 237, 0.2);
     border-radius: 5px;
     margin-bottom: 8px;
     &:last-of-type {
       margin-bottom: 0;
     }
     div {
-      color: #4198ff;
+      color: #19ecff;
       font-size: 20px;
       display: flex;
       align-items: center;
       span {
         margin-left: 10px;
         font-size: 14px;
-        color: #999;
+        color: #d4f7ff;
       }
     }
   }
 
   .increase-rate {
     .title {
-      color: #4198ff;
+      color: #ffffff;
       margin-bottom: 5px;
     }
 
@@ -256,24 +263,24 @@ export default defineComponent({
         display: flex;
         align-items: center;
         font-size: 12px;
-        color: #666;
+        color: #ffffff;
         justify-content: space-between;
       }
       .rate-list-head {
-        background: #ddeaf8;
+        background: #0f4f92;
       }
       .el-scrollbar {
-        background: #f8f9fb;
+        background: #0d4479;
       }
       .rate-value {
-        color: #4198ff;
+        color: #d4f7ff;
       }
     }
   }
 }
 
 .science-title {
-  color: #4198ff;
+  color: #ffffff;
 }
 .incom-distribution {
   flex: 1;

src/views/dataCenter/army/model/StrongArmy/index.vue

@@ -85,6 +85,12 @@ export default defineComponent({
         xAxis: {
           type: "category",
           data: xAxisValue,
+            axisLine: {
+            lineStyle: {
+              color: "#d4f7ff",
+              // width: 1, //这里是为了突出显示加上的
+            },
+          },
         },
         series: [
           {
@@ -95,6 +101,7 @@ export default defineComponent({
             label: {
               show: true,
               position: "top",
+              color:"#19ecff",
             },
             barWidth: 20,
             data: this.seriesData,
@@ -141,7 +148,7 @@ export default defineComponent({
 .echarts-search {
   padding-left: 10px;
   .title {
-    color: #4198ff;
+    color: #ffffff;
     margin: 12px 0;
     font-size: 14px;
   }

src/views/dataCenter/index.vue

@@ -24,7 +24,7 @@ export default defineComponent({
   min-width: 1920px;
   flex: 1;
   box-sizing: border-box;
-  padding: 20px; 
+  padding: 0px 20px 20px 20px; 
   background-image: url(../../assets/img/content_bg.png);
   background-repeat: no-repeat;
   background-size: 100% 100%;

src/views/dataCenter/industrial/index.vue

@@ -82,13 +82,14 @@ export default defineComponent({
 </script>
 <style lang="scss" scoped>
 .card-item {
-  background: #fff;
+      background-color: rgba(25, 125, 237, 0.1);
   border-radius: 5px;
   padding: 16px;
   overflow: hidden;
   cursor: pointer;
   transition: all 0.2s;
-  box-shadow: 2px 2px 10px #eee;
+  // box-shadow: 2px 2px 10px #eee;
+      border: 1px solid #10529a;
   flex: 1;
   height: 100%;
   box-sizing: border-box;

src/views/dataCenter/map/index.vue

@@ -94,7 +94,7 @@ export default defineComponent({
   cursor: pointer;
   transition: all 0.2s;
   box-shadow: 2px 2px 10px #04223d10;
-
+border: 1px solid #10529a;
   // &:hover {
   //   // transform: translateY(-5px);
   //   transition: all 0.2s;

src/views/dataCenter/map/model/Income/index.vue

@@ -102,6 +102,9 @@ export default defineComponent({
         },
         legend: {
           right: "2%",
+           textStyle:{
+                color:"#d4f7ff"
+            }
         },
         grid: {
           left: "2%",
@@ -115,12 +118,38 @@ export default defineComponent({
             name: "亿元",
             min: 0,
             max: 200,
+             splitLine: {
+            lineStyle: {
+              // 使用深浅的间隔色
+              type: 'dashed',
+              color: ["#0087ED"],
+            },
+          },
+              axisLine: {
+            lineStyle: {
+              color: "#d4f7ff",
+              // width: 1, //这里是为了突出显示加上的
+            },
+          },
           },
           {
             type: "value",
             name: "增长率%",
             min: 0,
             max: 100,
+             splitLine: {
+            lineStyle: {
+              // 使用深浅的间隔色
+              type: 'dashed',
+              color: ["#0087ED"],
+            },
+          },
+              axisLine: {
+            lineStyle: {
+              color: "#d4f7ff",
+              // width: 1, //这里是为了突出显示加上的
+            },
+          },
             splitLine: {
               show: false,
             },
@@ -129,6 +158,12 @@ export default defineComponent({
         xAxis: {
           type: "category",
           data: xAxisValue,
+            axisLine: {
+            lineStyle: {
+              color: "#d4f7ff",
+              // width: 1, //这里是为了突出显示加上的
+            },
+          },
         },
         series: [...seriesBarList, ...seriesLineList],
       };

src/views/dataCenter/map/model/InvestmentProgress/index.vue

@@ -119,22 +119,58 @@ export default defineComponent({
         },
         legend: {
           right: "2%",
+            textStyle:{
+                color:"#d4f7ff"
+            }
         },
         yAxis: [
           {
             type: "value",
             name: "金额(亿元)",
+              axisLine: {
+            lineStyle: {
+              color: "#d4f7ff",
+              // width: 1, //这里是为了突出显示加上的
+            },           
+          },
+            splitLine: {
+            lineStyle: {
+              type: 'dashed',
+              // 使用深浅的间隔色
+              color: ["#0087ED"],
+            },
+          },
           },
           {
             type: "value",
             name: "项目进度%",
             min: 0,
+              splitLine: {
+            lineStyle: {
+              // 使用深浅的间隔色
+              type: 'dashed',
+              color: ["#0087ED"],
+            },
+          },
+              axisLine: {
+            lineStyle: {
+              color: "#d4f7ff",
+              // width: 1, //这里是为了突出显示加上的
+            },
+          },
             // max: 100,
           },
+         
         ],
         xAxis: {
           type: "category",
           data: xAxisValue,
+           axisLine: {
+            lineStyle: {
+              color: "#d4f7ff",
+              // width: 1, //这里是为了突出显示加上的
+            },
+          },
         },
         series: [...seriesBarList, ...seriesLineList],
       };

src/views/dataCenter/map/model/Performance/index.vue

 <template>
-  <MapTitle
-    text="全省军民融合创新示范绩效评价情况"
-    :detailsHandle="detailsHandle"
-  />
+  <MapTitle text="全省军民融合创新示范绩效评价情况" :detailsHandle="detailsHandle" />
   <div id="performanceBar" class="performance-bar"></div>
 </template>
 <script lang="ts">
@@ -107,7 +104,11 @@ export default defineComponent({
             return html;
           },
         },
-        legend: {},
+        legend: {
+            textStyle:{
+                color:"#fff"
+            }
+        },
         grid: {
           left: "0%",
           right: "0%",
@@ -118,11 +119,31 @@ export default defineComponent({
           type: "value",
           min: 0,
           max: 100,
+          axisLine: {
+            lineStyle: {
+              color: "#d4f7ff",
+            },
+          },
+          splitLine: {
+            lineStyle: {
+              // 使用深浅的间隔色
+              type: 'dashed',
+              color: ["#0087ED"],
+            },
+          },
         },
         xAxis: {
           type: "category",
           data: xAxisValue,
+          axisLine: {
+            lineStyle: {
+              
+              color: "#d4f7ff",
+              // width: 1, //这里是为了突出显示加上的
+            },
+          },
         },
+
         series: seriesList,
       };
     },

src/views/dataCenter/map/model/RankList/index.vue

@@ -75,10 +75,17 @@ export default defineComponent({
   font-weight: bold;
   font-size: 14px;
 }
+/* .el-scrollbar__wrap {
+  background: #0e4780 !important;
+} */
+.el-table__body tr:hover>td {
+		background-color: #134087 !important;
+	}
 .el-table tr {
   background: #0e4780 !important;
 }
-.el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf{
+.el-table td.el-table__cell,
+.el-table th.el-table__cell.is-leaf {
   border-bottom: 1px dashed #197ded;
 }
 .el-table .cell {
@@ -88,6 +95,7 @@ export default defineComponent({
 <style lang="scss" scoped>
 .el-scrollbar {
   margin-top: 10px;
+  // background: red;
 }
 .tab-other-index {
   text-align: center;