feat: 平板和小屏幕适配

src/App.vue

@@ -38,7 +38,7 @@ const componentStore = useComponentStore()
           </transition>
         </router-view>
       </el-main>
-      <el-footer class="mb-6 mt-12">
+      <el-footer class="md:mb-6 mt-12 c-xs:mb-12">
         <Floor />
       </el-footer>
     </el-container>

src/components/Home/Home.vue

@@ -26,11 +26,11 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="mr-6">
+  <div class="md:mr-6 c-xs:mr-0">
     <!-- collect -->
     <div id="collect">
       <!-- cate title -->
-      <div class="mt-8 mb-8 text-xl font-bold text-[--base-black]">
+      <div class="md:mt-8 md:mb-8 c-xs:mt-1 c-xs:mb-4 text-xl font-bold text-[--base-black]">
         我的收藏
       </div>
       <!-- card -->
@@ -67,7 +67,7 @@ onMounted(() => {
         {{ cate.title }}
       </div>
       <!-- card -->
-      <div class="flex justify-between flex-wrap self-card-div c-xs:ml-3" :gutter="10">
+      <div class="flex justify-between flex-wrap self-card-div c-xs:ml-0" :gutter="10">
           <router-link v-for="(item, index) in cate.list" :key="index" :to="item.url" class="flex flex-col mt-5 border-solid rounded-2xl border-gray w-[24%] p-2 bg-white hover:shadow-md c-xs:w-[99.5%] c-md:w-[24%] c-sm:w-[32%] p-5 hover:-translate-y-2 duration-300">
             <div class="flex items-center border-b pb-2">
               <el-image :src="item.logo" class="w-10 h-10 min-h-[2.5rem] min-w-[2.5rem] rounded-full"></el-image>

src/components/Layout/Header/Header.vue

@@ -96,7 +96,7 @@ onMounted(() => {
         </svg>
       </Transition>
     
-      <div class="w-80">
+      <div class="md:w-80 c-xs:72">
         <!-- <el-input 
           v-model="searchParam.title" 
           placeholder="搜索工具" 
@@ -117,7 +117,7 @@ onMounted(() => {
           placeholder="输入关键词搜索，如文本、json、图片等"
           :remote-method="searchTools"
           :loading="loading"
-          class="ml-3 w-80"
+          class="ml-3 mr-3 md:w-80 c-xs:w-60"
         >
           <el-option
             v-for="item in toolsStore.list"
@@ -131,8 +131,8 @@ onMounted(() => {
       </div>
     </div>
 
-    <div class=" w-full md:w-auto flex c-xs:hidden md:block">
-      <ul class="flex mt-4 flex-col md:flex-row md:mt-0 justify-end items-center">
+    <div class=" w-full md:w-auto flex md:block c-xs:w-auto">
+      <ul class="flex mt-4 flex-col md:flex-row md:mt-0 justify-end items-center c-xs:mt-0">
         <li class="hover:text-blue-500">
           <el-button link size="large" @click="collect">收藏本站</el-button>
         </li>