优化多个组件的样式,调整卡片布局和间距,更新网格列数以适应不同屏幕尺寸

This commit is contained in:
jxxghp
2025-05-21 20:26:48 +08:00
parent 74eeae900e
commit 8f93b49dde
13 changed files with 76 additions and 98 deletions

View File

@@ -112,7 +112,7 @@ async function fetchData({ done }: { done: any }) {
<template>
<LoadingBanner v-if="!isRefreshed" class="mt-12" />
<VInfiniteScroll mode="intersect" side="end" :items="dataList" class="overflow-visible pt-3" @load="fetchData">
<VInfiniteScroll mode="intersect" side="end" :items="dataList" class="overflow-visible pt-3 px-2" @load="fetchData">
<template #loading />
<template #empty />
<div v-if="dataList.length > 0" class="grid gap-4 grid-media-card" tabindex="0">

View File

@@ -609,7 +609,7 @@ useDynamicButton({
</template>
</VHeaderTab>
<VWindow v-model="activeTab" class="mt-5 disable-tab-transition" :touch="false">
<VWindow v-model="activeTab" class="mt-5 disable-tab-transition px-2" :touch="false">
<!-- 我的插件 -->
<VWindowItem value="installed">
<transition name="fade-slide" appear>

View File

@@ -111,7 +111,7 @@ useDynamicButton({
handle=".cursor-move"
item-key="id"
tag="div"
:component-data="{ 'class': 'grid gap-4 grid-site-card' }"
:component-data="{ 'class': 'grid gap-4 grid-site-card px-2' }"
>
<template #item="{ element }">
<SiteCard :site="element" :data="getUserData(element.domain)" @remove="fetchData" @update="fetchData" />

View File

@@ -173,7 +173,7 @@ useDynamicButton({
handle=".cursor-move"
item-key="id"
tag="div"
:component-data="{ class: 'grid gap-4 grid-subscribe-card' }"
:component-data="{ class: 'grid gap-4 grid-subscribe-card px-2' }"
>
<template #item="{ element }">
<SubscribeCard :key="element.id" :media="element" @remove="fetchData" @save="fetchData" />

View File

@@ -111,7 +111,7 @@ async function fetchData({ done }: { done: any }) {
<template>
<LoadingBanner v-if="!isRefreshed" class="mt-12" />
<VInfiniteScroll mode="intersect" side="end" :items="dataList" class="overflow-visible" @load="fetchData">
<VInfiniteScroll mode="intersect" side="end" :items="dataList" class="overflow-visible px-2" @load="fetchData">
<template #loading />
<template #empty />
<div v-if="dataList.length > 0" class="grid gap-4 grid-media-card" tabindex="0">

View File

@@ -121,7 +121,7 @@ function removeData(id: number) {
<template>
<VPageContentTitle v-if="keyword" :title="`${t('common.search')}${keyword}`" />
<LoadingBanner v-if="!isRefreshed" class="mt-12" />
<VInfiniteScroll mode="intersect" side="end" :items="dataList" class="overflow-visible" @load="fetchData">
<VInfiniteScroll mode="intersect" side="end" :items="dataList" class="overflow-visible px-2" @load="fetchData">
<template #loading />
<template #empty />
<div v-if="dataList.length > 0" class="grid gap-4 grid-subscribe-card" tabindex="0">

View File

@@ -78,7 +78,7 @@ useDynamicButton({
<!-- 加载中提示 -->
<LoadingBanner v-if="!isRefreshed" class="mt-12" />
<!-- 用户卡片网格 -->
<div v-if="allUsers.length > 0 && isRefreshed" class="grid gap- grid-user-card">
<div v-if="allUsers.length > 0 && isRefreshed" class="grid gap-4 grid-user-card px-2">
<!-- 普通用户卡片 -->
<UserCard
v-for="user in allUsers"

View File

@@ -60,11 +60,9 @@ useDynamicButton({
<div>
<VPageContentTitle :title="t('workflow.title')" />
<LoadingBanner v-if="!isRefreshed" class="mt-12" />
<VRow v-if="workflowList.length > 0" class="match-height">
<VCol cols="12" md="6" lg="4" v-for="item in workflowList" :key="item.id">
<WorkflowTaskCard :workflow="item" @refresh="fetchData" />
</VCol>
</VRow>
<div v-if="workflowList.length > 0 && isRefreshed" class="grid gap-4 grid-workflow-card px-2">
<WorkflowTaskCard v-for="item in workflowList" :key="item.id" :workflow="item" @refresh="fetchData" />
</div>
<NoDataFound
v-if="workflowList.length === 0 && isRefreshed"
error-code="404"