perf: free-layout UI (#489)

TencentBlueKing · Aug 13, 2021 · 238ab65 · 238ab65
1 parent e6092ee
commit 238ab65
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 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
@@ -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
@@ -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
@@ -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;