fix: 修改部分样式;优化列表补空函数

src/utils/index.js

@@ -1,17 +1,25 @@
 // 是否是移动端
 export const isMobile = () => {
-  let flag =
-    /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
-      navigator.userAgent
-    );
-  return flag;
+  let flag = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
+    navigator.userAgent
+  )
+  return flag
 }
 
 // 获取末尾补齐数
-export const getFillNums = (selectorName,list, width) => {
-  const target = document.querySelector(selectorName);
-  const clientWidth = target.clientWidth;
-  // 每行最多有几个
-  const rowMaxNum = Math.floor(clientWidth / width) 
-  return list.length % rowMaxNum === 0 ? 0 : rowMaxNum - (list.length % rowMaxNum)
-}
+export const getFillNums = (selectorName, list, width) => {
+  return new Promise((resolve) => {
+    const target = document.querySelector(selectorName)
+    if(!target) {
+      // 如果节点还没有挂载，100ms后再尝试
+      setTimeout(()=>{
+        return getFillNums(selectorName, list, width)
+      },100)
+    }else {
+      const clientWidth = target.clientWidth
+      // 每行最多有几个
+      const rowMaxNum = Math.floor(clientWidth / width)
+      resolve (list.length % rowMaxNum === 0 ? 0 : rowMaxNum - (list.length % rowMaxNum))
+    }
+  })
+}

src/views/DetailView.vue

@@ -4,15 +4,15 @@
       <div
         class="w-full h-full bg-[url('/src/assets/images/detail_top_bg.png')] bg-no-repeat bg-center bg-cover absolute left-0 top-0 z-0"
       ></div>
-      <div class="relative z-1 p-4 w-full md:w-[780px] m-auto">
+      <div class="relative z-1 p-4 w-full md:w-[780px] ">
         <div
           class="font-['PingFang-Heavy'] px-3 font-semibold text-xl md:text-[32px] md:leading-tight"
         >
           工具数字化展示
         </div>
-        <div class="flex mt-6">
+        <div class="flex mt-6 flex-wrap">
           <div
-            class="ml-3"
+            class="ml-3 text-[14px] font-semibold"
             v-for="typeItem in typeOptions1Ref"
             :key="typeItem.id"
             @click="handleReturn(typeItem)"

src/views/HomeView.vue

@@ -149,7 +149,7 @@
 import { ref, computed } from 'vue'
 import useAppStore from '@/stores/app.js'
 import { getFillNums } from '@/utils'
-import { hotToolsList, menuList1, menuList2, menuList3 } from './mock'
+import { hotToolsList } from './mock'
 import { listTools } from '@/api/index.js'
 import { useRoute, useRouter } from 'vue-router'
 
@@ -164,7 +164,7 @@ const device = computed(() => {
 })
 // 搜索内容
 const searchValueRef = ref('')
-const totalPage = ref(10)
+const totalPage = ref(20)
 // 热门工具列表
 const hotToolsRef = ref(hotToolsList)
 
@@ -191,14 +191,14 @@ const onLoad = (value) => {
     toolsListRef.value = res.rows
     //  加载状态结束
     loadingRef.value = false
-    if (totalPage.value > res.total) {
+    if (totalPage.value >= res.total) {
       finished.value = true
     } else {
-      totalPage.value += 5
+      totalPage.value += 20
     }
-    setTimeout(() => {
-      noneCardNum.value = getFillNums('.tool-card-content', toolsListRef.value, 220)
-    }, 200)
+    getFillNums('.tool-card-content', toolsListRef.value, 220).then(nums=>{
+      noneCardNum.value = nums
+    })
   })
 }
 const init = () => {