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 的 component-container.vue 使用 tailwindcss 简化 style

Browse Source
This commit is contained in:
YunaiV
2025-11-03 13:44:40 +08:00
parent 3b4cdfef82
commit 27d47c13f2
1 changed files with 4 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
apps/web-ele/src/views/mall/promotion/components/diy-editor/components/component-container.vue
View File

@@ -93,15 +93,11 @@ const handleDeleteComponent = () => {
}; };
</script> </script>
<template> <template>
<div class="component" :class="[{ active }]"> <div class="component relative cursor-move" :class="[{ active }]">
<div <div :style="style">
:style="{
...style,
}"
>
<component :is="component.id" :property="component.property" /> <component :is="component.id" :property="component.property" />
</div> </div>
<div class="component-wrap"> <div class="component-wrap absolute left-[-2px] top-0 block h-full w-full">
<!-- 左侧：组件名（悬浮的小贴条） --> <!-- 左侧：组件名（悬浮的小贴条） -->
<div class="component-name" v-if="component.name"> <div class="component-name" v-if="component.name">
{{ component.name }} {{ component.name }}
@@ -150,19 +146,8 @@ $hover-border-width: 1px;
$name-position: -85px; $name-position: -85px;
$toolbar-position: -55px; $toolbar-position: -55px;
/* 组件 */
.component { .component {
position: relative;
cursor: move;
.component-wrap { .component-wrap {
position: absolute;
top: 0;
left: -$active-border-width;
display: block;
width: 100%;
height: 100%;
/* 鼠标放到组件上时 */ /* 鼠标放到组件上时 */
&:hover { &:hover {
border: $hover-border-width dashed var(--el-color-primary); border: $hover-border-width dashed var(--el-color-primary);
@@ -228,7 +213,7 @@ $toolbar-position: -55px;
} }
} }
/* 组件选中时 */ /* 选中状态 */
&.active { &.active {
margin-bottom: 4px; margin-bottom: 4px;