Bläddra i källkod

Merge remote-tracking branch 'origin/master' into MicroFunction

wdq 1 månad sedan
förälder
incheckning
1e88e48af8
2 ändrade filer med 30 tillägg och 32 borttagningar
  1. 9 11
      src/App.vue
  2. 21 21
      src/components/AppVue/Header.vue

+ 9 - 11
src/App.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="main">
-    <!-- <Header @scroll-update="scrollUpdate"></Header> -->
+    <Header></Header>
     <el-scrollbar ref="pagescrollbar" view-style="height:100%">
       <router-view />
-      <!-- <Footer></Footer> -->
+      <Footer></Footer>
     </el-scrollbar>
   </div>
 </template>
@@ -60,12 +60,12 @@ export default {
     });
   },
   methods: {
-    scrollUpdate() {
-      let that = this;
-      setTimeout(() => {
-        that.$refs.pagescrollbar.update();
-      }, 1000);
-    },
+    // scrollUpdate() {
+    //   let that = this;
+    //   setTimeout(() => {
+    //     that.$refs.pagescrollbar.update();
+    //   }, 1000);
+    // },
     getScale() {
       const ww = window.innerWidth / 1920
       // const wh = window.innerHeight / 945
@@ -154,8 +154,6 @@ html {
 }
 
 #app {
-  // width: 100vw;
-  // height: 100vw;
   width: 1920px;
   height: 100%;
   position: fixed;
@@ -173,7 +171,7 @@ html {
 
   .el-scrollbar {
     width: 100%;
-    // height: calc(100% - 90px);
+    height: calc(100% - 70px);
     box-sizing: border-box;
     overflow: hidden;
   }

+ 21 - 21
src/components/AppVue/Header.vue

@@ -3,12 +3,8 @@
     <div class="logo">青浦一张图</div>
     <div class="menu">
       <ul class="menu_ul">
-        <li
-          v-for="(item,index) in menuList"
-          :key="index"
-          :class="{'active':item.isActive}"
-          @click="menuClick(item.index,$event)"
-        >{{ item.label }}</li>
+        <li v-for="(item, index) in menuList" :key="index" :class="{ 'active': item.isActive }"
+          @click="menuClick(item.index, $event)">{{ item.label }}</li>
       </ul>
     </div>
   </div>
@@ -21,18 +17,18 @@ export default {
     return {
       menuList: [
         { index: 1, label: "首页", isActive: true },
-        { index: 2, label: "数据中心", isActive: false },
-        { index: 3, label: "应用中心", isActive: false },
-        { index: 4, label: "微功能中心", isActive: false },
-        { index: 5, label: "开发中心", isActive: false },
-        { index: 6, label: "运管中心", isActive: false },
-        { index: 7, label: "综合展示", isActive: false }
+        { index: 2, label: "时空数据管理", isActive: false },
+        { index: 3, label: "二维GIS引擎", isActive: false },
+        { index: 4, label: "时空门户", isActive: false },
+        { index: 5, label: "微功能", isActive: false },
+        { index: 6, label: "应用管理", isActive: false },
+        { index: 7, label: "运行管理", isActive: false }
       ]
     };
   },
   methods: {
     menuClick(index) {
-      this.menuList.map(function(item) {
+      this.menuList.map(function (item) {
         if (item.index == index) {
           item.isActive = true;
         } else {
@@ -54,7 +50,7 @@ export default {
           this.$router.push("/function");
           break;
         case 5:
-          this.$router.push("/development");
+          this.$router.push("/wgn");
           break;
         case 6:
           this.$router.push("/oamc");
@@ -86,37 +82,41 @@ export default {
 <style lang="less" scoped>
 #header {
   width: 1920px;
-  height: 90px;
+  height: 70px;
   background: linear-gradient(180deg, #2c2f74, #494d98);
   color: #ffffff;
   margin: 0 auto;
+
   .logo {
     display: inline-block;
-    height: 90px;
+    height: 70px;
     width: 200px;
     text-align: center;
-    line-height: 90px;
+    line-height: 70px;
     font-size: 24px;
   }
+
   .menu {
     display: inline-block;
     float: right;
+
     .menu_ul {
       li {
         display: inline-block;
         height: 50px;
-        width: 150px;
+        width: fit-content;
         line-height: 50px;
         text-align: center;
         cursor: pointer;
-        margin-top: 30px;
-        margin-bottom: 10px;
-        font-size: 24px;
+        margin: 10px 20px;
+        font-size: 20px;
         font-weight: bold;
       }
+
       li:hover {
         color: #00bbff;
       }
+
       li.active {
         color: #00bbff;
       }