diff --git a/src/views/projectAdmin/zjsj/carbon/centerBottom.vue b/src/views/projectAdmin/zjsj/carbon/centerBottom.vue
new file mode 100644
index 00000000..52e55837
--- /dev/null
+++ b/src/views/projectAdmin/zjsj/carbon/centerBottom.vue
@@ -0,0 +1,14 @@
+<template>
+  <Card title="晴雨表">
+    晴雨表
+  </Card>
+</template>
+
+<script>
+import Card from '../components/Card.vue'
+export default {
+  components: { Card }
+}
+</script>
+
+<style></style>
diff --git a/src/views/projectAdmin/zjsj/carbon/centerTop.vue b/src/views/projectAdmin/zjsj/carbon/centerTop.vue
new file mode 100644
index 00000000..22d7eab5
--- /dev/null
+++ b/src/views/projectAdmin/zjsj/carbon/centerTop.vue
@@ -0,0 +1,14 @@
+<template>
+  <Card title="实时数据">
+    实时数据
+  </Card>
+</template>
+
+<script>
+import Card from '../components/Card.vue'
+export default {
+  components: { Card }
+}
+</script>
+
+<style></style>
diff --git a/src/views/projectAdmin/zjsj/carbon/index.vue b/src/views/projectAdmin/zjsj/carbon/index.vue
index dd89ee25..9fe939db 100644
--- a/src/views/projectAdmin/zjsj/carbon/index.vue
+++ b/src/views/projectAdmin/zjsj/carbon/index.vue
@@ -1,16 +1,66 @@
 <template>
-  <div class="carbon">carbon</div>
+  <div class="carbon">
+    <div class="between">
+      <div class="top"><LeftTop /></div>
+      <div class="center"><LeftCenter /></div>
+      <div class="bottom"><LeftBottom /></div>
+    </div>
+    <div class="center">
+      <div class="top"><CenterTop /></div>
+      <div class="bottom"><CenterBottom /></div>
+    </div>
+    <div class="between">
+      <div class="top"><RightTop /></div>
+      <div class="center"><RightCenter /></div>
+      <div class="bottom"><RightBottom /></div>
+    </div>
+  </div>
 </template>
 
 <script>
-export default {}
+import LeftTop from './leftTop.vue'
+import LeftCenter from './leftCenter.vue'
+import LeftBottom from './leftBottom.vue'
+import CenterTop from './centerTop.vue'
+import CenterBottom from './centerBottom.vue'
+import RightTop from './rightTop.vue'
+import RightCenter from './rightCenter.vue'
+import RightBottom from './rightBottom.vue'
+export default {
+  components: { LeftTop, LeftCenter, LeftBottom, CenterTop, CenterBottom, RightTop, RightCenter, RightBottom }
+}
 </script>
 
 <style lang="less" scoped>
 .carbon {
   width: 100%;
   height: 100%;
-  background: url(../assets/temp/7.png) no-repeat;
-  background-size: 100% 100%;
+  display: flex;
+  justify-content: space-between;
+  // background: url(../assets/temp/7.png) no-repeat;
+  // background-size: 100% 100%;
+  .between {
+    width: 20%;
+    height: 100%;
+    .top {
+      height: 33.33%;
+    }
+    .center {
+      height: 33.33%;
+    }
+    .bottom {
+      height: 33.33%;
+    }
+  }
+  > .center {
+    width: calc(60% - 40px);
+    height: 100%;
+    .top {
+      height: 70%;
+    }
+    .bottom {
+      height: 30%;
+    }
+  }
 }
 </style>
