diff --git a/src/router/index.ts b/src/router/index.ts
index ddd94f9..31b78b9 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -16,16 +16,26 @@ import Layout from '@/layout/index.vue';
  * roles: ['admin', 'common']       // 访问路由的角色权限
  * permissions: ['a:a:a', 'b:b:b']  // 访问路由的菜单权限
  * meta : {
-    noCache: true                   // 如果设置为true，则不会被 <keep-alive> 缓存(默认 false)
-    title: 'title'                  // 设置该路由在侧边栏和面包屑中展示的名字
-    icon: 'svg-name'                // 设置该路由的图标，对应路径src/assets/icons/svg
-    breadcrumb: false               // 如果设置为false，则不会在breadcrumb面包屑中显示
-    activeMenu: '/system/user'      // 当路由设置了该属性，则会高亮相对应的侧边栏。
-  }
+ noCache: true                   // 如果设置为true，则不会被 <keep-alive> 缓存(默认 false)
+ title: 'title'                  // 设置该路由在侧边栏和面包屑中展示的名字
+ icon: 'svg-name'                // 设置该路由的图标，对应路径src/assets/icons/svg
+ breadcrumb: false               // 如果设置为false，则不会在breadcrumb面包屑中显示
+ activeMenu: '/system/user'      // 当路由设置了该属性，则会高亮相对应的侧边栏。
+ }
  */
 
 // 公共路由
 export const constantRoutes: RouteRecordRaw[] = [
+  {
+    path: '/board1',
+    hidden: true,
+    component: () => import('@/views/board/index.vue')
+  },
+  {
+    path: '/board2',
+    hidden: true,
+    component: () => import('@/views/board/index2.vue')
+  },
   {
     path: '/redirect',
     component: Layout,
@@ -84,7 +94,7 @@ export const constantRoutes: RouteRecordRaw[] = [
         path: 'instockDetail',
         component: () => import('@/views/wms/instockDetail/index.vue'),
         name: 'instockDetail',
-        meta: { title: '入库明细', icon: 'dashboard'},
+        meta: { title: '入库明细', icon: 'dashboard' },
         hidden: true
       }
     ]
@@ -98,7 +108,7 @@ export const constantRoutes: RouteRecordRaw[] = [
         path: 'allocateOrderDetail',
         component: () => import('@/views/wms/allocateOrderDetail/index.vue'),
         name: 'allocateOrderDetail',
-        meta: { title: '调拨单明细', icon: 'dashboard'},
+        meta: { title: '调拨单明细', icon: 'dashboard' },
         hidden: true
       }
     ]
@@ -259,7 +269,7 @@ export const dynamicRoutes: RouteRecordRaw[] = [
         name: 'productPlanEdit',
         meta: { title: '生产派工', activeMenu: '/mes/productplan', noCache: true }
       }
-  ]
+    ]
   }
 ];
 
