大盘路由切换

src/router/index.js

@@ -39,6 +39,11 @@ export const constantRoutes = [
         component: (resolve) => require(['@/views/bigScreen/drivingCabin/index'], resolve),
         name: 'drivingCabin',
       },
+      {
+        path: 'scientific',
+        component: (resolve) => require(['@/views/bigScreen/scientific/index'], resolve),
+        name: 'scientific',
+      },
     ]
   },
   {

src/views/bigScreen/bigScreenLayout.vue

@@ -1,9 +1,85 @@
 <template>
-    <router-view />
+  <scalseBox>
+    <div class="digScreenLayout">
+      <div class="bg1"></div>
+      <bigScreenHead></bigScreenHead>
+      <router-view class="content"/>
+    </div>
+  </scalseBox>
+
 </template>
 
 <script>
+import scalseBox from './components/scaleBox.vue'
+import bigScreenHead from "./components/bigScreenHead/index.vue";
+
 export default {
-  name: 'BigScreenLayout',
+  name: 'DigScreenLayout',
+  components: {
+    scalseBox,
+    bigScreenHead,
+  }
 }
 </script>
+
+<style lang="scss" scoped>
+.digScreenLayout {
+  position: relative;
+  width: 1920px;
+  height: 1080px;
+  background-color: #0D1049;
+  // background-image: url("../img/bg.png");
+  background-size: cover;
+  display: flex;
+  flex-direction: column;
+  .content {
+    flex: 1;
+  }
+  .bg1 {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 1920px;
+    height: 485px;
+    background-image: url("./img/bg-1.png");
+    background-size: cover;
+  }
+}
+
+.left1 {
+  position: absolute;
+  top: 120px;
+  left: 24px;
+}
+.left2 {
+  position: absolute;
+  top: 345px;
+  left: 24px;
+}
+.center1 {
+  position: absolute;
+  top: 107px;
+  left: 578px;
+}
+
+.right1 {
+  position: absolute;
+  top: 120px;
+  right: 24px;
+}
+.right2 {
+  position: absolute;
+  top: 345px;
+  right: 24px;
+}
+.bottom1 {
+  position: absolute;
+  bottom: 16px;
+  left: 24px;
+}
+.bottom2 {
+  position: absolute;
+  bottom: 16px;
+  right: 24px;
+}
+</style>

src/views/bigScreen/components/bigScreenBtn/index.vue

@@ -1,23 +1,26 @@
 
 
 <template>
-  <div class="bigScreenBtn" :class="{selected:selected}">
-    <div>{{title}}</div>
-  </div>
+  <router-link :to="routerUrl">
+    <div class="bigScreenBtn" :class="{selected:this.$route.path == routerUrl}">
+      <div>{{title}}</div>
+    </div>
+  </router-link>
+
 </template>
 
 <script>
 export default {
   name: 'BigScreenBtn',
   props: {
+    routerUrl: {
+      type: String,
+      default: '',
+    },
     title: {
       type: String,
       default: '按钮',
     },
-    selected: {
-      type: Boolean,
-      default: false,
-    },
   },
   data () {
     return {
@@ -44,7 +47,7 @@ export default {
   background-image: url(./default.png);
 }
 .bigScreenBtn:hover {
-    opacity: .8;
+  opacity: 0.8;
 }
 
 .bigScreenBtn.selected {

src/views/bigScreen/components/bigScreenHead/index.vue

@@ -7,13 +7,13 @@
       <el-col :span="8">
         <el-row style="padding: 0px 20px">
           <el-col :span="8">
-            <bigScreenBtn title="驾驶舱总览" :selected="true"></bigScreenBtn>
+            <bigScreenBtn title="驾驶舱总览" routerUrl="/bigScreen/drivingCabin"></bigScreenBtn>
           </el-col>
           <el-col :span="8">
-            <bigScreenBtn title="科研生产" :selected="false"></bigScreenBtn>
+            <bigScreenBtn title="科研生产" routerUrl="/bigScreen/scientific"></bigScreenBtn>
           </el-col>
           <el-col :span="8">
-            <bigScreenBtn title="经营管理" :selected="false"></bigScreenBtn>
+            <bigScreenBtn title="经营管理"></bigScreenBtn>
           </el-col>
         </el-row>
       </el-col>
@@ -22,13 +22,13 @@
       <el-col :span="8">
         <el-row style="padding: 0px 0 0 60px">
           <el-col :span="8">
-            <bigScreenBtn title="质量管理" :selected="false"></bigScreenBtn>
+            <bigScreenBtn title="质量管理"></bigScreenBtn>
           </el-col>
           <el-col :span="8">
-            <bigScreenBtn title="安全管理" :selected="false"></bigScreenBtn>
+            <bigScreenBtn title="安全管理"></bigScreenBtn>
           </el-col>
           <el-col :span="8">
-            <bigScreenBtn title="信息化管理" :selected="false"></bigScreenBtn>
+            <bigScreenBtn title="信息化管理"></bigScreenBtn>
           </el-col>
         </el-row>
       </el-col>

src/views/bigScreen/drivingCabin/index.vue

@@ -1,8 +1,9 @@
 <template>
-  <scalseBox>
     <div class="drivingCabin">
-      <div class="bg1"></div>
-      <bigScreenHead></bigScreenHead>
+      <div class="left1">
+        <left1></left1>
+      </div>
+      <!-- <div class="bg1"></div> -->
 
       <div class="left1">
         <left1></left1>
@@ -25,10 +26,7 @@
       <div class="bottom2">
         <bottom2></bottom2>
       </div>
-
     </div>
-  </scalseBox>
-
 </template>
 
 <script>
@@ -66,9 +64,7 @@ export default {
 <style lang="scss" scoped>
 .drivingCabin {
   position: relative;
-  width: 1920px;
-  height: 1080px;
-  background-color: #0D1049;
+  width: 100%;
   // background-image: url("../img/bg.png");
   background-size: cover;
   .bg1 {
@@ -84,28 +80,28 @@ export default {
 
 .left1 {
   position: absolute;
-  top: 120px;
+  top: 20px;
   left: 24px;
 }
 .left2 {
   position: absolute;
-  top: 345px;
+  top: 245px;
   left: 24px;
 }
 .center1 {
   position: absolute;
-  top: 107px;
+  top: 7px;
   left: 578px;
 }
 
 .right1 {
   position: absolute;
-  top: 120px;
+  top: 20px;
   right: 24px;
 }
 .right2 {
   position: absolute;
-  top: 345px;
+  top: 245px;
   right: 24px;
 }
 .bottom1 {

src/views/bigScreen/scientific/index.vue

@@ -0,0 +1,18 @@
+<template>
+    <div class="scientific">
+      科研生产
+    </div>
+</template>
+
+<script>
+
+export default {
+  name: 'Scientific',
+  components: {
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>