发电计划框架页

src/router/index.js

@@ -2,6 +2,7 @@ import Vue from 'vue'
 import VueRouter from 'vue-router'
 import Login from '../views/Login/Login.vue'
 import Table1 from '../views/Articles/index.vue'
+import Fdjh from '../views/fdjh/fdjh.vue'
 
 Vue.use(VueRouter)
 
@@ -15,6 +16,11 @@ const routes = [
     path: '/table1',
     name: 'Table1',
     component: Table1
+  },
+  {
+    path: '/fdjh',
+    name: '发电计划',
+    component: Fdjh
   }
 ]
 

src/views/fdjh/fdjh.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="page">
+    <iframe class="image_2 pos_2" src="./img/fdjh-left.png">
+    </iframe>
+    <iframe class="image_3 pos_3" src="./img/fdjh-right.png">
+    </iframe>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'fdjh-name'
+}
+</script>
+
+<style scoped lang="css">
+.page {
+  background-image: url('./img/fdjh-bj.png');
+  position: absolute;
+  width: 1920px;
+  height: 1080px;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+}
+.image {
+  width: 100vw;
+  height: 4.5833vw;
+}
+.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;
+}
+.pos_3 {
+  position: absolute;
+  width: 1459px;
+  height: 910px;
+  left: 428px;
+  right: 33px;
+  top: 142px;
+  bottom: 28px;
+}
+</style>