h5全局菜单

pom.xml

@@ -5,7 +5,7 @@
     <parent>
         <groupId>org.springframework.boot</groupId>
         <artifactId>spring-boot-starter-parent</artifactId>
-        <version>2.3.1.RELEASE</version>
+        <version>2.3.4.RELEASE</version>
         <relativePath/> <!-- lookup parent from repository -->
     </parent>
     <groupId>com.caimei</groupId>

src/main/resources/static/css/base/base.h5.css

@@ -4,7 +4,8 @@
 */
 .noneImportant{display:none!important;}
 .baseHeadCenter,#container,.footMain{width:100%;overflow:hidden;}
-.pcOnly,.jqSelect .pc,.baseHeadTop,.baseHeadCenter .headCart,.baseHeadCenter .hotKey,.baseTopNav>.wrap{display:none!important;}
+.pcOnly,.jqSelect .pc,.baseHeadCenter .headCart,.baseHeadCenter .hotKey,.baseTopNav>.wrap{display:none!important;}
+.baseHeadTop ul.wrap>li{display:none;}
 .mIcon:before{content:'';display:inline-block;font-size:0;background:url(/img/base/icon_m.png) no-repeat;background-size:100vw auto;transition:all .5s}
 .icon.shop,.icon.heart{vertical-align:middle;display:inline-block;height:5.5vw;line-height:5.5vw}
 .icon.shop:before{width:7.5vw;height:6vw;background-position:-91vw -.5vw}
@@ -64,6 +65,12 @@
 .baseHeadCenter.account .closeAccount{float:right;padding:3.5vw 2.8vw;width:6.4vw;height:6.4vw;text-align:center}
 .baseHeadCenter.account .closeAccount:before{content:'\2715';font-size:4.5vw;font-weight:bold}
 .baseHeadCenter.account .accountLogin{display:none;}
