fix:小屏尺寸下的部分问题修复

Author: zhusha

src/assets/css/furniture/pc/index.less

@@ -242,6 +242,7 @@
 
                 .m-furniture-set {
                     .w(calc(calc(100% - 140px) / 8));
+                    min-width: 120px;
                 }
 
                 .u-img {
@@ -257,6 +258,34 @@
     }
 }
 
+@media screen and (max-width: @ipad) {
+    .p-furniture {
+        .m-furniture-wrap {
+            .u-set-item {
+                .u-furniture-list {
+                    .m-furniture-set {
+                        .w(calc(calc(100% - 100px) / 6));
+                    }
+                }
+            }
+        }
+    }
+}
+
+@media screen and (max-width: @ipad-y) {
+    .p-furniture {
+        .m-furniture-wrap {
+            .u-set-item {
+                .u-furniture-list {
+                    .m-furniture-set {
+                        .w(calc(calc(100% - 60px) / 4));
+                    }
+                }
+            }
+        }
+    }
+}
+
 @media screen and (max-width: @phone) {
     .p-furniture {
         margin-top: 0px;
@@ -287,11 +316,19 @@
                     padding: 5px;
                     flex-wrap: nowrap;
                     overflow-x: auto;
+
+                    .m-furniture-set {
+                        .w(140px);
+                        min-width: 140px;
+                        flex-shrink: 0;
+                    }
                 }
             }
         }
 
         .m-furniture-list {
+            grid-template-columns: repeat(2, 1fr) !important;
+
             .m-furniture-set {
                 width: 100%;
 
@@ -300,7 +337,6 @@
 
                     .u-image {
                         width: 100%;
-
                     }
                 }
             }

src/components/common/card_banner_list.vue

@@ -8,9 +8,8 @@
                 <slot name="action"> </slot>
             </div>
         </div>
-        <div class="m-card-banner-list_box" :count="count" :minw="minw" :isPhone="isPhone()">
-            <div class="m-cardlist-items" :style="`grid-template-columns: repeat( ${isPhone() ? 8 : count}, ${isPhone() ? minw + 'px' : '1fr'
-                }  )`">
+        <div class="m-card-banner-list_box" :count="count" :minw="minw">
+            <div class="m-cardlist-items" :style="`grid-template-columns: repeat(${count}, 1fr)`">
                 <div class="m-cardlist-item" v-for="(item, index) in list" :key="index">
                     <!-- 调用渲染函数来渲染子元素 -->
                     <slot :item="item" :index="index">
@@ -27,8 +26,6 @@
 </template>
 
 <script>
-import { isPhone } from "@/utils";
-
 export default {
     name: "CardBannerList",
     props: ["data", "count", "items", "minw"],
@@ -37,7 +34,6 @@ export default {
         return {
             fill: "#E1E1E1",
             number: 0,
-            isPhone,
         };
     },
     computed: {

src/service/adventure/treasure/index.js

@@ -43,6 +43,8 @@ export function getAdventures(params) {
 
 export function getAchievements() {
     return $node().get(`/serendipity/achievements`, {
-        client,
+        params: {
+            client,
+        },
     });
 }

src/views/adventure/AdventureList.vue

@@ -45,7 +45,6 @@ import CardBannerList from "@/components/common/card_banner_list.vue";
 import AdventureTabs from "@/components/adventure/tabs.vue";
 import AdventureItem from "@/components/adventure/item.vue";
 import { getAdventures } from "@/service/adventure/adventure";
-import { isPhone } from "@/utils/index";
 import dayjs from "@/utils/day";
 export default {
     name: "adventureList",
@@ -168,13 +167,21 @@ export default {
             this.showCount();
         },
         showCount() {
-            if (isPhone()) {
-                this.per = 8;
-                return;
-            }
             const listWidth = this.$refs.listRef?.clientWidth || 1200;
             const cardWidth = Number(this.itemData.width);
             const gridGap = 12;
+
+            if (listWidth <= 520) {
+                this.count = 1;
+                this.per = 8;
+                return;
+            }
+            if (listWidth <= 1024) {
+                this.count = 2;
+                this.per = 16;
+                return;
+            }
+
             if (this.active === "all") {
                 const availableWidth = listWidth - 120;
                 this.count = Math.max(Math.floor(availableWidth / (cardWidth + gridGap)), 1);

src/views/adventure/treasure/miniprogram/Portrait.vue

@@ -164,6 +164,7 @@ export default {
         }
     },
     mounted() {
+        if (!this.isLogin) return;
         getUserRoles().then((res) => {
             if (res.data.data.list.length) {
                 this.noRole = false;
@@ -176,7 +177,11 @@ export default {
                 }
             } else {
                 this.noRole = true;
-                this.$message.error("未获取到角色信息");
+                try {
+                    this.$message.error("未获取到角色信息");
+                } catch (e) {
+                    console.log(e);
+                }
             }
         });
     },