改发电计划的页面布局

src/views/fdjh/LeftNav.vue

@@ -1,189 +1,183 @@
 <template>
-    <div class="sidebar">
-        <div class="title"
-             style="font-family: AliMaMa;font-size: 30px;font-weight: 1000;text-align: left;">
-            <span style="position: absolute;top:-3px;left: 70px">目录</span>
-        </div>
-
-        <el-menu
-                active-text-color="#ffd04b"
-                background-color="transparent"
-                class="sidebar-el-menu"
-                default-active="1"
-                text-color="#fff">
-            <!-- 一级菜单 -->
-            <template v-for="item in list">
-                <el-submenu v-if="item.children && item.children.length" :key="item.path" :index="item.path">
-                    <template slot="title"><img :src="require('./img/plan.png')"
-                                                width="28px"/><span>{{ item.name }}</span>
-                    </template>
-                    <!-- 二级菜单 -->
-                    <template v-for="itemChild in item.children">
-                        <el-submenu v-if="itemChild.children && itemChild.children.length" :key="itemChild.path"
-                                    :index="itemChild.path">
-                            <template slot="title"><img
-                                    :src="require('./img/pc1.png')"/><span>{{ itemChild.name }}</span></template>
-                            <!-- 三级菜单 -->
-                            <el-menu-item v-for="itemChild_Child in itemChild.children" :key="itemChild_Child.path"
-                                          :index="itemChild_Child.path" @click="changePage(itemChild_Child)">
-                                <img :src="require('./img/last1.png')"/><span
-                                    slot="title">{{ itemChild_Child.name }}</span></el-menu-item>
-                        </el-submenu>
-
-                        <el-menu-item v-else :key="itemChild.path" :index="itemChild.path"><img
-                                :src="require('./img/pc1.png')"/><span slot="title">{{ itemChild.name }}</span>
-                        </el-menu-item>
-                    </template>
-                </el-submenu>
-                <el-menu-item v-else :key="item.path" :index="item.path"><img :src="require('./img/plan.png')"
-                                                                              width="28px"/><span
-                        slot="title">{{ item.name }}</span></el-menu-item>
-            </template>
-        </el-menu>
+  <div class="sidebar">
+    <div style="font-family: AliMaMa;font-size: 30px;font-weight: 1000;text-align: left;">
+      <span style="position: absolute;top:-3px;left: 70px;color: #fff;">目录</span>
     </div>
