diff --git a/god-ui/src/App.vue b/god-ui/src/App.vue
index 4c908292..e4f869bf 100644
--- a/god-ui/src/App.vue
+++ b/god-ui/src/App.vue
@@ -30,9 +30,10 @@ export default {
 #app .theme-picker {
   display: none;
 }
-
+</style>
+<style>
 @font-face {
-    font-family: 'BiaoTiFont';
-    src: url(./assets/biaoti.ttf);
+  font-family: 'BiaoTiFont';
+  src: url(./assets/biaoti.ttf);
 }
 </style>
diff --git a/god-ui/src/views/hlsnManage/home/index.vue b/god-ui/src/views/hlsnManage/home/index.vue
new file mode 100644
index 00000000..e917a6a3
--- /dev/null
+++ b/god-ui/src/views/hlsnManage/home/index.vue
@@ -0,0 +1,132 @@
+<template>
+    <div class="app-container main-outer-wrapper">
+        <div class="top-card-wrapper">
+            <div class="top-card-item-extra" v-for="item in topList">
+                <div class="top-card-icon"></div>
+                <div class="top-card-inner">
+                    <div class="top-card-inner-value">25种</div>
+                    <div class="top-card-inner-title">设备种类</div>
+                </div>
+            </div>
+        </div>
+        <div class="grid-main-wrapper">
+            <div class="grid-item-wrapper" style="grid-column: span 2;">
+                <div class="grid-item-title">设备基础信息</div>
+                <div class="grid-item-content device-basic-wrapper">
+                    <div class="device-basic-item"></div>
+                    <div class="device-basic-item"></div>
+                </div>
+            </div>
+            <div class="grid-item-wrapper">
+                <div class="grid-item-title">XK型油泵输出流量</div>
+                <div class="grid-item-content" id="chart1"></div>
+            </div>
+            <div class="grid-item-wrapper">
+                <div class="grid-item-title">重型锤式破碎机进料粒度</div>
+                <div class="grid-item-content" id="chart2"></div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    data() {
+        return {
+            topList: [
+                {
+                    title: '',
+                    value: '',
+                    icon: ''
+                },
+                {
+                    title: '',
+                    value: '',
+                    icon: ''
+                },
+                {
+                    title: '',
+                    value: '',
+                    icon: ''
+                },
+                {
+                    title: '',
+                    value: '',
+                    icon: ''
+                },
+                {
+                    title: '',
+                    value: '',
+                    icon: ''
+                },
+            ]
+        }
+    },
+    mounted() {
+        this.initChart1()
+        this.initChart2()
+    },
+    methods: {
+        initChart1() {},
+        initChart2() {},
+    }
+}
+</script>
+<style scoped lang="scss">
+@import url(../../../styles/mainPage.scss);
+.top-card-wrapper {
+    grid-template-columns: repeat(5, 1fr);
+}
+.top-card-item-extra {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid #25252525;
+    border-radius: 6px;
+    box-shadow: 2px 2px 2px #25252525, -2px -2px 2px #14141414;
+    border-radius: 6px;
+    background-color: white;
+    padding: .6rem .8rem;
+    .top-card-icon {
+        width: 3rem;
+        height: 3rem;
+        border: 1px solid #000;
+    }
+    .top-card-inner {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        width: calc(100% - 5rem);
+        .top-card-inner-title {
+            font-size: .8rem;
+        }
+        .top-card-inner-value {
+            font-family: 'BiaoTiFont';
+        }
+    }
+}
+.grid-main-wrapper {
+    grid-template-columns: 1fr 1fr;
+    .grid-item-wrapper {
+        box-shadow: 2px 2px 2px #25252525, -2px -2px 2px #14141414;
+        border-radius: 6px;
+        .grid-item-title {
+            font-family: 'BiaoTiFont';
+            font-weight: 500 !important;
+            color: #252525B0;
+        }
+    }
+}
+
+/**设备基础信息 */
+.device-basic-wrapper {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: .8rem;
+    .device-basic-item {
+        border: 1px solid #25252529;
+        min-height: 200px;
+        border-radius: 6px;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/god-ui/src/views/index.vue b/god-ui/src/views/index.vue
index 135405f5..efa18a11 100644
--- a/god-ui/src/views/index.vue
+++ b/god-ui/src/views/index.vue
@@ -11,6 +11,7 @@
     <water-home v-else-if="port === '9280'" style="width: 100%;height: calc(100vh - 84px);" />
     <construction-home v-else-if="port === '9290'" />
     <battery v-else-if="port === '9320'" />
+    <hlsnHome v-else-if="port === '9310'" />
     <operate-home v-else-if="port === '80' || port === ''"></operate-home>
     <home-page v-else></home-page>
   </div>
@@ -28,6 +29,7 @@ import interfaceHome from './interface/home/index.vue'
 import constructionHome from './constructionSiteData/analysis/index.vue'
 import waterHome from './waterHome/index.vue'
 import battery from './battery/index.vue'
+import hlsnHome from './hlsnManage/home/index.vue'
 export default {
   components: {
     HomePage,
@@ -41,7 +43,8 @@ export default {
     PanzhiPage,
     constructionHome,
     waterHome,
-    battery
+    battery,
+    hlsnHome
   },
   data() {
     return {
diff --git a/god-ui/src/views/login.vue b/god-ui/src/views/login.vue
index aa2d49c7..16caf77e 100644
--- a/god-ui/src/views/login.vue
+++ b/god-ui/src/views/login.vue
@@ -207,6 +207,7 @@ export default {
 
           _title.style.fontFamily = 'BiaoTiFont'
           loginForm.appendChild(_title)
+          break;
 
         case '9320':
           document.title = '工程设备新能源电池溯源'