大屏1

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

@@ -0,0 +1,62 @@
+
+
+<template>
+  <div class="BigScreenTabs">
+    <div v-for="(v,index) in titleArr" :key="index" class="button" :class="{active:value == index}">
+      <div @click="updateVal(index)">{{v}}</div>
+    </div>
+  </div>
+
+</template>
+
+<script>
+export default {
+  name: 'BigScreenTabs',
+  props: {
+    value: {
+      type: Number
+    },
+    titleArr: {
+      type: Array,
+      default: ['部门', '类型'],
+    },
+  },
+  data () {
+    return {
+
+    }
+  },
+  methods: {
+    updateVal: function (val) {
+      // 2、手动触发父组件的input事件并将值传给父组件
+      this.$emit('input', val);
+    }
+
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.button {
+  display: inline-block;
+  background: rgba(145, 213, 254, 0.2);
+  width: 77px;
+  height: 28px;
+  line-height: 28px;
+  text-align: center;
+  font-weight: 500;
+  color: rgba(255, 255, 255, 0.65);
+  transform: skewX(-20deg);
+  cursor: pointer;
+}
+.button.active {
+  background: linear-gradient(270deg, #3661a8 0%, #8bb1ed 100%);
+  font-weight: 500;
+  color: #ffffff;
+}
+.button > div {
+  width: 100%;
+  height: 100%;
+  transform: skewX(20deg);
+}
+</style>

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

@@ -48,8 +48,8 @@ export default {
 .container2 {
   display: flex;
   flex-direction: column;
-  width: 536px;
-  height: 394px;
+  width: 538px;
+  height: 589px;
   background-image: url(./bg.png);
   background-size: cover;
   color: #ffffff;

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

@@ -31,8 +31,8 @@ export default {
 
 <style lang="scss" scoped>
 .container3 {
-  width: 766px;
-  height: 632px;
+  width: 769px;
+  height: 586px;
   background-image: url(./bg.png);
   background-size: cover;
   overflow: hidden;
@@ -41,8 +41,8 @@ export default {
     position: absolute;
     top: 0;
     left: 0;
-    width: 766px;
-    height: 632px;
+    width: 100%;
+    height: 100%;
     background-image: url(./bg.png);
     background-size: cover;
     pointer-events: none;

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

@@ -1,7 +1,7 @@
 
 
 <template>
-  <div class="container2">
+  <div class="container4">
     <div class="tit">
       <rocketTit>{{title}}</rocketTit>
       <div class="datePicker">
@@ -27,10 +27,6 @@ export default {
       type: String,
       default: '',
     },
-    selected: {
-      type: Boolean,
-      default: false,
-    },
   },
   data () {
     return {
@@ -41,11 +37,11 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.container2 {
+.container4 {
   display: flex;
   flex-direction: column;
-  width: 930px;
-  height: 311px;
+  width: 537px;
+  height: 528px;
   background-image: url(./bg.png);
   background-size: cover;
   color: #ffffff;