+
+    <el-menu
+        active-text-color="#ffd04b"
+        background-color="transparent"
+        class="sidebar-el-menu"
+        default-active="1"
+        text-color="#fff">
+      <!-- 一级菜单 -->
+      <template v-for="item in list">
+        <el-submenu v-if="item.children && item.children.length" :key="item.path" :index="item.path">
+          <template slot="title"><img :src="require('./img/plan.png')"
+                                      width="28px"/><span>{{ item.name }}</span>
+          </template>
+          <!-- 二级菜单 -->
+          <template v-for="itemChild in item.children">
+            <el-submenu v-if="itemChild.children && itemChild.children.length" :key="itemChild.path"
+                        :index="itemChild.path">
+              <template slot="title"><img
+                  :src="require('./img/pc1.png')"/><span>{{ itemChild.name }}</span></template>
+              <!-- 三级菜单 -->
+              <el-menu-item v-for="itemChild_Child in itemChild.children" :key="itemChild_Child.path"
+                            :index="itemChild_Child.path" @click="changePage(itemChild_Child)">
+                <img :src="require('./img/last1.png')"/><span
+                  slot="title">{{ itemChild_Child.name }}</span></el-menu-item>
+            </el-submenu>
+
+            <el-menu-item v-else :key="itemChild.path" :index="itemChild.path"><img
+                :src="require('./img/pc1.png')"/><span slot="title">{{ itemChild.name }}</span>
+            </el-menu-item>
+          </template>
+        </el-submenu>
+        <el-menu-item v-else :key="item.path" :index="item.path"><img :src="require('./img/plan.png')"
+                                                                      width="28px"/><span
+            slot="title">{{ item.name }}</span></el-menu-item>
+      </template>
+    </el-menu>
+  </div>
 </template>
 
 <script>
 export default {
-    data() {
-        return {
-            list: [
+  data() {
+    return {
+      list: [
+        {
+          path: "/1",
+          name: "日前调度计划",
+          children: [
+            {
+              path: "/1/1",
+              name: "发电端计划监控",
+              children: [
+                {
+                  path: "/#/table1",
+                  name: "风电",
+                },
+                {
+                  path: "/#/fdjhgf",
+                  name: "光伏电站",
+                },
                 {
-                    path: "/1",
-                    name: "日前调度计划",
-                    children: [
-                        {
-                            path: "/1/1",
-                            name: "发电端计划监控",
-                            children: [
-                                {
-                                    path: "/#/table1",
-                                    name: "风电",
-                                },
-                                {
-                                    path: "/#/fdjhgf",
-                                    name: "光伏电站",
-                                },
-                                {
-                                    path: "/#/fdjhhd",
-                                    name: "火电厂",
-                                }
-                            ]
-                        },
-                        {
-                            path: "/1/2",
-                            name: "用电端计划监控",
-                            children: [
-                                {
-                                    path: "/#/gznfh",
-                                    name: "高载能计划负荷",
-                                }
-                            ]
-                        },
-                        {
-                            path: "/1/3",
-                            name: "约束条件监控",
-                            children: [
-                                {
-                                    path: "/#/llx",
-                                    name: "联络线",
-                                },
-                                {
-                                    path: "/#/dm",
-                                    name: "断面",
-                                }
-                            ]
-                        },
-                        {
-                            path: "/1/4",
-                            name: "数据采集监控监控",
-                            children: [
-                                {
-                                    path: "/#/hd",
-                                    name: "火电厂",
-                                },
-                                {
-                                    path: "/#/fdgf",
-                                    name: "风电、光伏电站",
-                                },
-                                {
-                                    path: "/#/ptfh",
-                                    name: "普通负荷",
-                                },
-                                {
-                                    path: "/#/gaoznfh",
-                                    name: "高载能负荷",
-                                }
-                            ]
-                        }
-                    ]
+                  path: "/#/fdjhhd",
+                  name: "火电厂",
                 }
-            ]
-        }
-    },
-    methods: {
-        changePage(obj) {
-            var parentIframe = parent.document.getElementById('showcontent');
-            parentIframe.src = obj.path;
+              ]
+            },
+            {
+              path: "/1/2",
+              name: "用电端计划监控",
+              children: [
+                {
+                  path: "/#/gznfh",
+                  name: "高载能计划负荷",
+                }
+              ]
+            },
+            {
+              path: "/1/3",
+              name: "约束条件监控",
+              children: [
+                {
+                  path: "/#/llx",
+                  name: "联络线",
+                },
+                {
+                  path: "/#/dm",
+                  name: "断面",
+                }
+              ]
+            },
+            {
+              path: "/1/4",
+              name: "数据采集监控监控",
+              children: [
+                {
+                  path: "/#/hd",
+                  name: "火电厂",
+                },
+                {
+                  path: "/#/fdgf",
+                  name: "风电、光伏电站",
+                },
+                {
+                  path: "/#/ptfh",
+                  name: "普通负荷",
+                },
+                {
+                  path: "/#/gaoznfh",
+                  name: "高载能负荷",
+                }
+              ]
+            }
+          ]
         }
-
+      ]
+    }
+  },
+  methods: {
+    changePage(obj) {
+      var parentIframe = parent.document.getElementById('showcontent');
+      parentIframe.src = obj.path;
     }
+
+  }
 }
 </script>
 
 <style scoped>
-.title {
-    margin-bottom: 20px;
-    margin-left: 60px;
-    font-size: 18px;
-    color: #fff;
-}
-
 .sidebar {
-    display: block;
-    text-align: left;
-}
+  display: block;
+  text-align: left;
 
+}
 .sidebar::-webkit-scrollbar {
-    width: 0;
+  width: 0;
 }
 
 .sidebar-el-menu:not(.el-menu--collapse) {
-
-    margin: 40px 0 30px 30px;
-    background-size: 100% 100%;
+  position: absolute;
+  top: 6%;
+  margin: 0px 0 30px 30px;
+  background-size: 100% 100%;
+  height: 90%;
 }
 
 
 /deep/ .el-submenu__title:hover {
-    background-color: rgb(103, 118, 49) !important;
+  background-color: rgb(103, 118, 49) !important;
 
 }
 
 /deep/ .sidebar-el-menu {
-    margin-left: 23px !important;
+  margin-left: 23px !important;
 }
 
 .sidebar > ul {
-    height: 100%;
+  height: 100%;
 }
 
 .el-menu {
-    border: 0 !important;
+  border: 0 !important;
 }
 
 .el-menu-item {
-    height: 40px;
-    font-size: 16px;
-    font-weight: bold;
+  height: 40px;
+  font-size: 16px;
+  font-weight: bold;
 }
 
 .el-submenu .el-menu-item:hover {
-    background-color: rgb(103, 118, 49) !important;
+  background-color: rgb(103, 118, 49) !important;
 }
 
 .el-sub-menu__title:hover {
-    background-color: rgb(103, 118, 49) !important;
+  background-color: rgb(103, 118, 49) !important;
 }
 </style>
 

src/views/fdjh/fdjh.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="page">
-    <div id="iframe0" class="image_2 pos_2" style="">
+    <div id="iframe0" class="pos_2" style="">
       <iframe  style="width: 100%;height: 100%" src="/#/fdjhnav">
       </iframe>
     </div>
-    <div id="iframe1" class="image_3 pos_3" style="">
+    <div id="iframe1" class="pos_3" style="">
     <iframe id="showcontent" style="width: 100%;height: 100%" >
     </iframe>
     </div>
@@ -19,19 +19,16 @@ export default {
 
 <style scoped lang="css">
 .page {
-  background-image: url('./img/fdjh-bj.png');
+  background: url('./img/fdjh-bj.png') no-repeat;
   position: absolute;
-  width: 1920px;
-  height: 1080px;
+  width: 100%;
+  height: calc(100vh);
   left: 0;
   right: 0;
   top: 0;
   bottom: 0;
 }
-.image {
-  width: 100vw;
-  height: 4.5833vw;
-}
+
 iframe{
   border: 0;
 }
@@ -43,39 +40,21 @@ iframe{
   background-image: url(./img/img.png);
 }
 
-.pos {
-  position: absolute;
-  width: 1920px;
-  height: 88px;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 992px;
-}
-.image_2 {
-  width: 23.56rem;
-  height: 56.88rem;
-}
+
 .pos_2 {
   position: absolute;
-  width: 377px;
-  height: 910px;
-  left: 30px;
-  right: 1513px;
-  top: 142px;
-  bottom: 28px;
-}
-.image_3 {
-  width: 91.19rem;
-  height: 56.88rem;
+  width: 20%;
+  height: 84%;
+  left: 1%;
+  top: 13%;
 }
+
 .pos_3 {
   position: absolute;
-  width: 1479px;
-  height: 910px;
-  left: 408px;
+  width: 79%;
+  height: 84%;
+  left: 21%;
   right: 33px;
-  top: 142px;
-  bottom: 28px;
+  top: 13%;
 }
 </style>