feat: 适配

JX3BOX · Aug 22, 2023 · 9f16507 · 9f16507
1 parent a13dab5
commit 9f16507
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 63 deletions.
diff --git 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,40 +422,12 @@
     }
 }
 
-@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);
     padding: 20px 20px 30px 20px;
     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
@@ -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
@@ -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
@@ -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" />