+#mGlobalMenu{position:fixed;bottom:0;left:0;background-color:rgba(74,79,88,.7);width:100%;height:100%;z-index:9990}
+#mGlobalMenu .cTab{display:none}
+#mGlobalMenu .cShow{display:none}
+#mGlobalMenu .cShow{width:100%;position:absolute;bottom:0;left:0;background:#FFF;line-height:14.4vw;text-align:center;font-size:3.4vw;padding:6vw 0;border-radius:3vw 3vw 0 0}
+#mGlobalMenu .cShow a{display:block}
+
 /* 分类 */
 .classifyBox{display:none;background:#F7F7F7;overflow:hidden}
 .classifyBox .clsHead{position:relative;background:#FFF}

src/main/resources/static/css/base/center.css

@@ -30,7 +30,7 @@
 .centerNav .centerBox{content:'';position:fixed;background-color:rgba(74,79,88,.7);width:100%;height:100%;display:none}
 .centerNav .wrap{position:absolute;top:0;left:0;width:100%;background:#FFF;padding-bottom:4vw;border-radius:0 0 3vw 3vw;font-size:3.4vw;z-index:9}
 .centerNav .wrap .centerList:first-child .tab{border-top:solid 1px #f0f2f4}
-.centerNav .centerList .tab{display:block;margin:0 auto;width:93.4vw;height:10.8vw;line-height:10.8vw;color:#22272e;position:relative}
+.centerNav .centerList .tab{display:block;margin:0 auto;width:93.4vw;height:10.8vw;line-height:10.8vw;font-size:3.4vw;color:#22272e;position:relative}
 .centerNav .centerList .tab.home{border-bottom:solid 1px #f0f2f4;}
 .centerNav .centerList .tab.home:after{content:'\276F';font-weight:normal;position:absolute;top:0;font-size:3.6vw;color:#4A4F58;right:4vw;line-height:9.6vw}
 .centerNav .centerList .tab.home.on:after{transform:rotate(90deg)}

src/main/resources/static/css/pay/caimei-paycash.css

@@ -127,7 +127,7 @@ input::-webkit-outer-spin-button {
     .pay-title .pay-input input{outline:none;box-sizing:border-box;width:100%;height:7vw;line-height:5vw;padding:1vw 0;text-indent:1.2em;font-size:3.4vw;text-align:left;background-color:#ffffff;border-radius:2px;border:solid 1px #b8bfca}
     .record-title,.method-title{font-size:3.7vw;color:#22272e;line-height:8vw}
     .pay-method-tab{padding-top:1.5vw;border-bottom:1px solid #EBEBEB;color:#22272e}
-    .pay-method-tab .item{display:block;box-sizing:border-box;height:9vw;line-height:9vw;padding:0 5vw;border:1px solid transparent;color:#93979F;font-size:3.4vw;margin-bottom:-1px}
+    .pay-method-tab .item{display:block;box-sizing:border-box;height:9vw;line-height:9vw;padding:0 5vw;border:1px solid transparent;font-size:3.4vw;margin-bottom:-1px}
     .pay-method-tab .item.active{color:#E15621;border-color:#EBEBEB;border-bottom-color:#FFF;background:#FFF}
     .payment{border:1px solid #EBEBEB;border-top:none;padding:2.6vw}
     .record-li{margin-top:3vw}

src/main/resources/static/js/base.js

@@ -78,6 +78,12 @@ var globalHead = new Vue({
             localStorage.removeItem('userInfo');
             this.loginStatus = false;
             window.location.href = "/index.html";
+        },
+        showGlobalMenu: function(){
+            $("#mGlobalMenu").show().find(".cShow").slideDown(500);
+        },
+        hideGlobalMenu: function(){
+            $("#mGlobalMenu").hide().find(".cShow").hide();
         }
     },
     created: function () {
@@ -161,8 +167,11 @@ $(function(){
     $('body').on("click", '.toLogin',function () {
         loginAert('<span>你还未登录</span><span>请登录后再进行购买</span>', '去登录');
     });
+    // 退出登录
     $('body').on("click", '.toLogOut',function () {
-        loginAert('<span>确定退出登录吗？</span>', '退出登录');
+        localStorage.removeItem('userInfo');
+        globalHead.loginStatus = false;
+        window.location.href = "/index.html";
     });
     // 置顶
     $('#scrollTop').on("click", '.toTop',function () {

src/main/resources/templates/components/header.html

@@ -16,7 +16,7 @@
                     <p>扫描关注</p>
                 </div>
             </li>
-            <li v-if="loginStatus">
+            <li v-if="loginStatus" id="mGlobalMenu" @click="hideGlobalMenu()">
                 <a class="cTab" href="javascript:void(0);" v-text="userData.userName"></a>
                 <div class="cShow" v-if="userIdentity == 4 || userIdentity == 2">
                     <a href="/user/dashboard.html">我的采美</a>
@@ -45,9 +45,8 @@
             </a>
             <div class="mf h5Only mUserCenter">
                 <a :href="loginStatus?'/shopping/cart.html':'javascript:void(0);'" :class="loginStatus?'mAddCart mIcon':'mAddCart mIcon toLogin'" title="购物车"></a>
-                <a v-if="loginStatus&&GLOBAL_USER_IDENTITY==3" href="/supplier/dashboard.html" class="mUserIcon mIcon" title="供应商"></a>
-                <a v-else-if="loginStatus&&(GLOBAL_USER_IDENTITY==2||GLOBAL_USER_IDENTITY==4)" href="/user/dashboard.html" class="mUserIcon mIcon" title="机构"></a>
-                <a v-else href="javascript:void(0);" class="mUserIcon mIcon toLogin" title="个人中心"></a>
+                <a v-if="loginStatus" @click="showGlobalMenu()" class="mUserIcon mIcon" href="javascript:void(0);" title="个人中心"></a>
+                <a v-else class="mUserIcon mIcon toLogin" href="javascript:void(0);" title="个人中心"></a>
             </div>
             <div class="searchBox" id="topSearch">
                 <div class="search">