From 238ab652776f1b058648625645d265d41d245d54 Mon Sep 17 00:00:00 2001
From: hlinx <327159425@qq.com>
Date: Fri, 13 Aug 2021 11:42:49 +0800
Subject: [PATCH] perf: free-layout UI (#489)

---
 .../lib/client/src/components/render/free-layout.css      | 2 +-
 .../lib/client/src/components/render/free-layout.vue      | 8 ++++----
 paas-ce/lesscode/lib/client/src/views/index/index.css     | 4 ++--
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/paas-ce/lesscode/lib/client/src/components/render/free-layout.css b/paas-ce/lesscode/lib/client/src/components/render/free-layout.css
index 0392cfb02..f13e0f31a 100644
--- a/paas-ce/lesscode/lib/client/src/components/render/free-layout.css
+++ b/paas-ce/lesscode/lib/client/src/components/render/free-layout.css
@@ -145,7 +145,7 @@ $baseZIndexInFreeLayout: 10;
         bottom: 0;
         left: 0;
         z-index: -1;
-        background: #fd9c9c;
+        background: #F3F8FF;
         & > * {
             display: none;
         }
diff --git a/paas-ce/lesscode/lib/client/src/components/render/free-layout.vue b/paas-ce/lesscode/lib/client/src/components/render/free-layout.vue
index b27d36265..cde4a842d 100644
--- a/paas-ce/lesscode/lib/client/src/components/render/free-layout.vue
+++ b/paas-ce/lesscode/lib/client/src/components/render/free-layout.vue
@@ -394,7 +394,7 @@
                         if (originalTop + componentHeight > containerBottom) {
                             top = containerBottom - containerTop - componentHeight
                         } else {
-                            top = originalTop - containerTop
+                            top = originalTop - containerTop - 15
                         }
                     }
                     // left 位置计算
@@ -404,12 +404,12 @@
                         if (originalLeft + componentWidth > containerRight) {
                             left = containerRight - containerLeft - componentWidth
                         } else {
-                            left = originalLeft - containerLeft
+                            left = originalLeft - containerLeft - 15
                         }
                     }
                     const stylePosition = {
-                        top: `${Math.max(top, 0)}px`,
-                        left: `${Math.max(left, 0)}px`
+                        top: `${Math.max(top, 10)}px`,
+                        left: `${Math.max(left, 10)}px`
                     }
                     
                     // 需要 emit 一次，因为刚拖入到自由布局中的组件还没有拖动，不会触发 end 事件
diff --git a/paas-ce/lesscode/lib/client/src/views/index/index.css b/paas-ce/lesscode/lib/client/src/views/index/index.css
index 46c85058e..1f1671349 100644
--- a/paas-ce/lesscode/lib/client/src/views/index/index.css
+++ b/paas-ce/lesscode/lib/client/src/views/index/index.css
@@ -384,12 +384,12 @@ $headerHeight: 64px;
 
         /* in-column-drag-area, Class name for the drop placeholder */
         /* 从左侧往中间拖拽区拖拽时生效 */
+        .target-ghost,
         .in-column-ghost {
-            opacity: .5;
             &.component-item {
                 &:after {
                     content: "放在这里";
-                    background-color: #fd9c9c;
+                    background-color: #F3F8FF;
                     position: absolute;
                     left: 0;
                     text-align: center;