diff --git a/src/App.vue b/src/App.vue
index 452972b6d51e794b49164e1a8af722187b1c60a4..b60a5731060397afade3be7590fb413765ed4ba6 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,27 +1,34 @@
 <template>
   <div id="app">
+    <bd-menu class="outmenu"></bd-menu>
     <router-view />
   </div>
 </template>
 
 <script>
+import bdMenu from './components/menu' 
 export default {
   data: () => ({}),
+  components:{
+    bdMenu
+  },
   methods: {
-    windowResize() {
-      const remSize = 20; // 1rem === 20px
-      const rect = document.body.getBoundingClientRect();
-      const fontSize = (Math.min(rect.width, rect.height) / 720) * remSize;
-
-      document.documentElement.style.fontSize = fontSize + "px";
-    },
-    initRem() {
-      this.windowResize();
-      window.addEventListener("resize", this.windowResize, false);
-    }
+   
   },
   created() {
-    this.initRem();
+    
   }
 };
 </script>
+
+<style scoped>
+.outmenu{
+  position: fixed;
+  top: 0;
+  left: 0;
+}
+#app{
+  background-color: #f6f7fb;
+}
+
+</style>
diff --git a/src/assets/css/index.css b/src/assets/css/index.css
index 3fbeef19341c6cc05afda9500142f9d642d451a5..9fd11366d18982ac9eeeb561937a2acca098f172 100644
--- a/src/assets/css/index.css
+++ b/src/assets/css/index.css
@@ -60,7 +60,77 @@
   color: #264dd9;
   cursor: pointer;
 }
-.space_bet{
+.space_bet{}
+/* reset */
+html {
+
+}
+body {
+  margin: 0;
+  font-family: PingFangSC-Regular, sans-serif;
+  font-size: 1rem;
+}
+ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+p {
+  margin: 0;
+}
+h1,
+h2,
+h3,
+h4,
+h5 {
+  margin: 0;
+  font-weight: normal;
+}
+
+div{
+  box-sizing: border-box;
+}
+/* reset end */
+
+/* common */
+#app {
+  /* height: 100%; */
+  /* overflow: hidden; */
+}
+.text_clip {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-break: break-all;
+  white-space: nowrap;
+}
+.map_container {
+  background-color: #eee;
+}
+.ss_card {
+  padding: 1.2rem;
+  display: flex;
+  justify-content: flex-start;
+  align-items: flex-start;
+}
+.ss_card > .sc_left_container {
+  width: 6rem;
+  height: 6rem;
+  flex-shrink: 0;
+  border-radius: 0.5rem;
+  overflow: hidden;
+  font-size: 0;
+}
+.ss_card > .sc_right_container {
+  width: calc(100% - 7rem);
+  flex-grow: 1;
+  margin-left: 1.2rem;
+}
+.ss_card > .sc_right_container > .sc_title {
+  font-size: 1.6rem;
+  font-weight: bold;
+  line-height: 2.6rem;
+}
+.ss_card > .sc_right_container > .sc_info {
   display: flex;
   justify-content: space-between; 
 }
