diff --git a/nezha-fronted/src/App.vue b/nezha-fronted/src/App.vue
index e73bf50ea..9be7b615f 100644
--- a/nezha-fronted/src/App.vue
+++ b/nezha-fronted/src/App.vue
@@ -10,22 +10,10 @@ export default {
 }
 </script>
 
-<style>
-body,html{
-    /* font-family: "AlibabaPuHuiTiR"; */
-}
-.ly-table1 table{
-    /* table-layout: unset; */
-}
-::-webkit-scrollbar{
-    width: 10px;
-    height: 10px;
-}
-::-webkit-scrollbar-thumb{
-    border-radius: 1em;
-    background-color: rgba(50,50,50,.3);
-}
-::-webkit-scrollbar-track{
-    border-radius: 1em;
+<style scoped>
+#app{
+    height: 100%;
+    width: 100%;
+    overflow: hidden;
 }
 </style>
diff --git a/nezha-fronted/src/assets/css/main.css b/nezha-fronted/src/assets/css/main.css
index a682eb488..cabd0edfc 100644
--- a/nezha-fronted/src/assets/css/main.css
+++ b/nezha-fronted/src/assets/css/main.css
@@ -4,19 +4,10 @@
 }
 
 body {
-    font-family: NotoSansSC-Light;
-    min-width: 1350px;
-    background: #F2F7F8;
-    overflow-x: hidden !important;
     height: 100%;
-    box-sizing: border-box;
 }
 html {
-    overflow: auto;
-    overflow-y: hidden;
-    overflow-x: hidden !important;
     height: 100%;
-    box-sizing: border-box;
 }
 /*侧滑文字*/
 .el-form-item .el-form-item__label{
diff --git a/nezha-fronted/src/components/common/header.vue b/nezha-fronted/src/components/common/header.vue
index c3f3915b2..9c39d2cc3 100644
--- a/nezha-fronted/src/components/common/header.vue
+++ b/nezha-fronted/src/components/common/header.vue
@@ -119,6 +119,9 @@ export default {
 </script>
 
 <style>
+.el-menu.el-menu--horizontal{
+    border-bottom:0px
+}
 .el-submenu__title .el-submenu__icon-arrow {
     display: none;
 }
diff --git a/nezha-fronted/src/components/common/home.vue b/nezha-fronted/src/components/common/home.vue
index 3108ff755..f4dcf0a75 100644
--- a/nezha-fronted/src/components/common/home.vue
+++ b/nezha-fronted/src/components/common/home.vue
@@ -1,8 +1,7 @@
 <template>
     <div>
-        <Header></Header>
-        <sideBar></sideBar>
-        <div class="content-box">
+        <Header ref="header"></Header>
+        <div class="content-box" >
             <router-view/>
         </div>
     </div>
@@ -14,28 +13,11 @@ import Header from "./header";
 import sideBar from "./sideBar";
 export default {
   name: "home",
-  components: {Header,sideBar}
+  components: {Header}
 }
-
 </script>
 
 <style scoped>
-
-
-.content-box {
-    position: absolute;
-    left: 370px;
-    right: 30px;
-    top: 60px;
-    bottom: 0;
-    -webkit-transition: left .3s ease-in-out;
-    transition: left .3s ease-in-out;
-    background: #ffffff;
-    height: calc(100% - 50px);
-    box-sizing: border-box;
-    transform: translateY(0);
-    padding: 20px
-}
 @media screen and (max-width: 1600px) {
     .content-box {
         background: #a0eea6;
@@ -46,5 +28,4 @@ export default {
         background: #b94b7e;
     }
 }
-
 </style>
diff --git a/nezha-fronted/src/components/common/language/cn.js b/nezha-fronted/src/components/common/language/cn.js
index dfbb06b58..c28057c6b 100644
--- a/nezha-fronted/src/components/common/language/cn.js
+++ b/nezha-fronted/src/components/common/language/cn.js
@@ -17,11 +17,11 @@ const cn = {
     tableTitle: {
       id: 'ID',
       assetType: '资产类型',
-      Device: 'Device SN',
-      IP: 'IP',
+      device: 'Device SN',
+      ip: 'IP',
       assetState: '资产状态',
-      Module: 'Module',
-      Alarm: 'Alarm',
+      module: 'Module',
+      alarm: 'Alarm',
       dataCenter: '数据中心',
       cabinet: '机柜',
       model: '型号',
diff --git a/nezha-fronted/src/components/common/language/en.js b/nezha-fronted/src/components/common/language/en.js
index 4f49fc32a..716ed716b 100644
--- a/nezha-fronted/src/components/common/language/en.js
+++ b/nezha-fronted/src/components/common/language/en.js
@@ -17,11 +17,11 @@ const en = {
     tableTitle: {
       id: 'ID',
       assetType: 'assetType',
-      Device: 'Device SN',
-      IP: 'IP',
+      device: 'Device SN',
+      ip: 'IP',
       assetState: 'assetState',
-      Module: 'Module',
-      Alarm: 'Alarm',
+      module: 'Module',
+      alarm: 'Alarm',
       dataCenter: 'dataCenter',
       cabinet: 'cabinet',
       model: 'model',
diff --git a/nezha-fronted/src/components/common/sideBar.vue b/nezha-fronted/src/components/common/sideBar.vue
deleted file mode 100644
index 78d8e5782..000000000
--- a/nezha-fronted/src/components/common/sideBar.vue
+++ /dev/null
@@ -1,137 +0,0 @@
-<template>
-  <div class="sidebar">
-    <div class="sidebar-title">
-      <div>Project</div>
-      <div class="sidebar-info">
-        <div class="sidebar-info-header">ALL</div>
-        <div class="sidebar-info-footer" v-if="sidebarState">
-          <el-checkbox-group v-model="checkList" size="small">
-            <el-checkbox v-for="(item,key) in checkListData" :key="key" border :label=item.id>{{item.name}}
-              <div class="checkbox-edit" @click.prevent="edit(item.id)">编辑</div>
-            </el-checkbox>
-          </el-checkbox-group>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-  export default {
-    name: "SiderBar",
-    data() {
-      return {
-        checkList: [0],
-        checkListData: [],
-        sidebarState:'',
-        pageObj: {
-          pageNo: 1,
-          pageSize: 20,
-          total: 0
-        },
-      }
-    },
-    computed:{
-      getData(){
-        return this.$store.state.assetData
-      }
-    },
-    watch:{
-      getData:{
-        handler(newVal,oldVal){
-          this.checkList.splice(1,1,newVal.selectedData)
-          if(newVal.moduleData=='asset'){
-            this.sidebarState=true
-          }else{
-            this.sidebarState=false
-            this.getAssetData()
-            this.checkListData=[0]
-          }
-        },
-        deep: true,
-      },
-
-    },
-
-    methods: {
-      edit(data) {
-        console.log(data)
-      },
-      getAssetData() {
-        this.$get('idc', this.pageObj).then(response => {
-          if (response.code == 200) {
-            this.checkListData = response.data.list
-          }
-        })
-      }
-    },
-    mounted() {
-      this.getAssetData()
-    }
-  }
-
-</script>
-
-<style>
-  .el-checkbox.is-bordered + .el-checkbox.is-bordered {
-    margin-left: 0px;
-    margin-top: 20px;
-  }
-
-  .el-checkbox-group {
-    padding-top: 10px;
-  }
-
-  .el-checkbox {
-    width: 270px;
-  }
-</style>
-
-<style scoped>
-  .sidebar {
-    display: block;
-    position: absolute;
-    width: 370px;
-    left: 0;
-    top: 60px;
-    bottom: 0;
-    box-shadow: 0 10px 16px #ccc;
-    overflow-y: scroll;
-    background: rgba(242, 242, 242, 0.94);
-  }
-
-  .sidebar-title {
-    padding-left: 30px;
-    padding-top: 20px;
-  }
-
-  .sidebar-info {
-    margin-top: 20px;
-    border: 1px solid #acacac;
-    border-radius: 8px;
-    height: calc(90vh - 55px);
-    width: calc(100% - 30px);
-  }
-
-  .sidebar-info-header {
-    background: #acacac;
-    text-align: center;
-    line-height: 50px;
-    border-top-left-radius: 8px;
-    border-top-right-radius: 8px;
-    height: 60px;
-    width: 100%;
-  }
-
-  .sidebar-info-footer {
-    padding-top: 15px;
-    padding-left: 15px;
-  }
-
-  .checkbox-edit {
-    position: absolute;
-    top: 8px;
-    left: 230px;
-
-  }
-</style>
diff --git a/nezha-fronted/src/components/page/asset/asset.vue b/nezha-fronted/src/components/page/asset/asset.vue
index 2af3bc963..631bc65bd 100644
--- a/nezha-fronted/src/components/page/asset/asset.vue
+++ b/nezha-fronted/src/components/page/asset/asset.vue
@@ -1,236 +1,246 @@
 <template>
-    <div style="height:95%;overflow-y:auto">
-        <div>
-            <el-input
-                    style="width: 90px;"
-                    placeholder="请输入内容"
-                    v-model="input"
-                    clearable>
-            </el-input>
-        </div>
-        <div>
-            <el-table
-                    :data="this.tableData"
-            >
-                <el-table-column
-                        v-for="(item, index) in tableTitle"
-                        v-if="item.show"
-                        min-width="120"
-                        :key="`col_${index}`"
-                        :label="item.label"
-                >
-                    {{item}}
-                    <template slot-scope="scope" :column="item">
-                        <div v-if="item.prop=='ID'">
-                            <p>
-                                <span>{{scope.row['id']}}</span>
-                            </p>
-                        </div>
-                        <div v-if="item.prop=='IP'">
-                            <p>
-                                <span>{{scope.row['host']}}</span>
-                            </p>
-                        </div>
-                    </template>
-                </el-table-column>
-                <el-table-column
-                        fixed="right"
-                        label="操作"
-                        width="100">
-                    <template slot-scope="scope">
-                        <el-button type="text" size="small" @click.stop="tagShow('showAdd')">查看</el-button>
-                        <el-button type="text" size="small" @click.stop="tagShow('showEdit')">编辑</el-button>
-                    </template>
-                </el-table-column>
-            </el-table>
-        </div>
-        <Pagination :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
-        <transition name="el-zoom-in-center" @click.stop>
-            <div class="right-menu" v-if="tabShow" v-clickoutside:tagHide="tagShow">
-                <div v-if="this.tagType=='add'">
-                    <el-form ref="form" :model="form" label-width="120px">
-                        <div class="right-box__top-btns">
-                            <div class="right-box__top-btn right-box__top-btn_full">
-                                <div class="right-box__btn-icon">
-                                    <i class="el-icon-close"></i>
-                                </div>
-                                <span>Esc</span>
-                            </div>
-                            <div class="right-box__top-btn right-box__top-btn_full">
-                                <div class="right-box__btn-icon">
-                                    <i class="el-icon-edit-outline"></i>
-                                </div>
-                                <span>Save</span>
-                            </div>
-                            <div class="right-box__top-btn">
-                                <div class="right-box__btn-icon">
-                                    <i class="el-icon-delete"></i>
-                                </div>
-                                <span>Delete</span>
-                            </div>
-                        </div>
-                        <div class="el-form-style">
-                            <el-form-item label="IP">
-                                <el-input v-model="form.name"/>
-                            </el-form-item>
-                            <el-form-item label="SN">
-                                <el-input v-model="form.name"/>
-                            </el-form-item>
-                            <el-form-item label="Asset Type">
-                                <el-input v-model="form.name"/>
-                            </el-form-item>
-                            <el-form-item label="ModelId">
-                                <el-input v-model="form.name"/>
-                            </el-form-item>
-                            <el-form-item label="IDC">
-                                <el-input v-model="form.name"/>
-                            </el-form-item>
-                            <el-form-item label="Cabinet">
-                                <el-input v-model="form.name"/>
-                            </el-form-item>
-                            <el-form-item label="Host">
-                                <el-input v-model="form.name"/>
-                            </el-form-item>
-                            <el-form-item label="State">
-                                <el-input v-model="form.name"/>
-                            </el-form-item>
-                            <el-form-item>
-                                <el-button>取消</el-button>
-                            </el-form-item>
-                        </div>
-                    </el-form>
-                </div>
-                <div v-if="this.tagType=='edit'">
-                    <el-form ref="form" :model="form" label-width="120px" size="small">
-                        <div class="right-box__top-btns">
-                            <div class="right-box__top-btn right-box__top-btn_full">
-                                <div class="right-box__btn-icon">
-                                    <i class="el-icon-close"></i>
-                                </div>
-                                <span>Esc</span>
-                            </div>
-                            <div class="right-box__top-btn right-box__top-btn_full">
-                                <div class="right-box__btn-icon">
-                                    <i class="el-icon-edit-outline"></i>
-                                </div>
-                                <span>Save</span>
-                            </div>
-                            <div class="right-box__top-btn">
-                                <div class="right-box__btn-icon">
-                                    <i class="el-icon-delete"></i>
-                                </div>
-                                <span>Delete</span>
-                            </div>
-                        </div>
-                        <div class="el-form-style">
-                            <el-form-item label="IP">
-                                <span>192.168.100.255</span>
-                            </el-form-item>
-                            <el-form-item label="SN">
-                                <span>AAQWEROIUOWENKOIZLNWEROFPIAN</span>
-                            </el-form-item>
-                            <el-form-item label="Asset Type">
-                                <span>服务器</span>
-                            </el-form-item>
-                            <el-form-item label="ModelId">
-                                <span>No1</span>
-                            </el-form-item>
-                            <el-form-item label="IDC">
-                                <span>国内地区/北京市/1号</span>
-                            </el-form-item>
-                            <el-form-item label="Cabinet">
-                                <span>13排223机柜</span>
-                            </el-form-item>
-                            <el-form-item label="Host">
-                                <span>192.158.22.22</span>
-                            </el-form-item>
-                            <el-form-item label="State">
-                                <span>在库</span>
-                            </el-form-item>
-                            <el-form-item label="Alarm">
-                                <div>111</div>
-                            </el-form-item>
-                        </div>
-                        <div style="padding-top: 10px">
-                            <span>endPoint:</span>
-                        </div>
-                        <div class="tag-table">
-                            <el-table
-                                    :data="tagTableData"
-                                    :row-style="{height:'20px'}"
-                                    :cell-style="{padding:'2px'}"
-                            >
-                                <el-table-column
-                                        v-for="(item, index) in tagTableTitle"
-                                        v-if="item.show"
-                                        :key="`col_${index}`"
-                                        :label="item.label"
-
-                                >
-                                    <template slot-scope="scope" :column="item">
-                                        <div v-if="item.prop=='projectName'">
-                                            <p>
-                                                <span>{{scope.row['projectName']}}</span>
-                                            </p>
-                                        </div>
-                                        <div v-if="item.prop=='moduleName'">
-                                            <p>
-                                                <span>{{scope.row['moduleName']}}</span>
-                                            </p>
-                                        </div>
-                                        <div v-if="item.prop=='endPoint'">
-                                            <div class="tableSquare">342</div>
-                                        </div>
-                                        <div v-if="item.prop=='alarm'">
-                                            <div class="tableSquare">{{11}}/{{111}}</div>
-                                        </div>
-                                    </template>
-                                </el-table-column>
-                                <el-table-column
-                                        fixed="right"
-                                        label=""
-                                        width="100">
-                                    <template slot-scope="scope">
-                                        <el-button type="text" size="small" @click.stop="tagShow('showAdd')">查看
-                                        </el-button>
-                                        <el-button type="text" size="small" @click.stop="tagShow('showEdit')">编辑
-                                        </el-button>
-                                    </template>
-                                </el-table-column>
-                            </el-table>
-                            <!--                            <Pagination :pageobj="pageObj" ref="Pagination"></Pagination>-->
-                            <el-divider></el-divider>
-                            <span>默认CLI账户</span>
-                            <div style="padding-top: 10px">
-                                <el-select v-model="form.region" placeholder="请选择活动区域" style="width: 90%">
-                                    <el-option label="区域一" value="shanghai">111111111111111111111</el-option>
-                                    <el-option label="区域二" value="beijing">111111111111111111111</el-option>
-                                    <el-option label="区域二" value="beijing">111111111111111111111</el-option>
-                                    <el-option label="区域二" value="beijing">111111111111111111111</el-option>
-                                </el-select>
-                            </div>
-                        </div>
-                        <div class="el-form-style">
-                            <el-form-item label="IP">
-                                <span>192.168.100.255</span>
-                            </el-form-item>
-                            <el-form-item label="SN">
-                                <span>AAQWEROIUOWENKOIZLNWEROFPIAN</span>
-                            </el-form-item>
-                            <el-form-item label="Asset Type">
-                                <span>服务器</span>
-                            </el-form-item>
-                            <el-form-item label="ModelId">
-                                <span>No1</span>
-                            </el-form-item>
-                            <el-form-item label="IDC">
-                                <span>国内地区/北京市/1号</span>
-                            </el-form-item>
-                        </div>
-                    </el-form>
+    <div class="asset">
+        <div class="content-left">
+            <div class="sidebar-title">
+                <div>Project</div>
+                <div class="sidebar-info">
+                    <div class="sidebar-info-header">ALL</div>
+                    <div class="sidebar-info-footer" v-if="sidebarState">
+                        <el-checkbox-group v-model="checkList" size="small">
+                            <el-checkbox v-for="(item,key) in checkListData" :key="key" border :label=item.id>{{item.name}}
+                                <div class="checkbox-edit" @click.prevent="edit(item.id)">编辑</div>
+                            </el-checkbox>
+                        </el-checkbox-group>
+                    </div>
                 </div>
             </div>
-        </transition>
+        </div>
+        <div class="content-right">
+            <div>
+                <el-table
+                        :height="tableHeight"
+                        :data="this.tableData"
+                >
+                    <el-table-column
+                            v-for="(item, index) in tableTitle"
+                            v-if="item.show"
+                            min-width="120"
+                            :key="`col_${index}`"
+                            :label="item.label"
+                    >
+                        {{item}}
+                        <template slot-scope="scope" :column="item">
+                            <div v-if="item.prop=='ID'">
+                                <p>
+                                    <span>{{scope.row['id']}}</span>
+                                </p>
+                            </div>
+                            <div v-if="item.prop=='IP'">
+                                <p>
+                                    <span>{{scope.row['host']}}</span>
+                                </p>
+                            </div>
+                        </template>
+                    </el-table-column>
+                    <el-table-column
+                            fixed="right"
+                            label="操作"
+                            width="100">
+                        <template slot-scope="scope">
+                            <el-button type="text" size="small" @click.stop="tagShow('showAdd')">查看</el-button>
+                            <el-button type="text" size="small" @click.stop="tagShow('showEdit')">编辑</el-button>
+                        </template>
+                    </el-table-column>
+                </el-table>
+                <Pagination :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
+                <transition name="el-zoom-in-center" @click.stop>
+                    <div class="right-menu" v-if="tabShow" v-clickoutside:tagHide="tagShow">
+                        <div v-if="this.tagType=='add'">
+                            <el-form ref="form" :model="form" label-width="120px">
+                                <div class="right-box__top-btns">
+                                    <div class="right-box__top-btn right-box__top-btn_full">
+                                        <div class="right-box__btn-icon">
+                                            <i class="el-icon-close"></i>
+                                        </div>
+                                        <span>Esc</span>
+                                    </div>
+                                    <div class="right-box__top-btn right-box__top-btn_full">
+                                        <div class="right-box__btn-icon">
+                                            <i class="el-icon-edit-outline"></i>
+                                        </div>
+                                        <span>Save</span>
+                                    </div>
+                                    <div class="right-box__top-btn">
+                                        <div class="right-box__btn-icon">
+                                            <i class="el-icon-delete"></i>
+                                        </div>
+                                        <span>Delete</span>
+                                    </div>
+                                </div>
+                                <div class="el-form-style">
+                                    <el-form-item label="IP">
+                                        <el-input v-model="form.name"/>
+                                    </el-form-item>
+                                    <el-form-item label="SN">
+                                        <el-input v-model="form.name"/>
+                                    </el-form-item>
+                                    <el-form-item label="Asset Type">
+                                        <el-input v-model="form.name"/>
+                                    </el-form-item>
+                                    <el-form-item label="ModelId">
+                                        <el-input v-model="form.name"/>
+                                    </el-form-item>
+                                    <el-form-item label="IDC">
+                                        <el-input v-model="form.name"/>
+                                    </el-form-item>
+                                    <el-form-item label="Cabinet">
+                                        <el-input v-model="form.name"/>
+                                    </el-form-item>
+                                    <el-form-item label="Host">
+                                        <el-input v-model="form.name"/>
+                                    </el-form-item>
+                                    <el-form-item label="State">
+                                        <el-input v-model="form.name"/>
+                                    </el-form-item>
+                                    <el-form-item>
+                                        <el-button>取消</el-button>
+                                    </el-form-item>
+                                </div>
+                            </el-form>
+                        </div>
+                        <div v-if="this.tagType=='edit'">
+                            <el-form ref="form" :model="form" label-width="120px" size="small">
+                                <div class="right-box__top-btns">
+                                    <div class="right-box__top-btn right-box__top-btn_full">
+                                        <div class="right-box__btn-icon">
+                                            <i class="el-icon-close"></i>
+                                        </div>
+                                        <span>Esc</span>
+                                    </div>
+                                    <div class="right-box__top-btn right-box__top-btn_full">
+                                        <div class="right-box__btn-icon">
+                                            <i class="el-icon-edit-outline"></i>
+                                        </div>
+                                        <span>Save</span>
+                                    </div>
+                                    <div class="right-box__top-btn">
+                                        <div class="right-box__btn-icon">
+                                            <i class="el-icon-delete"></i>
+                                        </div>
+                                        <span>Delete</span>
+                                    </div>
+                                </div>
+                                <div class="el-form-style">
+                                    <el-form-item label="IP">
+                                        <span>192.168.100.255</span>
+                                    </el-form-item>
+                                    <el-form-item label="SN">
+                                        <span>AAQWEROIUOWENKOIZLNWEROFPIAN</span>
+                                    </el-form-item>
+                                    <el-form-item label="Asset Type">
+                                        <span>服务器</span>
+                                    </el-form-item>
+                                    <el-form-item label="ModelId">
+                                        <span>No1</span>
+                                    </el-form-item>
+                                    <el-form-item label="IDC">
+                                        <span>国内地区/北京市/1号</span>
+                                    </el-form-item>
+                                    <el-form-item label="Cabinet">
+                                        <span>13排223机柜</span>
+                                    </el-form-item>
+                                    <el-form-item label="Host">
+                                        <span>192.158.22.22</span>
+                                    </el-form-item>
+                                    <el-form-item label="State">
+                                        <span>在库</span>
+                                    </el-form-item>
+                                    <el-form-item label="Alarm">
+                                        <div>111</div>
+                                    </el-form-item>
+                                </div>
+                                <div style="padding-top: 10px">
+                                    <span>endPoint:</span>
+                                </div>
+                                <div class="tag-table">
+                                    <el-table
+                                            :data="tagTableData"
+                                            :row-style="{height:'20px'}"
+                                            :cell-style="{padding:'2px'}"
+                                    >
+                                        <el-table-column
+                                                v-for="(item, index) in tagTableTitle"
+                                                v-if="item.show"
+                                                :key="`col_${index}`"
+                                                :label="item.label"
+
+                                        >
+                                            <template slot-scope="scope" :column="item">
+                                                <div v-if="item.prop=='projectName'">
+                                                    <p>
+                                                        <span>{{scope.row['projectName']}}</span>
+                                                    </p>
+                                                </div>
+                                                <div v-if="item.prop=='moduleName'">
+                                                    <p>
+                                                        <span>{{scope.row['moduleName']}}</span>
+                                                    </p>
+                                                </div>
+                                                <div v-if="item.prop=='endPoint'">
+                                                    <div class="tableSquare">342</div>
+                                                </div>
+                                                <div v-if="item.prop=='alarm'">
+                                                    <div class="tableSquare">{{11}}/{{111}}</div>
+                                                </div>
+                                            </template>
+                                        </el-table-column>
+                                        <el-table-column
+                                                fixed="right"
+                                                label=""
+                                                width="100">
+                                            <template slot-scope="scope">
+                                                <el-button type="text" size="small" @click.stop="tagShow('showAdd')">查看
+                                                </el-button>
+                                                <el-button type="text" size="small" @click.stop="tagShow('showEdit')">编辑
+                                                </el-button>
+                                            </template>
+                                        </el-table-column>
+                                    </el-table>
+                                    <!--                            <Pagination :pageobj="pageObj" ref="Pagination"></Pagination>-->
+                                    <el-divider></el-divider>
+                                    <span>默认CLI账户</span>
+                                    <div style="padding-top: 10px">
+                                        <el-select v-model="form.region" placeholder="请选择活动区域" style="width: 90%">
+                                            <el-option label="区域一" value="shanghai">111111111111111111111</el-option>
+                                            <el-option label="区域二" value="beijing">111111111111111111111</el-option>
+                                            <el-option label="区域二" value="beijing">111111111111111111111</el-option>
+                                            <el-option label="区域二" value="beijing">111111111111111111111</el-option>
+                                        </el-select>
+                                    </div>
+                                </div>
+                                <div class="el-form-style">
+                                    <el-form-item label="IP">
+                                        <span>192.168.100.255</span>
+                                    </el-form-item>
+                                    <el-form-item label="SN">
+                                        <span>AAQWEROIUOWENKOIZLNWEROFPIAN</span>
+                                    </el-form-item>
+                                    <el-form-item label="Asset Type">
+                                        <span>服务器</span>
+                                    </el-form-item>
+                                    <el-form-item label="ModelId">
+                                        <span>No1</span>
+                                    </el-form-item>
+                                    <el-form-item label="IDC">
+                                        <span>国内地区/北京市/1号</span>
+                                    </el-form-item>
+                                </div>
+                            </el-form>
+                        </div>
+                    </div>
+                </transition>
+            </div>
+        </div>
     </div>
 </template>
 
@@ -239,6 +249,9 @@ export default {
   name: "asset",
   data() {
     return {
+      checkList: [0],
+      checkListData: [],
+      sidebarState:'',
       tableTitle: [
         {
           label: this.$t("asset.tableTitle.id"),
@@ -340,36 +353,68 @@ export default {
           endPoint: '上海市普陀区金沙江路 1518 弄'
         }
       ],
+      input: '',
       pageObj: {
         pageNo: 1,
         pageSize: 20,
-        total: 0
+        total: 0,
       },
-      input: '',
+      tableHeight:document.documentElement.clientHeight-150,
       tabShow: false,
       tagType: 'add',
       form: {
         name: ''
       },
+      searchObj: {
+        idcId: 7
+      }
     }
   },
+  computed:{
+    getData(){
+      return this.$store.state.assetData
+    }
+  },
+  watch:{
+    getData:{
+      handler(newVal,oldVal){
+        this.checkList.splice(1,1,newVal.selectedData)
+        if(newVal.moduleData=='asset'){
+          this.sidebarState=true
+        }else{
+          this.sidebarState=false
+          this.getAssetData()
+          this.checkListData=[0]
+        }
+      },
+      deep: true,
+    },
+
+  },
   methods: {
     getListData() {
       this.$get('asset', this.pageObj).then(response => {
-        if (response.code == 200) {
-          this.tableData = response.data.list
+        if (response.code === 200) {
+          this.tableData = response.data.list;
           this.pageObj.total = response.data.total
         }
       })
     },
+    getAssetData() {
+      this.$get('idc', this.pageObj).then(response => {
+        if (response.code == 200) {
+          this.checkListData = response.data.list
+        }
+      })
+    },
     tagShow(t) {
-      this.tabShow = false
+      this.tabShow = false;
       if (t === 'showAdd') {
-        this.tabShow = true
+        this.tabShow = true;
         this.tagType = 'add'
       }
       if (t === 'showEdit') {
-        this.tabShow = true
+        this.tabShow = true;
         this.tagType = 'edit'
       }
     },
@@ -382,8 +427,14 @@ export default {
       this.getListData()
     }
   },
+
   mounted() {
     this.getListData()
+    this.getAssetData()
+    window.onresize = () => {
+      this.tableHeight = document.documentElement.clientHeight-150;
+      console.log(this.tableHeight)
+    }
   }
 }
 </script>
@@ -401,25 +452,65 @@ export default {
     font-size: 10px;
 }
 
-.el-table__body-wrapper::-webkit-scrollbar {
-    width: 6px;
-    height: 6px;
+.el-checkbox.is-bordered + .el-checkbox.is-bordered {
+    margin-left: 0px;
+    margin-top: 20px;
+}
+
+.el-checkbox-group {
+    padding-top: 10px;
+}
+
+.el-checkbox {
+    width: 270px;
 }
 </style>
 <style scoped>
-.right-menu {
-    position: fixed;
-    top: 20px;
-    right: 0;
-    z-index: 500;
-    border-radius: 8px;
-    box-shadow: 0 0 15px #ccc;
-    background-color: white;
-    padding: 0 20px;
-    width: 580px;
-    height: calc(100% - 60px);
-    overflow-y: auto
+.content-left {
+    float: left;
+    width: 370px;
+    height: 100%;
 }
+.content-right {
+    margin-left:370px;
+}
+
+.sidebar-title {
+    padding-left: 30px;
+    padding-top: 20px;
+}
+
+.sidebar-info {
+    margin-top: 20px;
+    border: 1px solid #acacac;
+    border-radius: 8px;
+    height: calc(90vh - 55px);
+    width: calc(100% - 30px);
+}
+
+.sidebar-info-header {
+    background: #acacac;
+    text-align: center;
+    line-height: 50px;
+    border-top-left-radius: 8px;
+    border-top-right-radius: 8px;
+    height: 60px;
+    width: 100%;
+}
+
+.sidebar-info-footer {
+    padding-top: 15px;
+    padding-left: 15px;
+}
+
+.checkbox-edit {
+    position: absolute;
+    top: 8px;
+    left: 230px;
+
+}
+
+
 
 .right-box__top-btn {
     border-radius: 0 0 9px 9px;