From 9f16507c6940c2375403abba7a8046beedeb926a Mon Sep 17 00:00:00 2001
From: litthy <litthy@qq.com>
Date: Tue, 22 Aug 2023 16:57:32 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=80=82=E9=85=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/css/face/single.less       | 67 +++------------------------
 src/assets/css/face/single_phone.less | 56 ++++++++++++++++++++++
 src/views/body/Single.vue             |  4 +-
 src/views/face/Single.vue             |  2 +-
 4 files changed, 66 insertions(+), 63 deletions(-)
 create mode 100644 src/assets/css/face/single_phone.less

diff --git a/src/assets/css/face/single.less b/src/assets/css/face/single.less
index 6bff75637..1f95fcd5b 100644
--- a/src/assets/css/face/single.less
+++ b/src/assets/css/face/single.less
@@ -5,7 +5,6 @@
 }
 
 .m-navigation {
-    // .mb(20px);
     display: flex;
     justify-content: space-between;
     position: sticky;
@@ -57,11 +56,7 @@
         }
     }
 }
-@media screen and (max-width: @phone) {
-    .m-navigation .u-op {
-        .none;
-    }
-}
+
 .m-banner {
     .mt(20px);
     background-color: @color;
@@ -83,10 +78,6 @@
     .flex;
     align-items: center;
     gap: 20px;
-    @media screen and (max-width: @phone) {
-        .pt(60px);
-    }
-
     .m-avatar {
         .size(128px);
         .flex;
@@ -109,7 +100,7 @@
         letter-spacing: 1px;
     }
     .m-header-info {
-        width: 100%;
+        width: calc(100% - 148px);
         color: #000;
     }
     h2 {
@@ -343,23 +334,6 @@
     }
 }
 
-@media screen and (max-width: @phone) {
-    .m-face-pay {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        .m-face-pay-info {
-            position: relative;
-            text-align: center;
-            top: unset;
-            left: unset;
-            transform: unset;
-            padding: 10px 5px;
-            border-radius: 10px;
-        }
-    }
-}
-
 .m-face-files-list {
     list-style: none;
     padding: 0;
@@ -402,14 +376,15 @@
         }
     }
 }
-.m-random-list {
+.m-random-list,
+.m-pvxbody-list {
     padding-bottom: 30px;
     .u-list {
         display: flex;
         gap: 20px;
-        flex-wrap: wrap;
     }
 }
+
 .m-face-pic {
     .h(100%);
     display: flex;
@@ -447,36 +422,6 @@
     }
 }
 
-@media screen and (max-width: @phone) {
-    .m-header {
-        h2 {
-            .fz(1rem);
-        }
-    }
-    .p-face-single .el-input-group__prepend {
-        .none;
-    }
-
-    .m-random-list {
-        .u-list {
-            justify-content: center;
-        }
-        .u-item {
-            border-radius: 4px;
-            text-align: center;
-            .w(130px);
-            background-color: @bg-light;
-            padding: 5px 5px 0 5px;
-            overflow: hidden;
-        }
-    }
-    .m-single-pics {
-        .u-bg {
-            height: calc(100% - 305px);
-        }
-    }
-}
-
 .m-desc {
     .r(10px);
     .lh(24px);
@@ -484,3 +429,5 @@
     background-color: #fff;
     color: #000;
 }
+
+@import "./single_phone.less";
diff --git a/src/assets/css/face/single_phone.less b/src/assets/css/face/single_phone.less
new file mode 100644
index 000000000..1615b7088
--- /dev/null
+++ b/src/assets/css/face/single_phone.less
@@ -0,0 +1,56 @@
+@media screen and (max-width: @ipad) {
+    .m-header,
+    .m-random-list .u-list {
+        flex-wrap: wrap;
+    }
+    .m-pvxbody-list .u-list {
+        overflow: auto;
+        .m-face-item,
+        .m-body-item {
+            flex-shrink: 0;
+        }
+    }
+    .m-face-content {
+        flex-wrap: wrap;
+        .m-face-pay {
+            .w(100%);
+        }
+    }
+}
+
+@media screen and (max-width: @phone) {
+    .m-header {
+        .pt(50px);
+        .m-avatar {
+            .none;
+        }
+        .m-header-info {
+            width: 100%;
+        }
+    }
+    .m-face-pay .m-face-pay-info {
+        margin: 40px auto;
+    }
+
+    .p-face-single .el-input-group__prepend {
+        .none;
+    }
+
+    .m-random-list {
+        .u-list {
+            justify-content: center;
+        }
+        .u-item {
+            border-radius: 4px;
+            text-align: center;
+            .w(130px);
+            background-color: @bg-light;
+            padding: 5px 5px 0 5px;
+            overflow: hidden;
+        }
+    }
+
+    .m-navigation .u-op {
+        .none;
+    }
+}
diff --git a/src/views/body/Single.vue b/src/views/body/Single.vue
index 5321f4b48..1184cce6d 100644
--- a/src/views/body/Single.vue
+++ b/src/views/body/Single.vue
@@ -180,7 +180,7 @@
             </div>
         </div>
         <!--搭配随机作品-->
-        <div class="m-random-list m-single-content-box" v-if="faceList.length">
+        <div class="m-pvxbody-list m-single-content-box" v-if="faceList.length">
             <el-divider content-position="left">体型搭配 & 其他脸型数据</el-divider>
             <div class="u-list">
                 <bodyItem :onlyPic="true" :item="pvxbody" />
@@ -595,7 +595,7 @@ export default {
 
 <style lang="less">
 @import "~@/assets/css/face/single.less";
-.m-random-list {
+.m-pvxbody-list {
     .m-body-item.onlyPic {
         .m-op {
             .pa;
diff --git a/src/views/face/Single.vue b/src/views/face/Single.vue
index b1a6efc4c..e7a7ae10c 100644
--- a/src/views/face/Single.vue
+++ b/src/views/face/Single.vue
@@ -185,7 +185,7 @@
             </div>
         </div>
         <!--搭配随机作品-->
-        <div class="m-random-list m-single-content-box" v-if="pvxbodyList.length">
+        <div class="m-pvxbody-list m-single-content-box" v-if="pvxbodyList.length">
             <el-divider content-position="left">脸型搭配 & 其他体型数据</el-divider>
             <div class="u-list">
                 <faceItem :item="face" />