gxwebsoft/template-10490
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

完成适配移动端

Browse Source
This commit is contained in:
赵忠林
2025-03-01 10:52:11 +08:00
parent 1f79c93859
commit 8d19a58e9d
68 changed files with 2117 additions and 847 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
pages/market/[id].vue
View File

@@ -8,9 +8,14 @@
<template #extra>
<div class="h-[32px]"></div>
</template>
<!-- 应用介绍 -->
<PageBanner :form="page" @done="reload"/>
<!-- 评分插件 -->
<AppInfo :form="form" />
<!-- 应用截屏 -->
<div id="screen-item" class="screen-item my-6">
<el-descriptions title="截屏" class="mt-5" />
<el-scrollbar class="bg-white p-5">
@@ -35,7 +40,9 @@
<!-- 评分及评价 -->
<Comments :productId="form.companyId" :comments="comments" :count="commentsTotal" @done="doComments" />
<div class="h-[100px]"></div>
</el-page-header>
</div>
</template>

38
pages/market/components/AppInfo.vue
View File

@@ -1,22 +1,24 @@
<template>
<el-scrollbar style="height: 100%;" class="bg-white">
<div v-if="form" class="app-info bg-white px-5 py-5 flex justify-around items-center">
<div class="item text-center">
<div class="rate text-gray-400">评分</div>
<div class="text-2xl font-bold">3.1</div>
<el-rate v-model="form.rate" disabled size="small"/>
<div class="item text-center flex flex-col items-center">
<div class="text-gray-400">租户ID</div>
<el-icon class="py-1" size="24">
<Cpu/>
</el-icon>
<span class="text-gray-500">{{ form.tenantId }}</span>
</div>
<el-divider class="opacity-40" style="height: 40px" direction="vertical"/>
<div class="item text-center flex flex-col items-center">
<div class="text-gray-400">类别</div>
<div class="text-gray-400">插件类型</div>
<el-icon size="24" class="py-1">
<Monitor/>
</el-icon>
<span class="text-gray-500">{{ form.industryParent || '网站' }}</span>
</div>
<el-divider class="opacity-40" style="height: 40px" direction="vertical"/>
<nuxt-link :to="`https://${form.domain}`" class="item text-center flex flex-col items-center">
<div class="text-gray-400">域名</div>
<div class="item text-center flex flex-col items-center">
<div class="text-gray-400">访问域名</div>
<div>
<svg t="1739721752315" class="icon pt-2" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="11933" width="22" height="22">
@@ -27,22 +29,20 @@
p-id="11935"></path>
</svg>
</div>
<!-- <el-icon size="24" class="py-1"><Compass /></el-icon>-->
<span class="text-gray-500">{{ form.domain }}</span>
</nuxt-link>
<nuxt-link :to="`https://${form.adminUrl}`" class="text-gray-500">{{ form.adminUrl }}</nuxt-link>
</div>
<el-divider class="opacity-40" style="height: 40px" direction="vertical"/>
<nuxt-link :to="`/market/user/${form.userId}`" class="item text-center flex flex-col items-center">
<div class="text-gray-400">开发者</div>
<el-icon size="24" class="py-1">
<Avatar/>
</el-icon>
<span class="text-gray-500">{{ 'WebSoft Inc.' }}</span>
<span class="text-gray-500">{{ form.developer || '匿名' }}</span>
</nuxt-link>
<el-divider class="opacity-40" style="height: 40px" direction="vertical"/>
<nuxt-link :to="`http://git.gxwebsoft.com`" class="item text-center">
<div class="text-gray-400">仓库</div>
<nuxt-link :to="`https://git.websoft.top`" class="item text-center">
<div class="text-gray-400">源代码</div>
<div class="text-2xl font-bold">
<!-- <svg t="1739721615244" class="icon pt-2" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10773" width="22" height="22"><path d="M512 64c81.636 0 156.8 19.911 225.493 59.733s122.951 94.08 162.773 162.773S960 430.364 960 512s-19.911 156.8-59.733 225.493-94.08 122.951-162.773 162.773S593.636 960 512 960s-156.8-19.911-225.493-59.733-122.951-94.08-162.773-162.773S64 593.636 64 512s19.911-156.8 59.733-225.493 94.08-122.951 162.773-162.773S430.364 64 512 64z m119.467 812.373c57.742-17.92 108.516-48.782 152.32-92.587 43.804-43.805 75.164-94.578 94.08-152.32 18.916-57.742 23.396-117.476 13.44-179.2-9.956-61.724-32.853-117.476-68.693-167.253-35.84-49.778-81.138-88.604-135.893-116.48C631.964 140.658 573.724 126.72 512 126.72s-119.964 13.938-174.72 41.813-100.053 66.702-135.893 116.48-58.738 105.529-68.693 167.253c-9.956 61.724-5.476 121.458 13.44 179.2s50.276 108.516 94.08 152.32c43.804 43.804 94.578 74.667 152.32 92.587h2.987c5.973 0 10.951-1.493 14.933-4.48 3.982-2.987 5.973-7.467 5.973-13.44v-65.707l-20.907 2.987H377.6c-19.911 1.991-38.329-1.991-55.253-11.947S293.974 759.893 288 741.973l-17.92-32.853-11.947-11.947-23.893-17.92c-3.982-3.982-5.973-6.969-5.973-8.96s0.996-3.982 2.987-5.973l14.933-2.987c5.973 0 11.947 1.493 17.92 4.48 5.973 2.987 11.947 5.476 17.92 7.467l11.947 14.933 11.947 11.947c7.964 13.938 17.422 24.889 28.373 32.853 10.951 7.964 23.893 11.449 38.827 10.453 14.933-0.996 29.369-4.48 43.307-10.453 1.991-9.956 4.978-19.413 8.96-28.373 3.982-8.96 8.96-16.427 14.933-22.4-25.884-1.991-49.778-7.467-71.68-16.427-21.902-8.96-40.818-21.404-56.747-37.333-15.929-15.929-26.88-34.844-32.853-56.747-7.964-25.884-11.947-52.764-11.947-80.64 0-17.92 3.484-35.84 10.453-53.76 6.969-17.92 16.427-33.849 28.373-47.787-1.991-7.964-3.484-15.431-4.48-22.4s-1.493-14.933-1.493-23.893 0.996-17.92 2.987-26.88c1.991-8.96 3.982-18.418 5.973-28.373h8.96c7.964 0 16.427 0.996 25.387 2.987s17.422 4.978 25.387 8.96l26.88 14.933 20.907 11.947c63.716-17.92 127.431-17.92 191.147 0l20.907-11.947 26.88-14.933c7.964-3.982 15.929-6.969 23.893-8.96 7.964-1.991 16.924-2.987 26.88-2.987h5.973c3.982 9.956 6.969 19.413 8.96 28.373 1.991 8.96 2.987 17.92 2.987 26.88 0 8.96-0.498 16.924-1.493 23.893s-2.489 14.436-4.48 22.4c11.947 13.938 21.404 29.867 28.373 47.787 6.969 17.92 10.453 35.84 10.453 53.76 0 27.876-3.982 54.756-11.947 80.64-5.973 21.902-16.924 40.818-32.853 56.747-15.929 15.929-35.342 28.373-58.24 37.333-22.898 8.96-47.289 14.436-73.173 16.427 9.956 7.964 16.924 18.418 20.907 31.36 3.982 12.942 5.973 26.382 5.973 40.32v104.533c0 5.973 1.991 10.453 5.973 13.44 3.982 2.987 7.964 4.48 11.947 4.48h5.972z" p-id="10774"></path></svg>-->
<svg t="1739720696276" class="icon pt-2" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="4176" width="22" height="22">
<path
@@ -50,15 +50,13 @@
p-id="4177"></path>
</svg>
</div>
<span class="text-gray-500">3.12 MB</span>
<span class="text-gray-500">下载</span>
</nuxt-link>
<el-divider class="opacity-40" style="height: 40px" direction="vertical"/>
<div class="item text-center flex flex-col items-center">
<div class="text-gray-400">插件ID</div>
<el-icon size="24" class="py-1">
<Cpu/>
</el-icon>
<span class="text-gray-500">{{ form.websiteId }}</span>
<div class="rate text-gray-400">评分</div>
<div class="text-2xl font-bold">3.5</div>
<el-rate v-model="form.rate" disabled size="small"/>
</div>
<!-- <el-divider class="opacity-40" style="height: 40px" direction="vertical" />-->
<!-- <div class="item text-center flex flex-col items-center">-->

