diff --git a/src/router/index.ts b/src/router/index.ts
index 13c10c2..30c9a4e 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -300,6 +300,16 @@ const routes: Array<RouteRecordRaw> = [
         name: "CIFMExhibition",
         component: () => import("../views/Exhibition/CIFM/index.vue"),
       },
+      {
+        path: "/CIFMExhibitionMain",
+        name: "CIFMExhibitionMain",
+        component: () => import("../views/Exhibition/CIFM/main.vue"),
+      },
+      {
+        path: "/CIFMExhibitionMain_:id",
+        name: "CIFMExhibitionMainChild",
+        component: () => import("../views/Exhibition/CIFM/child.vue"),
+      },
       {
         path: "/ExhibitionTable_:id",
         name: "ExhibitionTable",
diff --git a/src/views/Exhibition/CIFM/child.vue b/src/views/Exhibition/CIFM/child.vue
new file mode 100644
index 0000000..49e532f
--- /dev/null
+++ b/src/views/Exhibition/CIFM/child.vue
@@ -0,0 +1,108 @@
+<template>
+  <div class="container">
+        <div class="header">
+            <div class="title">
+                <header2 ref="headerref" :width="'100%'" :height="'100px'" :title="'床垫生产线物联管理系统'" :titleTip="[]"
+                    :typeFun="['time']" :alarmType="[]"></header2>
+            </div>
+        </div>
+        <div class="content">
+            
+        </div>
+        <div class="left-tip-type">
+            <div class="left-tip-type-item">
+                <div class="yuan green"></div>
+                <div class="left-tip-type-item-text">工作</div>
+            </div>
+            <div class="left-tip-type-item">
+                <div class="yuan yello"></div>
+                <div class="left-tip-type-item-text">待机</div>
+            </div>
+            <div class="left-tip-type-item">
+                <div class="yuan red"></div>
+                <div class="left-tip-type-item-text">停机</div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang='ts'>
+import { ref, reactive, onMounted, onUnmounted, getCurrentInstance, watch, onUpdated, computed } from 'vue'
+import header2 from './components/header2.vue'
+import BorderView from './components/Border.vue'
+</script>
+
+<style scoped>
+.container {
+    height: 1080px;
+    width: 1920px;
+    color: #FFFFFF;
+    background: url('./../../../assets/img/bg.jpg') no-repeat center center / 100% 100%;
+    background-color: #0E0E0E;
+    position: relative;
+
+}
+
+.header {
+    height: 100px;
+    width: 1920px;
+}
+
+.content {
+    height: 980px;
+    width: 1920px;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    padding: 0 5px;
+    box-sizing: border-box;
+}
+
+.left-tip-type {
+    position: absolute;
+    top: 50px;
+    left: 462px;
+    width: 160px;
+    height: 50px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 14px;
+    font-weight: 700;
+}
+
+.left-tip-type-item {
+    width: 33%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.yuan {
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+}
+
+.green {
+    background-color: #7CFFB2;
+}
+
+.yello {
+    background-color: #FDDD60;
+}
+
+.red {
+    background-color: #FF6E76;
+}
+
+.blue {
+    color: #20AEC5;
+}
+
+.err {
+    color: #FF6E76;
+}
+</style>
diff --git a/src/views/Exhibition/CIFM/components/Border.vue b/src/views/Exhibition/CIFM/components/Border.vue
new file mode 100644
index 0000000..f1d2d88
--- /dev/null
+++ b/src/views/Exhibition/CIFM/components/Border.vue
@@ -0,0 +1,86 @@
+<template>
+    <div class="newboder">
+        <!-- <img class="borderpng" src="" alt=""> -->
+        <div class="title">
+            <text class="title-text">{{ title }}</text>
+            <div class="hr"></div>
+        </div>
+        
+        <div class="newboder-content">
+            <slot></slot>
+        </div>
+    </div>
+</template>
+  
+<script setup lang='ts'>
+import { computed } from 'vue'
+let prop = defineProps({
+    title: {
+        type: String,
+        default: '裁剪设备'
+    }
+})
+
+// let newTitle = computed(() => {
+//     return prop.title.split('').join(' ')
+// })
+
+</script>
+  
+<style scoped>
+.newboder {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    padding: 10px;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    background: url(./../images/border.png) no-repeat;
+    background-size: 100% 100%;
+}
+
+.borderpng {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+}
+
+.title {
+    position: relative;
+    width: 100%;
+    height: 16%;
+    text-align: left;
+    font-weight: 400;
+    font-style: normal;
+    font-size: 30px;
+    color: rgba(0, 255, 255, 0.996078431372549);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    
+}
+.hr {
+    position: absolute;
+    bottom: 0px;
+    left: 0px;
+    width: 100%;
+    height: 4px;
+    background: url(./../images/hr.png) no-repeat;
+    background-position: 50%;
+}
+
+.title-text {
+    
+    font-weight: bold;
+}
+
+.newboder-content {
+    width: 100%;
+    height: 84%;
+    flex: 1;
+}
+</style>
+  
\ No newline at end of file
diff --git a/src/views/Exhibition/CIFM/components/ItemCard.vue b/src/views/Exhibition/CIFM/components/ItemCard.vue
new file mode 100644
index 0000000..7584e98
--- /dev/null
+++ b/src/views/Exhibition/CIFM/components/ItemCard.vue
@@ -0,0 +1,99 @@
+<template>
+    <div class="item-card-container">
+        <div class="box-top">
+            <div class="top-item" v-for="(item, index) in mjxhj_data">
+                <span class="key-text">{{ item.key }}:</span>
+                <span class="value-text" :class="{ status: index == 1 }"
+                    :style="{ background: index == 1 ? status_color[item.value] : '' }">{{ index ==
+                1 ? '' : item.value }}</span>
+            </div>
+        </div>
+        <div class="box-bottom">
+                <img src="./../images/mjxhj.png" alt="">
+        </div>
+
+    </div>
+</template>
+
+<script setup lang='ts'>
+
+const prop = defineProps({
+    mjxhj_data: {
+        type: Array as any,
+        default: () => []
+    }
+})
+const status_color = {
+    '0': '#FF6E76',
+    '1': '#FDDD60',
+    '2': '#7CFFB2',
+    '3': '#FDDD60',
+}
+</script>
+
+<style scoped>
+.item-card-container {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+
+}
+.box-top {
+    width: 100%;
+    height: 123px;
+    box-sizing: border-box;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    flex-wrap: wrap;
+}
+
+.box-bottom {
+    width: 100%;
+    height: calc(100% - 123px);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.box-bottom img {
+    max-width: 100%;
+}
+
+
+.top-item {
+    width: 33%;
+    height: 50%;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    box-sizing: border-box;
+    padding: 0 20px;
+}
+.key-text {
+    width: 60%;
+    font-size: 18px;
+    color: #02c1d7;
+    font-weight: 700;
+    /* font-family: '华文新魏', sans-serif; */
+}
+
+.value-text {
+    width: 40%;
+    font-size: 16px;
+    font-weight: bold;
+    color: #AEEEFAFE;
+    font-family: '华文新魏', sans-serif;
+    box-sizing: border-box;
+    padding-left: 10px;
+}
+
+.status {
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+}
+</style>
diff --git a/src/views/Exhibition/CIFM/images/border.png b/src/views/Exhibition/CIFM/images/border.png
new file mode 100644
index 0000000..65830e5
Binary files /dev/null and b/src/views/Exhibition/CIFM/images/border.png differ
diff --git a/src/views/Exhibition/CIFM/images/hr.png b/src/views/Exhibition/CIFM/images/hr.png
new file mode 100644
index 0000000..f64a4d7
Binary files /dev/null and b/src/views/Exhibition/CIFM/images/hr.png differ
diff --git a/src/views/Exhibition/CIFM/images/mjxhj.png b/src/views/Exhibition/CIFM/images/mjxhj.png
new file mode 100644
index 0000000..7aeebd7
Binary files /dev/null and b/src/views/Exhibition/CIFM/images/mjxhj.png differ
diff --git a/src/views/Exhibition/CIFM/main.vue b/src/views/Exhibition/CIFM/main.vue
new file mode 100644
index 0000000..4794e8a
--- /dev/null
+++ b/src/views/Exhibition/CIFM/main.vue
@@ -0,0 +1,185 @@
+<template>
+  <div class="container">
+        <div class="header">
+            <div class="title">
+                <header2 ref="headerref" :width="'100%'" :height="'100px'" :title="'床垫生产线物联管理系统'" :titleTip="[]"
+                    :typeFun="['time']" :alarmType="[]"></header2>
+            </div>
+        </div>
+        <div class="content">
+            <div class="left">
+                <BorderView :title="'床垫材料缝制设备'">
+                    <ItemCard :mjxhj_data="mjxhj_data"></ItemCard>
+                </BorderView>
+            </div>
+            <div class="center">
+                <div class="cc">
+                    <BorderView :title="'设备状态总览'">
+                    <ItemCard :mjxhj_data="mjxhj_data"></ItemCard>
+                    </BorderView>
+                </div>
+                <div class="cb">
+                    <BorderView :title="'床垫包装设备'">
+                    <ItemCard :mjxhj_data="mjxhj_data"></ItemCard>
+                    </BorderView>
+                </div>
+            </div>
+            <div class="right">
+                <BorderView :title="'床垫生产线设备'">
+                </BorderView>
+            </div>
+        </div>
+        <div class="left-tip-type">
+            <div class="left-tip-type-item">
+                <div class="yuan green"></div>
+                <div class="left-tip-type-item-text">工作</div>
+            </div>
+            <div class="left-tip-type-item">
+                <div class="yuan yello"></div>
+                <div class="left-tip-type-item-text">待机</div>
+            </div>
+            <div class="left-tip-type-item">
+                <div class="yuan red"></div>
+                <div class="left-tip-type-item-text">停机</div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang='ts'>
+import { ref, reactive, onMounted, onUnmounted, getCurrentInstance, watch, onUpdated, computed } from 'vue'
+import header2 from './components/header2.vue'
+import BorderView from './components/Border.vue'
+import ItemCard from './components/ItemCard.vue'
+
+
+
+
+let mjxhj_data = reactive([
+    { key: '机架号', value: '102014422' },
+    { key: '设备状态', value: 2 },
+    { key: '稼动率', value: '90%' },
+    { key: '工作时长', value: '0min' },
+])
+</script>
+
+<style scoped>
+.container {
+    height: 1080px;
+    width: 1920px;
+    color: #FFFFFF;
+    background: url('./../../../assets/img/bg.jpg') no-repeat center center / 100% 100%;
+    background-color: #0E0E0E;
+    position: relative;
+
+}
+
+.header {
+    height: 100px;
+    width: 1920px;
+}
+
+.content {
+    height: 980px;
+    width: 1920px;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    padding: 0 5px;
+    box-sizing: border-box;
+}
+
+.left,
+.right {
+    height: 980px;
+    width: 560px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+}
+
+.center {
+    width: 750px;
+    height: 980px;
+    margin: 0 20px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+}
+
+.cc {
+    width: 100%;
+    height: 440px;
+}
+
+.cb {
+    width: 100%;
+    height: 500px;
+}
+
+
+h2 {
+    /* color: #fff; */
+    font-size: 18px;
+    line-height: 1.5rem;
+    color: #02C1D7;
+}
+
+.on {
+    color: #20AEC5;
+    font-size: 3.5rem;
+}
+
+.off {
+    color: #797979;
+    font-size: 3.5rem;
+}
+
+.left-tip-type {
+    position: absolute;
+    top: 50px;
+    left: 462px;
+    width: 160px;
+    height: 50px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 14px;
+    font-weight: 700;
+}
+
+.left-tip-type-item {
+    width: 33%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.yuan {
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+}
+
+.green {
+    background-color: #7CFFB2;
+}
+
+.yello {
+    background-color: #FDDD60;
+}
+
+.red {
+    background-color: #FF6E76;
+}
+
+.blue {
+    color: #20AEC5;
+}
+
+.err {
+    color: #FF6E76;
+}
+</style>