diff --git a/src/assets/imgs/home_bg.png b/src/assets/imgs/home_bg.png
new file mode 100644
index 0000000000000000000000000000000000000000..d4308230735193db0cc61693a4a24c6fe7a382b4
Binary files /dev/null and b/src/assets/imgs/home_bg.png differ
diff --git a/src/assets/imgs/home_btn_enter.png b/src/assets/imgs/home_btn_enter.png
new file mode 100644
index 0000000000000000000000000000000000000000..db128c553eeab91c6a2011ea06dd1608778cc199
Binary files /dev/null and b/src/assets/imgs/home_btn_enter.png differ
diff --git a/src/assets/imgs/home_ic_more_b.png b/src/assets/imgs/home_ic_more_b.png
new file mode 100644
index 0000000000000000000000000000000000000000..bd4bfe3452f233aa841ac694fb45535ff7ecdefe
Binary files /dev/null and b/src/assets/imgs/home_ic_more_b.png differ
diff --git a/src/assets/imgs/home_ic_more_w.png b/src/assets/imgs/home_ic_more_w.png
new file mode 100644
index 0000000000000000000000000000000000000000..93d48278b5617c4acd1397895a98211e72fa3556
Binary files /dev/null and b/src/assets/imgs/home_ic_more_w.png differ
diff --git a/src/assets/imgs/home_ic_release.png b/src/assets/imgs/home_ic_release.png
new file mode 100644
index 0000000000000000000000000000000000000000..5b325c9dc508a1350bdcc78d3a52105d39112580
Binary files /dev/null and b/src/assets/imgs/home_ic_release.png differ
diff --git a/src/assets/imgs/home_ic_shop.png b/src/assets/imgs/home_ic_shop.png
new file mode 100644
index 0000000000000000000000000000000000000000..2db7c5cee524d9fff60b0c45e2dee5a8c2421ef2
Binary files /dev/null and b/src/assets/imgs/home_ic_shop.png differ
diff --git a/src/assets/imgs/home_ic_user.png b/src/assets/imgs/home_ic_user.png
new file mode 100644
index 0000000000000000000000000000000000000000..a6dee2f509e86fd3e64853e66dcb1bca46ed26c6
Binary files /dev/null and b/src/assets/imgs/home_ic_user.png differ
diff --git a/src/assets/imgs/home_img_logo.png b/src/assets/imgs/home_img_logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..11ccc6f6875ec6a608dd6d616c09101b83778574
Binary files /dev/null and b/src/assets/imgs/home_img_logo.png differ
diff --git a/src/assets/imgs/home_tool_ic_key.png b/src/assets/imgs/home_tool_ic_key.png
new file mode 100644
index 0000000000000000000000000000000000000000..5c4d2a5ab91c9468841076993782dc0b2f81d0c4
Binary files /dev/null and b/src/assets/imgs/home_tool_ic_key.png differ
diff --git a/src/assets/imgs/home_tool_ic_kshbb.png b/src/assets/imgs/home_tool_ic_kshbb.png
new file mode 100644
index 0000000000000000000000000000000000000000..9708259a9049abda355fa6fd0bea2a7229e156ee
Binary files /dev/null and b/src/assets/imgs/home_tool_ic_kshbb.png differ
diff --git a/src/assets/imgs/home_tool_ic_lcsj.png b/src/assets/imgs/home_tool_ic_lcsj.png
new file mode 100644
index 0000000000000000000000000000000000000000..e961759033c4c165a2d83dfc9e85600b0150f59c
Binary files /dev/null and b/src/assets/imgs/home_tool_ic_lcsj.png differ
diff --git a/src/assets/imgs/home_tool_ic_mbyy.png b/src/assets/imgs/home_tool_ic_mbyy.png
new file mode 100644
index 0000000000000000000000000000000000000000..a0390e04d8f976fb069de1e58445cf7a46b3d0f0
Binary files /dev/null and b/src/assets/imgs/home_tool_ic_mbyy.png differ
diff --git a/src/assets/imgs/home_tool_ic_message.png b/src/assets/imgs/home_tool_ic_message.png
new file mode 100644
index 0000000000000000000000000000000000000000..044e3a7c74a48cc87dbf1c6dd4c0c48a2f5e9540
Binary files /dev/null and b/src/assets/imgs/home_tool_ic_message.png differ
diff --git a/src/assets/imgs/home_tool_ic_mxgc.png b/src/assets/imgs/home_tool_ic_mxgc.png
new file mode 100644
index 0000000000000000000000000000000000000000..94463e08846da48b25cbabf9cc3f8aaa6a33b11b
Binary files /dev/null and b/src/assets/imgs/home_tool_ic_mxgc.png differ
diff --git a/src/assets/imgs/home_tool_ic_organize.png b/src/assets/imgs/home_tool_ic_organize.png
new file mode 100644
index 0000000000000000000000000000000000000000..17730210044d02dfabc9cd7cc9814fde244af560
Binary files /dev/null and b/src/assets/imgs/home_tool_ic_organize.png differ
diff --git a/src/assets/imgs/home_tool_ic_quanxian.png b/src/assets/imgs/home_tool_ic_quanxian.png
new file mode 100644
index 0000000000000000000000000000000000000000..16aa249e83e8a528236e3b51019633abd50344e6
Binary files /dev/null and b/src/assets/imgs/home_tool_ic_quanxian.png differ
diff --git a/src/assets/imgs/home_tool_ic_rongqi.png b/src/assets/imgs/home_tool_ic_rongqi.png
new file mode 100644
index 0000000000000000000000000000000000000000..b8abdb83270c6ce330b8c7bd0bb107ebadd99199
Binary files /dev/null and b/src/assets/imgs/home_tool_ic_rongqi.png differ
diff --git a/src/assets/imgs/home_tool_ic_shuju.png b/src/assets/imgs/home_tool_ic_shuju.png
new file mode 100644
index 0000000000000000000000000000000000000000..78aed99bbd698ee23632daaef8db7de70c706d16
Binary files /dev/null and b/src/assets/imgs/home_tool_ic_shuju.png differ
diff --git a/src/assets/imgs/home_tool_ic_sjkf.png b/src/assets/imgs/home_tool_ic_sjkf.png
new file mode 100644
index 0000000000000000000000000000000000000000..69f6e48c8b3d807e5a4a7abd9d21eb669ecfdbb6
Binary files /dev/null and b/src/assets/imgs/home_tool_ic_sjkf.png differ
diff --git a/src/assets/imgs/home_tool_ic_yycx.png b/src/assets/imgs/home_tool_ic_yycx.png
new file mode 100644
index 0000000000000000000000000000000000000000..2ba83f6c09a9371f349b0414342355e8958ef6ad
Binary files /dev/null and b/src/assets/imgs/home_tool_ic_yycx.png differ
diff --git a/src/assets/imgs/home_tool_ic_znht.png b/src/assets/imgs/home_tool_ic_znht.png
new file mode 100644
index 0000000000000000000000000000000000000000..4b3a2bb930da48091490cb166b0192e0bdc34f8c
Binary files /dev/null and b/src/assets/imgs/home_tool_ic_znht.png differ
diff --git a/src/assets/imgs/ic_fuwuzs.png b/src/assets/imgs/ic_fuwuzs.png
new file mode 100644
index 0000000000000000000000000000000000000000..6bd43091b0f4c5469078cf7a4dc332094e1e4811
Binary files /dev/null and b/src/assets/imgs/ic_fuwuzs.png differ
diff --git a/src/assets/imgs/ic_fuwuzs_navy.png b/src/assets/imgs/ic_fuwuzs_navy.png
new file mode 100644
index 0000000000000000000000000000000000000000..6f3fc634135b816e0e42c56aca3d2b65cfad458d
Binary files /dev/null and b/src/assets/imgs/ic_fuwuzs_navy.png differ
diff --git a/src/assets/imgs/ic_shouyize.png b/src/assets/imgs/ic_shouyize.png
new file mode 100644
index 0000000000000000000000000000000000000000..f28ba4f04e67f024e4cc4b6048d71e3595b74912
Binary files /dev/null and b/src/assets/imgs/ic_shouyize.png differ
diff --git a/src/assets/imgs/ic_yingyongzs.png b/src/assets/imgs/ic_yingyongzs.png
new file mode 100644
index 0000000000000000000000000000000000000000..b810345f8fe2970ba4580f1f00567a6e9bacc78c
Binary files /dev/null and b/src/assets/imgs/ic_yingyongzs.png differ
diff --git a/src/assets/imgs/ic_yingyongzs_blue.png b/src/assets/imgs/ic_yingyongzs_blue.png
new file mode 100644
index 0000000000000000000000000000000000000000..4e3a51154a814dfd96b52e16413e4b00f7823142
Binary files /dev/null and b/src/assets/imgs/ic_yingyongzs_blue.png differ
diff --git a/src/assets/imgs/ic_yonghuzs.png b/src/assets/imgs/ic_yonghuzs.png
new file mode 100644
index 0000000000000000000000000000000000000000..30459ef41a1b383c5662ab986511a27b22da713a
Binary files /dev/null and b/src/assets/imgs/ic_yonghuzs.png differ
diff --git a/src/assets/imgs/img_head.png b/src/assets/imgs/img_head.png
new file mode 100644
index 0000000000000000000000000000000000000000..df8e3e35771c570a1e1df076bb36f02a6654ee0f
Binary files /dev/null and b/src/assets/imgs/img_head.png differ
diff --git a/src/components/menu.vue b/src/components/menu.vue
new file mode 100644
index 0000000000000000000000000000000000000000..895691deb0ece9adfa6f5a910eb637773d5a102c
--- /dev/null
+++ b/src/components/menu.vue
@@ -0,0 +1,88 @@
+<template>
+    <div class="menu">
+        <img src="../assets/imgs/home_img_logo.png" alt="" class="logo">
+        <span class="user">用户</span>
+        <img src="../assets/imgs/home_ic_user.png" alt="" class="user_pic">
+        <div class="number">99+</div>
+        <img src="../assets/imgs/home_ic_shop.png" alt="" class="car">
+        
+        <div style="float:right">
+            <div v-for="(item,index) in menu_arr" :key="index+200" class="menu_box" @click="now_menu = index" :style="now_menu==index?{color:'#fff'}:{}">{{item}}
+                 <div class="bottom_show" v-if="now_menu==index"></div>
+            </div>
+        </div>
+       
+
+    </div>
+</template>
+
+<script>
+export default {
+    data(){
+        return{
+            menu_arr:['工作台','技术支持','服务超市'],
+            now_menu:0,
+        }
+    }
+}
+</script>
+
+<style scoped>
+.menu{
+    width: 100%;
+    height: 84px;
+    background-color: #0f2683;
+    color: #8390ee;
+    line-height: 84px;
+}
+.logo{
+    float: left;
+    margin: 30px 0 0 40px;
+}
+.user{
+    float: right;
+    margin-right: 113px;
+    font-size: 16px;
+}
+.user_pic{
+    float: right;
+    margin-right: 15px;
+    margin-top: 30px;
+}
+.number{
+    float: right;
+    margin-right: 43px;
+    margin-top: 30px;
+    width: 40px;
+	height: 22px;
+	background-color: #e56600;
+    border-radius: 11px;
+    color: #fcefd6;
+    line-height: 22px;
+    text-align: center;
+}
+.car{
+    float: right;
+    margin-right: 15px;
+    margin-top: 30px;
+}
+.menu_box{
+    float: right;
+    width: 185px;
+    text-align: center;
+    cursor: pointer;
+    position: relative;
+}
+.menu_box:nth-of-type(1){
+    margin-right: 52px;
+}
+.bottom_show{
+    width: 24px;
+	height: 5px;
+	background-color: #e56600;
+    border-radius: 3px;
+    position: absolute;
+    bottom: 0px;
+    left: calc(50% - 12px);
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/index.vue b/src/pages/index.vue
index 6abc07e91e474eb22a5d92ec45cdce5e985d8754..9ada11ec392467e8acf2aa78da8c5e3c65261085 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -1,6 +1,7 @@
 <template>
-  <div>
-    Index
+  <div class="index_container">
+    <div class="decor"></div>
+    <router-view class="contain" />
   </div>
 </template>
 
@@ -11,3 +12,22 @@ export default {
   }
 };
 </script>
