将项目列表增加样式并优化减少dom嵌套
This commit is contained in:
Sun
parent
99d18df7f0
commit
6bab5a264f
@ -21,32 +21,32 @@ const iconExt = computed(() => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div :style="defaultStyle">
|
||||
<div class="item-icon" :style="defaultStyle">
|
||||
<slot>
|
||||
<div v-if="itemIcon">
|
||||
<div v-if="itemIcon?.itemType === 1">
|
||||
<template v-if="itemIcon">
|
||||
<template v-if="itemIcon?.itemType === 1">
|
||||
<NAvatar :size="props.size" :style="{ backgroundColor: (forceBackground ?? itemIcon?.backgroundColor) || defaultBackground }">
|
||||
{{ itemIcon.text }}
|
||||
</NAvatar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div v-else-if="itemIcon?.itemType === 2">
|
||||
<template v-else-if="itemIcon?.itemType === 2">
|
||||
<div v-if="iconExt === 'svg'" :style="{ backgroundColor: (forceBackground ?? itemIcon?.backgroundColor) || defaultBackground, ...defaultStyle }" class="flex justify-center items-center">
|
||||
<img :src="itemIcon?.src" class="w-[35px] h-[35px]">
|
||||
</div>
|
||||
<NImage v-else :style="{ backgroundColor: (forceBackground ?? itemIcon?.backgroundColor) || defaultBackground, ...defaultStyle }" :src="itemIcon?.src" preview-disabled />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div v-else-if="itemIcon?.itemType === 3">
|
||||
<template v-else-if="itemIcon?.itemType === 3">
|
||||
<NAvatar :size="props.size" :style="{ backgroundColor: (forceBackground ?? itemIcon?.backgroundColor) || defaultBackground }">
|
||||
<SvgIconOnline style="font-size: 35px;" :icon="itemIcon.text" />
|
||||
</NAvatar>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<div v-else>
|
||||
<template v-else>
|
||||
<NAvatar :size="props.size" />
|
||||
</div>
|
||||
</template>
|
||||
</slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -35,15 +35,15 @@ const textColor = computed(() => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="w-full">
|
||||
<div class="app-icon w-full">
|
||||
<!-- 详情图标 -->
|
||||
<div
|
||||
v-if="style === PanelPanelConfigStyleEnum.info"
|
||||
class="w-full rounded-2xl transition-all duration-200 hover:shadow-[0_0_20px_10px_rgba(0,0,0,0.2)] flex"
|
||||
class="app-icon-info w-full rounded-2xl transition-all duration-200 hover:shadow-[0_0_20px_10px_rgba(0,0,0,0.2)] flex"
|
||||
:style="{ background: itemInfo?.icon?.backgroundColor || defaultBackground }"
|
||||
>
|
||||
<!-- 图标 -->
|
||||
<div class="w-[70px] h-[70px]">
|
||||
<div class="app-icon-info-icon w-[70px] h-[70px]">
|
||||
<div class="w-[70px] h-full flex items-center justify-center ">
|
||||
<ItemIcon :item-icon="itemInfo?.icon" force-background="transparent" :size="50" class="overflow-hidden rounded-xl" />
|
||||
</div>
|
||||
@ -52,13 +52,13 @@ const textColor = computed(() => {
|
||||
<!-- 文字 -->
|
||||
<!-- 如果为纯白色，将自动根据背景的明暗计算字体的黑白色 -->
|
||||
<div class="text-white flex items-center" :style="{ color: (iconTextColor === '#ffffff') ? textColor : iconTextColor, maxWidth: 'calc(100% - 80px)' }">
|
||||
<div class="w-full">
|
||||
<div class="font-semibold w-full">
|
||||
<div class="app-icon-info-text-box w-full">
|
||||
<div class="app-icon-info-text-box-title font-semibold w-full">
|
||||
<NEllipsis>
|
||||
{{ itemInfo?.title }}
|
||||
</NEllipsis>
|
||||
</div>
|
||||
<div v-if="!iconTextInfoHideDescription">
|
||||
<div v-if="!iconTextInfoHideDescription" class="app-icon-info-text-box-description">
|
||||
<NEllipsis :line-clamp="2" class="text-xs">
|
||||
{{ itemInfo?.description }}
|
||||
</NEllipsis>
|
||||
@ -67,17 +67,17 @@ const textColor = computed(() => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 极简图标（APP） -->
|
||||
<div v-if="style === PanelPanelConfigStyleEnum.icon">
|
||||
<!-- 极简(小)图标（APP） -->
|
||||
<div v-if="style === PanelPanelConfigStyleEnum.icon" class="app-icon-small">
|
||||
<div
|
||||
class="overflow-hidden rounded-2xl sunpanel w-[70px] h-[70px] mx-auto rounded-2xl transition-all duration-200 hover:shadow-[0_0_20px_10px_rgba(0,0,0,0.2)]"
|
||||
class="app-icon-small-icon overflow-hidden rounded-2xl sunpanel w-[70px] h-[70px] mx-auto rounded-2xl transition-all duration-200 hover:shadow-[0_0_20px_10px_rgba(0,0,0,0.2)]"
|
||||
:title="itemInfo?.description"
|
||||
>
|
||||
<ItemIcon :item-icon="itemInfo?.icon" />
|
||||
</div>
|
||||
<div
|
||||
v-if="!iconTextIconHideTitle"
|
||||
class="text-center app-icon-text-shadow cursor-pointer mt-[2px]"
|
||||
class="app-icon-small-title text-center app-icon-text-shadow cursor-pointer mt-[2px]"
|
||||
:style="{ color: iconTextColor }"
|
||||
>
|
||||
<span>{{ itemInfo?.title }}</span>
|
||||
|
||||
@ -380,19 +380,19 @@ function handleAddItem(itemIconGroupId?: number) {
|
||||
<!-- 组纵向排列 -->
|
||||
<div
|
||||
v-for="(itemGroup, itemGroupIndex) in filterItems" :key="itemGroupIndex"
|
||||
class="mt-[50px]"
|
||||
class="item-list mt-[50px]"
|
||||
:class="itemGroup.sortStatus ? 'shadow-2xl border shadow-[0_0_30px_10px_rgba(0,0,0,0.3)] p-[10px] rounded-2xl' : ''"
|
||||
@mouseenter="handleSetHoverStatus(itemGroupIndex, true)"
|
||||
@mouseleave="handleSetHoverStatus(itemGroupIndex, false)"
|
||||
>
|
||||
<!-- 分组标题 -->
|
||||
<div class="text-white text-xl font-extrabold mb-[20px] ml-[10px] flex items-center">
|
||||
<span class="text-shadow">
|
||||
<span class="group-title text-shadow">
|
||||
{{ itemGroup.title }}
|
||||
</span>
|
||||
<div
|
||||
v-if="authStore.visitMode === VisitMode.VISIT_MODE_LOGIN"
|
||||
class="ml-2 delay-100 transition-opacity flex"
|
||||
class="group-buttons ml-2 delay-100 transition-opacity flex"
|
||||
:class="itemGroup.hoverStatus ? 'opacity-100' : 'opacity-0'"
|
||||
>
|
||||
<span class="mr-2 cursor-pointer" :title="t('common.add')" @click="handleAddItem(itemGroup.id)">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user