fix: item #108

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

Hide file tree

Showing 6 changed files with 169 additions and 206 deletions.
diff --git a/src/assets/css/body/list.less b/src/assets/css/body/list.less
@@ -36,6 +36,7 @@
         .mt(20px);
     }
 }
+
 .cross-wrapper .cross {
     .z(9);
     background-color: rgba(0, 0, 0, 0.7);

diff --git a/src/assets/css/face/item.less b/src/assets/css/face/item.less
@@ -0,0 +1,120 @@
+.m-face-item {
+    .pr;
+    .flex;
+    .pointer;
+    .r(10px);
+    .size(200px,264px);
+    flex-direction: column;
+    gap: 10px;
+    padding: 20px;
+    box-sizing: border-box;
+    background: rgba(36, 41, 46, 0.05);
+    &.noName {
+        .h(234px);
+        .m-op .m-author {
+            .none;
+        }
+    }
+    &:hover {
+        background-color: #786cbb;
+        filter: brightness(110%);
+        .m-op {
+            .u-title {
+                color: #fff;
+            }
+            .m-author .u-name {
+                color: #fff;
+                text-decoration: underline;
+            }
+        }
+    }
+
+    .m-img {
+        .pr;
+        .size(160px);
+        .r(10px);
+        .u-pic {
+            .full;
+            .r(10px);
+            object-fit: cover;
+        }
+        .u-mark {
+            .pa;
+            .fz(12px,16px);
+            .z(6);
+            .r(3px);
+            color: #fff;
+            padding: 2px 8px;
+            font-style: normal;
+        }
+        .u-mark--star {
+            .lt(10px);
+            background-color: @faceColor;
+        }
+
+        .u-mark--pay {
+            .rt(10px);
+            background-color: #ffad31;
+        }
+    }
+    .m-op {
+        .flex;
+        flex-direction: column;
+        gap: 10px;
+        .u-title {
+            .fz(18px,26px);
+            .break(1);
+            color: #000;
+        }
+        .m-author {
+            .flex;
+            .fz(12px,1.5);
+            .nobreak;
+            gap: 4px;
+            align-items: center;
+            .u-avatar {
+                .size(18px);
+                .r(50%);
+            }
+            .u-name {
+                .tm(0.6);
+                color: #000;
+            }
+        }
+    }
+    // body
+    &.m-body-item {
+        .size(200px,368px);
+        .m-img {
+            .size(160px,264px);
+        }
+        &.noName {
+            .h(340px);
+        }
+        &.onlyPic {
+            .size(160px,264px);
+            padding: 0;
+            .m-op {
+                .pa;
+                .z(2);
+                .lb(0);
+                padding: 20px 10px;
+                .u-title {
+                    color: #fff;
+                }
+                .m-author {
+                    .none;
+                }
+                &::after {
+                    content: "";
+                    .pa;
+                    .size(160px,264px);
+                    .lb(0);
+                    .z(-1);
+                    .r(10px);
+                    background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
+                }
+            }
+        }
+    }
+}
diff --git a/src/assets/css/face/single.less b/src/assets/css/face/single.less
@@ -434,5 +434,22 @@
     background-color: #fff;
     color: #000;
 }
-
+.p-face-single .m-pvxbody-list {
+    .m-face-item.m-body-item.onlyPic .m-op .m-author {
+        .flex;
+        .u-name {
+            opacity: 1;
+            color: #fff;
+        }
+    }
+    .m-face-item.m-body-item.onlyPic.noName .m-op .m-author {
+        .none;
+    }
+    .m-face-item {
+        .h(264px);
+        .m-op .u-title {
+            .break(2);
+        }
+    }
+}
 @import "./single_phone.less";
diff --git a/src/components/body/item.vue b/src/components/body/item.vue
@@ -1,6 +1,6 @@
 <template>
     <a
-        :class="['m-body-item', { onlyPic, noName }]"
+        :class="['m-body-item m-face-item', { onlyPic, noName }]"
         :href="`${link}/${item.id}`"
         target="_blank"
         v-reporter="{
@@ -11,27 +11,28 @@
             caller: 'body_index',
         }"
     >
