完成适配移动端

This commit is contained in:
2025-02-22 22:11:19 +08:00
parent 98758e89e2
commit 1f79c93859
62 changed files with 549 additions and 2973 deletions

View File

@@ -4,39 +4,45 @@
<el-space class="my-2">
<h4 class="text-sm w-[40px] text-gray-400 font-normal text-center">行业</h4>
<div class="flex-wrap">
<el-radio-group v-model="selectIndustry" @change="onIndustry">
<el-radio-button v-for="(item,index) in IndustryData" :key="index" :label="item.label" :value="item.value" />
</el-radio-group>
<el-radio-group v-model="selectIndustry" @change="onIndustry">
<el-radio-button v-for="(item,index) in IndustryData" :key="index" :label="item.label"
:value="item.value"/>
</el-radio-group>
</div>
</el-space>
<el-space class="my-2">
<h4 class="text-sm w-[40px] text-gray-400 font-normal text-center">类型</h4>
<el-radio-group v-model="selectType" @change="onType">
<el-radio-button v-for="(item,index) in websiteType" :key="index" :label="item.label" :value="item.value" />
<el-radio-button v-for="(item,index) in websiteType" :key="index" :label="item.label" :value="item.value"/>
</el-radio-group>
</el-space>
<el-space class="my-2" :size="12">
<h4 class="text-sm w-[40px] text-gray-400 font-normal text-center">色系</h4>
<template v-for="(item,index) in colors" :key="index">
<nuxt-link :to="`?color=${item.label}`" @click="handleColor(item.label)">
<el-avatar v-if="selectColor == item.label" :size="28" :style="item.comments" class="border-solid border-1 border-gray-800 rounded-full"></el-avatar>
<el-avatar v-if="selectColor == item.label" :size="28" :style="item.comments"
class="border-solid border-1 border-gray-800 rounded-full"></el-avatar>
<el-avatar v-else :size="24" :style="item.comments"></el-avatar>
</nuxt-link>
</template>
</el-space>
</div>
</div>
<el-space class="gap-4 mt-5">
<el-button type="primary" @click="handleDefault">默认</el-button>
<el-button @click="handleLast">最新</el-button>
<el-button @click="handleHot"></el-button>
<el-button @click="handleFree">免费</el-button>
<el-button @click="handlePay"></el-button>
<el-button @click="handleOfficial">官方</el-button>
<el-input v-model="keywords" style="width: 400px" :placeholder="`云官网`"
:suffix-icon="Search" @change="handleKeywords"/>
<el-button @click="clearWhere">重置</el-button>
</el-space>
<el-scrollbar style="height: 100%;">
<el-space class="gap-4 mt-5">
<el-button type="primary" @click="handleDefault">默认</el-button>
<el-button @click="handleLast"></el-button>
<el-button @click="handleHot">最热</el-button>
<el-button @click="handleFree"></el-button>
<el-button @click="handlePay">付费</el-button>
<el-button @click="handleOfficial">官方</el-button>
<el-input v-model="keywords" :placeholder="`云官网`"
style="min-width: 220px"
class="hidden-sm-and-down"
:suffix-icon="Search" @change="handleKeywords"/>
<el-button class="hidden-sm-and-down" @click="clearWhere">重置</el-button>
</el-space>
</el-scrollbar>
</template>
<script setup lang="ts">
@@ -161,7 +167,7 @@ const reload = () => {
const onType = (text: string) => {
where.websiteType = text
if(text == '全部'){
if (text == '全部') {
where.websiteType = undefined
}
reload();
@@ -169,7 +175,7 @@ const onType = (text: string) => {
const onIndustry = (text: string) => {
where.industry = text
if(text == '全部'){
if (text == '全部') {
where.industry = undefined
}
reload();