diff --git a/src/assets/images/assets1.png b/src/assets/images/assets1.png
new file mode 100644
index 0000000..fb0712c
Binary files /dev/null and b/src/assets/images/assets1.png differ
diff --git a/src/assets/images/assetsArr.png b/src/assets/images/assetsArr.png
new file mode 100644
index 0000000..db20cd5
Binary files /dev/null and b/src/assets/images/assetsArr.png differ
diff --git a/src/assets/images/assetsBtn.png b/src/assets/images/assetsBtn.png
new file mode 100644
index 0000000..fa4cfa8
Binary files /dev/null and b/src/assets/images/assetsBtn.png differ
diff --git a/src/assets/images/assetsBtnAc.png b/src/assets/images/assetsBtnAc.png
new file mode 100644
index 0000000..7d5f195
Binary files /dev/null and b/src/assets/images/assetsBtnAc.png differ
diff --git a/src/assets/images/assetsLeft.png b/src/assets/images/assetsLeft.png
new file mode 100644
index 0000000..6c898e2
Binary files /dev/null and b/src/assets/images/assetsLeft.png differ
diff --git a/src/assets/images/assetsRight.png b/src/assets/images/assetsRight.png
new file mode 100644
index 0000000..3218ba0
Binary files /dev/null and b/src/assets/images/assetsRight.png differ
diff --git a/src/assets/images/shebeijiantou.png b/src/assets/images/shebeijiantou.png
new file mode 100644
index 0000000..d2a3bbf
Binary files /dev/null and b/src/assets/images/shebeijiantou.png differ
diff --git a/src/assets/images/shebeijiantoufan.png b/src/assets/images/shebeijiantoufan.png
new file mode 100644
index 0000000..9f29edd
Binary files /dev/null and b/src/assets/images/shebeijiantoufan.png differ
diff --git a/src/assets/images/shebeimoxing.png b/src/assets/images/shebeimoxing.png
new file mode 100644
index 0000000..91ed1b4
Binary files /dev/null and b/src/assets/images/shebeimoxing.png differ
diff --git a/src/assets/images/zhuangtaikuang.png b/src/assets/images/zhuangtaikuang.png
new file mode 100644
index 0000000..e0d6a7d
Binary files /dev/null and b/src/assets/images/zhuangtaikuang.png differ
diff --git a/src/router.js b/src/router.js
index 0dee11e..0d3e64a 100644
--- a/src/router.js
+++ b/src/router.js
@@ -24,5 +24,10 @@ export default new Router({
       name: 'index',
       component: () => import ('./view/index.vue')
     },
+    {
+      path: '/equipmentAssets',
+      name: 'equipmentAssets',
+      component: () => import ('./view/equipmentAssets.vue')
+    },
   ]
 })
