wwsheng009
3 years ago
committed by
GitHub
GitHub
5 changed files with 3593 additions and 4450 deletions
File diff suppressed because it is too large
@ -1,522 +0,0 @@ |
|||
.v-form-design-container { |
|||
// height: 100%; |
|||
width: 100%; |
|||
// overflow: hidden; |
|||
display: flex; |
|||
flex-direction: column; |
|||
|
|||
& > .v-form-design-header { |
|||
height: @header-height; |
|||
line-height: @header-height; |
|||
background: @primary-color; |
|||
text-align: center; |
|||
font-size: 20px; |
|||
color: #fff; |
|||
} |
|||
|
|||
:deep(.icon) { |
|||
width: 1em; |
|||
height: 1em; |
|||
vertical-align: -0.15em; |
|||
fill: currentcolor; |
|||
// overflow: hidden; |
|||
} |
|||
|
|||
.content { |
|||
position: relative; |
|||
flex: 1; |
|||
// margin-top: 5px; |
|||
display: flex; |
|||
// flex-flow: row nowrap; |
|||
// height: 100%; |
|||
// overflow: hidden; |
|||
box-sizing: border-box; |
|||
|
|||
.left, |
|||
.right { |
|||
width: @left-right-width; |
|||
box-shadow: 0 0 1px 1px #ccc; |
|||
// overflow: hidden; |
|||
// height: 100%; |
|||
// height: 600px; |
|||
// |
|||
border: 1px solid green; |
|||
// overflow-y: auto; |
|||
// :deep(.ant-tabs) { |
|||
// height: 100%; |
|||
// .ant-tabs-content-holder { |
|||
// // display: flex; |
|||
// // flex-flow: column; |
|||
// height: 100%; |
|||
// .ant-tabs-content { |
|||
// // flex:1; |
|||
// // height: 0; |
|||
// // overflow-y: auto; |
|||
// // overflow-x: hidden; |
|||
// display: flex; |
|||
// flex-flow: column; |
|||
// height: 100%; |
|||
// } |
|||
// } |
|||
// } |
|||
} |
|||
|
|||
:deep(.right) { |
|||
// & > div { |
|||
// height: 100%; |
|||
// } |
|||
// overflow: hidden; |
|||
// & > div { |
|||
// height: 100%; |
|||
// .ant-tabs-content-holder{ |
|||
// height: 100%; |
|||
// .ant-tabs-content{ |
|||
// height: 100%; |
|||
// .ant-tabs-tabpane{ |
|||
// height: 100%; |
|||
// } |
|||
// } |
|||
// } |
|||
// } |
|||
|
|||
.ant-tabs { |
|||
width: 280px; |
|||
height: 100%; |
|||
// overflow: hidden; |
|||
|
|||
.ant-tabs-content-holder { |
|||
// display: flex; |
|||
// flex-flow: column; |
|||
// height: 100%; |
|||
// overflow: hidden; |
|||
|
|||
.ant-tabs-content { |
|||
// flex:1; |
|||
// height: 0; |
|||
// overflow-y: auto; |
|||
// overflow-x: hidden; |
|||
|
|||
height: 100%; |
|||
// overflow: hidden; |
|||
.ant-tabs-tabpane { |
|||
.properties-content { |
|||
// height: 100%; |
|||
|
|||
// overflow: auto; |
|||
// overflow: hidden; |
|||
|
|||
// background: #fff; |
|||
.properties-body { |
|||
box-sizing: border-box; |
|||
// height: 100%; |
|||
|
|||
// display: flex; |
|||
// flex-flow: column; |
|||
|
|||
form { |
|||
position: absolute; |
|||
// height: 400px; |
|||
height: calc(100% - 50px); |
|||
// height: 100%; |
|||
// flex: 1; |
|||
// height: 0; |
|||
margin-right: 10px; |
|||
// overflow: auto; |
|||
overflow-y: auto; |
|||
overflow-x: hidden; |
|||
// overflow: auto; |
|||
} |
|||
// overflow: auto; |
|||
// height: 100%; |
|||
// padding: 8px 16px; |
|||
.hint-box { |
|||
margin-top: 200px; |
|||
} |
|||
|
|||
.ant-form-item, |
|||
.ant-slider-with-marks { |
|||
margin-left: 10px; |
|||
margin-right: 20px; |
|||
margin-bottom: 0; |
|||
} |
|||
|
|||
.ant-form-item { |
|||
// box-sizing: border-box; |
|||
width: 100%; |
|||
margin-bottom: 0; |
|||
// padding: 2px 0; |
|||
border-bottom: 1px solid @border-color; |
|||
|
|||
.ant-form-item-label { |
|||
line-height: 2; |
|||
vertical-align: text-top; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
:deep(.left) { |
|||
.ant-collapse { |
|||
border: 0; |
|||
|
|||
.ant-collapse-header { |
|||
padding: 7px 0 7px 40px; |
|||
} |
|||
|
|||
.ant-collapse-content-box { |
|||
padding: 0; |
|||
} |
|||
} |
|||
|
|||
ul { |
|||
padding: 5px; |
|||
list-style: none; |
|||
display: flex; |
|||
margin-bottom: 0; |
|||
flex-wrap: wrap; |
|||
// background: #efefef; |
|||
|
|||
li { |
|||
padding: 8px 12px; |
|||
transition: all 0.3s; |
|||
width: calc(50% - 6px); |
|||
margin: 2.7px; |
|||
height: 36px; |
|||
line-height: 20px; |
|||
cursor: move; |
|||
border: 1px solid @border-color; |
|||
border-radius: 3px; |
|||
|
|||
&:hover { |
|||
color: @primary-color; |
|||
border: 1px solid @primary-color; |
|||
position: relative; |
|||
// z-index: 1; |
|||
box-shadow: 0 2px 6px @primary-color; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
:deep(.node-panel) { |
|||
box-shadow: 0 0 1px 1px #ccc; |
|||
flex: 1; |
|||
margin: 0 8px; |
|||
overflow: hidden; |
|||
|
|||
.draggable-box { |
|||
height: 100%; |
|||
overflow: auto; |
|||
|
|||
.list-main { |
|||
overflow: hidden; |
|||
min-height: 100%; |
|||
padding: 5px; |
|||
position: relative; |
|||
background: #fafafa; |
|||
// border : 1px #ccc dashed; |
|||
|
|||
.moving { |
|||
// 拖放移动中 |
|||
// outline-width: 0; |
|||
min-height: 35px; |
|||
box-sizing: border-box; |
|||
overflow: hidden; |
|||
padding: 0 !important; |
|||
// margin : 3px 0; |
|||
position: relative; |
|||
|
|||
&::before { |
|||
content: ''; |
|||
height: 5px; |
|||
width: 100%; |
|||
background: @primary-color; |
|||
position: absolute; |
|||
top: 0; |
|||
right: 0; |
|||
} |
|||
} |
|||
|
|||
.drag-move-box { |
|||
position: relative; |
|||
box-sizing: border-box; |
|||
padding: 8px; |
|||
overflow: hidden; |
|||
transition: all 0.3s; |
|||
min-height: 60px; |
|||
|
|||
&:hover { |
|||
background: @primary-hover-bg-color; |
|||
} |
|||
|
|||
// 选择时 start |
|||
&::before { |
|||
content: ''; |
|||
height: 5px; |
|||
width: 100%; |
|||
background: @primary-color; |
|||
position: absolute; |
|||
top: 0; |
|||
right: -100%; |
|||
transition: all 0.3s; |
|||
} |
|||
|
|||
&.active { |
|||
background: @primary-hover-bg-color; |
|||
outline-offset: 0; |
|||
|
|||
&::before { |
|||
right: 0; |
|||
} |
|||
} |
|||
|
|||
// 选择时 end |
|||
.form-item-box { |
|||
position: relative; |
|||
box-sizing: border-box; |
|||
word-wrap: break-word; |
|||
|
|||
&::before { |
|||
content: ''; |
|||
position: absolute; |
|||
width: 100%; |
|||
height: 100%; |
|||
top: 0; |
|||
left: 0; |
|||
// z-index: 888; |
|||
} |
|||
|
|||
.ant-form-item { |
|||
// 修改ant form-item的margin为padding |
|||
margin: 0; |
|||
padding-bottom: 6px; |
|||
} |
|||
} |
|||
|
|||
.show-key-box { |
|||
// 显示key |
|||
position: absolute; |
|||
bottom: 2px; |
|||
right: 5px; |
|||
font-size: 14px; |
|||
// z-index: 999; |
|||
color: @primary-color; |
|||
} |
|||
|
|||
.copy, |
|||
.delete { |
|||
position: absolute; |
|||
top: 0; |
|||
width: 30px; |
|||
height: 30px; |
|||
line-height: 30px; |
|||
text-align: center; |
|||
color: #fff; |
|||
// z-index: 989; |
|||
transition: all 0.3s; |
|||
|
|||
&.unactivated { |
|||
opacity: 0 !important; |
|||
pointer-events: none; |
|||
} |
|||
|
|||
&.active { |
|||
opacity: 1 !important; |
|||
} |
|||
} |
|||
|
|||
.copy { |
|||
border-radius: 0 0 0 8px; |
|||
right: 30px; |
|||
background: @primary-color; |
|||
} |
|||
|
|||
.delete { |
|||
right: 0; |
|||
background: @primary-color; |
|||
} |
|||
} |
|||
|
|||
.grid-box { |
|||
position: relative; |
|||
box-sizing: border-box; |
|||
padding: 5px; |
|||
background: @layout-background-color; |
|||
width: 100%; |
|||
transition: all 0.3s; |
|||
overflow: hidden; |
|||
|
|||
.form-item-box { |
|||
position: relative; |
|||
box-sizing: border-box; |
|||
|
|||
.ant-form-item { |
|||
// 修改ant form-item的margin为padding |
|||
margin: 0; |
|||
padding-bottom: 15px; |
|||
} |
|||
} |
|||
|
|||
.grid-row { |
|||
background: @layout-background-color; |
|||
|
|||
.grid-col { |
|||
.draggable-box { |
|||
min-height: 80px; |
|||
min-width: 50px; |
|||
border: 1px #ccc dashed; |
|||
background: #fff; |
|||
|
|||
.list-main { |
|||
min-height: 83px; |
|||
position: relative; |
|||
border: 1px #ccc dashed; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
// 选择时 start |
|||
&::before { |
|||
content: ''; |
|||
height: 5px; |
|||
width: 100%; |
|||
background: transparent; |
|||
position: absolute; |
|||
top: 0; |
|||
right: -100%; |
|||
transition: all 0.3s; |
|||
} |
|||
|
|||
&.active { |
|||
background: @layout-hover-bg-color; |
|||
outline-offset: 0; |
|||
|
|||
&::before { |
|||
background: @layout-color; |
|||
right: 0; |
|||
} |
|||
} |
|||
// 选择时 end |
|||
> .copy-delete-box { |
|||
> .copy, |
|||
> .delete { |
|||
position: absolute; |
|||
top: 0; |
|||
width: 30px; |
|||
height: 30px; |
|||
line-height: 30px; |
|||
text-align: center; |
|||
color: #fff; |
|||
// z-index: 989; |
|||
transition: all 0.3s; |
|||
|
|||
&.unactivated { |
|||
opacity: 0 !important; |
|||
pointer-events: none; |
|||
} |
|||
|
|||
&.active { |
|||
opacity: 1 !important; |
|||
} |
|||
} |
|||
|
|||
> .copy { |
|||
border-radius: 0 0 0 8px; |
|||
right: 30px; |
|||
background: @layout-color; |
|||
} |
|||
|
|||
> .delete { |
|||
right: 0; |
|||
background: @layout-color; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
::-webkit-scrollbar { |
|||
/* 滚动条整体样式 */ |
|||
width: 6px; |
|||
|
|||
/* 高宽分别对应横竖滚动条的尺寸 */ |
|||
height: 6px; |
|||
scrollbar-arrow-color: red; |
|||
} |
|||
|
|||
::-webkit-scrollbar-thumb { |
|||
/* 滚动条里面小方块 */ |
|||
border-radius: 5px; |
|||
box-shadow: inset 0 0 5px rgb(0 0 0 / 20%); |
|||
background: rgb(0 0 0 / 20%); |
|||
scrollbar-arrow-color: red; |
|||
} |
|||
|
|||
::-webkit-scrollbar-track { |
|||
/* 滚动条里面轨道 */ |
|||
box-shadow: inset 0 0 5px rgb(0 0 0 / 20%); |
|||
border-radius: 0; |
|||
background: rgb(0 0 0 / 10%); |
|||
} |
|||
} |
|||
|
|||
// code盒子样式 |
|||
.v-json-box { |
|||
height: 570px; |
|||
overflow: auto; |
|||
|
|||
.vue-codemirror-wrap { |
|||
height: 100%; |
|||
|
|||
.CodeMirror-wrap { |
|||
height: 100%; |
|||
background: #f6f6f6; |
|||
|
|||
.CodeMirror-scroll { |
|||
height: 100%; |
|||
width: 100%; |
|||
} |
|||
|
|||
pre.CodeMirror-line, |
|||
.CodeMirror-linenumber { |
|||
min-height: 21px; |
|||
line-height: 21px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
// code-modal盒子样式 |
|||
.v-code-modal { |
|||
.ant-modal-body { |
|||
padding: 12px; |
|||
} |
|||
} |
|||
|
|||
.v-form-container { |
|||
// 内联布局样式 |
|||
.ant-form-inline { |
|||
.list-main { |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
justify-content: flex-start; |
|||
align-content: flex-start; |
|||
|
|||
.layout-width { |
|||
width: 100%; |
|||
} |
|||
} |
|||
|
|||
.ant-form-item-control-wrapper { |
|||
min-width: 175px !important; |
|||
} |
|||
} |
|||
} |
|||
Loading…
Reference in new issue