diff --git a/src/components/designItem.vue b/src/components/designItem.vue index 732210ba65524d86b9bd124ceb48f599e033da33..817e7ea480a52bf44812a1fb98f7e33dfcdd33ca 100755 --- a/src/components/designItem.vue +++ b/src/components/designItem.vue @@ -14,16 +14,18 @@ const components = { itemBtns(h, element,parent) { const {copyItem,deleteItem} = this.$listeners; return [ +
{ copyItem(element,parent); event.stopPropagation(); }}> - , + { deleteItem(element,parent); event.stopPropagation(); }}> +
] } } @@ -34,7 +36,7 @@ const layouts = { const {onActiveItemChange} = this.$listeners; return ( { onActiveItemChange(element); event.stopPropagation()}}> - {element.id} +
{element.id}{components.itemBtns.apply(this, arguments)}
- {components.itemBtns.apply(this, arguments)} + ) }, @@ -55,7 +57,7 @@ const layouts = { return ( { onActiveItemChange(element); event.stopPropagation()}}> - {element.id} +
{element.id}{components.itemBtns.call(this,h,element)}
{ element.columns.map((item,index) =>{ @@ -78,7 +80,7 @@ const layouts = { }
- {components.itemBtns.call(this,h,element)} + ) }, @@ -88,7 +90,7 @@ const layouts = { const {onActiveItemChange} = this.$listeners; return ( { onActiveItemChange(element); event.stopPropagation()}}> - {element.id} +
{element.id}{components.itemBtns.call(this,h,element)}
- {components.itemBtns.call(this,h,element)} + ) }, @@ -122,6 +124,7 @@ const layouts = { const {onActiveItemChange} = this.$listeners; return ( +
{element.id}{components.itemBtns.call(this,h,element)}
{ onActiveItemChange(element); event.stopPropagation()}}> - {components.itemBtns.call(this,h,element)} ) } diff --git a/src/components/designer.vue b/src/components/designer.vue index 0bf958f3142b0901c6a3bd1219779b18ca88b968..b2e818470abe477ba3f04483304bdd25bfa3f503 100755 --- a/src/components/designer.vue +++ b/src/components/designer.vue @@ -2,26 +2,26 @@
- + 预览 - + 查看 - + JSON - + 设置 - + 清空 - + 帮助
- +
- +
@@ -377,7 +377,9 @@ } diff --git a/src/components/style/NewDesigner.scss b/src/components/style/NewDesigner.scss new file mode 100644 index 0000000000000000000000000000000000000000..c77a92890ff29358c6f06bb0e3d2d9d5402485c1 --- /dev/null +++ b/src/components/style/NewDesigner.scss @@ -0,0 +1,210 @@ +//拖拽预定区域 +.drawing-board { + height: 100%; + position: relative; + border:1px dashed #ccc; + .components-body { + padding: 0; + margin: 0; + font-size: 0; + } + .sortable-ghost { + position: relative; + display: block; + overflow: hidden; + &::before { + width: 100%; + content: " "; + position: absolute; + left: 0; + right: 0; + top: 0; + height: 3px; + background: #409EFF; + z-index: 2; + } + } +} +//右侧设置区域（包含各组件的特殊样式） +.right-board { + width: 350px; + position: absolute; + right: 0; + top: 0; + padding-top: 3px; + .field-box { + position: relative; + height: calc(100vh - 42px); + box-sizing: border-box; + overflow: hidden; + } + .el-scrollbar { + height: 100%; + } + } + .select-item { + display: flex; + border: 1px dashed #fff; + box-sizing: border-box; + & .close-btn { + cursor: pointer; + color: #f56c6c; + } + & .el-input + .el-input { + margin-left: 4px; + } + } + .select-item + .select-item { + margin-top: 4px; + } + .select-item.sortable-chosen { + border: 1px dashed #409eff; + } + .select-line-icon { + line-height: 32px; + font-size: 22px; + padding: 0 4px; + color: #777; + } + .option-drag { + cursor: move; + } + .time-range { + .el-date-editor { + width: 227px; + } + ::v-deep .el-icon-time { + display: none; + } + } + .document-link { + position: absolute; + display: block; + width: 26px; + height: 26px; + top: 0; + left: 0; + cursor: pointer; + background: #409eff; + z-index: 1; + border-radius: 0 0 6px 0; + text-align: center; + line-height: 26px; + color: #fff; + font-size: 18px; + } + .node-label{ + font-size: 14px; + } + .node-icon{ + color: #bebfc3; + } + .center-tabs{ + .el-tabs__header{ + margin-bottom: 0!important; + } + .el-tabs__item{ + width: 100%; + text-align: center; + } + .el-tabs__nav{ + width: 100%; + } + } + .right-scrollbar { + .el-scrollbar__view { + padding: 12px 18px 15px 15px; + } + } + .drawing-row-item .el-col{ + margin-bottom:5px; + } + .components-item.dynamicGhost { + width: 5px; + height: 120px; + background-color: #409EFF; + } + .dynamic-table_item.dynamicGhost { + width: 5px; + height: 120px; + background-color: #409EFF; + } + //中间组件区域 +.drawing-item-box{ + width: 100%; + margin: 0 !important; +} +.drawing-item{ + // padding: 5px; + margin-top: 5px; + padding: 0 !important; + border: 1px solid #ccc; + border-radius: 5px; + box-sizing: border-box; +} +.active-from-item{ + border: 1px solid #d81a1acc; +} + +.drawing-item-operate-box{ + display: flex; + justify-content: flex-end; + span{ + width: 25px; + height: 25px; + display: block; + display: flex; + justify-content: center; + align-items: center; + box-sizing: border-box; + } + .drawing-item-copy{ + // border: 1px solid #409eff; + background-color: #409eff; + color: white; + } + .drawing-item-delete{ + // border: 1px solid #F56C6C; + background-color: #F56C6C; + color: white; + } +} +.component-box{ + + position: relative; + display: flex; + justify-content:space-between; + height: 0px; + overflow: hidden; + transition: 0.5s; + .component-id,.component-name{ + margin-left: 10px; + font-size: 12px; + line-height: 25px; + } +} +.drawing-item:hover .component-box,.active-from-item .component-box{ + height: 25px; + // border-bottom: 1px solid black; +} +.el-form-item{ + margin-top: 5px; +} +.drag-col-wrapper{ + margin-top: 5px; +} +.row-drag{ + // border: 1px solid blue; + background: linear-gradient(to left, #f00, #f00) left top no-repeat, + linear-gradient(to bottom, #f00, #f00) left top no-repeat, + linear-gradient(to left, #f00, #f00) right top no-repeat, + linear-gradient(to bottom, #f00, #f00) right top no-repeat, + linear-gradient(to left, #f00, #f00) left bottom no-repeat, + linear-gradient(to bottom, #f00, #f00) left bottom no-repeat, + linear-gradient(to left, #f00, #f00) right bottom no-repeat, + linear-gradient(to left, #f00, #f00) right bottom no-repeat; + background-size: 1px 10px, 10px 1px, 1px 10px, 10px 1px; + padding: 1px 3px; + margin: 1px; + min-height: 30px; +} \ No newline at end of file diff --git a/src/components/style/designer.css b/src/components/style/designer.css index b42ac2fe64086ee06a6685a07d2922897219965d..d3a1c7e137e745e24bbadf44f17b556319969cef 100755 --- a/src/components/style/designer.css +++ b/src/components/style/designer.css @@ -43,18 +43,17 @@ body{ font-weight:700 } .components-draggable{ - padding-bottom: 20px; + padding-bottom: 0px; } .components-list { padding: 8px; box-sizing: border-box; - height: 100%; } .components-list .components-item { display: inline-block; width: 48%; margin: 1%; - transition: transform 0ms !important; + } .components-body { padding: 8px 10px; @@ -65,15 +64,17 @@ body{ cursor: move; border: 1px solid #409eff; border-radius: 3px; + transition: 0.5s !important; } .components-body:hover { - border: 1px dashed #f56c6c; + border: 1px solid #f56c6c; color: #f56c6c; } .center-board { height: 100vh; width: auto; - margin: 0 350px 0 260px; + margin-left: 260px; + margin-right: 350px; box-sizing: border-box; } .empty-info{ @@ -88,19 +89,15 @@ body{ .action-bar{ position: relative; height: 42px; - text-align: right; - padding: 0 15px; box-sizing: border-box;; border: 1px solid #f1e8e8; - border-top: none; - border-left: none; - background: #ffffff; + border-left: 1px solid #ffffff; + display: flex; + justify-content: flex-end; + align-items: center; + padding-right: 10px; } .action-bar .el-button{ - font-size: 18px; - vertical-align: middle; - position: relative; - top: -1px; color:#409EFF } .action-bar .delete-btn{ @@ -108,15 +105,35 @@ body{ } .center-scrollbar { height: calc(100vh - 42px); - overflow: hidden; + overflow-y: scroll; border-left: 1px solid #f1e8e8; border-right: 1px solid #f1e8e8; - box-sizing: border-box; -} + padding: 0 5px; + box-sizing: content-box; +} +.center-scrollbar:hover{ + padding-right: 0px; +} +.center-scrollbar::-webkit-scrollbar{ + width: 0px; +} +.center-scrollbar::-webkit-scrollbar-thumb{ + border-radius: 5px; + box-shadow: inset 0 0 5px rgba(0,0,0,0.2); + background: rgba(144,147,153,.1); +} +.center-scrollbar:hover::-webkit-scrollbar{ + width: 5px; + /* transition: 0.5s; */ +} .center-board-row { - padding: 10px 12px 100px 12px; + /* padding: 5px 12px 10px 12px; */ + margin: 0px !important; + width: 100%; + border: none; box-sizing: border-box; + } .center-board-row .el-form { height: calc(100vh - 69px); @@ -126,7 +143,7 @@ body{ margin: 0px; height: auto; min-height: 120px; - padding: 10px 0px; + padding-top: 15px; } .dynamic-table__content{ width:100%; @@ -181,7 +198,7 @@ body{ margin-top:10px; } -.component-id{ +/* .component-id{ position: absolute; top: 0; left: 0; @@ -189,7 +206,7 @@ body{ color: #bbb; display: inline-block; margin: 0 6px; -} +} */ /* .dynamic-table.active{ border-left: 3px solid #409eff;