smart-flow/yudao-ui-admin-vben
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
YunaiV
2025-11-03 08:42:47 +08:00
parent 19d30980d7
commit a33907d4ae
1 changed files with 9 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/tab-bar/index.vue
View File

@@ -11,9 +11,9 @@ defineOptions({ name: 'TabBar' });
defineProps<{ property: TabBarProperty }>(); defineProps<{ property: TabBarProperty }>();
</script> </script>
<template> <template>
<div class="tab-bar"> <div class="z-[2] w-full">
<div <div
class="tab-bar-bg" class="flex flex-row items-center justify-around py-2"
:style="{ :style="{
background: background:
property.style.bgType === 'color' property.style.bgType === 'color'
@@ -26,7 +26,7 @@ defineProps<{ property: TabBarProperty }>();
<div <div
v-for="(item, index) in property.items" v-for="(item, index) in property.items"
:key="index" :key="index"
class="tab-bar-item" 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">
<template #error> <template #error>
@@ -48,32 +48,12 @@ defineProps<{ property: TabBarProperty }>();
</div> </div>
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
.tab-bar { .tab-bar-item {
z-index: 2; :deep(img),
width: 100%; .el-icon {
width: 26px;
.tab-bar-bg { height: 26px;
display: flex; border-radius: 4px;
flex-direction: row;
align-items: center;
justify-content: space-around;
padding: 8px 0;
.tab-bar-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
font-size: 12px;
:deep(img),
.el-icon {
width: 26px;
height: 26px;
border-radius: 4px;
}
}
} }
} }
</style> </style>