commit

04.系统编码/Frontend/src/components/DecisionSupport.vue

@@ -176,6 +176,10 @@
                         .el-image {
                             height: calc(~"100% - 0.4rem");
                             margin-top: 0.1rem;
+                            display: flex;
+                            flex-direction: column;
+                            align-items: center;
+                            justify-content: center;
                         }
                     }
                 }

04.系统编码/Frontend/src/components/Shared/Header.vue

@@ -5,37 +5,30 @@
             南京生态环境评估决策平台
         </div>
         <div class="nav">
-            <div class="nav-item" @click="onNavClick('MicrowaveRadiation')" :class="{'active': currentPath === 'MicrowaveRadiation'}">微波辐射计</div>
-            <div class="nav-item" @click="onNavClick('RamanLidar')" :class="{'active': currentPath === 'RamanLidar'}">拉曼激光雷达</div>
-            <div class="nav-item" @click="onNavClick('SynergyEvaluation')" :class="{'active': currentPath === 'SynergyEvaluation'}">生态环境效应评估</div>
-            <div class="nav-item" @click="onNavClick('DecisionSupport')" :class="{'active': currentPath === 'DecisionSupport'}">决策支持</div>
-            <div class="nav-item" @click="onNavClick('SystemManagement')" :class="{'active': currentPath === 'SystemManagement'}">系统管理</div>
+            <div class="nav-item">
+                <router-link to="/MicrowaveRadiation">微波辐射计</router-link>
+            </div>
+            <div class="nav-item">
+                <router-link to="/RamanLidar">拉曼激光雷达</router-link>
+            </div>
+            <div class="nav-item">
+                <router-link to="/SynergyEvaluation">生态环境效应评估</router-link>
+            </div>
+            <div class="nav-item">
+                <router-link to="/DecisionSupport">决策支持</router-link>
+            </div>
+            <div class="nav-item">
+                <router-link to="/SystemManagement">系统管理</router-link>
+            </div>
         </div>
     </div>
 </template>
 
 <script lang="ts">
-    import { reactive, onMounted, toRefs } from "vue";
-    import { useRouter } from 'vue-router';
-
     export default {
         name: 'Header',
         setup() {
-            const router = useRouter();
-
-            let options = reactive({
-                currentPath: 'MicrowaveRadiation'
-            })
-
-            const onNavClick = (path) => {
-                options.currentPath = path;
-                router.push({path: path});
-            }
-
-            return {
-                ...toRefs(options),
-                onNavClick
-            }
+            return {}
         }
     }
 </script>
@@ -72,14 +65,19 @@
                 text-align: center;
                 cursor: pointer;
 
+                a {
+                    height: 100%;
+                    color: #ffffff;
+                }
+
                 &:nth-of-type(3) {
                     width: 2.3rem;
-                    &.active {
+                    .active {
                         background: url("/images/nav-bg-big.png") no-repeat center/cover;
                     }
                 }
-                &.active {
-                    color: #ffffff;
+                .active {
+                    color: #23FBFF;
                     background: url("/images/nav-bg.png") no-repeat center/cover;
                 }
             }

04.系统编码/Frontend/src/components/SynergyEvaluation.vue

@@ -324,6 +324,14 @@
                         .el-image {
                             height: calc(~"100% - 0.4rem");
                             margin-top: 0.1rem;
+                            display: flex;
+                            flex-direction: column;
+                            justify-content: center;
+                            align-items: center;
+                            background-color: #ffffff;
+                            .image-slot {
+                                margin-top: 0;
+                            }
                         }
                     }
                 }
@@ -342,6 +350,7 @@
                             display: flex;
                             align-items: center;
                             flex-direction: column;
+                            justify-content: center;
                         }
 
                         &:nth-of-type(6n) {

04.系统编码/Frontend/src/index.less

@@ -401,6 +401,10 @@ img {
                 .el-image {
                     height: 90%;
                     margin: 0 auto;
+                    display: flex;
+                    flex-direction: column;
+                    align-items: center;
+                    justify-content: center;
 
                     .el-image__inner {
                         width: auto;
@@ -418,7 +422,6 @@ img {
         .image-slot {
             width: 1.5rem;
             height: 1.5rem;
-            margin: 1rem auto 0 auto;
             text-align: center;
             display: flex;
             align-items: center;

04.系统编码/Frontend/src/uilts/Config.ts

@@ -1,8 +1,8 @@
 import { Moment } from "moment";
-import { format } from "../uilts/String";
+import { format } from "./String";
 
 export class Config {
-    public static parentUrl: string = "http://112.124.40.88:8890/product/picture";
+    public static parentUrl: string = "http://112.124.40.88:8002/product/picture";
 }
 
 export class MicrowaveRadiationConfig {
@@ -21,13 +21,15 @@ export class RamanLidarConfig {
 }
 
 export class SynergyEvaluationConfig {
+    private static url: string = Config.parentUrl + "/images";
     public static getUrl(tabName: string, elementName: string, type: string): string {
-        return format('/images/ecological-environment/{0}/{1}/{2}.tif', tabName, elementName, type)
+        return format('{3}/ecological-environment/{0}/{1}/{2}.tif', tabName, elementName, type, this.url);
     }
 }
 
 export class DecisionSupportConfig {
+    private static url: string = Config.parentUrl + "/images";
     public static getUrl(productName: string, imgName: string): string {
-        return format('/images/decision-support/{0}/{1}.tif', productName, imgName)
+        return format('{2}/decision-support/{0}/{1}.tif', productName, imgName, this.url);
     }
 }