侧滑菜单样式美化，兼容性调整

src/components/app-mob-menu-sideslip-view-header/app-mob-menu-sideslip-view-header.less

@@ -8,16 +8,16 @@
     }
     .title{
       color: #fff;
-      font-size: 20px;
+      font-size: 15px;
       margin-bottom: 10px;
     }
     .text{
       display: inline-block;
       padding: 3px 6px;
       background-color: #fff;
-      color: #333;
+      // color: #333;
       font-size: 12px;
-      margin-bottom: 20px;
+      margin-bottom: 10px;
     }
     .notice{
       ion-icon{

src/components/app-mob-menu-sideslip-view-header/app-mob-menu-sideslip-view-header.vue

@@ -2,9 +2,9 @@
   <div class="app-mob-menu-sideslip-view-header">
     <div class="header">
       <img src="assets/images/logo.png" class="ibizLogo"/>
-      <div class="title">iBizPMS</div>
-      <div class="text">登录·试用测试版</div>
-      <div class="notice"><ion-icon name="megaphone-outline"></ion-icon> #最新通知——更新/下载</div>
+      <div class="title">账号信息：{{srfloginname}}</div>
+      <div class="text">{{text}}</div>
+      <div class="notice" @click="toNotice"><ion-icon name="megaphone-outline"></ion-icon> #论坛地址——{{notice}}</div>
     </div>
   </div>
 </template>
@@ -18,6 +18,51 @@ import { Environment } from '@/environments/environment';
 })
 export default class AppMobMenuSideslipView extends Vue {
 
+  /**
+    * 账号信息
+    *
+    * @type {*}
+    * @memberof AppMobMenuSideslipViewHeader
+    */
+  public srfloginname?:any;
+
+  /**
+    * 软件信息
+    *
+    * @type {string}
+    * @memberof AppMobMenuSideslipViewHeader
+    */
+  public text?:string;
+
+  /**
+    * 论坛信息
+    *
+    * @type {string}
+    * @memberof AppMobMenuSideslipViewHeader
+    */
+  public notice?:string;
+
+  /**
+    * 生命周期
+    *
+    * @memberof AppMobMenuSideslipViewHeader
+    */
+  public created(){
+    this.text = Environment.AppTitle;
+    this.notice = Environment.ibizbbstUrl;
+    let appdata = this.$store.state.appdata;
+    this.srfloginname = appdata.context.srfloginname;
+  }
+
+  /**
+    * 跳转论坛
+    *
+    * @memberof AppMobMenuSideslipViewHeader
+    */
+  public toNotice(){
+    // window.location.href = 'https://bbs.ibizlab.cn';
+    window.open('https://bbs.ibizlab.cn','_blank');
+  }
 }
 </script>
 

src/components/app-mob-menu-sideslip-view/app-mob-menu-sideslip-view.less

