fix: single #108

JX3BOX · Aug 28, 2023 · 61dd97a · 61dd97a
1 parent 75cfa54
commit 61dd97a
Show file tree

Hide file tree

Showing 4 changed files with 99 additions and 27 deletions.
diff --git a/src/assets/css/face/single.less b/src/assets/css/face/single.less
@@ -79,11 +79,8 @@
     align-items: center;
     gap: 20px;
     .m-avatar {
-        .size(128px);
-        .flex;
-        align-items: center;
-        justify-content: center;
-        flex-shrink: 0;
+        .size(160px);
+        .r(10px);
     }
     .m-topic {
         .pr;
@@ -100,6 +97,9 @@
         letter-spacing: 1px;
     }
     .m-header-info {
+        .flex;
+        flex-direction: column;
+        gap: 5px;
         width: calc(100% - 148px);
         color: #000;
     }
@@ -124,31 +124,35 @@
     .u-info {
         .fz(12px);
     }
-    .u-name {
-        margin-right: 6px;
-    }
 
     .u-time {
-        .mr(5px);
+        .tm(0.6);
     }
     .u-author {
-        padding: 5px 0;
+        .flex;
         .mr(15px);
+        .h(24px);
+        gap: 5px;
         align-items: center;
+        padding: 5px 0;
         a {
-            color: @color-link;
+            color: #000;
+            .tm(0.6);
             &:hover {
-                border-bottom: 1px solid #0366d6;
+                border-bottom: 1px solid rgba(0, 0, 0, 0.6);
             }
         }
         i {
             .fz(16px);
-            .mr(5px);
         }
         .u-edit-icon {
             .fz(12px);
             .mr(0);
         }
+        .u-avatar {
+            .size(18px);
+            .r(50%);
+        }
     }
 
     .u-desc {
@@ -166,7 +170,6 @@
     }
 
     .u-meta {
-        .mt(5px);
         i {
             padding: 2px 6px;
             .mr(6px);

diff --git a/src/components/face/author.vue b/src/components/face/author.vue
@@ -0,0 +1,77 @@
+<template>
+    <div class="m-author-header" :style="{ backgroundImage: `url(${userDefinedStyle.banner})` }">
+        <div class="u-header-info">
+            <Avatar class="u-author-avatar" :uid="uid" :url="avatar" :size="avatarSize" :frame="avatar_frame" />
+            <div class="u-author-info">
+                <span class="u-name" :style="userDefinedStyle.userName">
+                    <span @click="copyData(data.display_name || '匿名')">{{ data.display_name || "匿名" }}</span
+                    >&nbsp;<span class="u-uid" @click="copyData(data.ID || 0)">(UID : {{ data.ID || 0 }})</span>
+                </span>
+                <div class="u-tips">
+                    <el-tooltip :content="`当前经验 ${data.experience || 0}`" placement="top">
+                        <span class="u-level" :class="'lv-' + level" :style="{ backgroundColor: showLevelColor(level) }"
+                            >Lv.{{ level }}</span
+                        >
+                    </el-tooltip>
+                    <el-tooltip :content="vipTypeTitle" v-if="isPRO || isVIP" placement="top">
+                        <a class="u-vip" href="/vip/premium?from=user_homepage" target="_blank">
+                            <i class="u-icon vip">{{ vipType }}</i>
+                        </a>
+                    </el-tooltip>
+                    <el-tooltip content="签约作者" v-if="isSuperAuthor" placement="top">
+                        <span class="u-superauthor">
+                            <i class="u-icon superauthor">签约作者</i>
+                        </span>
+                    </el-tooltip>
+                </div>
+
+                <Honor :uid="uid"></Honor>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import Honor from "@jx3box/jx3box-common-ui/src/author/AuthorHonor.vue";
+export default {
+    name: "Me",
+    components: { Honor },
+    props: {
+        decorationMe: {
+            type: Object,
+            default: function () {
+                return {};
+            },
+        },
+    },
+    watch: {
+        decorationMe: {
+            handler(val) {
+                this.setDecorationStyle();
+            },
+            immediate: true,
+            deep: true,
+        },
+    },
+    data: function () {
+        return {};
+    },
+    computed: {
+        uid: function () {
+            return this.$store.state.uid;
+        },
+        data: function () {
+            return User.userdata;
+        },
+        avatar: function () {
+            return this.data.user_avatar || "";
+        },
+        avatar_frame: function () {
+            return this.data.user_avatar_frame || "";
+        },
+    },
+    filters: {},
+    methods: {},
+};
+</script>
+
+<style scoped lang="less"></style>
diff --git a/src/views/body/Single.vue b/src/views/body/Single.vue
@@ -182,7 +182,7 @@
         </div>
         <!--搭配随机作品-->
         <div class="m-pvxbody-list m-single-content-box">
-            <el-divider content-position="left">体型搭配 & 其他脸型数据</el-divider>
+            <el-divider content-position="left">搭配指南</el-divider>
             <div class="u-list" v-if="faceList.length">
                 <bodyItem :onlyPic="true" :item="pvxbody" />
                 <faceItem :item="item" :noName="true" v-for="item in faceList" :key="item.id" />

diff --git a/src/views/face/Single.vue b/src/views/face/Single.vue
@@ -42,20 +42,12 @@
         </div> -->
         <!-- 基本信息 -->
         <div class="m-header">
-            <div class="m-avatar">
-                <Avatar
-                    :uid="post.user_id"
-                    :url="post.user_avatar"
-                    :frame="post.user_avatar_frame"
-                    class="u-avatar"
-                    v-if="!!post.original"
-                />
-            </div>
+            <el-image class="m-avatar" :src="imgLink(post.images)" fit="cover"> </el-image>
 
             <div class="m-header-info">
                 <h2>{{ post.title || "无标题" }}</h2>
                 <div class="u-author">
-                    By
+                    <img class="u-avatar" :src="showAvatar(post.user_avatar)" :alt="post.user_avatar_frame" />
                     <a class="u-name" :href="authorLink(post.user_id)" target="_blank" v-if="!!post.original">{{
                         post.display_name
                     }}</a>
@@ -187,7 +179,7 @@
         </div>
         <!--搭配随机作品-->
         <div class="m-pvxbody-list m-single-content-box">
-            <el-divider content-position="left">脸型搭配 & 其他体型数据</el-divider>
+            <el-divider content-position="left">搭配指南</el-divider>
             <div class="u-list" v-if="pvxbodyList.length">
                 <faceItem :item="face" />
                 <bodyItem :item="item" :onlyPic="true" :noName="true" v-for="item in pvxbodyList" :key="item.id" />
@@ -311,7 +303,7 @@ export default {
         },
     },
     created: function () {
-        this.getData();
+        this.getData(); 
     },
     methods: {
         imgLink: function (images) {