中建四局(安全管理): 完成危大工程tabs布局

src/views/projectAdmin/zjsj/index.vue

@@ -58,6 +58,7 @@ export default {
 .zjsj-large-screen {
   width: 100%;
   height: 100%;
+  color: #fff;
   background-color: #182337;
   .header {
     width: 100%;

src/views/projectAdmin/zjsj/security/centerBottom.vue

@@ -1,14 +1,48 @@
 <template>
   <Card title="危大工程">
-    危大工程
+    <div class="tabs">
+      <div class="tab" :class="{ checked: index === tabIndex }" v-for="(tab, index) in tabs" :key="index" @click="changeTab(index)">
+        {{ tab }}
+      </div>
+    </div>
   </Card>
 </template>
 
 <script>
 import Card from '../components/Card.vue'
 export default {
-  components: { Card }
+  components: { Card },
+  data() {
+    return {
+      tabIndex: 0,
+      tabs: ['边临防护', '卸料平台', '深基坑检测', '高支模检测']
+    }
+  },
+  methods: {
+    changeTab(index) {
+      this.tabIndex = index
+    }
+  }
 }
 </script>
 
-<style></style>
+<style lang="less" scoped>
+.tabs {
+  padding: 10px;
+  display: flex;
+  .tab {
+    margin-right: 20px;
+    width: 90px;
+    height: 32px;
+    line-height: 32px;
+    text-align: center;
+    color: #6ee4f0;
+    background: url(../assets/images/sourse/bg-car-count.png) no-repeat;
+    background-size: 100% 100%;
+    cursor: pointer;
+    &.checked {
+      color: #fff;
+    }
+  }
+}
+</style>