From 7fac981048457f65b6a9d9fbc28b666d3457d0bb Mon Sep 17 00:00:00 2001
From: hh <292475944@qq.com>
Date: Fri, 3 Dec 2021 17:05:42 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A4=A7=E7=9B=98=E8=B7=AF=E7=94=B1=E5=88=87?=
 =?UTF-8?q?=E6=8D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/index.js                           |  5 ++
 src/views/bigScreen/bigScreenLayout.vue       | 82 ++++++++++++++++++-
 .../components/bigScreenBtn/index.vue         | 19 +++--
 .../components/bigScreenHead/index.vue        | 12 +--
 src/views/bigScreen/drivingCabin/index.vue    | 24 +++---
 src/views/bigScreen/scientific/index.vue      | 18 ++++
 6 files changed, 129 insertions(+), 31 deletions(-)
 create mode 100644 src/views/bigScreen/scientific/index.vue

diff --git a/src/router/index.js b/src/router/index.js
index b73c451..b190bb4 100644
--- a/src/router/index.js
+++ b/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',
+      },
     ]
   },
   {
diff --git a/src/views/bigScreen/bigScreenLayout.vue b/src/views/bigScreen/bigScreenLayout.vue
index e638b86..815960d 100644
--- a/src/views/bigScreen/bigScreenLayout.vue
+++ b/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>
\ No newline at end of file
+</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>
\ No newline at end of file
diff --git a/src/views/bigScreen/components/bigScreenBtn/index.vue b/src/views/bigScreen/components/bigScreenBtn/index.vue
index 87b0e2c..51565d5 100644
--- a/src/views/bigScreen/components/bigScreenBtn/index.vue
+++ b/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 {
diff --git a/src/views/bigScreen/components/bigScreenHead/index.vue b/src/views/bigScreen/components/bigScreenHead/index.vue
index 2d322ea..17a3571 100644
--- a/src/views/bigScreen/components/bigScreenHead/index.vue
+++ b/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>
diff --git a/src/views/bigScreen/drivingCabin/index.vue b/src/views/bigScreen/drivingCabin/index.vue
index aec732c..2e87392 100644
--- a/src/views/bigScreen/drivingCabin/index.vue
+++ b/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 {
diff --git a/src/views/bigScreen/scientific/index.vue b/src/views/bigScreen/scientific/index.vue
new file mode 100644
index 0000000..12e2053
--- /dev/null
+++ b/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>
\ No newline at end of file