feat:【ele】【mall】diy-editor 的 tab-bar 使用 tailwindcss 简化 style
This commit is contained in:
@@ -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>
|
|
||||||
|
|||||||
Reference in New Issue
Block a user