fix: 捏脸样式修改

JX3BOX · Nov 2, 2023 · da3a8af · da3a8af
1 parent 4940e51
commit da3a8af
Show file tree

Hide file tree

Showing 6 changed files with 62 additions and 21 deletions.
diff --git a/src/assets/css/face/item.less b/src/assets/css/face/item.less
@@ -32,10 +32,20 @@
         .size(160px);
         .r(10px);
         .u-pic {
+            .pr;
             .full;
             .r(10px);
             object-fit: cover;
         }
+        .u-mask {
+            .pa;
+            .lt(0);
+            .size(100%);
+            content: "";
+            .r(10px);
+            background: linear-gradient(180deg, #000000 -72.19%, rgba(0, 0, 0, 0) 29.69%),
+            linear-gradient(0deg, #E1E1E100, #E1E1E100);
+        }
         .m-mark-left {
             .pa;
             .lt(10px);
@@ -66,9 +76,9 @@
             background-color: #ff7991;
         }
         .u-mark--type {
-            background-color: #53B27F;
+            background-color: #23ABE5;
             &.u-new-face {
-                background-color: #23ABE5;
+                background-color: #53B27F;
             }
         }
         .u-icon-star:before {

diff --git a/src/assets/css/face/list.less b/src/assets/css/face/list.less
@@ -12,6 +12,9 @@
             color: #a5a5a5;
             .fz(16px,21px);
         }
+        &.u-first-row{
+            .mt(20px);
+        }
     }
     .u-title {
         .fz(24px,1);

diff --git a/src/assets/css/face/single.less b/src/assets/css/face/single.less
@@ -204,6 +204,16 @@
         border: 1px solid #f39;
         color: #f39;
     }
+    .u-is-new-face {
+        &.u-old{
+            border: 1px solid #23ABE5;
+            color: #23ABE5;
+        }
+        &.u-new{
+            border: 1px solid #53B27F;
+            color: #53B27F;
+        }
+    }
     .u-fr {
         border: 1px solid #c00;
         color: #c00;
@@ -257,10 +267,10 @@
     gap: 20px;
 }
 .m-single-content-box {
-    background: #ffffff;
-    border-radius: 10px;
-    padding: 20px;
     box-sizing: border-box;
+    .m-face-item,.noName{
+        background: #fff !important;
+    }
 }
 
 .m-single-buy-box {
@@ -383,9 +393,6 @@
     .flex;
     .flex(tb);
     height: 500px;
-    div {
-        border: 1px solid transparent;
-    }
     .m-face-buy {
         .pr;
         .size(100%, 110px);
@@ -436,14 +443,22 @@
             .bold(700);
         }
     }
+    .u-face-desc-tab {
+        .fz(20px);
+        .bold(700);
+        .mt(20px);
+        span{
+            .mr(10px);
+        }
+    }
     .m-face-desc {
         flex: 1;
         box-sizing: border-box;
         padding: 20px;
         .w(100%);
         background-color: #ffffff;
         .r(10px);
-        margin-top: 20px;
+        .mt(10px);
         overflow-y: scroll;
         .u-label {
             display: block;
@@ -608,6 +623,11 @@
         }
     }
 }
