From 7456b9a35f3f8388c9fe1c344095ab444546bb47 Mon Sep 17 00:00:00 2001
From: osiris <taoran0796@163.com>
Date: Mon, 19 Feb 2024 15:03:16 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=B9=B3=E6=9D=BF=E5=92=8C=E5=B0=8F?=
 =?UTF-8?q?=E5=B1=8F=E5=B9=95=E9=80=82=E9=85=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                             | 2 +-
 src/components/Home/Home.vue            | 6 +++---
 src/components/Layout/Header/Header.vue | 8 ++++----
 tailwind.config.js                      | 2 +-
 4 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index cdfd1ac..5174da3 100644
--- a/src/App.vue
+++ b/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>
diff --git a/src/components/Home/Home.vue b/src/components/Home/Home.vue
index 622d015..8d0d322 100644
--- a/src/components/Home/Home.vue
+++ b/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>
diff --git a/src/components/Layout/Header/Header.vue b/src/components/Layout/Header/Header.vue
index 616e182..66f1ce3 100644
--- a/src/components/Layout/Header/Header.vue
+++ b/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>
diff --git a/tailwind.config.js b/tailwind.config.js
index 14e3198..58958ca 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -10,7 +10,7 @@ export default {
     screens: {
       // 自定义响应式尺寸
       'c-xs': {'max': '768px'},
-      'c-sm': {'min': '768px'},
+      'c-sm': {'min': '768px'}, //相当远默认的md
       'c-md': {'min': '992px'},
       'c-lg': {'min': '1200px'},
       ...defaultTheme.screens,