@@ -6,11 +6,6 @@
 }
 .app-mob-menu-sideslip-view{
   height: 100%;
-  ion-button{
-    position: absolute;
-    top: 5px;
-    left: 0;
-  }
   v-touch{
     height: 100%;
   }
@@ -20,11 +15,12 @@
     .title{
       color:#727272;
       font-size: 18px;
+      padding-left: 10px;
     }
-    padding: 15px;
-    border-bottom:1px solid #E8E8E8;
+    padding: 15px 0;
     .list{
-      padding: 10px 10px 10px 0;
+      box-sizing: border-box;
+      padding: 10px 10px 10px 10px;
       ion-icon{
         font-size: 25px;
         margin-right: 35px;
@@ -33,9 +29,31 @@
       align-items: center;
       font-size: 16px;
       margin: 10px 0;
-      color: #333;
+      color: #565656;
       &:active{
-        background-color: #DBDBDB;
+        background: #F4F3F8;
+        box-shadow: -1px -1px -2px rgba(255, 255, 255, 0.2);
+        transition: all 0.25s linear;
+      }
+      .van-tag{
+        position: absolute;
+        right: 10px;
+      }
+    }
+    .active{
+      padding: 10px 10px 10px 10px;
+      ion-icon{
+        font-size: 25px;
+        margin-right: 35px;
+      }
+      display: flex;
+      align-items: center;
+      font-size: 16px;
+      margin: 10px 0;
+      color: #333;
+      background-color:#F4F3F8;
+      .text{
+        color: #565656;
       }
     }
   }

src/components/app-mob-menu-sideslip-view/app-mob-menu-sideslip-view.vue

 <template>
     <div class="app-mob-menu-sideslip-view"> 
-      <van-popup v-model="showPopup" get-container="#app" position="left" :style="{ height: '100%',width: '80%' }" duration="0.2" :close-on-popstate="true">
+      <van-popup v-model="showPopup" get-container="#app" position="left" :style="{ height: '100%',width: '75%' }" duration="0.2" :close-on-popstate="true">
         <v-touch v-on:swipeleft="onSwipeLeft" style="height:100%;">
               <div class="app-menu-plugin">
                 <app-mob-menu-sideslip-view-header></app-mob-menu-sideslip-view-header>
@@ -8,12 +8,13 @@
                   <div class="title">Menu</div>
                   <template v-for="item in items"  >
                     <template v-if="!item.hidden">
-                      <div class="list" :key="item.index" @click="active(item)">
+                      <div class="list" :key="item.index" @click="active(item)" :class="{'active':item.id == activeId}">
                         <ion-icon :name=" item.iconcls ? item.iconcls : 'home' "></ion-icon>
                         <div class="text">
                           <ion-label v-if="item.appfunctag != 'settings'">{{$t(`app.menus.${menuName}.${item.name}`)}}</ion-label>
                           <ion-label v-else>{{item.text}}</ion-label>
-                          <ion-badge color="danger" v-if="counterServide && counterServide.counterData && counterServide.counterData[item.counterid]"><ion-label>{{counterServide.counterData[item.counterid]}}</ion-label></ion-badge>
+                          <van-tag round type="primary" size="medium" v-if="counterServide && counterServide.counterData && counterServide.counterData[item.counterid]">{{counterServide.counterData[item.counterid]}}</van-tag>
+                          <!-- <ion-badge color="danger" v-if="counterServide && counterServide.counterData && counterServide.counterData[item.counterid]"><ion-label>{{counterServide.counterData[item.counterid]}}</ion-label></ion-badge> -->
                         </div>
                       </div>
                     </template>
@@ -208,14 +209,10 @@ export default class AppMobMenuSideslipView extends Vue {
         if(currPage){
             this.items.forEach((item:any,index:number) => {
                 if(item.id == currPage){
-                    this.activeId =  item.id;    
+                    this.activeId =  item.id       
                 }
             })
         }
-        // 阻止冒泡
-        document.addEventListener('touchmove',function(event){
-          event.stopPropagation();
-        },false);
     }
 
     /**
@@ -262,6 +259,27 @@ export default class AppMobMenuSideslipView extends Vue {
         return val;
     }
 
+    /**
+     * 选中菜单项
+     *
+     * @param {*} $event
+     * @returns {void}
+     * @memberof AppMobMenuDefaultView
+     */
+    public selectItem($event: any): void {
+        if (!$event) {
+            return ;
+        }
+        let { detail } = $event;
+        if (!detail) {
+            return ;
+        }
+        let { tab }  = detail;
+        if (!tab) {
+            return;
+        }
+    }
+
     /**
      * 向左滑动关闭弹出层
      *

src/styles/theme/theme.less

@@ -169,7 +169,25 @@
     .header {
       background-color: @theme-color;
     }
+    .list{
+      &:active{
+        color: @theme-color;
+      }
+      .van-tag{
+        background-color: @theme-color;
+        color: @text-color;
+      }
+    }
+    .active{
+      ion-icon{
+        color: @theme-color;
+      }
+      ion-label{
+        color: @theme-color;
       }
+    }
+  }
+  
   // 快速搜索组件主题
   .app-seach-history {
     .record {
@@ -191,4 +209,13 @@
   .dropdown-box .dropdown-item .dropdown-item-icon {
     color: @theme-color;
   }
+
+  // 侧滑菜单头部
+  .app-mob-menu-sideslip-view-header{
+    .header{
+      .text{
+        color: @theme-color;
+      }
+    }
+  }
 }