49
pages/market/components/SearchBar.vue
View File

@@ -2,16 +2,22 @@
<div class="flex flex-col text-sm bg-white px-4 mt-5 pt-2 pb-2">
<div class="flex flex-col">
<el-space class="my-2">
<h4 class="text-sm w-[40px] text-gray-400 font-normal text-center">行业</h4>
<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-group>
</el-space>
<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>
<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-group>
@@ -29,19 +35,20 @@
</div>
</div>
<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>
<div class="mt-5 flex items-center text-sm">
<nuxt-link :to="`?`" @click="handleDefault">插件</nuxt-link>
<el-divider direction="vertical" />
<nuxt-link :to="`?`" @click="handleDefault">应用</nuxt-link>
<el-divider direction="vertical" />
<nuxt-link :to="`?`" @click="handleDefault">模板</nuxt-link>
<el-space class="ml-10">
<el-input v-model="keywords" :placeholder="`云官网`"
:suffix-icon="Search"
class="hidden-sm-and-down"
style="width: 220px" @change="handleKeywords"/>
<el-button class="hidden-sm-and-down" @click="clearWhere">重置</el-button>
</el-space>
</div>
</el-scrollbar>
</template>
@@ -62,9 +69,11 @@ const keywords = ref<string | undefined>()
const selectIndustry = ref<string>();
const selectType = ref<string>();
const selectColor = ref<string>();
// 终端
const appType = ref<any[]>()
// 行业
const industry = ref<string>()
// 类型
// 网站类型
const websiteType = ref<any[]>([])
// 色系
const colors = ref<any[]>()

8
pages/market/index.vue
View File

@@ -58,8 +58,8 @@
</div>
</div>
</div>
<div class="item-image pt-3">
<el-image v-if="item.files" :src="`${JSON.parse(item.files)[0]}`" class="w-full h-1/2 max-h-[220px]"/>
<div class="item-image pt-3 overflow-hidden">
<el-image v-if="item.files" :src="`${JSON.parse(item.files)[0]}`" class="w-full h-1/2 max-h-[220px] transition-transform duration-300 ease-in-out hover:scale-110"/>
<el-image v-else class="w-full h-[220px]"/>
</div>
</div>
@@ -119,6 +119,9 @@ const reload = async (where: any) => {
pageCmsWebsiteAll({
...where,
market: true,
official: false,
order: 'desc',
sort: 'buys',
limit: where.limit || 12
}).then(response => {
if (response?.list) {
@@ -151,6 +154,7 @@ const search = (data: CmsWebsiteParam) => {
limit: 12
}
})
// 回到页面顶部
window.scrollTo(0, 0)
}