From 23b1d392763e568e12c0efb32f1bcf085ae7a238 Mon Sep 17 00:00:00 2001 From: "zx.xiao" Date: Wed, 18 Aug 2021 20:10:27 +0800 Subject: [PATCH] feat:add left component hover --- .../dooringx-example/src/plugin/index.tsx | 13 +- packages/dooringx-lib/src/index.less | 303 +++++++++--------- 2 files changed, 164 insertions(+), 152 deletions(-) diff --git a/packages/dooringx-example/src/plugin/index.tsx b/packages/dooringx-example/src/plugin/index.tsx index 64458b0..4ffc99a 100644 --- a/packages/dooringx-example/src/plugin/index.tsx +++ b/packages/dooringx-example/src/plugin/index.tsx @@ -1,8 +1,8 @@ /* * @Author: yehuozhili * @Date: 2021-02-27 21:33:36 - * @LastEditors: yehuozhili - * @LastEditTime: 2021-08-12 14:43:05 + * @LastEditors: Please set LastEditors + * @LastEditTime: 2021-08-18 19:54:56 * @FilePath: \dooringx\packages\dooringx-example\src\plugin\index.tsx */ @@ -19,6 +19,7 @@ const LeftRegistMap: LeftRegistComponentMapItem[] = [ type: 'basic', component: 'button', img: 'icon-anniu', + imgCustom: , displayName: '按钮', urlFn: () => import('./registComponents/button'), }, @@ -58,7 +59,7 @@ export const defaultConfig: Partial = { { type: 'style', icon: ( -
+
外观
), @@ -66,7 +67,7 @@ export const defaultConfig: Partial = { { type: 'animate', icon: ( -
+
动画
), @@ -74,7 +75,7 @@ export const defaultConfig: Partial = { { type: 'fn', icon: ( -
+
函数
), @@ -82,7 +83,7 @@ export const defaultConfig: Partial = { { type: 'actions', icon: ( -
+
事件
), diff --git a/packages/dooringx-lib/src/index.less b/packages/dooringx-lib/src/index.less index a5ba2b1..84baff2 100644 --- a/packages/dooringx-lib/src/index.less +++ b/packages/dooringx-lib/src/index.less @@ -1,197 +1,208 @@ .yhLeftrender { - overflow: auto; + overflow: auto; - .leftco { - padding: 10px; - display: flex; - justify-content: flex-start; - flex-wrap: wrap; + .leftco { + padding: 10px; + display: flex; + justify-content: flex-start; + flex-wrap: wrap; - .coitem { - margin: 5px; + .coitem { + margin: 5px; - .redbox { - height: 68px; - width: 68px; - background: var(--redbox-color); - // line-height: 20px; - display: flex; - align-items: center; - justify-content: center; - #icon-checkbox, - #icon-tabs, - #icon-jiantou path { - fill: currentColor; - } - } - } - } + .redbox { + height: 68px; + width: 68px; + // background: var(--redbox-color); + background-color: #F7F8FA; + // line-height: 20px; + display: flex; + align-items: center; + justify-content: center; + + #icon-checkbox, + #icon-tabs, + #icon-jiantou path { + fill: currentColor; + } + + &:hover { + cursor: pointer; + } + } + + } + } } .yh_container { - // ::selection { - // color: inherit; - // background-color: inherit; - // } - user-select: none; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; + // ::selection { + // color: inherit; + // background-color: inherit; + // } + user-select: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; - :global(.am-list-item) { - background-color: rgba(255, 255, 255, 0); - } + :global(.am-list-item) { + background-color: rgba(255, 255, 255, 0); + } - :global(.am-list-body) { - background-color: rgba(255, 255, 255, 0); - } + :global(.am-list-body) { + background-color: rgba(255, 255, 255, 0); + } - :global(.ant-input) { - background-color: rgba(255, 255, 255, 0); - } + :global(.ant-input) { + background-color: rgba(255, 255, 255, 0); + } } .yh_container_preview { - :global(.am-list-item) { - background-color: rgba(255, 255, 255, 0); - } + :global(.am-list-item) { + background-color: rgba(255, 255, 255, 0); + } - :global(.am-list-body) { - background-color: rgba(255, 255, 255, 0); - } + :global(.am-list-body) { + background-color: rgba(255, 255, 255, 0); + } - :global(.ant-input) { - background-color: rgba(255, 255, 255, 0); - } + :global(.ant-input) { + background-color: rgba(255, 255, 255, 0); + } } .yh_block_focus { - &::before { - position: absolute; - top: -3px; - left: -3px; - right: -3px; - bottom: -3px; - content: ''; - border: 2px dashed #2196f3; - } + &::before { + position: absolute; + top: -3px; + left: -3px; + right: -3px; + bottom: -3px; + content: ''; + border: 2px dashed #2196f3; + } } .yhTempDiv { - background-color: #7165fa2b; + background-color: #7165fa2b; } .resizepoint { - position: absolute; - height: 6px; - width: 6px; - background-color: #2196f3; - cursor: pointer; - border-radius: 50%; + position: absolute; + height: 6px; + width: 6px; + background-color: #2196f3; + cursor: pointer; + border-radius: 50%; - &.l { - left: -6px; - top: calc(50% - 3px); + &.l { + left: -6px; + top: calc(50% - 3px); - &:hover { - cursor: e-resize; - } - } + &:hover { + cursor: e-resize; + } + } - &.r { - right: -6px; - top: calc(50% - 3px); + &.r { + right: -6px; + top: calc(50% - 3px); - &:hover { - cursor: e-resize; - } - } + &:hover { + cursor: e-resize; + } + } - &.t { - top: -6px; - left: calc(50% - 3px); + &.t { + top: -6px; + left: calc(50% - 3px); - &:hover { - cursor: s-resize; - } - } + &:hover { + cursor: s-resize; + } + } - &.b { - bottom: -6px; - left: calc(50% - 3px); + &.b { + bottom: -6px; + left: calc(50% - 3px); - &:hover { - cursor: s-resize; - } - } + &:hover { + cursor: s-resize; + } + } - &.lt { - top: -6px; - left: -6px; + &.lt { + top: -6px; + left: -6px; - &:hover { - cursor: nw-resize; - } - } + &:hover { + cursor: nw-resize; + } + } - &.lb { - bottom: -6px; - left: -6px; + &.lb { + bottom: -6px; + left: -6px; - &:hover { - cursor: ne-resize; - } - } + &:hover { + cursor: ne-resize; + } + } - &.rb { - bottom: -6px; - right: -6px; + &.rb { + bottom: -6px; + right: -6px; - &:hover { - cursor: nw-resize; - } - } + &:hover { + cursor: nw-resize; + } + } - &.rt { - top: -6px; - right: -6px; + &.rt { + top: -6px; + right: -6px; - &:hover { - cursor: ne-resize; - } - } + &:hover { + cursor: ne-resize; + } + } } + .menuWidth.menus { - width: initial; + width: initial; } .menuStyle.menus { - display: flex; - flex-direction: column; - justify-content: center; - text-align: center; - height: auto; - span:nth-child(1) { - margin-top: 10px; - } - span:nth-child(2) { - margin-left: 0; - } + display: flex; + flex-direction: column; + justify-content: center; + text-align: center; + height: auto; + + span:nth-child(1) { + margin-top: 10px; + } + + span:nth-child(2) { + margin-left: 0; + } } + .menu_footer { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - position: relative; - bottom: 0; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + position: relative; + bottom: 0; } .rotate { - position: absolute; - top: -35px; - left: calc(50% - 10px); - cursor: grab; - font-size: 20px; -} + position: absolute; + top: -35px; + left: calc(50% - 10px); + cursor: grab; + font-size: 20px; +} \ No newline at end of file