diff --git a/src/views/board/index.vue b/src/views/board/index.vue
new file mode 100644
index 0000000..bdfda90
--- /dev/null
+++ b/src/views/board/index.vue
@@ -0,0 +1,522 @@
+<template>
+  <div class="board">
+    <div class="title">
+      微电网能源管理系统
+    </div>
+    <div class="rightTop">
+      <span>今日告警:</span>
+      <span style="color: #ff0000">2234</span>
+      <br>
+      <span>累计告警:</span>
+      <span style="color: #4F98B8">3392</span>
+    </div>
+    <div class="card" style="left: 0.3%;background-color: #DD8F78">
+      <div class="cardTitle">上网电量</div>
+      <div class="cardInfo">
+        <div class="cardItem" style="width: 50%;padding-left: 0.5vw;">
+          日上网电量
+        </div>
+        <div class="cardItem" style="width: 20%;font-size: 1.2vw">
+          103.2
+        </div>
+        <div class="cardItem" style="width: 30%;text-align: right;padding-right: 0.5vw;">
+          kwh
+        </div>
+      </div>
+      <div class="cardInfo">
+        <div class="cardItem" style="width: 50%;padding-left: 0.5vw;">
+          累计上网电量
+        </div>
+        <div class="cardItem" style="width: 20%;font-size: 1.2vw">
+          36371
+        </div>
+        <div class="cardItem" style="width: 30%;text-align: right;padding-right: 0.5vw;">
+          kwh
+        </div>
+      </div>
+    </div>
+    <div class="card" style="left: 16.9%;background-color: #DD8F78">
+      <div class="cardTitle">上网电量</div>
+      <div class="cardInfo">
+        <div class="cardItem" style="width: 50%;padding-left: 0.5vw;">
+          日上网电量
+        </div>
+        <div class="cardItem" style="width: 20%;font-size: 1.2vw">
+          103.2
+        </div>
+        <div class="cardItem" style="width: 30%;text-align: right;padding-right: 0.5vw;">
+          kwh
+        </div>
+      </div>
+      <div class="cardInfo">
+        <div class="cardItem" style="width: 50%;padding-left: 0.5vw;">
+          累计上网电量
+        </div>
+        <div class="cardItem" style="width: 20%;font-size: 1.2vw">
+          36371
+        </div>
+        <div class="cardItem" style="width: 30%;text-align: right;padding-right: 0.5vw;">
+          kwh
+        </div>
+      </div>
+    </div>
+    <div class="card" style="left: 33.5%;background-color: #DD8F78">
+      <div class="cardTitle">上网电量</div>
+      <div class="cardInfo">
+        <div class="cardItem" style="width: 50%;padding-left: 0.5vw;">
+          日上网电量
+        </div>
+        <div class="cardItem" style="width: 20%;font-size: 1.2vw">
+          103.2
+        </div>
+        <div class="cardItem" style="width: 30%;text-align: right;padding-right: 0.5vw;">
+          kwh
+        </div>
+      </div>
+      <div class="cardInfo">
+        <div class="cardItem" style="width: 50%;padding-left: 0.5vw;">
+          累计上网电量
+        </div>
+        <div class="cardItem" style="width: 20%;font-size: 1.2vw">
+          36371
+        </div>
+        <div class="cardItem" style="width: 30%;text-align: right;padding-right: 0.5vw;">
+          kwh
+        </div>
+      </div>
+    </div>
+    <div class="card" style="left: 50.1%;background-color: #DD8F78">
+      <div class="cardTitle">上网电量</div>
+      <div class="cardInfo">
+        <div class="cardItem" style="width: 50%;padding-left: 0.5vw;">
+          日上网电量
+        </div>
+        <div class="cardItem" style="width: 20%;font-size: 1.2vw">
+          103.2
+        </div>
+        <div class="cardItem" style="width: 30%;text-align: right;padding-right: 0.5vw;">
+          kwh
+        </div>
+      </div>
+      <div class="cardInfo">
+        <div class="cardItem" style="width: 50%;padding-left: 0.5vw;">
+          累计上网电量
+        </div>
+        <div class="cardItem" style="width: 20%;font-size: 1.2vw">
+          36371
+        </div>
+        <div class="cardItem" style="width: 30%;text-align: right;padding-right: 0.5vw;">
+          kwh
+        </div>
+      </div>
+    </div>
+    <div class="card" style="left: 66.7%;background-color: #DD8F78">
+      <div class="cardTitle">上网电量</div>
+      <div class="cardInfo">
+        <div class="cardItem" style="width: 50%;padding-left: 0.5vw;">
+          日上网电量
+        </div>
+        <div class="cardItem" style="width: 20%;font-size: 1.2vw">
+          103.2
+        </div>
+        <div class="cardItem" style="width: 30%;text-align: right;padding-right: 0.5vw;">
+          kwh
+        </div>
+      </div>
+      <div class="cardInfo">
+        <div class="cardItem" style="width: 50%;padding-left: 0.5vw;">
+          累计上网电量
+        </div>
+        <div class="cardItem" style="width: 20%;font-size: 1.2vw">
+          36371
+        </div>
+        <div class="cardItem" style="width: 30%;text-align: right;padding-right: 0.5vw;">
+          kwh
+        </div>
+      </div>
+    </div>
+    <div class="card" style="left: 83.3%;background-color: #DD8F78">
+      <div class="cardTitle">上网电量</div>
+      <div class="cardInfo">
+        <div class="cardItem" style="width: 50%;padding-left: 0.5vw;">
+          日上网电量
+        </div>
+        <div class="cardItem" style="width: 20%;font-size: 1.2vw">
+          103.2
+        </div>
+        <div class="cardItem" style="width: 30%;text-align: right;padding-right: 0.5vw;">
+          kwh
+        </div>
+      </div>
+      <div class="cardInfo">
+        <div class="cardItem" style="width: 50%;padding-left: 0.5vw;">
+          累计上网电量
+        </div>
+        <div class="cardItem" style="width: 20%;font-size: 1.2vw">
+          36371
+        </div>
+        <div class="cardItem" style="width: 30%;text-align: right;padding-right: 0.5vw;">
+          kwh
+        </div>
+      </div>
+    </div>
+    <div class="bottomLeftTop">
+      <div class="card1" style="margin-top: 1%;margin-bottom: 2%">
+        <div class="title1">系统收益</div>
+        <div class="icon1"></div>
+        <div class="num1">1.11</div>
+        <div class="span1">万元</div>
+      </div>
+      <div class="card1" style="margin-top: 1%;margin-bottom: 2%">
+        <div class="title1">系统收益</div>
+        <div class="icon1"></div>
+        <div class="num1">1.11</div>
+        <div class="span1">万元</div>
+      </div>
+      <div class="card1">
+        <div class="title1">系统收益</div>
+        <div class="icon1"></div>
+        <div class="num1">1.11</div>
+        <div class="span1">万元</div>
+      </div>
+      <div class="card1">
+        <div class="title1">系统收益</div>
+        <div class="icon1"></div>
+        <div class="num1">1.11</div>
+        <div class="span1">万元</div>
+      </div>
+    </div>
+    <div class="bottomLeftMid">
+      <div class="title2">光伏/市电日电量占比</div>
+      <div class="num2">100</div>
+      <div class="span2">%</div>
+      <div class="num3">100</div>
+      <div class="span3">%</div>
+    </div>
+    <div class="bottomLeftBottom">
+      <div class="title3">气象信息</div>
+      <div class="card2">
+        <div class="icon2"></div>
+        <div class="card2Title">光照</div>
+        <div class="card2Span">
+          <span>
+            0.00
+          </span>
+          <span style="position:absolute;right: 0">
+            lx
+          </span></div>
+      </div>
+      <div class="card2">
+        <div class="icon2"></div>
+        <div class="card2Title">光照</div>
+        <div class="card2Span">
+          <span>
+            0.00
+          </span>
+          <span style="position:absolute;right: 0">
+            lx
+          </span></div>
+      </div>
+      <div class="card2">
+        <div class="icon2"></div>
+        <div class="card2Title">光照</div>
+        <div class="card2Span">
+          <span>
+            0.00
+          </span>
+          <span style="position:absolute;right: 0">
+            lx
+          </span></div>
+      </div>
+      <div class="card2">
+        <div class="icon2"></div>
+        <div class="card2Title">光照</div>
+        <div class="card2Span">
+          <span>
+            0.00
+          </span>
+          <span style="position:absolute;right: 0">
+            lx
+          </span></div>
+      </div>
+    </div>
+    <div class="bottomMid">
+    </div>
+    <div class="bottomRightTop">
+      <div class="card1" style="margin-top: 1%;margin-bottom: 2%">
+        <div class="title1">系统收益</div>
+        <div class="icon1"></div>
+        <div class="num1">1.11</div>
+        <div class="span1">万元</div>
+      </div>
+      <div class="card1" style="margin-top: 1%;margin-bottom: 2%">
+        <div class="title1">系统收益</div>
+        <div class="icon1"></div>
+        <div class="num1">1.11</div>
+        <div class="span1">万元</div>
+      </div>
+      <div class="card1">
+        <div class="title1">系统收益</div>
+        <div class="icon1"></div>
+        <div class="num1">1.11</div>
+        <div class="span1">万元</div>
+      </div>
+      <div class="card1">
+        <div class="title1">系统收益</div>
+        <div class="icon1"></div>
+        <div class="num1">1.11</div>
+        <div class="span1">万元</div>
+      </div>
+
+    </div>
+    <div class="bottomRightMid">
+
+    </div>
+    <div class="bottomRightBottom">
+
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+</script>
+<style scoped lang="less">
+.board {
+  background-color: #020A3A;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.title {
+  position: absolute;
+  top: 2%;
+  left: 2%;
+  font-size: 1vw;
+  color: white;
+}
+
+.rightTop {
+  position: absolute;
+  top: 2%;
+  right: 2%;
+  font-size: 0.8vw;
+  color: white;
+}
+
+.card {
+  position: absolute;
+  top: 10%;
+  width: 16%;
+  height: 15%;
+  color: white;
+  font-size: 0.8vw;
+  border-radius: 10px;
+  line-height: 5vh;
+}
+
+.cardTitle {
+  margin-left: 0.5vw;
+}
+
+.cardItem {
+  vertical-align: top;
+  display: inline-block;
+}
+
+.bottomLeftTop {
+  position: absolute;
+  top: 26%;
+  left: 0.3%;
+  width: 25%;
+  height: 24%;
+  background-color: #141B4C;
+}
+
+.bottomLeftMid {
+  position: absolute;
+  top: 50.6%;
+  left: 0.3%;
+  width: 25%;
+  height: 24%;
+  background-color: #141B4C;
+}
+
+.bottomLeftBottom {
+  position: absolute;
+  top: 75.2%;
+  left: 0.3%;
+  width: 25%;
+  height: 24%;
+  background-color: #141B4C;
+}
+
+.bottomMid {
+  position: absolute;
+  top: 26%;
+  left: 25.5%;
+  width: 49%;
+  height: 73.4%;
+  background-color: #141B4C;
+}
+
+.bottomRightTop {
+  position: absolute;
+  top: 26%;
+  right: 0.3%;
+  width: 25%;
+  height: 24%;
+  background-color: #141B4C;
+}
+
+.bottomRightMid {
+  position: absolute;
+  top: 50.6%;
+  right: 0.3%;
+  width: 25%;
+  height: 24%;
+  background-color: #141B4C;
+}
+
+.bottomRightBottom {
+  position: absolute;
+  top: 75.2%;
+  right: 0.3%;
+  width: 25%;
+  height: 24%;
+  background-color: #141B4C;
+}
+
+.card1 {
+  width: 48%;
+  height: 45%;
+  display: inline-block;
+  margin: 0 1%;
+  vertical-align: top;
+  border: 0.5px solid #fff2;
+  color: #fff;
+  position: relative;
+  font-size: 0.8vw;
+}
+
+.title1 {
+  position: absolute;
+  top: 10%;
+  left: 10%;
+}
+
+.icon1 {
+  position: absolute;
+  width: 10%;
+  top: 10%;
+  right: 10%;
+}
+
+.num1 {
+  position: absolute;
+  bottom: 10%;
+  left: 10%;
+}
+
+.span1 {
+  position: absolute;
+  bottom: 10%;
+  right: 10%;
+}
+
+.title2 {
+  position: absolute;
+  top: 10%;
+  left: 5%;
+  font-size: 0.8vw;
+  color: white;
+}
+
+.num2 {
+  position: absolute;
+  top: 60%;
+  left: 30%;
+  font-size: 1.2vw;
+  color: white;
+}
+
+.span2 {
+  position: absolute;
+  top: 60%;
+  left: 45%;
+  font-size: 1.2vw;
+  color: white;
+}
+
+
+.num3 {
+  position: absolute;
+  top: 60%;
+  left: 75%;
+  font-size: 1.2vw;
+  color: white;
+}
+
+.span3 {
+  position: absolute;
+  top: 60%;
+  left: 90%;
+  font-size: 1.2vw;
+  color: white;
+}
+
+.title3 {
+  width: 100%;
+  height: 10%;
+  line-height: 2.4vh;
+  font-size: 0.8vw;
+  text-align: center;
+  color: white;
+}
+
+.card2 {
+  width: 46%;
+  height: 45%;
+  margin: 0 2%;
+  display: inline-block;
+  position: relative;
+}
+
+.icon2 {
+  background-color: #00afff;
+  position: absolute;
+  transform: translateY(-50%);
+  top: 50%;
+  left: 10%;
+  width: 3vw;
+  height: 3vw;
+}
+
+.card2Title {
+  position: absolute;
+  width: calc(100% - 10% - 3vw);
+  height: 1.5vw;
+  line-height: 1.5vw;
+  top: 50%;
+  left: calc(10% + 3vw);
+  transform: translateY(-100%);
+  text-align: center;
+  color: white;
+  font-size: 0.8vw;
+}
+
+.card2Span {
+  position: absolute;
+  width: calc(100% - 10% - 3vw - 20px);
+  height: 1.5vw;
+  top: 50%;
+  left: calc(10% + 3vw + 10px);
+  line-height: 1.5vw;
+  color: white;
+  font-size: 0.8vw;
+}
+</style>
+
+
+
diff --git a/src/views/board/index2.vue b/src/views/board/index2.vue
new file mode 100644
index 0000000..923d335
--- /dev/null
+++ b/src/views/board/index2.vue
@@ -0,0 +1,422 @@
+<template>
+  <div class="board">
+    <div class="title">
+      微电网能源管理系统
+    </div>
+    <div class="rightTop">
+      <span>今日告警:</span>
+      <span style="color: #ff0000">2234</span>
+      <br>
+      <span>累计告警:</span>
+      <span style="color: #4F98B8">3392</span>
+    </div>
+    <div class="bottomLeftTop">
+      <div class="card1" style="margin-top: 1%;margin-bottom: 2%">
+        <div class="title1">系统收益</div>
+        <div class="icon1"></div>
+        <div class="num1">1.11</div>
+        <div class="span1">万元</div>
+      </div>
+      <div class="card1" style="margin-top: 1%;margin-bottom: 2%">
+        <div class="title1">系统收益</div>
+        <div class="icon1"></div>
+        <div class="num1">1.11</div>
+        <div class="span1">万元</div>
+      </div>
+      <div class="card1">
+        <div class="title1">系统收益</div>
+        <div class="icon1"></div>
+        <div class="num1">1.11</div>
+        <div class="span1">万元</div>
+      </div>
+      <div class="card1">
+        <div class="title1">系统收益</div>
+        <div class="icon1"></div>
+        <div class="num1">1.11</div>
+        <div class="span1">万元</div>
+      </div>
+    </div>
+    <div class="bottomLeftMid">
+      <div class="title2">光伏/市电日电量占比</div>
+      <div class="num2">100</div>
+      <div class="span2">%</div>
+      <div class="num3">100</div>
+      <div class="span3">%</div>
+    </div>
+    <div class="bottomLeftBottom">
+      <div class="title3">气象信息</div>
+      <div class="card2">
+        <div class="icon2"></div>
+        <div class="card2Title">光照</div>
+        <div class="card2Span">
+          <span>
+            0.00
+          </span>
+          <span style="position:absolute;right: 0">
+            lx
+          </span></div>
+      </div>
+      <div class="card2">
+        <div class="icon2"></div>
+        <div class="card2Title">光照</div>
+        <div class="card2Span">
+          <span>
+            0.00
+          </span>
+          <span style="position:absolute;right: 0">
+            lx
+          </span></div>
+      </div>
+      <div class="card2">
+        <div class="icon2"></div>
+        <div class="card2Title">光照</div>
+        <div class="card2Span">
+          <span>
+            0.00
+          </span>
+          <span style="position:absolute;right: 0">
+            lx
+          </span></div>
+      </div>
+      <div class="card2">
+        <div class="icon2"></div>
+        <div class="card2Title">光照</div>
+        <div class="card2Span">
+          <span>
+            0.00
+          </span>
+          <span style="position:absolute;right: 0">
+            lx
+          </span></div>
+      </div>
+    </div>
+    <div class="cards">
+      <div class="card" style="left: 0%;background-color: #DD8F78">
+        <div class="cardTitle">上网电量</div>
+        <div class="cardInfo">
+          <div class="cardItem" style="width: 50%;padding-left: 0.5vw;">
+            日上网电量
+          </div>
+          <div class="cardItem" style="width: 20%;font-size: 1.2vw">
+            103.2
+          </div>
+          <div class="cardItem" style="width: 30%;text-align: right;padding-right: 0.5vw;">
+            kwh
+          </div>
+        </div>
+        <div class="cardInfo">
+          <div class="cardItem" style="width: 50%;padding-left: 0.5vw;">
+            累计上网电量
+          </div>
+          <div class="cardItem" style="width: 20%;font-size: 1.2vw">
+            36371
+          </div>
+          <div class="cardItem" style="width: 30%;text-align: right;padding-right: 0.5vw;">
+            kwh
+          </div>
+        </div>
+      </div>
+      <div class="card" style="left: 25%;background-color: #DD8F78">
+        <div class="cardTitle">上网电量</div>
+        <div class="cardInfo">
+          <div class="cardItem" style="width: 50%;padding-left: 0.5vw;">
+            日上网电量
+          </div>
+          <div class="cardItem" style="width: 20%;font-size: 1.2vw">
+            103.2
+          </div>
+          <div class="cardItem" style="width: 30%;text-align: right;padding-right: 0.5vw;">
+            kwh
+          </div>
+        </div>
+        <div class="cardInfo">
+          <div class="cardItem" style="width: 50%;padding-left: 0.5vw;">
+            累计上网电量
+          </div>
+          <div class="cardItem" style="width: 20%;font-size: 1.2vw">
+            36371
+          </div>
+          <div class="cardItem" style="width: 30%;text-align: right;padding-right: 0.5vw;">
+            kwh
+          </div>
+        </div>
+      </div>
+      <div class="card" style="left: 50%;background-color: #DD8F78">
+        <div class="cardTitle">上网电量</div>
+        <div class="cardInfo">
+          <div class="cardItem" style="width: 50%;padding-left: 0.5vw;">
+            日上网电量
+          </div>
+          <div class="cardItem" style="width: 20%;font-size: 1.2vw">
+            103.2
+          </div>
+          <div class="cardItem" style="width: 30%;text-align: right;padding-right: 0.5vw;">
+            kwh
+          </div>
+        </div>
+        <div class="cardInfo">
+          <div class="cardItem" style="width: 50%;padding-left: 0.5vw;">
+            累计上网电量
+          </div>
+          <div class="cardItem" style="width: 20%;font-size: 1.2vw">
+            36371
+          </div>
+          <div class="cardItem" style="width: 30%;text-align: right;padding-right: 0.5vw;">
+            kwh
+          </div>
+        </div>
+      </div>
+      <div class="card" style="left: 75%;background-color: #DD8F78">
+        <div class="cardTitle">上网电量</div>
+        <div class="cardInfo">
+          <div class="cardItem" style="width: 50%;padding-left: 0.5vw;">
+            日上网电量
+          </div>
+          <div class="cardItem" style="width: 20%;font-size: 1.2vw">
+            103.2
+          </div>
+          <div class="cardItem" style="width: 30%;text-align: right;padding-right: 0.5vw;">
+            kwh
+          </div>
+        </div>
+        <div class="cardInfo">
+          <div class="cardItem" style="width: 50%;padding-left: 0.5vw;">
+            累计上网电量
+          </div>
+          <div class="cardItem" style="width: 20%;font-size: 1.2vw">
+            36371
+          </div>
+          <div class="cardItem" style="width: 30%;text-align: right;padding-right: 0.5vw;">
+            kwh
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="bottomRight">
+      <div class="title3">逆变器参数</div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+</script>
+<style scoped lang="less">
+.board {
+  background-color: #020A3A;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.title {
+  position: absolute;
+  top: 2%;
+  left: 2%;
+  font-size: 1vw;
+  color: white;
+}
+
+.rightTop {
+  position: absolute;
+  top: 2%;
+  right: 2%;
+  font-size: 0.8vw;
+  color: white;
+}
+
+.cards {
+  position: absolute;
+  top: 8%;
+  left: 25.6%;
+  width: 74%;
+  height: 15%;
+}
+
+.card {
+  position: absolute;
+  top: 0%;
+  width: 24.5%;
+  height: 100%;
+  color: white;
+  font-size: 0.8vw;
+  border-radius: 10px;
+  line-height: 5vh;
+}
+
+.cardTitle {
+  margin-left: 0.5vw;
+}
+
+.cardItem {
+  vertical-align: top;
+  display: inline-block;
+}
+
+.bottomLeftTop {
+  position: absolute;
+  top: 8%;
+  left: 0.3%;
+  width: 25%;
+  height: 30%;
+  background-color: #141B4C;
+}
+
+.bottomLeftMid {
+  position: absolute;
+  top: 38.6%;
+  left: 0.3%;
+  width: 25%;
+  height: 30%;
+  background-color: #141B4C;
+}
+
+.bottomLeftBottom {
+  position: absolute;
+  top: 69.2%;
+  left: 0.3%;
+  width: 25%;
+  height: 30%;
+  background-color: #141B4C;
+}
+
+.bottomRight {
+  position: absolute;
+  top: 23.5%;
+  left: 25.6%;
+  width: 73.5%;
+  height: 76%;
+}
+
+.card1 {
+  width: 48%;
+  height: 45%;
+  display: inline-block;
+  margin: 0 1%;
+  vertical-align: top;
+  border: 0.5px solid #fff2;
+  color: #fff;
+  position: relative;
+  font-size: 0.8vw;
+}
+
+.title1 {
+  position: absolute;
+  top: 10%;
+  left: 10%;
+}
+
+.icon1 {
+  position: absolute;
+  width: 10%;
+  top: 10%;
+  right: 10%;
+}
+
+.num1 {
+  position: absolute;
+  bottom: 10%;
+  left: 10%;
+}
+
+.span1 {
+  position: absolute;
+  bottom: 10%;
+  right: 10%;
+}
+
+.title2 {
+  position: absolute;
+  top: 10%;
+  left: 5%;
+  font-size: 0.8vw;
+  color: white;
+}
+
+.num2 {
+  position: absolute;
+  top: 60%;
+  left: 30%;
+  font-size: 1.2vw;
+  color: white;
+}
+
+.span2 {
+  position: absolute;
+  top: 60%;
+  left: 45%;
+  font-size: 1.2vw;
+  color: white;
+}
+
+
+.num3 {
+  position: absolute;
+  top: 60%;
+  left: 75%;
+  font-size: 1.2vw;
+  color: white;
+}
+
+.span3 {
+  position: absolute;
+  top: 60%;
+  left: 90%;
+  font-size: 1.2vw;
+  color: white;
+}
+
+.title3 {
+  width: 100%;
+  height: 10%;
+  line-height: 2.4vh;
+  font-size: 0.8vw;
+  text-align: center;
+  color: white;
+}
+
+.card2 {
+  width: 46%;
+  height: 45%;
+  margin: 0 2%;
+  display: inline-block;
+  position: relative;
+}
+
+.icon2 {
+  background-color: #00afff;
+  position: absolute;
+  transform: translateY(-50%);
+  top: 50%;
+  left: 10%;
+  width: 3vw;
+  height: 3vw;
+}
+
+.card2Title {
+  position: absolute;
+  width: calc(100% - 10% - 3vw);
+  height: 1.5vw;
+  line-height: 1.5vw;
+  top: 50%;
+  left: calc(10% + 3vw);
+  transform: translateY(-100%);
+  text-align: center;
+  color: white;
+  font-size: 0.8vw;
+}
+
+.card2Span {
+  position: absolute;
+  width: calc(100% - 10% - 3vw - 20px);
+  height: 1.5vw;
+  top: 50%;
+  left: calc(10% + 3vw + 10px);
+  line-height: 1.5vw;
+  color: white;
+  font-size: 0.8vw;
+}
+</style>
+
+
+
diff --git a/src/views/tool/draggable/formBoard.vue b/src/views/tool/draggable/formBoard.vue
index e87e223..a67cd50 100644
--- a/src/views/tool/draggable/formBoard.vue
+++ b/src/views/tool/draggable/formBoard.vue
@@ -1,5 +1,6 @@
 <script lang="ts">
 import hwInputView from './viewElements/hw-input-view.vue';
