科研生产3tab

src/views/bigScreen/drivingCabin/right2.vue

@@ -128,6 +128,7 @@ export default {
             name: '利润',
             type: 'bar',
             barWidth: 20,
+            barGap: '0',
             data: [
               2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
             ],

src/views/bigScreen/scientific/index.vue

@@ -1,18 +1,73 @@
 <template>
     <div class="scientific">
-      科研生产
+      <div class="tab">
+        <div @click="index = 0" :class="{active: index == 0}">作业动态</div>
+        <div @click="index = 1" :class="{active: index == 1}">生产管理</div>
+        <div @click="index = 2" :class="{active: index == 2}">项目管理</div>
+      </div>
+      <tab1 class="tabWrap" v-show="index == 0"></tab1>
+      <tab2 class="tabWrap" v-show="index == 1"></tab2>
+      <tab3 class="tabWrap" v-show="index == 2"></tab3>
     </div>
 </template>
 
 <script>
+import tab1 from './tab1/index.vue'
+import tab2 from './tab2/index.vue'
+import tab3 from './tab3/index.vue'
 
 export default {
+
+
   name: 'Scientific',
   components: {
+    tab1,
+    tab2,
+    tab3,
+  },
+  data() {
+    return {
+      index: 0,
+    }
   }
 }
 </script>
 
 <style lang="scss" scoped>
+.tab {
+  position: absolute;
+  top: 107px;
+  left: 51px;
+  width: 360px;
+  height: 36px;
+  display: flex;
+  div {
+    flex: 1;
+    width: 120px;
+    box-sizing: border-box;
+    height: 36px;
+    box-shadow: inset 0px 0px 6px 2px #91D5FE;
+    border: 1px solid #91D5FE;
+    font-size: 16px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #91D5FE;
+    text-align: center;
+    line-height: 36px;
+    cursor: pointer;
+    user-select: none;
+  }
 
+  div.active {
+    font-weight: 600;
+    color: #0D1049;
+    background: #91D5FE;
+    box-shadow: none;
+    border: none;
+  }
+}
+.tabWrap {
+  width: 100%;
+  height: 100%;
+}
 </style>

src/views/bigScreen/scientific/tab1/index.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="tab1">
+      tab1
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'tab1',
+  components: {
+  },
+  props: {
+    title: {
+      type: String,
+      default: '',
+    },
+    selected: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data () {
+    return {
+
+    }
+  },
+}
+</script>

src/views/bigScreen/scientific/tab2/index.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="tab2">
+      tab2
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'tab2',
+  components: {
+  },
+  props: {
+    title: {
+      type: String,
+      default: '',
+    },
+    selected: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data () {
+    return {
+
+    }
+  },
+}
+</script>

src/views/bigScreen/scientific/tab3/index.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="tab3">
+      tab3
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'tab3',
+  components: {
+  },
+  props: {
+    title: {
+      type: String,
+      default: '',
+    },
+    selected: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data () {
+    return {
+
+    }
+  },
+}
+</script>