init2

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

@@ -0,0 +1,55 @@
+
+
+<template>
+  <div class="bigScreenBtn" :class="{selected:selected}">
+    <div>{{title}}</div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'BigScreenBtn',
+  props: {
+    title: {
+      type: String,
+      default: '按钮',
+    },
+    selected: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data () {
+    return {
+
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.bigScreenBtn {
+  cursor: pointer;
+  user-select: none;
+  width: 125px;
+  height: 32px;
+  line-height: 25px;
+  padding-left: 22px;
+  box-sizing: border-box;
+  font-size: 18px;
+  font-family: PingFangSC-Semibold, PingFang SC;
+  font-weight: initial;
+  color: rgba(255, 255, 255, 0.6);
+  background-size: 100% 100%;
+  background-image: url(./default.png);
+}
+.bigScreenBtn:hover {
+    opacity: .8;
+}
+
+.bigScreenBtn.selected {
+  font-weight: 600;
+  color: #ffffff;
+  background-image: url(./selected.png);
+}
+</style>

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

@@ -0,0 +1,74 @@
+
+
+<template>
+  <div class="bigScreenHead">
+    <div class="tit">驾驶舱总览</div>
+    <el-row style="width: 100%;">
+      <el-col :span="8">
+        <el-row style="padding: 0px 20px">
+          <el-col :span="8">
+            <bigScreenBtn title="驾驶舱总览" :selected="true"></bigScreenBtn>
+          </el-col>
+          <el-col :span="8">
+            <bigScreenBtn title="科研生产" :selected="false"></bigScreenBtn>
+          </el-col>
+          <el-col :span="8">
+            <bigScreenBtn title="经营管理" :selected="false"></bigScreenBtn>
+          </el-col>
+        </el-row>
+      </el-col>
+      <el-col :span="8" style="min-height: 1px">
+      </el-col>
+      <el-col :span="8">
+        <el-row style="padding: 0px 0 0 60px">
+          <el-col :span="8">
+            <bigScreenBtn title="质量管理" :selected="false"></bigScreenBtn>
+          </el-col>
+          <el-col :span="8">
+            <bigScreenBtn title="安全管理" :selected="false"></bigScreenBtn>
+          </el-col>
+          <el-col :span="8">
+            <bigScreenBtn title="信息化管理" :selected="false"></bigScreenBtn>
+          </el-col>
+        </el-row>
+      </el-col>
+    </el-row>
+
+  </div>
+</template>
+
+<script>
+
+import bigScreenBtn from "../bigScreenBtn/index.vue";
+export default {
+  name: 'BigScreenHead',
+  props: {},
+  components: {
+    bigScreenBtn
+  },
+  data () {
+    return {
+
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.bigScreenHead {
+  width: 1920px;
+  height: 100px;
+  background-image: url(./bg.png);
+  background-size: 100% 80px;
+  background-repeat: no-repeat;
+  .tit {
+    font-size: 36px;
+    font-family: YouSheBiaoTiHei;
+    color: #91d5fe;
+    line-height: 47px;
+    letter-spacing: 6px;
+    text-align: center;
+    padding-top: 13px;
+  }
+}
+</style>

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

@@ -0,0 +1,82 @@
+
+
+<template>
+  <div class="container1">
+      <div class="content">
+            <slot />
+            <div class="spot spot1"></div>
+            <div class="spot spot2"></div>
+            <div class="spot spot3"></div>
+            <div class="spot spot4"></div>
+      </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Container1',
+  props: {
+    title: {
+      type: String,
+      default: '',
+    },
+    selected: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data () {
+    return {
+
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+
+.container1 {
+    width: 535px;
+    padding: 7px 0;
+    border-top: 1px solid rgba(84,130,189);
+    border-bottom: 1px solid rgba(84,130,189);
+    font-size: 18px;
+    font-family: PingFangSC-Semibold, PingFang SC;
+    font-weight: 600;
+    color: #FFFFFF;
+    .content {
+        position: relative;
+        height: 161px;
+        background-color: rgba(2, 18, 63, 0.2);
+        border-top: 1px solid #91D5FE;
+        border-bottom: 1px solid #91D5FE;
+        .spot {
+            position: absolute;
+            width: 6px;
+            height: 6px;
+            background-color: #91D5FE;
+            border-radius: 50%;
+        }
+        .spot1 {
+            top: -3px;
+            left: 0;
+        }
+        .spot2 {
+            top: -3px;
+            right: 0;
+        }
+        .spot3 {
+            bottom: -3px;
+            left: 0;
+        }
+        .spot4 {
+            bottom: -3px;
+            right: 0;
+        }
+    }
+
+}
+
+
+
+</style>

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

@@ -0,0 +1,66 @@
+
+
+<template>
+  <div class="container2">
+    <div class="tit"><rocketTit>{{title}}</rocketTit></div>
+      <div class="content">
+        <slot />
+      </div>
+  </div>
+</template>
+
+<script>
+import rocketTit from "../rocketTit/index.vue";
+
+export default {
+  name: 'Container2',
+  components: {
+    rocketTit,
+  },
+  props: {
+    title: {
+      type: String,
+      default: '',
+    },
+    selected: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data () {
+    return {
+
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+
+.container2 {
+    display: flex;
+    flex-direction: column;
+    width: 536px;
+    height: 394px;
+    background-image: url(./bg.png);
+    background-size: cover;
+    color: #FFFFFF;
+    font-size: 16px;
+    font-family: PingFangSC-Semibold, PingFang SC;
+    font-weight: 600;
+
+    .tit {
+      padding: 16px 16px 16px 24px;
+    }
+    .content {
+      flex: 1;
+      padding: 2px;
+      box-sizing: border-box;
+      overflow: hidden;
+    }
+
+}
+
+
+
+</style>

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

@@ -0,0 +1,39 @@
+
+
+<template>
+  <div class="container3">
+    <slot />
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'Container3',
+  props: {
+    title: {
+      type: String,
+      default: '',
+    },
+    selected: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data () {
+    return {
+
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.container3 {
+  width: 766px;
+  height: 632px;
+  background-image: url(./bg.png);
+  background-size: cover;
+  overflow: hidden;
+}
+</style>

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

@@ -0,0 +1,66 @@
+
+
+<template>
+  <div class="container2">
+    <div class="tit"><rocketTit>{{title}}</rocketTit></div>
+      <div class="content">
+        <slot />
+      </div>
+  </div>
+</template>
+
+<script>
+import rocketTit from "../rocketTit/index.vue";
+
+export default {
+  name: 'Container2',
+  components: {
+    rocketTit,
+  },
+  props: {
+    title: {
+      type: String,
+      default: '',
+    },
+    selected: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data () {
+    return {
+
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+
+.container2 {
+    display: flex;
+    flex-direction: column;
+    width: 930px;
+    height: 311px;
+    background-image: url(./bg.png);
+    background-size: cover;
+    color: #FFFFFF;
+    font-size: 16px;
+    font-family: PingFangSC-Semibold, PingFang SC;
+    font-weight: 600;
+
+    .tit {
+      padding: 16px 16px 16px 24px;
+    }
+    .content {
+      flex: 1;
+      padding: 2px;
+      box-sizing: border-box;
+      overflow: hidden;
+    }
+
+}
+
+
+
+</style>

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

@@ -0,0 +1,52 @@
+
+
+<template>
+  <div class="rocketTit">
+      <img class="rocket" src="./rocket.png" alt="">
+      <span><slot /></span>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'RocketTit',
+  props: {
+    title: {
+      type: String,
+      default: '',
+    },
+    selected: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data () {
+    return {
+
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+
+.rocket {
+    width: 17.5px;
+    height: 17.5px;
+    margin-right: 10px;
+    vertical-align: middle;
+}
+.rocketTit {
+    font-size: 16px;
+    font-family: PingFangSC-Semibold, PingFang SC;
+    font-weight: 600;
+    color: #FFFFFF;
+    line-height: 22px;
+    vertical-align: middle;
+    span {
+        vertical-align: middle;
+    }
+}
+
+
+</style>

src/views/bigScreen/components/scaleBox.vue

@@ -74,6 +74,6 @@ export default {
   top: 50%;
   transition: 0.3s;
   z-index: 999;
-  background: rgba(255, 0, 0, 0.3);
+  // background: rgba(255, 0, 0, 0.3);
 }
 </style>