+
+<style scoped>
+.index_container {
+  margin-top: 84px;
+  min-height: 200px;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+.decor{
+  width: 100%;
+  height: 174px;
+  background-color: #0f2683;
+}
+.contain{
+  width: 1200px;
+  margin: 0 auto;
+  margin-top: -157px;
+}
+</style>
diff --git a/src/pages/workPlace.vue b/src/pages/workPlace.vue
new file mode 100644
index 0000000000000000000000000000000000000000..50701aec7c4ccd1ab8e039dd750667f3d518afa1
--- /dev/null
+++ b/src/pages/workPlace.vue
@@ -0,0 +1,221 @@
+<template>
+    <div>
+        <div class="person_info">
+            <div class="preson">
+                <div class="person_text">
+                    <img src="../assets/imgs/img_head.png" alt="">
+                    <span>你好，{{person}}！最近登录{{login_time}}</span>
+                </div>
+                <div class="person_menu">管理功能&nbsp;&nbsp;&nbsp; <img src="../assets/imgs/home_ic_more_w.png" alt=""></div>
+            </div>
+            <div class="menu">
+                <div :class="now_user==0?'menu_box0':now_user==1?'menu_box1':'menu_box2'" v-for="(item,index) in menu_arr[now_user]" :key="index+100" >
+                    <img :src="item.pic" alt="">
+                    <div class="menu_text">
+                        <p>{{item.text}}</p>
+                        <p :style="index == menu_arr[now_user].length - 1||now_user==1&&index==0?{color:item.color,marginRight:'-20px'}:{color:item.color}"><span style="font-size:36px">{{item.num}}</span><span v-if="index == menu_arr[now_user].length - 1||now_user==1&&index==0">万</span></p>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="case_box">
+            <div class="data_asy">
+                <p style="margin-top:20px;margin-bottom:10px;">数据分析中心 <img style="vertical-align:-9px;" src="../assets/imgs/home_btn_enter.png" alt=""></p>
+                <div class="data_charts">
+                    <div class="data_charts_left">
+                        <p><span></span> 服务健康状态</p>
+                        <div :id="health"></div>
+                    </div>
+                    <div class="data_charts_right">
+                        <p><span></span> 服务运营分析</p>
+                        <div :id="yy_asy"></div>
+                    </div>
+                </div>
+            </div>
+            <div class="online_tool"></div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data(){
+        return{
+            person:'康先生',
+            login_time:'2020-03-12 10:21:22',
+            now_user:0,
+            health:'',
+            yy_asy:"",
+            menu_arr:[
+                [
+                    {
+                        text:'服务总数',
+                        pic:require('../assets/imgs/ic_fuwuzs_navy.png'),
+                        bg:'#e6ebfe',
+                        color:'#515fe7',
+                        num:'12,332',
+                    },
+                    {
+                        text:'应用总数',
+                        pic:require('../assets/imgs/ic_yingyongzs.png'),
+                        bg:'#e5f4fe',
+                        color:'#38aef9',
+                        num:'223',
+                    },
+                    {
+                        text:'收益总额',
+                        pic:require('../assets/imgs/ic_shouyize.png'),
+                        bg:'#fcefd6',
+                        color:'#ea7d19',
+                        num:'￥2,312',
+                    },
+                ],
+                [
+                    {
+                        text:'收益总额',
+                        pic:require('../assets/imgs/ic_shouyize.png'),
+                        bg:'#fcefd6',
+                        color:'#ea7d19',
+                        num:'￥2,312',
+                    },
+                    {
+                        text:'服务总数',
+                        pic:require('../assets/imgs/ic_fuwuzs_navy.png'),
+                        bg:'#e6ebfe',
+                        color:'#515fe7',
+                        num:'12,332',
+                    },
+                    {
+                        text:'应用总数',
+                        pic:require('../assets/imgs/ic_yingyongzs.png'),
+                        bg:'#e5f4fe',
+                        color:'#38aef9',
+                        num:'223',
+                    },
+                    {
+                        text:'收益总额',
+                        pic:require('../assets/imgs/ic_shouyize.png'),
+                        bg:'#fcefd6',
+                        color:'#ea7d19',
+                        num:'￥2,312',
+                    },
+                ],
+            ],
+        }
+    }
+}
+</script>
+
+<style scoped>
+.person_info{
+    width: 1200px;
+	height: 206px;
+	background-color: #ffffff;
+	box-shadow: 0px 3px 6px 0px 
+		#f4f7fc;
+    border-radius: 12px;
+    padding: 20px;
+}
+.preson{
+    width: 100%;
+    height: 52px;
+    line-height: 52px;
+    border-bottom: 2px solid #f4f7fc;
+}
+.person_text{
+    float: left;
+    padding: 0 10px;
+}
+.person_text img{
+    border-radius: 18px;
+    margin-right: 10px;
+    vertical-align: -10px;
+}
+.person_menu{
+    float: right;
+    width: 100px;
+    height: 32px;
+    line-height: 32px;
+    text-align: center;
+	background-color: #e56600;
+	border-radius: 8px;
+    color: #fff;
+    cursor: pointer;
+    margin-top: 10px;
+}
+.menu{
+    width: 100%;
+    height: 102px;
+    margin-top: 20px;
+}
+.menu_box0,.menu_box1{
+    float: left;
+    width: calc((100% - 60px)/3);
+    margin-right: 30px;
+    width: 366px;
+	height: 92px;
+	background-color: #e6ebfe;
+	border-radius: 12px 12px 12px 46px;
+}
+.menu_box0:nth-last-of-type(1),.menu_box1:nth-last-of-type(1){
+    margin-right: 0px;
+}
+.menu_box1{
+    width: calc((100% - 60px)/4);
+    margin-right: 20px;
+}
+.menu img{
+    float: left;
+    margin: 28px 0 0 28px;
+}
+.menu .menu_text{
+    float: right;
+    margin-top: 15px;
+    margin-right: 29px;
+} 
+.menu_text p{
+    text-align: right;
+}
+
+.case_box{
+    width: 100%;
+    overflow: hidden;
+}
+.data_asy{
+    width: 720px;
+    float: left;
+    margin-right: 20px;
+}
+.data_charts{
+    width: 720px;
+	height: 270px;
+	background-color: #ffffff;
+	box-shadow: 0px 3px 6px 0px 
+		#f4f7fc;
+    border-radius: 12px;
+    padding: 20px;
+}
+.data_charts_left{
+    height: 100%;
+    width: 220px;
+    float: left;
+}
+.data_charts_right{
+    height: 100%;
+    width: 420px;
+    float: right;
+}
+.data_charts_left p,.data_charts_right p{
+    font-size: 16px;
+    color: #707693;
+}
+.data_charts_left p span,.data_charts_right p span{
+    width: 8px;
+	height: 8px;
+    background-color: #515fe7;
+    border-radius: 4px;
+    display: inline-block;
+    margin-right: 5px;
+}
+</style>
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index ba5870f5dfe435a2f74a5a0eba4f30ec4cdfdc22..106c02762f1e7eb1c2899ae2b98339495afce9e0 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -2,7 +2,7 @@ import Vue from "vue";
 import Router from "vue-router";
 
 import Index from "@/pages/index";
-
+import workPlace from "@/pages/workPlace"
 Vue.use(Router);
 
 export default new Router({
@@ -15,11 +15,19 @@ export default new Router({
       path: "/index",
       name: "index",
       component: Index,
+      redirect: "/workplace",
+      children:[{
+        path: "/workplace",
+        name: "workPlace",
+        component: workPlace,
+      }]
     },
     {
       path: "/table_example", // 表格实例
       name: "table_example",
       component: () => import("@/pages/table_example")
     },
+      
+    
   ]
 });