移动端 右上方用户信息菜单 侧方弹出子菜单 视觉效果优化

src/views/gui/UserInfoMobile.vue

@@ -3,6 +3,7 @@
     <div
       v-click-outside.touchstart.capture="onTouchOutsideMenu"
       class="top-wrapper"
+      :class="isExpanded ? 'my-show' : ''"
     >
       <button
         class="show-menu"
@@ -25,7 +26,6 @@
       </button>
       <menu
         ref="menu"
-        :class="isExpanded ? 'my-show' : 'my-hide'"
       >
         <button
           @click="onClickShare"
@@ -214,12 +214,17 @@ export default {
   right: 8px;
   display: flex;
   flex-direction: column;
-  align-items: center;
+  align-items: flex-end;
   > .top-wrapper {
     position: relative;
     margin-bottom: 11px;
     width: 40px;
     height: 40px;
+    overflow: hidden;
+    transition: width 0.4s;
+    border-radius: 0 20px 20px 0;
+    font-size: 12px;
+    margin-right: 0.3em;
     > button.show-menu {
       position: absolute;
       top: 0;
@@ -243,12 +248,8 @@ export default {
       justify-content: space-evenly;
       align-items: center;
       padding-right: 40px;
-      &.my-hide {
-        display: none;
-      }
-      &.my-show {
-        display: flex;
-      }
+      transition: right 0.4s;
+      right: -220px;
       > button {
         height: 100%;
         display: flex;
@@ -269,6 +270,12 @@ export default {
         }
       }
     }
+    &.my-show {
+      width: 220px;
+      > menu {
+        right: 0;
+      }
+    }
   }
   > .badge-info-wrapper {
     margin-bottom: 11px;