交互修改

src/pages/workPlace.vue

@@ -6,12 +6,11 @@
           <img src="../assets/imgs/img_head.png" alt />
           <span>你好，{{person}}！最近登录{{login_time}}</span>
         </div>
-        <div class="person_menu" @click="manage_flag = !manage_flag" :style="manage_flag?{color:'#0d1847',backgroundColor:'#fff',border: 'solid 2px #eef0f7',lineHeight:'28px',}:{}">
+        <div class="person_menu">
           管理功能&nbsp;&nbsp;&nbsp;
-          <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="person_manage_pic"></div>
 
-          <div class="manage_menu" v-if="manage_flag">
+          <div class="manage_menu">
             <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>
@@ -561,6 +560,12 @@ export default {
   margin-top: 10px;
   position: relative;
 }
+.person_manage_pic{
+  display: inline-block;
+  width: 3px;
+  height: 13px;
+  background-image: url('../assets/imgs/home_ic_more_w.png');
+}
 .menu {
   width: 100%;
   height: 102px;
@@ -742,8 +747,22 @@ export default {
 .manage_menu{
   position: absolute;
   top: 0;
-  left: 140px;
-  width: 145px;
+  left: 100px;
+  width: 185px;
+  display: none;
+  padding-left: 40px;
+}
+.person_menu:hover .manage_menu{
+  display: block;
+}
+.person_menu:hover{
+  color:#0d1847;
+  background-color:#fff;
+  border: solid 2px #eef0f7;
+  line-height:28px;
+}
+.person_menu:hover .person_manage_pic{
+  background-image: url('../assets/imgs/home_ic_more_b.png');
 }
 
 .manage_box{
@@ -766,4 +785,5 @@ export default {
   vertical-align: -5px;
   margin-right: 10px;
 }
+
 </style>
\ No newline at end of file