Merge branch 'feature/0902_Author' of git.yoho.cn:fe/yoho-community-web into feature/0902_Author

@@ -188,7 +188,13 @@ export default {
     ...mapActions(['followArticle', 'praiseArticle', 'praiseComment']),
     ...articleMapActions(['fetchArticleUpdate']),
     pxToRem(px) {
-      const rootValue = 40;
+      let rootValue = 0;
+
+      if (this.type === 'shareAuthor') {
+        rootValue = 60;
+      } else {
+        rootValue = 40;
+      }
 
       if (typeof px !== 'number') {
         px = parseInt(`0${px}`, 10);

 <template>
   <Layout class="author-page">
 
-    <AuthorHeader ref="headerAuthor" v-show="!share" :title="authorBaseData.nickName" :step="headerAnimateStep" :share="share" @on-share="onAuthorShare">
+    <AuthorHeader ref="headerAuthor" v-show="!share" :title="titleName" :step="headerAnimateStep" :share="share" @on-share="onAuthorShare">
       <template v-if="tabFixed" v-slot:suctionTop>
         <FavTabBlock :active-index="activeIndex" @change="changeTab"></FavTabBlock>
       </template>
@@ -23,7 +23,7 @@
               <p class="author-sign">{{getSignatureContent(authorBaseData.signature)}}</p>
               <div v-if="authorBaseData.skillsDesc" class="author-iden">
                 <span v-show="identityClass" class="identity-icon" :class="identityClass"></span>
-                {{authorBaseData.skillsDesc}}
+                <p class="identity-desc">{{authorBaseData.skillsDesc}}</p>
               </div>
               <div class="author-section">
                 <ul class="author-fans">
@@ -118,6 +118,7 @@ export default {
 
       share: false,
       shareData: {},
+      titleName: '',
       headerAnimateStep: 0,
     };
   },
@@ -241,6 +242,7 @@ export default {
       this.loadStatus = '';
       this.emptyTip = '';
       this.shareData = {};
+      this.titleName = '';
 
       if (this.scrollY > 0) {
         if (this._animeEl) {
@@ -261,7 +263,7 @@ export default {
       }
     },
     getSignatureContent(content = '') {
-      if (content.length < 20) {
+      if (content.length <= 20) {
         if (content.length > 0) {
           return content;
         } else {
@@ -402,6 +404,7 @@ export default {
       this[this._apiNamePre + 'BaseInfo'](this.authorInfo).then(data => {
         data.isAttention = data.hasAttention === 'Y';
         data.showAvatar = true;
+        this.titleName = data.nickName.length > 15 ? data.nickName.substring(0, 15) + '...' : data.nickName;
         this.authorBaseData = data;
         this.isOwner = +data.userType === 1;
         this.shareData = {...data, ...this.authorInfo};
@@ -712,11 +715,13 @@ export default {
     .back-img {
       display: flex;
       width: 100%;
+      background-repeat: no-repeat;
+      background-size: contain;
       background-image: url("~statics/image/article/author_back@3x.png");
-      background-size: 100% 100%;
     }
 
     .blank-main {
+      position: relative;
       height: 474px;
       margin-left: 30px;
       margin-right: 30px;
@@ -747,6 +752,13 @@ export default {
   }
 
   .author-name {
+    max-width: calc(100% - 20px);
+    margin-left: 10px;
+    margin-right: 10px;
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
     margin-top: 30px;
     height: 60px;
     line-height: 60px;
@@ -754,11 +766,6 @@ export default {
     letter-spacing: 0.09PX;
     font-weight: 800;
     color: #222;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
     text-align: center;
   }
 
@@ -779,18 +786,26 @@ export default {
   .author-iden {
     margin-top: 18px;
     height: 50px;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    display: flex;
+  }
+
+  .identity-desc {
+    display: inline-block;
     line-height: 50px;
     font-size: 20px;
     color: #b0b0b0;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    text-align: center;
   }
 
   .identity-icon {
     display: inline-block;
     width: 40px;
     height: 40px;
+    margin-right: 5px;
     background-size: 100% 100%;
   }
 
@@ -818,14 +833,12 @@ export default {
   .author-section {
     display: flex;
     flex-direction: column;
-    justify-content: space-between;
-    margin-top: 40px;
+    margin-top: 46px;
   }
 
   .author-fans {
     display: flex;
     justify-content: space-between;
-    padding-top: 4px;
     margin-left: 48px;
     margin-right: 48px;
 
@@ -843,10 +856,10 @@ export default {
       }
 
       .num {
-        min-width: 50px;
+        min-width: 30px;
         font-size: 40px;
         font-weight: 500;
-        padding: 0 20px 6px 20px;
+        padding: 0 0 6px 10px;
         display: block;
         text-align: center;
         color: #222;
@@ -863,11 +876,13 @@ export default {
         text-align: center;
         word-break: keep-all;
         white-space: nowrap;
+        padding: 0 0 0 10px;
       }
     }
   }
 
   .operate-wrap {
+    position: relative;
     width: 400px;
     margin-top: -35px;
     margin-bottom: 20px;

@@ -182,7 +182,7 @@ export default {
     updateAuthorStates(state, {
       authorUid,
       authorType,
-      hasAttention: follow ? 'Y' : 'N'
+      hasAttention: follow === 'N' ? 'N' : 'Y'
     });
 
     if (articlefield(type)) {