feat:【ele】【mall】diy-editor 的 tab-bar 使用 tailwindcss 简化 style

This commit is contained in:
YunaiV
2025-11-03 08:46:26 +08:00
parent ff28f089d4
commit b6920f332a

View File

@@ -28,10 +28,16 @@ defineProps<{ property: TabBarProperty }>();
:key="index" :key="index"
class="tab-bar-item flex w-full flex-col items-center justify-center text-xs" class="tab-bar-item flex w-full flex-col items-center justify-center text-xs"
> >
<ElImage :src="index === 0 ? item.activeIconUrl : item.iconUrl"> <ElImage
:src="index === 0 ? item.activeIconUrl : item.iconUrl"
class="h-[26px] w-[26px] rounded"
>
<template #error> <template #error>
<div class="flex h-full w-full items-center justify-center"> <div class="flex h-full w-full items-center justify-center">
<IconifyIcon icon="ep:picture" /> <IconifyIcon
icon="ep:picture"
class="h-[26px] w-[26px] rounded"
/>
</div> </div>
</template> </template>
</ElImage> </ElImage>
@@ -47,13 +53,3 @@ defineProps<{ property: TabBarProperty }>();
</div> </div>
</div> </div>
</template> </template>
<style lang="scss" scoped>
.tab-bar-item {
:deep(img),
.el-icon {
width: 26px;
height: 26px;
border-radius: 4px;
}
}
</style>