diff --git a/src/views/projectAdmin/zjsj/carbon/leftBottom.vue b/src/views/projectAdmin/zjsj/carbon/leftBottom.vue
new file mode 100644
index 00000000..36501364
--- /dev/null
+++ b/src/views/projectAdmin/zjsj/carbon/leftBottom.vue
@@ -0,0 +1,14 @@
+<template>
+  <Card title="趋势图">
+    趋势图
+  </Card>
+</template>
+
+<script>
+import Card from '../components/Card.vue'
+export default {
+  components: { Card }
+}
+</script>
+
+<style></style>
diff --git a/src/views/projectAdmin/zjsj/carbon/leftCenter.vue b/src/views/projectAdmin/zjsj/carbon/leftCenter.vue
new file mode 100644
index 00000000..91b401d1
--- /dev/null
+++ b/src/views/projectAdmin/zjsj/carbon/leftCenter.vue
@@ -0,0 +1,14 @@
+<template>
+  <Card title="雾炮喷淋">
+    雾炮喷淋
+  </Card>
+</template>
+
+<script>
+import Card from '../components/Card.vue'
+export default {
+  components: { Card }
+}
+</script>
+
+<style></style>
diff --git a/src/views/projectAdmin/zjsj/carbon/leftTop.vue b/src/views/projectAdmin/zjsj/carbon/leftTop.vue
new file mode 100644
index 00000000..46804d97
--- /dev/null
+++ b/src/views/projectAdmin/zjsj/carbon/leftTop.vue
@@ -0,0 +1,14 @@
+<template>
+  <Card title="环境监测">
+    环境监测
+  </Card>
+</template>
+
+<script>
+import Card from '../components/Card.vue'
+export default {
+  components: { Card }
+}
+</script>
+
+<style></style>
diff --git a/src/views/projectAdmin/zjsj/carbon/rightBottom.vue b/src/views/projectAdmin/zjsj/carbon/rightBottom.vue
new file mode 100644
index 00000000..1ad04124
--- /dev/null
+++ b/src/views/projectAdmin/zjsj/carbon/rightBottom.vue
@@ -0,0 +1,14 @@
+<template>
+  <Card title="报警记录">
+    报警记录
+  </Card>
+</template>
+
+<script>
+import Card from '../components/Card.vue'
+export default {
+  components: { Card }
+}
+</script>
+
+<style></style>
diff --git a/src/views/projectAdmin/zjsj/carbon/rightCenter.vue b/src/views/projectAdmin/zjsj/carbon/rightCenter.vue
new file mode 100644
index 00000000..2a2ad3ee
--- /dev/null
+++ b/src/views/projectAdmin/zjsj/carbon/rightCenter.vue
@@ -0,0 +1,14 @@
+<template>
+  <Card title="今日报警统计">
+    今日报警统计
+  </Card>
+</template>
+
+<script>
+import Card from '../components/Card.vue'
+export default {
+  components: { Card }
+}
+</script>
+
+<style></style>
diff --git a/src/views/projectAdmin/zjsj/carbon/rightTop.vue b/src/views/projectAdmin/zjsj/carbon/rightTop.vue
new file mode 100644
index 00000000..5239a579
--- /dev/null
+++ b/src/views/projectAdmin/zjsj/carbon/rightTop.vue
@@ -0,0 +1,14 @@
+<template>
+  <Card title="空气分析">
+    空气分析
+  </Card>
+</template>
+
+<script>
+import Card from '../components/Card.vue'
+export default {
+  components: { Card }
+}
+</script>
+
+<style></style>
diff --git a/src/views/projectAdmin/zjsj/security/centerBottom.vue b/src/views/projectAdmin/zjsj/security/centerBottom.vue
new file mode 100644
index 00000000..52e55837
--- /dev/null
+++ b/src/views/projectAdmin/zjsj/security/centerBottom.vue
@@ -0,0 +1,14 @@
+<template>
+  <Card title="晴雨表">
+    晴雨表
+  </Card>
+</template>
+
+<script>
+import Card from '../components/Card.vue'
+export default {
+  components: { Card }
+}
+</script>
+
+<style></style>
diff --git a/src/views/projectAdmin/zjsj/security/centerTop.vue b/src/views/projectAdmin/zjsj/security/centerTop.vue
new file mode 100644
index 00000000..22d7eab5
--- /dev/null
+++ b/src/views/projectAdmin/zjsj/security/centerTop.vue
@@ -0,0 +1,14 @@
+<template>
+  <Card title="实时数据">
+    实时数据
+  </Card>
+</template>
+
+<script>
+import Card from '../components/Card.vue'
+export default {
+  components: { Card }
+}
+</script>
+
+<style></style>
diff --git a/src/views/projectAdmin/zjsj/security/index.vue b/src/views/projectAdmin/zjsj/security/index.vue
index 96c48a33..917a4a48 100644
--- a/src/views/projectAdmin/zjsj/security/index.vue
+++ b/src/views/projectAdmin/zjsj/security/index.vue
@@ -1,16 +1,66 @@
 <template>
-  <div class="security">security</div>
+  <div class="security">
+    <div class="between">
+      <div class="top"><LeftTop /></div>
+      <div class="center"><LeftCenter /></div>
+      <div class="bottom"><LeftBottom /></div>
+    </div>
+    <div class="center">
+      <div class="top"><CenterTop /></div>
+      <div class="bottom"><CenterBottom /></div>
+    </div>
+    <div class="between">
+      <div class="top"><RightTop /></div>
+      <div class="center"><RightCenter /></div>
+      <div class="bottom"><RightBottom /></div>
+    </div>
+  </div>
 </template>
 
 <script>
