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

d80e54e4 · zhujiamin · 02c939fa · d80e54e4 · d80e54e4 · d80e54e4
--- a/src/components/app-mob-menu-sideslip-view-header/app-mob-menu-sideslip-view-header.less
+++ b/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{

--- a/src/components/app-mob-menu-sideslip-view-header/app-mob-menu-sideslip-view-header.vue
+++ b/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>


--- a/src/components/app-mob-menu-sideslip-view/app-mob-menu-sideslip-view.less
+++ b/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;
      }
    }
  }

--- a/src/components/app-mob-menu-sideslip-view/app-mob-menu-sideslip-view.vue
+++ b/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;
+        }
+    }
+
    /**
     * 向左滑动关闭弹出层
     *

--- a/src/styles/theme/theme.less
+++ b/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;
+      }
+    }
+  }
 }