+.u-about-author{
+    .fz(28px);
+    .bold(700);
+    .mt(10px);
+}
 .m-random-list,
 .m-pvxbody-list {
     overflow: auto;

diff --git a/src/components/face/item.vue b/src/components/face/item.vue
@@ -7,6 +7,7 @@
     >
         <div class="m-img">
             <img class="u-pic" :src="showThumb(imgLink)" loading="lazy" />
+            <div class="u-mask"></div>
             <div class="m-mark-left">
                 <template v-if="client === 'std'">
                     <i class="u-mark u-mark--type u-new-face" v-if="item.is_new_face">写实</i>

diff --git a/src/views/face/List.vue b/src/views/face/List.vue
@@ -43,7 +43,7 @@
                 @mouseenter="mouseenter($event)"
                 @mouseleave="mouseleave($event)"
             >
-                <div class="u-type" v-if="item.client.indexOf(client) != -1 && item.list.length > 0">
+                <div class="u-type" :class="index === 0 ? 'u-first-row':''"  v-if="item.client.indexOf(client) != -1 && item.list.length > 0">
                     <div class="u-title">{{ item.name }}</div>
                     <div class="u-all" @click="setActive(item.value)">查看全部</div>
                 </div>

diff --git a/src/views/face/Single.vue b/src/views/face/Single.vue
@@ -46,6 +46,7 @@
                     <i class="u-fr" v-if="!!post.is_fr">首发</i>
                     <i class="u-original" v-if="!!post.original">原创</i>
                     <i class="u-client" :class="post.client || 'std'">{{ showClientLabel(post.client) }}</i>
+                    <i class="u-is-new-face" v-if="post.client === 'std'" :class="post.is_new_face === 1 ? 'u-new' : 'u-old'">{{ newFaceMap[post.is_new_face] }}</i>
                     <i class="u-bodytype" :class="'u-bodytype-' + post.body_type" v-if="post.body_type">{{
                         showBodyTypeLabel(post.body_type)
                     }}</i>
@@ -109,17 +110,23 @@
                         {{ post.game_price }}通宝
                     </div>
                 </div>
-
+                <div class="u-face-desc-tab">
+                    <span
+                        @click="rightShow = 'desc'"
+                        :style="rightShow === 'data' ? 'color: #c2c5c7;' : ''"
+                    >说明</span>
+                    <span
+                        @click="rightShow = 'data'"
+                        v-if="downFileList && downFileList.length"
+                        :style="rightShow === 'desc' ? 'color: #c2c5c7;' : ''"
+                    >全部数据</span>
+                </div>
                 <div class="m-face-desc">
-                    <h3>说明</h3>
-                    <div class="u-desc">{{ post.remark || '暂无说明' }}</div>
-                    <br />
-                    <h3 v-if="downFileList && downFileList.length">全部数据</h3>
-                    <ul class="m-face-files-list" v-if="downFileList && downFileList.length">
+                    <div v-if="rightShow === 'desc'" class="u-desc">{{ post.remark || '暂无说明' }}</div>
+                    <ul class="m-face-files-list" v-if="rightShow === 'data' && downFileList && downFileList.length">
                         <li v-for="item in downFileList" :key="item.id">
                             <div>
                                 <span class="u-label">名称: <em>{{ item.name }}</em></span>
-                                <span class="u-label">版本 : <em>{{ item.created_at }}</em></span>
                                 <span class="u-label" v-if="item.describe">备注 ： <em>{{ item.describe }}</em></span>
                             </div>
                             <a class="u-action" href="" @click.prevent="getDownUrl(item.uuid, item.name)">下载</a>
@@ -213,13 +220,12 @@
 <!--        </div>-->
         <!--作者随机作品-->
 
-        <h3>关于作者</h3>
+        <div class="u-about-author">关于作者</div>
         <authorItem :uid="post.user_id" />
         <div class="m-random-list">
             <div class="u-list m-single-content-box" v-if="randomList.length">
                 <faceItem :item="item" :noName="true" v-for="item in randomList" :key="item.id" />
             </div>
-            <span class="u-list-null m-single-content-box" v-else>· 作者没有更多作品了 ·</span>
         </div>
         <!--搭配随机作品-->
         <!-- <div class="m-pvxbody-list">
@@ -307,10 +313,11 @@ export default {
             randomList: [],
             carouselActive: 0,
             isEditor: User.isEditor(),
-
+            rightShow: 'desc',
             topic_info: null,
             face: {},
             pvxbodyList: [],
+            newFaceMap: ['写意', '写实']
         };
     },
     computed: {
@@ -507,7 +514,7 @@ export default {
                         url: item.data.data?.url
                     }
                 })
-                downloadZip(downloadFiles, 'face.zip', 'url', 'name')
+                downloadZip(downloadFiles, `face_${this.id}.zip`, 'url', 'name')
             })
         },
         facePay() {