-export default {}
+import LeftTop from './leftTop.vue'
+import LeftCenter from './leftCenter.vue'
+import LeftBottom from './leftBottom.vue'
+import CenterTop from './centerTop.vue'
+import CenterBottom from './centerBottom.vue'
+import RightTop from './rightTop.vue'
+import RightCenter from './rightCenter.vue'
+import RightBottom from './rightBottom.vue'
+export default {
+  components: { LeftTop, LeftCenter, LeftBottom, CenterTop, CenterBottom, RightTop, RightCenter, RightBottom }
+}
 </script>
 
 <style lang="less" scoped>
 .security {
   width: 100%;
   height: 100%;
-  background: url(../assets/temp/5.png) no-repeat;
-  background-size: 100% 100%;
+  display: flex;
+  justify-content: space-between;
+  // background: url(../assets/temp/5.png) no-repeat;
+  // background-size: 100% 100%;
+  .between {
+    width: 20%;
+    height: 100%;
+    .top {
+      height: 33.33%;
+    }
+    .center {
+      height: 33.33%;
+    }
+    .bottom {
+      height: 33.33%;
+    }
+  }
+  > .center {
+    width: calc(60% - 40px);
+    height: 100%;
+    .top {
+      height: 70%;
+    }
+    .bottom {
+      height: 30%;
+    }
+  }
 }
 </style>
diff --git a/src/views/projectAdmin/zjsj/security/leftBottom.vue b/src/views/projectAdmin/zjsj/security/leftBottom.vue
new file mode 100644
index 00000000..36501364
--- /dev/null
+++ b/src/views/projectAdmin/zjsj/security/leftBottom.vue
@@ -0,0 +1,14 @@
+<template>
+  <Card title="趋势图">
+    趋势图
+  </Card>
+</template>
+
+<script>
+import Card from '../components/Card.vue'
+export default {
+  components: { Card }
+}
+</script>
+
+<style></style>
diff --git a/src/views/projectAdmin/zjsj/security/leftCenter.vue b/src/views/projectAdmin/zjsj/security/leftCenter.vue
new file mode 100644
index 00000000..91b401d1
--- /dev/null
+++ b/src/views/projectAdmin/zjsj/security/leftCenter.vue
@@ -0,0 +1,14 @@
+<template>
+  <Card title="雾炮喷淋">
+    雾炮喷淋
+  </Card>
+</template>
+
+<script>
+import Card from '../components/Card.vue'
+export default {
+  components: { Card }
+}
+</script>
+
+<style></style>
diff --git a/src/views/projectAdmin/zjsj/security/leftTop.vue b/src/views/projectAdmin/zjsj/security/leftTop.vue
new file mode 100644
index 00000000..46804d97
--- /dev/null
+++ b/src/views/projectAdmin/zjsj/security/leftTop.vue
@@ -0,0 +1,14 @@
+<template>
+  <Card title="环境监测">
+    环境监测
+  </Card>
+</template>
+
+<script>
+import Card from '../components/Card.vue'
+export default {
+  components: { Card }
+}
+</script>
+
+<style></style>
diff --git a/src/views/projectAdmin/zjsj/security/rightBottom.vue b/src/views/projectAdmin/zjsj/security/rightBottom.vue
new file mode 100644
index 00000000..1ad04124
--- /dev/null
+++ b/src/views/projectAdmin/zjsj/security/rightBottom.vue
@@ -0,0 +1,14 @@
+<template>
+  <Card title="报警记录">
+    报警记录
+  </Card>
+</template>
+
+<script>
+import Card from '../components/Card.vue'
+export default {
+  components: { Card }
+}
+</script>
+
+<style></style>
diff --git a/src/views/projectAdmin/zjsj/security/rightCenter.vue b/src/views/projectAdmin/zjsj/security/rightCenter.vue
new file mode 100644
index 00000000..2a2ad3ee
--- /dev/null
+++ b/src/views/projectAdmin/zjsj/security/rightCenter.vue
@@ -0,0 +1,14 @@
+<template>
+  <Card title="今日报警统计">
+    今日报警统计
+  </Card>
+</template>
+
+<script>
+import Card from '../components/Card.vue'
+export default {
+  components: { Card }
+}
+</script>
+
+<style></style>
diff --git a/src/views/projectAdmin/zjsj/security/rightTop.vue b/src/views/projectAdmin/zjsj/security/rightTop.vue
new file mode 100644
index 00000000..5239a579
--- /dev/null
+++ b/src/views/projectAdmin/zjsj/security/rightTop.vue
@@ -0,0 +1,14 @@
+<template>
+  <Card title="空气分析">
+    空气分析
+  </Card>
+</template>
+
+<script>
+import Card from '../components/Card.vue'
+export default {
+  components: { Card }
+}
+</script>
+
+<style></style>