diff --git a/src/view/equipmentAssets.vue b/src/view/equipmentAssets.vue
new file mode 100644
index 0000000..7a05aaa
--- /dev/null
+++ b/src/view/equipmentAssets.vue
@@ -0,0 +1,574 @@
+<template>
+  <div class="equipmentAssets">
+    <transition name="left">
+      <div class="assetsLeft" v-show="menuShow">
+        <div class="btnLeft">
+          <div
+            v-for="(item, index) in menusArr"
+            :key="index"
+            :style="{
+              backgroundImage:
+                btnAc != index
+                  ? 'url(' + btnBG.pic + ')'
+                  : 'url(' + btnBG.actPic + ')',
+              marginLeft: btnAc == index ? '15px' : '0px',
+            }"
+            class="btnList"
+            @click="handelBtn(index)"
+          >
+            <div class="textArr">
+              <p :text="item.text">{{ item.text }}</p>
+            </div>
+          </div>
+          <img
+            src="../assets/images/shebeijiantou.png"
+            class="jiantou"
+            @click="menuHandel"
+            v-show="arrow"
+          />
+        </div>
+      </div>
+    </transition>
+    <transition name="right">
+      <div class="assetsRight" v-show="menuShow">
+        <div class="rightOne" v-if="btnAc == 0">
+          <div class="assetsTitle">
+            <p text="设备名称" style="font-family: 'maleGod'">设备名称</p>
+          </div>
+          <div class="asstesContent1">
+            <div class="models">
+              <div class="assetsStatus">
+                <p style="margin-left: 15px">正常</p>
+              </div>
+              <div class="modelsImg">
+                <img src="@/assets/images/shebeimoxing.png" />
+              </div>
+            </div>
+            <div class="modelIntroduction">
+              {{ modelIntroduction }}
+            </div>
+            <div class="assetsList">
+              <div
+                v-for="(item, index) in assetsList"
+                :key="index"
+                class="assetsArr"
+              >
+                <div class="listContent">
+                  <div>{{ item.name }}</div>
+                  <div
+                    style="
+                      font-family: 'maleGod';
+                      color: rgb(76, 181, 209);
+                      font-size: 20px;
+                    "
+                  >
+                    {{ item.count }}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="rightOne" v-if="btnAc == 1">
+          <div class="assetsTitle">
+            <p text="设备名称" style="font-family: 'maleGod'">设备名称二</p>
+          </div>
+          <div class="asstesContent1">
+            <div class="models">
+              <div class="assetsStatus">
+                <p style="margin-left: 15px">正常</p>
+              </div>
+              <div class="modelsImg">
+                <img src="@/assets/images/shebeimoxing.png" />
+              </div>
+            </div>
+            <div class="modelIntroduction">
+              {{ modelIntroduction }}
+            </div>
+            <div class="assetsList">
+              <div
+                v-for="(item, index) in assetsList"
+                :key="index"
+                class="assetsArr"
+              >
+                <div class="listContent">
+                  <div>{{ item.name }}</div>
+                  <div
+                    style="
+                      font-family: 'maleGod';
+                      color: rgb(76, 181, 209);
+                      font-size: 20px;
+                    "
+                  >
+                    {{ item.count }}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="rightOne" v-if="btnAc == 2">
+          <div class="assetsTitle">
+            <p text="设备名称" style="font-family: 'maleGod'">设备名称三</p>
+          </div>
+          <div class="asstesContent1">
+            <div class="models">
+              <div class="assetsStatus">
+                <p style="margin-left: 15px">正常</p>
+              </div>
+              <div class="modelsImg">
+                <img src="@/assets/images/shebeimoxing.png" />
+              </div>
+            </div>
+            <div class="modelIntroduction">
+              {{ modelIntroduction }}
+            </div>
+            <div class="assetsList">
+              <div
+                v-for="(item, index) in assetsList"
+                :key="index"
+                class="assetsArr"
+              >
+                <div class="listContent">
+                  <div>{{ item.name }}</div>
+                  <div
+                    style="
+                      font-family: 'maleGod';
+                      color: rgb(76, 181, 209);
+                      font-size: 20px;
+                    "
+                  >
+                    {{ item.count }}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="rightOne" v-if="btnAc == 3">
+          <div class="assetsTitle">
+            <p text="设备名称" style="font-family: 'maleGod'">设备名称四</p>
+          </div>
+          <div class="asstesContent1">
+            <div class="models">
+              <div class="assetsStatus">
+                <p style="margin-left: 15px">正常</p>
+              </div>
+              <div class="modelsImg">
+                <img src="@/assets/images/shebeimoxing.png" />
+              </div>
+            </div>
+            <div class="modelIntroduction">
+              {{ modelIntroduction }}
+            </div>
+            <div class="assetsList">
+              <div
+                v-for="(item, index) in assetsList"
+                :key="index"
+                class="assetsArr"
+              >
+                <div class="listContent">
+                  <div>{{ item.name }}</div>
+                  <div
+                    style="
+                      font-family: 'maleGod';
+                      color: rgb(76, 181, 209);
+                      font-size: 20px;
+                    "
+                  >
+                    {{ item.count }}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="rightOne" v-if="btnAc == 4">
+          <div class="assetsTitle">
+            <p text="设备名称" style="font-family: 'maleGod'">设备名称五</p>
+          </div>
+          <div class="asstesContent1">
+            <div class="models">
+              <div class="assetsStatus">
+                <p style="margin-left: 15px">正常</p>
+              </div>
+              <div class="modelsImg">
+                <img src="@/assets/images/shebeimoxing.png" />
+              </div>
+            </div>
+            <div class="modelIntroduction">
+              {{ modelIntroduction }}
+            </div>
+            <div class="assetsList">
+              <div
+                v-for="(item, index) in assetsList"
+                :key="index"
+                class="assetsArr"
+              >
+                <div class="listContent">
+                  <div>{{ item.name }}</div>
+                  <div
+                    style="
+                      font-family: 'maleGod';
+                      color: rgb(76, 181, 209);
+                      font-size: 20px;
+                    "
+                  >
+                    {{ item.count }}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="rightOne" v-if="btnAc == 5">
+          <div class="assetsTitle">
+            <p text="设备名称" style="font-family: 'maleGod'">设备名称六</p>
+          </div>
+          <div class="asstesContent1">
+            <div class="models">
+              <div class="assetsStatus">
+                <p style="margin-left: 15px">正常</p>
+              </div>
+              <div class="modelsImg">
+                <img src="@/assets/images/shebeimoxing.png" />
+              </div>
+            </div>
+            <div class="modelIntroduction">
+              {{ modelIntroduction }}
+            </div>
+            <div class="assetsList">
+              <div
+                v-for="(item, index) in assetsList"
+                :key="index"
+                class="assetsArr"
+              >
+                <div class="listContent">
+                  <div>{{ item.name }}</div>
+                  <div
+                    style="
+                      font-family: 'maleGod';
+                      color: rgb(76, 181, 209);
+                      font-size: 20px;
+                    "
+                  >
+                    {{ item.count }}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </transition>
+    <img
+      src="../assets/images/shebeijiantoufan.png"
+      class="jiantoufan"
+      @click="menuHandelShow"
+      v-show="!arrow"
+    />
+  </div>
+</template>
+
+<script>
+// import index from "./index.vue";
+export default {
+  //   components: { index },
+  name: "equipmentAssets",
+  data() {
+    return {
+      arrow: false, //箭头隐藏
+      menuShow: false, //菜单隐藏动画
+      modelIntroduction: `具有自助交电费、查询账单、
+                        打印发票以及智能管理功能，具备24小时无人值守的自助服务特性，
+                        最大限度拓宽业务办理渠道、业务场所及最大限度拓宽业务办理渠道、业务场所及最大程度
+                        的人性化服务。`, //模型介绍
+      btnAc: 0,
+      btnBG: {
+        pic: require("@/assets/images/assetsBtn.png"),
+        actPic: require("@/assets/images/assetsBtnAc.png"),
+      },
+      menusArr: [
+        {
+          text: "设备名称一",
+        },
+        {
+          text: "设备名称二",
+        },
+        {
+          text: "设备名称三",
+        },
+        {
+          text: "设备名称四",
+        },
+        {
+          text: "设备名称五",
+        },
+        {
+          text: "设备名称六",
+        },
+      ],
+      assetsList: [
+        {
+          name: "当日业务量(个)：",
+          count: "24",
+        },
+        {
+          name: "当日平均办理时间(分钟)：",
+          count: "26",
+        },
+        {
+          name: "当日最长办理时间(分钟)：",
+          count: "68",
+        },
+        {
+          name: "当日最长等待时间(分钟)：",
+          count: "23",
+        },
+        {
+          name: "平均等待时间(分钟)：",
+          count: "17",
+        },
+      ],
+    };
+  },
+  mounted() {
+      this.menuHandelShow()
+  },
+  methods: {
+    handelBtn(index) {
+      this.btnAc = index;
+    },
+    //隐藏菜单按钮
+    menuHandel() {
+      let that = this;
+      this.menuShow = false;
+      window.setTimeout(() => {
+        that.arrow = false;
+      }, 1000);
+    },
+    //显示菜单按钮
+    menuHandelShow() {
+      this.arrow = true;
+      this.menuShow = true;
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.equipmentAssets {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+  .assetsLeft {
+    width: 15.5%;
+    height: 100%;
+    position: absolute;
+    left: 0;
+    background: url("../assets/images/assetsLeft.png") no-repeat;
+    background-size: 100% 100%;
+    .btnLeft {
+      height: 60%;
+      width: 100%;
+      position: absolute;
+      top: 18%;
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      justify-content: center;
+      .btnList {
+        width: 224px;
+        height: 50px;
+        .textArr {
+          height: 100%;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          color: #ffffff;
+        }
+        .textArr ::before {
+          content: attr(text);
+          position: absolute;
+          z-index: 10;
+          //   bottom: 0;
+          color: rgb(163, 227, 245);
+          -webkit-mask: linear-gradient(
+            to top,
+            rgba(163, 227, 245, 0.7),
+            transparent
+          );
+        }
+      }
+      .jiantou {
+        position: absolute;
+        width: 14px;
+        height: 29px;
+        top: 48%;
+        right: 3%;
+        cursor: pointer;
+      }
+    }
+  }
+  .assetsRight {
+    width: 20.6%;
+    height: 100%;
+    position: absolute;
+    right: 0;
+    .rightOne {
+      position: absolute;
+      height: 100%;
+      width: 100%;
+      background: url("../assets/images/assetsRight.png") no-repeat;
+      background-size: 100% 100%;
+      .assetsTitle {
+        color: #ffffff;
+        height: 5.5%;
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        justify-content: flex-start;
+        padding-left: 10%;
+        box-sizing: border-box;
+      }
+      .assetsTitle ::before {
+        content: attr(text);
+        position: absolute;
+        z-index: 10;
+        color: rgb(135, 216, 238);
+        -webkit-mask: linear-gradient(
+          to top,
+          rgba(163, 227, 245, 0.7),
+          transparent
+        );
+      }
+      .asstesContent1 {
+        height: calc(100% - 5.5%);
+        width: 100%;
+        padding: 0% 3%;
+        box-sizing: border-box;
+        .models {
+          width: 100%;
+          height: 50.5%;
+          background: url("../assets/images/assets1.png") no-repeat;
+          background-size: 100% 100%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          position: relative;
+          .assetsStatus {
+            width: 81px;
+            height: 31px;
+            position: absolute;
+            top: 0;
+            right: 0;
+            background: url("../assets/images/zhuangtaikuang.png") no-repeat;
+            background-size: 100% 100%;
+            color: chartreuse;
+            font-size: 15px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+          }
+          .modelsImg {
+            width: 41%;
+            height: 90%;
+          }
+        }
+        .modelIntroduction {
+          height: 18%;
+          color: #ffffff;
+          letter-spacing: 2px;
+          text-align: justify;
+          text-indent: 30px;
+          margin-top: 10px;
+          line-height: 30px;
+          overflow-y: auto;
+        }
+        .modelIntroduction::-webkit-scrollbar {
+          width: 0 !important;
+        }
+        .assetsList {
+          height: calc(100% - 70.5%);
+          width: 100%;
+          display: flex;
+          align-content: space-between;
+          flex-wrap: wrap;
+          overflow-y: auto;
+          .assetsArr {
+            background: url("../assets/images/assetsArr.png") no-repeat;
+            background-size: 100% 100%;
+            width: 100%;
+            height: 16%;
+            .listContent {
+              margin-left: 10%;
+              width: 80%;
+              height: 100%;
+              display: flex;
+              flex-wrap: nowrap;
+              justify-content: space-between;
+              align-items: center;
+              color: #ffffff;
+            }
+          }
+        }
+        .assetsList::-webkit-scrollbar {
+          width: 0 !important;
+        }
+      }
+    }
+  }
+  //箭头
+  .jiantoufan {
+    position: absolute;
+    width: 14px;
+    height: 29px;
+    top: 48%;
+    left: 0;
+    cursor: pointer;
+  }
+}
+//left动画
+@keyframes donghua1 {
+  from {
+    transform: translateX(0%);
+  }
+
+  to {
+    transform: translateX(-100%);
+  }
+}
+.left-leave,
+.left-leave-active,
+.left-leave-to {
+  animation: donghua1 1s linear;
+}
+
+.left-enter,
+.left-enter-active,
+.left-enter-to {
+  animation: donghua1 1s linear reverse;
+}
+//right动画
+@keyframes donghua2 {
+  from {
+    transform: translateX(0%);
+  }
+
+  to {
+    transform: translateX(100%);
+  }
+}
+.right-leave,
+.right-leave-active,
+.right-leave-to {
+  animation: donghua2 1s linear;
+}
+
+.right-enter,
+.right-enter-active,
+.right-enter-to {
+  animation: donghua2 1s linear reverse;
+}
+</style>
\ No newline at end of file
diff --git a/src/view/index.vue b/src/view/index.vue
index 94964d5..e61061e 100644
--- a/src/view/index.vue
+++ b/src/view/index.vue
@@ -205,11 +205,10 @@
       </div>
       <div class="middleBottom">
         <div class="menuBtn"  :class="{'menuBtn1' : menuAc == index}" v-for="(item,index) in menu" :key="index" @click="handelBtn(index)">
-          <img :src="item.icon"/>
+          <img :src="menuAc != index ? item.icon : item.iconAc"/>
         </div>
       </div>
       <div class="middleBottomIcon">
-
       </div>
     </div>
   </div>
@@ -372,15 +371,19 @@ export default {
       ],
       menu:[
         {
-          icon: require("@/assets/images/zongti.png")
+          icon: require("@/assets/images/zongti.png"),
+          iconAc:require("@/assets/images/zongtiAc.png")
         },
         {
-          icon: require("@/assets/images/zhihui.png")
+          icon: require("@/assets/images/zhihui.png"),
+          iconAc:require("@/assets/images/zhihuiAc.png")
         },
         {
-          icon: require("@/assets/images/shebei.png")
+          icon: require("@/assets/images/shebei.png"),
+          iconAc:require("@/assets/images/shebeiAc.png")
         }
-      ]
+      ],
+      menuAc:0
     };
   },
   mounted() {
@@ -397,17 +400,11 @@ export default {
      handelBtn(index){
       this.menuAc = index
         if (index == 0) {
-        this.menu[0].icon = require("@/assets/images/zongtiAc.png")
-        this.menu[1].icon = require("@/assets/images/zhihui.png")
-        this.menu[2].icon = require("@/assets/images/shebei.png")
+    
       }else if (index == 1) {
-        this.menu[0].icon = require("@/assets/images/zongti.png")
-        this.menu[1].icon = require("@/assets/images/zhihuiAc.png")
-        this.menu[2].icon = require("@/assets/images/shebei.png")
+   
       }else if (index == 2) {
-        this.menu[0].icon = require("@/assets/images/zongti.png")
-        this.menu[1].icon = require("@/assets/images/zhihui.png")
-        this.menu[2].icon = require("@/assets/images/shebeiAc.png")
+        this.$router.push('./equipmentAssets')
       }
       
     },