完成适配移动端

pages/market/index.vue

@@ -1,20 +1,46 @@
 <template>
 
   <!-- 主体部分 -->
-  <div class="xl:w-screen-xl m-auto py-4 mt-20">
+  <div class="xl:w-screen-xl m-auto py-4 mt-12 px-4 sm:px-0 sm:mt-20">
     <el-page-header :icon="ArrowLeft" @back="goBack">
       <template #content>
-        <span class="text-large font-600 mr-3"> 插件市场 </span>
+        <div class="text-large font-600"> 插件市场 </div>
       </template>
       <template #extra>
-        <span class="text-gray-400">基于WebSoft开发的应用和插件！</span>
+        <div class="text-gray-300 hidden-sm-and-down">基于WebSoft开发的应用和插件！</div>
+        <el-space class="hidden-sm-and-up">
+          <el-input
+            v-model="where.keywords"
+            :placeholder="`搜索关键词`"
+            class="hidden-sm-and-down"
+            :suffix-icon="Search"
+            :style="{ width: inputWidth }"
+            @focus="handleFocus"
+            @blur="handleBlur"
+            @change="reload"
+          />
+          <el-button class="hidden-sm-and-up" :icon="Search" @click="showSearch = true"></el-button>
+          <el-dialog
+            v-model="showSearch"
+            fullscreen
+          >
+            <el-input
+              v-model="where.keywords"
+              :placeholder="`搜索关键词`"
+              size="large"
+              class="w-full my-5"
+              :suffix-icon="Search"
+              @change="reload"
+            />
+          </el-dialog>
+        </el-space>
       </template>
       <!-- 搜索工具栏 -->
       <SearchBar :where="where" id="search" />
 
       <!-- 应用列表 -->
       <el-row :gutter="24" id="container" class="clearfix">
-        <el-col v-for="(item,index) in list" :key="index" :span="8" class="left mb-8">
+        <el-col v-for="(item,index) in list" :key="index" :xs="24" :sm="8" class="left mb-8">
           <el-card shadow="hover" :body-style="{ padding: '0px' }" class="cursor-pointer" @mouseover="showDomain(item)"
                    @mouseleave="hideDomain">
             <nuxt-link :to="`/market/${item.websiteId}`">
@@ -59,6 +85,10 @@ const router = useRouter();
 const list = ref<CmsWebsite[]>([]);
 const total = ref(0);
 const id = ref<number>();
+
+const inputWidth = ref<string>('180px');
+const showSearch = ref<boolean>(false);
+
 const loading = ref<boolean>(false)
 const where = ref<CmsWebsiteParam>({
 
@@ -75,6 +105,13 @@ const hideDomain = () => {
   id.value = 0;
 };
 
+const handleFocus = () => {
+  inputWidth.value = '400px'; // 聚焦时宽度
+}
+const handleBlur = () => {
+  inputWidth.value = '180px'; // 聚焦时宽度
+}
+
 // 加载页面数据
 const reload = async (where: any) => {
   if (loading.value) return;
@@ -97,7 +134,7 @@ const reload = async (where: any) => {
   }).catch(() => {
     loading.value = false;
   }).finally(() => {
-    console.log('index>>>>')
+    showSearch.value = false
   })
 }