@jx3box/jx3box-common-ui 6.2.6 → 6.2.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jx3box/jx3box-common-ui",
-  "version": "6.2.6",
+  "version": "6.2.8",
   "description": "JX3BOX UI",
   "main": "index.js",
   "scripts": {

package/src/App.vue

@@ -15,7 +15,7 @@
 
         <LeftSidebar :open="true">
             <LeftSideToggle :mobileOnly="true" />
-            <Author :author="author" :uid="28338" />
+            <Author :author="author" :uid="8" />
         </LeftSidebar>
 
         <Main :withoutLeft="false" :withoutRight="false">

package/src/author/AuthorFans.vue

@@ -20,35 +20,31 @@
             <span>粉丝榜</span>
         </div>
         <div class="f-avatar">
-            <el-row :gutter="10">
-                <el-col :span="4" v-for="(item, index) in list" :key="item.pay_user_id">
-                    <el-tooltip
-                        class="item"
-                        effect="dark"
-                        :content="'累计打赏' + item.money.toString() + '金箔'"
-                        placement="top"
-                        v-if="index < 5"
-                    >
-                        <a class="u-fan" :href="authorLink(item.pay_user_id)"><el-avatar class="u-avatar" shape="circle" :size="30" :src="showAvatar(item.pay_user.avatar)"
-                            ><i class="el-icon-s-custom"></i
-                        ></el-avatar></a>
-                    </el-tooltip>
-                </el-col>
-                <el-col :span="4" v-if="list.length > 5">
-                    <el-avatar class="u-avatar u-more" shape="circle" :size="30">
-                        <span class="f-avatar-num" v-if="list.length > 99">···</span>
-                        <span class="f-avatar-num" v-else>+{{ list.length - 5 }}</span>
-                    </el-avatar>
-                </el-col>
-            </el-row>
+            <el-tooltip
+                class="item"
+                effect="dark"
+                :content="'累计打赏' + item.money.toString() + '金箔'"
+                placement="top"
+                v-for="item in list"
+                :key="item.pay_user_id"
+            >
+                <a class="u-fan" :href="authorLink(item.pay_user_id)"
+                    ><el-avatar class="u-avatar" shape="circle" :size="26" :src="showAvatar(item.pay_user.avatar)"
+                        ><i class="el-icon-s-custom"></i></el-avatar
+                ></a>
+            </el-tooltip>
+            <el-avatar class="u-avatar u-more" shape="circle" :size="26" v-if="total > MAX_LENGTH">
+                <span class="f-avatar-num" v-if="total > 99">···</span>
+                <span class="f-avatar-num" v-else>+{{ total - MAX_LENGTH }}</span>
+            </el-avatar>
         </div>
-        <div class="f-bottom">本赛季共 {{ list.length }} 人为TA赠礼</div>
+        <div class="f-bottom">本赛季共 {{ total }} 人为TA赠礼</div>
     </div>
 </template>
 
 <script>
 import { getFansList } from "../../service/author";
-import { showAvatar,authorLink } from "@jx3box/jx3box-common/js/utils";
+import { showAvatar, authorLink } from "@jx3box/jx3box-common/js/utils";
 export default {
     name: "AuthorFans",
     props: {
@@ -61,12 +57,13 @@ export default {
         return {
             list: [],
             total: 0,
+            MAX_LENGTH : 5,
         };
     },
     methods: {
         getData() {
             getFansList(this.uid).then((res) => {
-                this.list = res.data.data.list || [];
+                this.list = res.data.data.list.slice(0,this.MAX_LENGTH) || [];
                 this.total = res.data.data.totalUser || 0;
             });
         },
@@ -166,6 +163,9 @@ export default {
             color: #888;
             font-weight: 700;
         }
+        .u-fan{
+            .mr(5px);
+        }
     }
     .f-bottom {
         .mt(10px);

package/src/author/AuthorFollow.vue

@@ -19,7 +19,7 @@
             placement="bottom"
             trigger="hover"
             popper-class="c-author-follow-popover"
-            :visible-arrow="false"
+            :visible-arrow="true"
         >
             <div class="u-action-list">
                 <div class="u-action-item" v-for="item in actions" :key="item.label" @click.stop="item.action">
@@ -58,7 +58,7 @@ export default {
             return this.isFollow ? "已关注" : "关注";
         },
         btnIcon() {
-            return this.isSelf ? "" : this.isFollow ? "" : "el-icon-plus";
+            return this.isSelf ? "el-icon-plus" : this.isFollow ? "" : "el-icon-plus";
         },
         btnType() {
             return this.isFollow ? "info" : "warning";
@@ -161,19 +161,25 @@ export default {
             background: #ecf5ff;
         }
     }
-    /*.u-trigger {
+
+    .u-fans-box {
+        cursor: not-allowed;
+        &:hover {
+            cursor: not-allowed;
+        }
+    }
+    .u-trigger {
         &:hover {
             cursor: default;
-            background: unset;
         }
-    }*/
+    }
 }
 .c-author-follow-popover {
     //.u-follow-popover {
         &.el-popover {
             min-width: 100px;
             padding: 0;
-            margin: 0;
+            margin-top: 5px;
             .u-action-list {
                 .u-action-item {
                     text-align: center;