完成适配移动端
This commit is contained in:
@@ -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();
|
||||
|
||||
Reference in New Issue
Block a user