style: face

JX3BOX · Jan 2, 2024 · 45da03f · 45da03f
1 parent e235ed0
commit 45da03f
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 11 deletions.
diff --git a/package.json b/package.json
@@ -18,7 +18,7 @@
         "@jx3box/jx3box-data": "^3.5.6",
         "@jx3box/jx3box-editor": "^2.1.1",
         "@jx3box/jx3box-emotion": "^1.1.5",
-        "@jx3box/jx3box-facedat": "^2.5.6",
+        "@jx3box/jx3box-facedat": "^2.5.7",
         "@jx3box/jx3box-map": "^0.2.0",
         "animate.css": "^4.1.1",
         "axios": "^0.19.2",

diff --git a/src/assets/css/face/single.less b/src/assets/css/face/single.less
@@ -207,10 +207,12 @@
 
     .u-meta {
         .flex;
+        flex-wrap: wrap;
         gap: 6px;
         i {
             .fz(12px);
             .r(2px);
+            flex-shrink: 0;
             user-select: none;
             padding: 2px 6px;
             font-style: normal;

diff --git a/src/views/face/Single.vue b/src/views/face/Single.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="p-face-single" v-loading="loading">
+    <div class="p-face-single" v-loading="loading" ref="singleRef">
         <div class="m-navigation">
             <div class="u-goback" @click="goBack">返回列表</div>
 
@@ -11,12 +11,12 @@
                     </div>
                 </a>
                 <a href="/os/#/omp/pvx/facedata" target="_blank">
-<!--                <a v-if="isSinglePage && isEditor" href="/os/#/omp/pvx/facedata" target="_blank">-->
+                    <!--                <a v-if="isSinglePage && isEditor" href="/os/#/omp/pvx/facedata" target="_blank">-->
                     <div size="medium" class="u-manage"></div>
                 </a>
-<!--                <a v-else href="/os/#/omp/pvx/facedata" target="_blank">-->
-<!--                    <el-button size="medium" class="u-tips-off"></el-button>-->
-<!--                </a>-->
+                <!--                <a v-else href="/os/#/omp/pvx/facedata" target="_blank">-->
+                <!--                    <el-button size="medium" class="u-tips-off"></el-button>-->
+                <!--                </a>-->
             </div>
         </div>
         <public-notice bckey="face_ac"></public-notice>
@@ -132,7 +132,10 @@
                         >数据列表</span
                     >
                 </div>
-                <div class="m-face-desc" :class="{ 'no-desc': !post.remark && rightShow === 'desc', 'is-desc': rightShow === 'desc' }">
+                <div
+                    class="m-face-desc"
+                    :class="{ 'no-desc': !post.remark && rightShow === 'desc', 'is-desc': rightShow === 'desc' }"
+                >
                     <div v-if="rightShow === 'desc'" class="u-desc">
                         {{ post.remark }}
                     </div>
@@ -279,7 +282,7 @@ export default {
         id: function () {
             return ~~this.$route.params.id;
         },
-        isAdmin: function() {
+        isAdmin: function () {
             return User.isAdmin();
         },
         isAuthor: function () {
@@ -377,7 +380,7 @@ export default {
                         this.getAccessoryList();
                         //获取作者作品 和 系统推荐作品
                         this.getRandomFaceList();
-                        this.getRandomList();
+                        // this.getRandomList();
                         this.getSliders();
                     })
                     .catch((err) => {
@@ -404,7 +407,7 @@ export default {
                         this.downloadParams.total = data.page.total;
                     }
                     if (!this.post.remark && this.downFileList && this.downFileList.length) {
-                        this.rightShow = 'data'
+                        this.rightShow = "data";
                     }
                 })
                 .finally(() => {
@@ -551,7 +554,9 @@ export default {
         },
         getRandomFaceList() {
             const { user_id } = this.post;
-            getRandomFace({ user_id, limit: 8 }).then((res) => {
+            const listWidth = this.$refs.singleRef?.clientWidth - 120;
+            const limit = Math.floor(listWidth / 190);
+            getRandomFace({ user_id, limit }).then((res) => {
                 if (res.data.data.list && res.data.data.list.length > 0) {
                     this.randomList = res.data.data.list;
                 }