-        <el-image class="u-pic" :src="item?.images[0]" fit="cover">
-            <div slot="error" class="image-slot">
-                <img class="u-pic" src="../../assets/img/body_null.png" />
-            </div>
-        </el-image>
+        <div class="m-img">
+            <el-image class="u-pic" :src="showThumb(imgLink)" fit="cover">
+                <div slot="error" class="image-slot">
+                    <img class="u-pic" src="../../assets/img/body_null.png" />
+                </div>
+            </el-image>
+            <i class="u-mark u-mark--star" v-if="!!item.star">编辑推荐</i>
+            <i class="u-mark u-mark--pay" v-if="!!~~item.price_type && !!item.price_count">付费</i>
+        </div>
 
-        <i class="u-mark u-mark--star" v-if="!!item.star">编辑推荐</i>
-        <i class="u-mark u-mark--pay" v-if="!!~~item.price_type && !!item.price_count">付费</i>
         <div class="m-op">
             <div class="u-title">{{ item.title }}</div>
-
-            <a class="u-author" v-if="item.user_id" :href="authorLink(item.user_id)" @click.stop="onAuthorClick">
-                作者: {{ item.author_name || "匿名" }}
-            </a>
-            <span class="u-author" v-else> 作者: {{ item.author_name || "匿名" }}</span>
+            <div class="m-author" @click.stop="onAuthorClick">
+                <img class="u-avatar" :src="showAvatar(item.user_avatar)" :alt="author" />
+                <span class="u-name"> {{ item.author_name || "匿名" }} </span>
+            </div>
         </div>
     </a>
 </template>
 
 <script>
-import { authorLink, getThumbnail } from "@jx3box/jx3box-common/js/utils";
+import { showAvatar, getThumbnail } from "@jx3box/jx3box-common/js/utils";
 export default {
     name: "item",
     props: ["item", "reporter", "onlyPic", "noName"],
@@ -48,7 +49,9 @@ export default {
         author: function () {
             return this.item.display_name || "匿名";
         },
-
+        imgLink: function () {
+            return this.item.images?.[0];
+        },
         link() {
             return location.origin + "/body";
         },
@@ -57,7 +60,7 @@ export default {
         showThumb: function (url) {
             return getThumbnail(url, 360);
         },
-        authorLink,
+        showAvatar,
         onAuthorClick() {
             if (!this.item.original) {
                 window.open(this.item.author_link, "_blank");
@@ -68,115 +71,5 @@ export default {
 </script>
 
 <style lang="less">
-.m-body-item {
-    .flex;
-    .pr;
-    .pointer;
-    .size(200px,374px);
-    .r(10px);
-    padding: 20px;
-    gap: 10px;
-    box-sizing: border-box;
-    flex-direction: column;
-    background: rgba(36, 41, 46, 0.05);
-
-    &.onlyPic {
-        .size(160px,264px);
-        padding: 0;
-
-        .u-pic {
-            .full;
-        }
-
-        .u-mark--star {
-            .lt(10px);
-        }
-        .u-mark--pay {
-            .rt(10px);
-        }
-        .m-op {
-            .pa;
-            .flex;
-            .lb(0);
-            .full;
-            .z(2);
-            padding: 20px;
-            box-sizing: border-box;
-            flex-direction: column;
-            justify-content: flex-end;
-
-            &::after {
-                content: "";
-                .db;
-                .pa;
-                .full;
-                .tm(0.5);
-                .lt(0);
-                .z(-1);
-                .r(10px);
-                background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
-            }
-            .u-title {
-                .break(2);
-                color: #fff;
-            }
-            .u-author {
-                .none;
-            }
-        }
-    }
-    &.noName {
-        .m-op {
-            .u-title {
-                .break(2);
-            }
-            .u-author {
-                .none;
-            }
-        }
-    }
-
-    &:hover {
-        filter: brightness(110%);
-    }
-
-    .u-pic {
-        .size(160px,264px);
-        .r(10px);
-    }
-
-    .u-mark {
-        .pa;
-        .fz(12px,16px);
-        .z(6);
-        .r(5px);
-        color: #fff;
-        padding: 2px 8px;
-        font-style: normal;
-    }
-    .u-mark--star {
-        .lt(30px);
-        background-color: @faceColor;
-    }
-    .u-mark--pay {
-        .rt(30px);
-        background-color: #ffad31;
-    }
-
-    .m-op {
-        .flex;
-        flex-direction: column;
-        gap: 10px;
-        .u-title {
-            .fz(20px,26px);
-            .break(1);
-            color: rgb(36, 41, 46);
-        }
-        .u-author {
-            .fz(14px,1.5);
-            .nobreak;
-            color: rgb(36, 41, 46);
-        }
-    }
-}
+@import "~@/assets/css/face/item.less";
 </style>