+import hwInputNumberView from './viewElements/hw-input-number-view.vue';
 import hwFormView from './viewElements/hw-form-view.vue';
 import hwTableView from './viewElements/hw-table-view.vue';
 
@@ -7,6 +8,7 @@ export default {
   name: 'hw-form',
   components: {
     hwInputView,
+    hwInputNumberView,
     hwFormView,
     hwTableView
   }
diff --git a/src/views/tool/draggable/viewElements/hw-form-view.vue b/src/views/tool/draggable/viewElements/hw-form-view.vue
index ff5cba7..1f82de8 100644
--- a/src/views/tool/draggable/viewElements/hw-form-view.vue
+++ b/src/views/tool/draggable/viewElements/hw-form-view.vue
@@ -1,12 +1,14 @@
 <script lang="ts">
 import hwInputView from './hw-input-view.vue';
+import hwInputNumberView from './hw-input-number-view.vue';
 import hwTableView from './hw-table-view.vue';
 
 export default {
   name: 'hw-form-view',
   components: {
     hwInputView,
-    hwTableView
+    hwTableView,
+    hwInputNumberView
   }
 };
 </script>
diff --git a/src/views/tool/draggable/viewElements/hw-input-number-view.vue b/src/views/tool/draggable/viewElements/hw-input-number-view.vue
new file mode 100644
index 0000000..37a33a7
--- /dev/null
+++ b/src/views/tool/draggable/viewElements/hw-input-number-view.vue
@@ -0,0 +1,26 @@
+<template>
+  <el-form-item :label="options.name" :required="options.required">
+
+    <el-input-number v-model="formData[options.key || ('input-number-'+options.uuid)]" :disabled="options.disabled"
+                     :step="options.step" :min="options.min || -Infinity" :max="options.max || Infinity"
+                     :controls-position="options.controlsPosition?'right':'' "
+    />
+  </el-form-item>
+</template>
+<script lang="ts" setup>
+
+defineOptions({
+  name: 'hw-input-view'
+});
+
+const props = defineProps({
+  options: Object,
+  formData: Object
+});
+const { options, formData } = toRefs(props);
+</script>
+<style scoped lang="less">
+</style>
+
+
+
diff --git a/src/views/tool/draggable/viewElements/hw-input-view.vue b/src/views/tool/draggable/viewElements/hw-input-view.vue
index fc98bc1..f8fd37f 100644
--- a/src/views/tool/draggable/viewElements/hw-input-view.vue
+++ b/src/views/tool/draggable/viewElements/hw-input-view.vue
@@ -1,7 +1,7 @@
 <template>
   <el-form-item :label="options.name" :required="options.required">
     <el-input v-model="formData[options.key || ('input-'+options.uuid)]" :disabled="options.disabled"
-              :type="options.type" :show-password="options.type === 'password'" />
+              :type="options.type" :show-password="options.type === 'password'" autocomplete="new-password" />
   </el-form-item>
 </template>
 <script lang="ts" setup>