机构个人h5

src/main/resources/static/css/user-center/dashboard.css

@@ -5,30 +5,29 @@ li{list-style:none}
  */
 @media screen and (min-width:768px){
     /*个人中心右侧*/
-    .user-header{width: 100%;height: 120px;box-sizing: border-box;padding: 20px;background-color: #FFF;box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.07);}
-    .user-header .header-ml{width: 50%;height:80px;float: left;}
-    .user-header .header-ml .logo{width: 110px;height:78px;float: left;border: 1px solid #f5f5f5;border-radius: 2px;margin-right: 8px;position: relative;cursor: pointer;}
-    .user-header .header-ml .logo .logo-file{width: 110px;height: 78px;position: relative;outline: none;opacity: 0;position: absolute;top: 0;left: 0;cursor: pointer;}
-    .user-header .header-ml .logo .file{width: 110px;height: 78px;display:block;background: url("/img/account/icon-noneimg.png") center center no-repeat;}
-    .user-header .header-ml .logo img{width: 110px;height:78px;display: block;border-radius: 2px;}
-    .user-header .header-ml .account{float: left;box-sizing: border-box;padding: 5px 0;}
-    .user-header .header-ml .account .name{width: 100%;height: 36px;float: left;margin-bottom: 10px;}
-    .user-header .header-ml .account .name span{line-height: 36px;font-size: 18px;font-weight: bold;color: #22272e;display: inline-block;float: left;}
-    .user-header .header-ml .account .name a{margin-left: 30px;width: 118px;height: 34px;border: 1px solid #E15616;border-radius: 2px;background-color: #ffe6dc;color: #E15616;display: block;line-height: 34px;text-align: center;float: left;}
-    .user-header .header-ml .account .msg{width:100%;font-size: 14px;line-height: 26px;color: #22272e;margin-top: 20px;}
-    .user-header .header-ml .account .msg span{color: #22272e;display: inline-block;float: left;margin-right: 8px;}
-    .user-header .header-ml .account .msg .red{color: #f94b4b;font-style: normal;margin: 0 5px;}
-    .user-header .header-ml .account .msg a{display: inline-block;width: 64px;height: 22px;float: left;line-height: 22px;color: #FFFFFF;font-size:12px;text-align: center; background-image: linear-gradient(225deg,#61686f 0%,#313a43 100%);border-radius: 2px;}
-    .user-header .header-mr{height:80px;float: right;}
-    .user-header .header-mr .message{width: 100%;float: right;height: 28px;}
-    .user-header .header-mr .message a{width: 28px;height: 28px;float: right;display: block;position: relative;}
-    .user-header .header-mr .message .icon{width: 28px;height: 28px;float: right;display: block;position: relative;}
-    .user-header .header-mr .message .icon:before{width: 28px;height: 28px;background-position: -240px -370px}
-    .user-header .header-mr .message .icon span{display: block;width: 20px;height: 20px;background-image: linear-gradient(90deg,#ff5353 0%,#ff2424 100%);position: absolute;top: -9px;left: -9px;font-style: normal;font-size: 12px;color: #f94b4b;line-height: 20px;text-align: center;border-radius: 50%;color: #fff;}
-    .user-header .header-mr .message .icon span.ellipse{width: 30px;height: 20px;border-radius: 10px;line-height: 20px;left: -22px;}
-    .user-header .header-mr .money {width: 100%;height: 52px;line-height: 52px;font-size: 16px;}
-    .user-header .header-mr .money span{color: #e15616;}
-    .user-content{width: 100%;height: auto;margin-top: 10px;}
+    .user-header{width:100%;height:120px;box-sizing:border-box;padding:20px;background-color:#FFF;box-shadow:0px 3px 6px 0px rgba(0,0,0,0.07);position:relative}
+    .user-header .logo{width:110px;height:78px;float:left;border:1px solid #f5f5f5;border-radius:2px;margin-right:8px;position:relative;cursor:pointer}
+    .user-header .logo .logo-file{width:110px;height:78px;position:relative;outline:none;opacity:0;position:absolute;top:0;left:0;cursor:pointer}
+    .user-header .logo .file{display:block;width:110px;height:78px;line-height:78px;text-align:center}
+    .user-header .logo .file:before{width:40px;height:40px;background-position:-161px -367px;vertical-align:middle}
+    .user-header .logo img{width:110px;height:78px;display:block;border-radius:2px}
+    .user-header .account{float:left;box-sizing:border-box;padding:5px 0}
+    .user-header .account .name{width:100%;height:36px;float:left;margin-bottom:10px}
+    .user-header .account .name span{line-height:36px;font-size:18px;font-weight:bold;color:#22272e;display:inline-block;float:left}
+    .user-header .account .name a{margin-left:30px;width:118px;height:34px;border:1px solid #E15616;border-radius:2px;background-color:#ffe6dc;color:#E15616;display:block;line-height:34px;text-align:center;float:left}
+    .user-header .account .msg{width:100%;font-size:14px;line-height:26px;color:#22272e;margin-top:20px}
+    .user-header .account .msg em{color:#22272e;display:inline-block;margin-right:8px}
+    .user-header .account .msg .red{color:#f94b4b;font-style:normal;margin:0 5px}
+    .user-header .account .msg a{display:inline-block;width:64px;height:22px;line-height:22px;color:#FFFFFF;font-size:12px;text-align:center;background-image:linear-gradient(225deg,#61686f 0%,#313a43 100%);border-radius:2px}
+    .user-header .account .money{position:absolute;right:15px;bottom:20px;font-size:16px}
+    .user-header .account .money em{color:#e15616;font-style:normal;}
+    .user-header .message{position:absolute;height:28px;right:15px;top:20px}
+    .user-header .message a{width:28px;height:28px;float:right;display:block;position:relative}
+    .user-header .message .icon{width:28px;height:28px;float:right;display:block;position:relative}
+    .user-header .message .icon:before{width:28px;height:28px;background-position:-240px -370px}
+    .user-header .message .icon span{display:block;width:20px;height:20px;background-image:linear-gradient(90deg,#ff5353 0%,#ff2424 100%);position:absolute;top:-9px;left:-9px;font-style:normal;font-size:12px;color:#f94b4b;line-height:20px;text-align:center;border-radius:50%;color:#fff}
+    .user-header .message .icon span.ellipse{width:30px;height:20px;border-radius:10px;line-height:20px;left:-22px}
+    .user-content{width:100%;height:auto;margin-top:10px}
     .user-content .title{width: 100%;height: 44px;line-height: 44px;font-size: 16px;text-align: left;color: #22272e;}
     .user-content .title a{display: block;float: right;position: relative;padding-right: 36px;position: relative;}
     .user-content .title a .icon{display: block;width: 18px;height: 18px;position: absolute;top: 5px;right: 10px;}
@@ -89,8 +88,21 @@ li{list-style:none}
 * 移动端
 */
 @media screen and (max-width:768px){
-
-
+    .user-header{box-sizing:border-box;width:100%;height:33.9vw;padding:2.7vw;background:#fff;box-shadow:0 .8vw 1.6vw 0 rgba(0,0,0,0.07);position:relative}
+    .user-header .logo{width:26.7vw;height:19.4vw;border:solid 1px #f5f5f5;margin-right:2.7vw;position:relative}
+    .user-header .logo .logo-file{width:26.7vw;height:19.4vw;outline:none;opacity:0;position:absolute;top:0;left:0}
+    .user-header .logo .file{position:absolute;top:5vw;left:9vw;width:9vw;height:9vw}
+    .user-header .logo .file:before{width:9vw;height:9vw;background-position:-7.5vw -60.3vw}
+    .user-header .account{width:64vw;height:19.4vw;box-sizing:border-box;color:#9aa5b5;font-size:3.1vw;line-height:6.4vw;position:relative}
+    .user-header .account .name{font-size:3.7vw;color:#22272e}
+    .user-header .account em{font-style:normal;color:#e15616}
+    .user-header .account .name a,.user-header .account .msg a{display:inline-block;height:5.4vw;line-height:5.4vw;padding:0 2vw;color:#FFF;border-radius:2px;margin-left:2vw}
+    .user-header .account .name a{background-color:#e15616}
+    .user-header .account .msg a{background-color:#313a43}
+    .user-header .message{position:absolute;right:0;top:5vw}
+    .user-header .message .mIcon{position:absolute;right:0;top:0}
+    .user-header .message .mIcon:before{width:8vw;height:8vw;background-position:-16.5vw -60.3vw}
+    .user-header .message .ellipse{display:inline-block;padding:.3vw;border-radius:2vw;font-size:2.8vw;background-color:#f55c5c;color:#FFF;font-style:normal;position:absolute;right:4vw;top:-1vw}
 
 
 

src/main/resources/templates/user-center/dashboard.html

@@ -26,27 +26,23 @@
                     <img src="/img/base/loading.gif">
                 </div>
                 <template v-else>
-                    <div class="user-header">
-                        <div class="header-ml">
-                            <div class="logo">
-                                <input ref="clubUseLogo"  class="logo-file" type="file" accept="image/png,image/jpeg,image/gif,image/jpg"  @change="uploadUserPuploadAvatar">
-                                <i class="file" v-if="userInfo.image == null"></i>
-                                <img v-else :src="userInfo.image == null ? '' : userInfo.image" alt="">
-                            </div>
-                            <div class="account">
-                                <div class="name"><span>{{userInfo.name}}</span><a href="/user/setting/upgrade.html" v-if="userInfo.userIdentity === 4">去升级会员机构</a></div>
-                                <div class="msg"><span>资料完整度:<em class="red">{{degree}}</em></span><a href="/user/setting/information.html">立即完善</a></div>
-                            </div>
+                    <div class="user-header mfbt">
+                        <div class="logo">
+                            <input ref="clubUseLogo"  class="logo-file" type="file" accept="image/png,image/jpeg,image/gif,image/jpg"  @change="uploadUserPuploadAvatar">
+                            <i class="file icon mIcon" v-if="userInfo.image == null"></i>
+                            <img v-else :src="userInfo.image == null ? '' : userInfo.image" alt="">
                         </div>
-                        <div class="header-mr">
-                            <div class="message">
-                                <a href="/user/message/list.html">
-                                    <i class="icon mIcon">
-                                        <span  v-if="unReadMessageCount>0" :class="[unReadMessageCount < 10 ? 'circular':'ellipse']">{{unReadMessageCount == 99 ? '99+' : unReadMessageCount}}</span>
-                                    </i>
-                                </a>
-                            </div>
-                            <div class="money">余额: <span>{{toFixedFn(userInfo.ableUserMoney)}}</span> 元</div>
+                        <div class="account">
+                            <div class="name"><span>{{userInfo.name}}</span><a href="/user/setting/upgrade.html" v-if="userInfo.userIdentity === 4">去升级会员机构</a></div>
+                            <div class="money">余额: <em>{{toFixedFn(userInfo.ableUserMoney)}}</em> 元</div>
+                            <div class="msg"><span>资料完整度:<em class="red">{{degree}}</em></span><a href="/user/setting/information.html">立即完善</a></div>
+                        </div>
+                        <div class="message">
+                            <a href="/user/message/list.html">
+                                <i class="icon mIcon">
+                                    <span  v-if="unReadMessageCount>0" :class="[unReadMessageCount < 10 ? 'circular':'ellipse']">{{unReadMessageCount == 99 ? '99+' : unReadMessageCount}}</span>
+                                </i>
+                            </a>
                         </div>
                     </div>
                     <div class="user-content clear">