feat:【ele】【mall】diy-editor 的 floating-action-button 使用 tailwindcss 简化 style

This commit is contained in:
YunaiV
2025-11-03 08:38:49 +08:00
parent 60219ace92
commit fe2396f346

View File

@@ -62,21 +62,14 @@ function handleToggleFab() {
</ElButton> </ElButton>
</div> </div>
<!-- 模态背景展开时显示点击后折叠 --> <!-- 模态背景展开时显示点击后折叠 -->
<div v-if="expanded" class="modal-bg" @click="handleToggleFab"></div> <div
v-if="expanded"
class="absolute left-[calc(50%-375px/2)] top-0 z-[11] h-full w-[375px] bg-black/40"
@click="handleToggleFab"
></div>
</template> </template>
<style scoped lang="scss"> <style scoped lang="scss">
/* 模态背景 */
.modal-bg {
position: absolute;
top: 0;
left: calc(50% - 375px / 2);
z-index: 11;
width: 375px;
height: 100%;
background-color: rgb(0 0 0 / 40%);
}
.fab-icon { .fab-icon {
transform: rotate(0deg); transform: rotate(0deg);
transition: transform 0.3s; transition: transform 0.3s;