页面和交互

src/App.vue

@@ -26,6 +26,7 @@ export default {
   position: fixed;
   top: 0;
   left: 0;
+  z-index: 99;
 }
 #app{
   background-color: #f6f7fb;

src/pages/workPlace.vue

@@ -6,12 +6,13 @@
           <img src="../assets/imgs/img_head.png" alt />
           <span>你好，{{person}}！最近登录{{login_time}}</span>
         </div>
-        <div class="person_menu">
+        <div class="person_menu" @click="manage_flag = !manage_flag" :style="manage_flag?{color:'#0d1847',backgroundColor:'#fff',border: 'solid 2px #eef0f7',lineHeight:'28px',}:{}">
           管理功能&nbsp;&nbsp;&nbsp;
-          <img src="../assets/imgs/home_ic_more_w.png" alt />
+          <img src="../assets/imgs/home_ic_more_w.png" alt v-if="!manage_flag" />
+          <img src="../assets/imgs/home_ic_more_b.png" alt v-if="manage_flag"/>
 
-          <div class="manage_menu">
-            <div></div>
+          <div class="manage_menu" v-if="manage_flag">
+            <div v-for="(item,index) in manage_arr" :key="index+800" class="manage_box" @click="manage_func(index)"><img :src="item.pic" alt="">{{item.text}}</div>
           </div>
         </div>
       </div>
@@ -114,6 +115,7 @@ export default {
       now_user: 0,
       now_type:0,
       now_app:0,
+      manage_flag:false,
       health: uuidv1(),
       yy_asy: uuidv1(),
       menu_arr: [
@@ -268,15 +270,15 @@ export default {
           text:'权限管理',
         },
         {
-          pic:require(),
+          pic:require('../assets/imgs/home_tool_ic_quanxian.png'),
           text:'容器管理',
         },
         {
-          pic:require(),
+          pic:require('../assets/imgs/home_tool_ic_quanxian.png'),
           text:'数据管控',
         },
         {
-          pic:require(),
+          pic:require('../assets/imgs/home_tool_ic_quanxian.png'),
           text:'消息新闻管理',
         },
       ]
@@ -287,6 +289,9 @@ export default {
     this.init_yy()
   },
   methods: {
+    manage_func(n){
+      console.log(n);
+    },
     init_health(num) {
       var options = {
         title: {
@@ -554,6 +559,7 @@ export default {
   color: #fff;
   cursor: pointer;
   margin-top: 10px;
+  position: relative;
 }
 .menu {
   width: 100%;
@@ -733,4 +739,31 @@ export default {
   font-size: 12px;
 	color: #8890a7;
 }
+.manage_menu{
+  position: absolute;
+  top: 0;
+  left: 140px;
+  width: 145px;
+}
+
+.manage_box{
+  width: 145px;
+	height: 50px;
+  line-height: 50px;
+	background-color: #0d1847;
+	box-shadow: 0px 2px 4px 0px 
+		#001155;
+	border-radius: 12px;
+  margin-bottom: 10px;
+  text-align: left;
+  padding-left: 10px;
+  color: #c3caf8;
+}
+.manage_box:hover{
+  border: solid 2px #515fe7;
+}
+.manage_box img{
+  vertical-align: -5px;
+  margin-right: 10px;
+}
 </style>
\ No newline at end of file