|
|
@@ -1,66 +1,67 @@
|
|
|
// 表单设计器样式
|
|
|
-@primary-color: #a5e3e3;
|
|
|
-@layout-color : #a7c5c3;
|
|
|
-@danger-color : #f5222d;
|
|
|
+@primary-color: #1677ff;
|
|
|
+@layout-color: #90c1e3;
|
|
|
+@danger-color: #f5222d;
|
|
|
|
|
|
-@primary-background-color: fade(@primary-color, 6%);
|
|
|
-@primary-hover-bg-color : fade(@primary-color, 20%);
|
|
|
-@layout-background-color : fade(@layout-color, 12%);
|
|
|
-@layout-hover-bg-color : fade(@layout-color, 24%);
|
|
|
+@primary-hover-bg-color: fade(@primary-color, 20%);
|
|
|
+@layout-background-color: fade(@layout-color, 12%);
|
|
|
+@layout-hover-bg-color: fade(@layout-color, 24%);
|
|
|
|
|
|
@title-text-color: #fff;
|
|
|
-@border-color : #ccc;
|
|
|
+@border-color: #ccc;
|
|
|
|
|
|
-@left-right-width : 270px;
|
|
|
-@header-height : 56px;
|
|
|
-@operating-area-height : 45px;
|
|
|
+@left-right-width: 270px;
|
|
|
+@header-height: 56px;
|
|
|
+@operating-area-height: 45px;
|
|
|
@import "./st-table.less";
|
|
|
@import "./st-editor.less";
|
|
|
|
|
|
// 表单设计器样式
|
|
|
.form-designer-container-9136076486841527 {
|
|
|
- height : 100vh;
|
|
|
- width : 100%;
|
|
|
+ height: 100vh;
|
|
|
+ width: 100%;
|
|
|
// overflow: hidden;
|
|
|
|
|
|
// header样式
|
|
|
.header {
|
|
|
- width : 100%;
|
|
|
- height : @header-height;
|
|
|
- text-align : center;
|
|
|
- background : @primary-color;
|
|
|
- color : @title-text-color;
|
|
|
+ width: 100%;
|
|
|
+ height: @header-height;
|
|
|
+ text-align: center;
|
|
|
+ background: @primary-color;
|
|
|
+ color: @title-text-color;
|
|
|
// margin-bottom: 6px;
|
|
|
// border-bottom: 1px solid @border-color;
|
|
|
- line-height : @header-height;
|
|
|
- font-size : 18px;
|
|
|
- font-weight : bold;
|
|
|
+ line-height: @header-height;
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: bold;
|
|
|
}
|
|
|
|
|
|
// 头部操作按钮区域
|
|
|
.operating-area {
|
|
|
- border-bottom : 2px solid @border-color;
|
|
|
- font-size : 16px;
|
|
|
- text-align : left;
|
|
|
- height : @operating-area-height;
|
|
|
- line-height : @operating-area-height;
|
|
|
- padding : 0px 12px;
|
|
|
- display : flex;
|
|
|
+ border-bottom: 2px solid @border-color;
|
|
|
+ font-size: 16px;
|
|
|
+ text-align: left;
|
|
|
+ height: @operating-area-height;
|
|
|
+ line-height: @operating-area-height;
|
|
|
+ padding: 0px 12px;
|
|
|
+ display: flex;
|
|
|
justify-content: space-between;
|
|
|
- align-content : center;
|
|
|
+ align-content: center;
|
|
|
|
|
|
a {
|
|
|
- color : #666;
|
|
|
+ color: #666;
|
|
|
margin: 0 5px;
|
|
|
+
|
|
|
&.disabled, &.disabled:hover {
|
|
|
- color : #ccc;
|
|
|
+ color: #ccc;
|
|
|
}
|
|
|
+
|
|
|
&:hover {
|
|
|
color: @primary-color;
|
|
|
}
|
|
|
|
|
|
- >span {
|
|
|
- font-size : 14px;
|
|
|
+ > span {
|
|
|
+ font-size: 14px;
|
|
|
padding-left: 2px;
|
|
|
}
|
|
|
}
|
|
|
@@ -68,39 +69,39 @@
|
|
|
|
|
|
// iconfont 样式
|
|
|
.icon {
|
|
|
- width : 1em;
|
|
|
- height : 1em;
|
|
|
+ width: 1em;
|
|
|
+ height: 1em;
|
|
|
vertical-align: -0.15em;
|
|
|
- fill : currentColor;
|
|
|
- overflow : hidden;
|
|
|
+ fill: currentColor;
|
|
|
+ overflow: hidden;
|
|
|
}
|
|
|
|
|
|
// 设计器内容样式
|
|
|
.content {
|
|
|
display: flex;
|
|
|
- height : 100%;
|
|
|
- flex : 1;
|
|
|
+ height: 100%;
|
|
|
+ flex: 1;
|
|
|
|
|
|
&.show-head {
|
|
|
margin-top: 6px;
|
|
|
- height : calc(100% - @header-height - 6px);
|
|
|
+ height: calc(100% - @header-height - 6px);
|
|
|
}
|
|
|
|
|
|
&.toolbars-top {
|
|
|
margin-top: 6px;
|
|
|
- height : calc(100% - @operating-area-height - 6px);
|
|
|
+ height: calc(100% - @operating-area-height - 6px);
|
|
|
}
|
|
|
|
|
|
&.show-head-and-toolbars-top {
|
|
|
margin-top: 6px;
|
|
|
- height : calc(100% - @header-height - @operating-area-height - 6px);
|
|
|
+ height: calc(100% - @header-height - @operating-area-height - 6px);
|
|
|
}
|
|
|
|
|
|
// 左右栏
|
|
|
aside {
|
|
|
- box-shadow : 0px 0px 1px 1px @border-color;
|
|
|
- width : @left-right-width;
|
|
|
- height : 100%;
|
|
|
+ box-shadow: 0px 0px 1px 1px @border-color;
|
|
|
+ width: @left-right-width;
|
|
|
+ height: 100%;
|
|
|
// >.left-title {
|
|
|
// padding : 12px 10px 8px;
|
|
|
// user-select: none;
|
|
|
@@ -108,8 +109,8 @@
|
|
|
|
|
|
&.left {
|
|
|
// border-right: 1px solid @aside-border-color;
|
|
|
- height : 100%;
|
|
|
- overflow : auto;
|
|
|
+ height: 100%;
|
|
|
+ overflow: auto;
|
|
|
user-select: none;
|
|
|
|
|
|
.ant-collapse-content-box {
|
|
|
@@ -119,14 +120,14 @@
|
|
|
.ant-collapse {
|
|
|
border: 0;
|
|
|
|
|
|
- >.ant-collapse-item {
|
|
|
+ > .ant-collapse-item {
|
|
|
border-color: @border-color;
|
|
|
|
|
|
- >.ant-collapse-header {
|
|
|
+ > .ant-collapse-header {
|
|
|
padding: 7px 0 7px 40px;
|
|
|
}
|
|
|
|
|
|
- >.ant-collapse-content {
|
|
|
+ > .ant-collapse-content {
|
|
|
border-color: @border-color;
|
|
|
}
|
|
|
}
|
|
|
@@ -134,33 +135,33 @@
|
|
|
|
|
|
|
|
|
ul {
|
|
|
- padding : 5px;
|
|
|
- list-style : none;
|
|
|
- display : flex;
|
|
|
+ padding: 5px;
|
|
|
+ list-style: none;
|
|
|
+ display: flex;
|
|
|
margin-bottom: 0;
|
|
|
- flex-wrap : wrap;
|
|
|
+ flex-wrap: wrap;
|
|
|
// background: #efefef;
|
|
|
|
|
|
li {
|
|
|
border-radius: 0;
|
|
|
- border : 0;
|
|
|
- box-shadow : 1px 0 0 0 @border-color, 0 1px 0 0 @border-color, 1px 1px 0 0 @border-color, 1px 0 0 0 @border-color inset, 0 1px 0 0 @border-color inset;
|
|
|
- padding : 8px 12px;
|
|
|
- transition : all 0.3s;
|
|
|
- width : calc(50% - 6px);
|
|
|
- margin : 2.7px;
|
|
|
- height : 36px;
|
|
|
- line-height : 20px;
|
|
|
- cursor : move;
|
|
|
- border : 1px solid transparent;
|
|
|
+ border: 0;
|
|
|
+ box-shadow: 1px 0 0 0 @border-color, 0 1px 0 0 @border-color, 1px 1px 0 0 @border-color, 1px 0 0 0 @border-color inset, 0 1px 0 0 @border-color inset;
|
|
|
+ padding: 8px 12px;
|
|
|
+ transition: all 0.3s;
|
|
|
+ width: calc(50% - 6px);
|
|
|
+ margin: 2.7px;
|
|
|
+ height: 36px;
|
|
|
+ line-height: 20px;
|
|
|
+ cursor: move;
|
|
|
+ border: 1px solid transparent;
|
|
|
border-radius: 3px;
|
|
|
- transition : all .3s;
|
|
|
+ transition: all .3s;
|
|
|
|
|
|
&:hover {
|
|
|
- color : @primary-color;
|
|
|
- border : 1px solid @primary-color;
|
|
|
- position : relative;
|
|
|
- z-index : 1;
|
|
|
+ color: @primary-color;
|
|
|
+ border: 1px solid @primary-color;
|
|
|
+ position: relative;
|
|
|
+ z-index: 1;
|
|
|
box-shadow: 0 2px 6px @primary-color;
|
|
|
}
|
|
|
}
|
|
|
@@ -169,17 +170,17 @@
|
|
|
|
|
|
// 右侧区域
|
|
|
&.right {
|
|
|
- height : 100%;
|
|
|
+ height: 100%;
|
|
|
// border-left: 1px solid @aside-border-color;
|
|
|
// border-top : 1px solid @aside-border-color;
|
|
|
- color : #fff;
|
|
|
- overflow : hidden;
|
|
|
- position : relative;
|
|
|
+ color: #fff;
|
|
|
+ overflow: hidden;
|
|
|
+ position: relative;
|
|
|
|
|
|
|
|
|
// 控件属性设置
|
|
|
.form-item-properties {
|
|
|
- width : 100%;
|
|
|
+ width: 100%;
|
|
|
height: 100%;
|
|
|
}
|
|
|
|
|
|
@@ -191,27 +192,27 @@
|
|
|
|
|
|
.ant-tabs-tabpane {
|
|
|
|
|
|
- height : calc(100% - 45px);
|
|
|
+ height: calc(100% - 45px);
|
|
|
overflow: auto;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.properties-centent {
|
|
|
- height : 100%;
|
|
|
- overflow : hidden;
|
|
|
+ height: 100%;
|
|
|
+ overflow: hidden;
|
|
|
background: #fff;
|
|
|
|
|
|
.properties-body {
|
|
|
overflow: auto;
|
|
|
- height : 100%;
|
|
|
- padding : 8px 16px;
|
|
|
+ height: 100%;
|
|
|
+ padding: 8px 16px;
|
|
|
}
|
|
|
|
|
|
|
|
|
.ant-form-item {
|
|
|
margin-bottom: 0;
|
|
|
- padding : 6px 0;
|
|
|
+ padding: 6px 0;
|
|
|
border-bottom: 1px solid @border-color;
|
|
|
|
|
|
.ant-form-item-label {
|
|
|
@@ -228,79 +229,78 @@
|
|
|
|
|
|
// 中间内容区域
|
|
|
section {
|
|
|
- flex : 1;
|
|
|
- max-width : calc(100% - @left-right-width - @left-right-width);
|
|
|
+ flex: 1;
|
|
|
+ max-width: calc(100% - @left-right-width - @left-right-width);
|
|
|
user-select: none;
|
|
|
- margin : 0 8px 0;
|
|
|
- box-shadow : 0px 0px 1px 1px @border-color;
|
|
|
-
|
|
|
+ margin: 0 8px 0;
|
|
|
+ box-shadow: 0px 0px 1px 1px @border-color;
|
|
|
|
|
|
|
|
|
// 内容操作区域
|
|
|
.form-panel {
|
|
|
// height : calc(100% - 50px);
|
|
|
- height : 100%;
|
|
|
- background : #eee;
|
|
|
+ height: 100%;
|
|
|
+ background: #eee;
|
|
|
// border : 1px solid #ccc;
|
|
|
- position : relative;
|
|
|
+ position: relative;
|
|
|
|
|
|
&.no-toolbars-top {
|
|
|
- height: calc(100% - 100px);
|
|
|
+ height: calc(100% - 100px);
|
|
|
}
|
|
|
|
|
|
- >.hint-text {
|
|
|
- position : absolute;
|
|
|
- left : 0;
|
|
|
- top : 50%;
|
|
|
- width : 100%;
|
|
|
+ > .hint-text {
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 50%;
|
|
|
+ width: 100%;
|
|
|
transform: translateY(-50%);
|
|
|
- font-size : 20px;
|
|
|
- color : #aaa;
|
|
|
- z-index : 16;
|
|
|
+ font-size: 20px;
|
|
|
+ color: #aaa;
|
|
|
+ z-index: 16;
|
|
|
}
|
|
|
|
|
|
.a-form-box {
|
|
|
- height : 100%;
|
|
|
+ height: 100%;
|
|
|
// box-shadow: 0px 1px 5px 1px #ccc;
|
|
|
}
|
|
|
|
|
|
.draggable-box {
|
|
|
- height : 100%;
|
|
|
+ height: 100%;
|
|
|
overflow: auto;
|
|
|
|
|
|
.list-main {
|
|
|
// min-height : 100%;
|
|
|
- padding : 5px;
|
|
|
- position : relative;
|
|
|
- background : #fafafa;
|
|
|
- // border : 1px #ccc dashed;
|
|
|
+ padding: 5px;
|
|
|
+ position: relative;
|
|
|
+ background: #fafafa;
|
|
|
+ // border : 1px #ccc dotted;
|
|
|
|
|
|
.moving {
|
|
|
// 拖放移动中
|
|
|
// outline-width: 0;
|
|
|
- min-height : 35px;
|
|
|
- box-sizing : border-box;
|
|
|
- overflow : hidden;
|
|
|
- padding : 0 !important;
|
|
|
+ min-height: 35px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ overflow: hidden;
|
|
|
+ padding: 0 !important;
|
|
|
// margin : 3px 0;
|
|
|
- position : relative;
|
|
|
+ position: relative;
|
|
|
|
|
|
&::before {
|
|
|
- content : '';
|
|
|
- height : 5px;
|
|
|
- width : 100%;
|
|
|
+ content: '';
|
|
|
+ height: 5px;
|
|
|
+ width: 100%;
|
|
|
background: @primary-color;
|
|
|
- position : absolute;
|
|
|
- top : 0;
|
|
|
- right : 0;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ right: 0;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.drag-move-box {
|
|
|
- position : relative;
|
|
|
+ position: relative;
|
|
|
box-sizing: border-box;
|
|
|
- padding : 12px 10px;
|
|
|
- overflow : hidden;
|
|
|
+ padding: 12px 10px;
|
|
|
+ overflow: hidden;
|
|
|
transition: all .3s;
|
|
|
min-height: 36px;
|
|
|
|
|
|
@@ -310,13 +310,13 @@
|
|
|
|
|
|
// 选择时 start
|
|
|
&::before {
|
|
|
- content : '';
|
|
|
- height : 5px;
|
|
|
- width : 100%;
|
|
|
+ content: '';
|
|
|
+ height: 5px;
|
|
|
+ width: 100%;
|
|
|
background: @primary-color;
|
|
|
- position : absolute;
|
|
|
- top : 0;
|
|
|
- right : -100%;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ right: -100%;
|
|
|
transition: all .3s;
|
|
|
}
|
|
|
|
|
|
@@ -325,57 +325,57 @@
|
|
|
right: 0;
|
|
|
}
|
|
|
|
|
|
- background : @primary-hover-bg-color;
|
|
|
+ background: @primary-hover-bg-color;
|
|
|
outline-offset: 0;
|
|
|
}
|
|
|
|
|
|
// 选择时 end
|
|
|
.form-item-box {
|
|
|
- position : relative;
|
|
|
+ position: relative;
|
|
|
box-sizing: border-box;
|
|
|
- word-wrap : break-word;
|
|
|
+ word-wrap: break-word;
|
|
|
|
|
|
&::before {
|
|
|
- content : "";
|
|
|
+ content: "";
|
|
|
position: absolute;
|
|
|
- width : 100%;
|
|
|
- height : 100%;
|
|
|
- top : 0;
|
|
|
- left : 0;
|
|
|
- z-index : 888;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ z-index: 888;
|
|
|
}
|
|
|
|
|
|
.ant-form-item {
|
|
|
// 修改ant form-item的margin为padding
|
|
|
- margin : 0;
|
|
|
+ margin: 0;
|
|
|
padding-bottom: 6px;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.show-key-box {
|
|
|
// 显示key
|
|
|
- position : absolute;
|
|
|
- bottom : -1px;
|
|
|
- right : 5px;
|
|
|
+ position: absolute;
|
|
|
+ bottom: -1px;
|
|
|
+ right: 5px;
|
|
|
font-size: 14px;
|
|
|
- z-index : 999;
|
|
|
- color : @primary-color;
|
|
|
+ z-index: 999;
|
|
|
+ color: @primary-color;
|
|
|
}
|
|
|
|
|
|
- >.copy,
|
|
|
- >.delete {
|
|
|
- position : absolute;
|
|
|
- top : 0;
|
|
|
- width : 30px;
|
|
|
- height : 30px;
|
|
|
+ > .copy,
|
|
|
+ > .delete {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ width: 30px;
|
|
|
+ height: 30px;
|
|
|
line-height: 30px;
|
|
|
- text-align : center;
|
|
|
- color : #fff;
|
|
|
- z-index : 989;
|
|
|
- transition : all .3s;
|
|
|
+ text-align: center;
|
|
|
+ color: #fff;
|
|
|
+ z-index: 989;
|
|
|
+ transition: all .3s;
|
|
|
|
|
|
&.unactivated {
|
|
|
- opacity : 0 !important;
|
|
|
+ opacity: 0 !important;
|
|
|
pointer-events: none;
|
|
|
}
|
|
|
|
|
|
@@ -384,15 +384,15 @@
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- >.copy {
|
|
|
+ > .copy {
|
|
|
border-radius: 0 0 0 8px;
|
|
|
- right : 30px;
|
|
|
- background : @primary-color;
|
|
|
+ right: 30px;
|
|
|
+ background: @primary-color;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
|
|
|
- >.delete {
|
|
|
- right : 0px;
|
|
|
+ > .delete {
|
|
|
+ right: 0px;
|
|
|
background: @danger-color;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
@@ -402,44 +402,44 @@
|
|
|
// 动态表格设计面板样式
|
|
|
.batch-box,
|
|
|
.select-input-list-box {
|
|
|
- >.batch-label {
|
|
|
- font-size : 16px;
|
|
|
+ > .batch-label {
|
|
|
+ font-size: 16px;
|
|
|
font-weight: 500;
|
|
|
- padding : 10px 10px;
|
|
|
+ padding: 10px 10px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
.draggable-box {
|
|
|
min-height: 60px;
|
|
|
- width : 100%;
|
|
|
- border : 1px #ccc dashed;
|
|
|
+ width: 100%;
|
|
|
+ border: 1px #ccc dotted;
|
|
|
background: #fff;
|
|
|
|
|
|
.list-main {
|
|
|
- min-height : 60px;
|
|
|
- position : relative;
|
|
|
- border : 1px #ccc dashed;
|
|
|
- overflow-x : auto;
|
|
|
- overflow-y : auto;
|
|
|
+ min-height: 60px;
|
|
|
+ position: relative;
|
|
|
+ border: 1px #ccc dotted;
|
|
|
+ overflow-x: auto;
|
|
|
+ overflow-y: auto;
|
|
|
white-space: nowrap;
|
|
|
|
|
|
.moving {
|
|
|
// 拖放移动中
|
|
|
- width : 175px;
|
|
|
+ width: 175px;
|
|
|
min-height: 94px;
|
|
|
- display : inline-block;
|
|
|
+ display: inline-block;
|
|
|
}
|
|
|
|
|
|
- >div {
|
|
|
- min-width : 185px;
|
|
|
- display : inline-block;
|
|
|
+ > div {
|
|
|
+ min-width: 185px;
|
|
|
+ display: inline-block;
|
|
|
vertical-align: top;
|
|
|
|
|
|
- .ant-form-item>.ant-form-item-label,
|
|
|
- .ant-form-item>.ant-form-item-control-wrapper {
|
|
|
+ .ant-form-item > .ant-form-item-label,
|
|
|
+ .ant-form-item > .ant-form-item-control-wrapper {
|
|
|
text-align: left;
|
|
|
- display : block;
|
|
|
+ display: block;
|
|
|
}
|
|
|
|
|
|
.ant-col {
|
|
|
@@ -455,7 +455,7 @@
|
|
|
.select-input-list-box {
|
|
|
.column-box {
|
|
|
display: flex;
|
|
|
- width : 100%;
|
|
|
+ width: 100%;
|
|
|
|
|
|
.check-box {
|
|
|
width: 80px;
|
|
|
@@ -478,21 +478,20 @@
|
|
|
.select-input-list-box,
|
|
|
.grid-box,
|
|
|
.table-box {
|
|
|
- position : relative;
|
|
|
+ position: relative;
|
|
|
box-sizing: border-box;
|
|
|
- padding : 5px;
|
|
|
- background: @layout-background-color;
|
|
|
- width : 100%;
|
|
|
+ padding: 5px;
|
|
|
+ width: 100%;
|
|
|
transition: all .3s;
|
|
|
- overflow : hidden;
|
|
|
+ overflow: hidden;
|
|
|
|
|
|
.form-item-box {
|
|
|
- position : relative;
|
|
|
+ position: relative;
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
.ant-form-item {
|
|
|
// 修改ant form-item的margin为padding
|
|
|
- margin : 0;
|
|
|
+ margin: 0;
|
|
|
padding-bottom: 15px;
|
|
|
}
|
|
|
}
|
|
|
@@ -506,14 +505,13 @@
|
|
|
.table-td {
|
|
|
.draggable-box {
|
|
|
min-height: 60px;
|
|
|
- min-width : 50px;
|
|
|
- border : 1px #ccc dashed;
|
|
|
+ min-width: 50px;
|
|
|
+ border: 1px #ccc dotted;
|
|
|
background: #fff;
|
|
|
|
|
|
.list-main {
|
|
|
min-height: 60px;
|
|
|
- position : relative;
|
|
|
- border : 1px #ccc dashed;
|
|
|
+ position: relative;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -521,40 +519,40 @@
|
|
|
|
|
|
// 选择时 start
|
|
|
&::before {
|
|
|
- content : '';
|
|
|
- height : 5px;
|
|
|
- width : 100%;
|
|
|
+ content: '';
|
|
|
+ height: 5px;
|
|
|
+ width: 100%;
|
|
|
background: transparent;
|
|
|
- position : absolute;
|
|
|
- top : 0;
|
|
|
- right : -100%;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ right: -100%;
|
|
|
transition: all .3s;
|
|
|
}
|
|
|
|
|
|
&.active {
|
|
|
&::before {
|
|
|
background: @layout-color;
|
|
|
- right : 0;
|
|
|
+ right: 0;
|
|
|
}
|
|
|
|
|
|
- background : @layout-hover-bg-color;
|
|
|
+ background: @layout-hover-bg-color;
|
|
|
outline-offset: 0;
|
|
|
}
|
|
|
|
|
|
- >.copy,
|
|
|
- >.delete {
|
|
|
- position : absolute;
|
|
|
- top : 0px;
|
|
|
- width : 30px;
|
|
|
- height : 30px;
|
|
|
+ > .copy,
|
|
|
+ > .delete {
|
|
|
+ position: absolute;
|
|
|
+ top: 0px;
|
|
|
+ width: 30px;
|
|
|
+ height: 30px;
|
|
|
line-height: 30px;
|
|
|
- text-align : center;
|
|
|
- color : #fff;
|
|
|
- z-index : 989;
|
|
|
- transition : all .3s;
|
|
|
+ text-align: center;
|
|
|
+ color: #fff;
|
|
|
+ z-index: 989;
|
|
|
+ transition: all .3s;
|
|
|
|
|
|
&.unactivated {
|
|
|
- opacity : 0 !important;
|
|
|
+ opacity: 0 !important;
|
|
|
pointer-events: none;
|
|
|
}
|
|
|
|
|
|
@@ -563,16 +561,16 @@
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- >.copy {
|
|
|
+ > .copy {
|
|
|
border-radius: 0 0 0 8px;
|
|
|
- right : 30px;
|
|
|
- background : @layout-color;
|
|
|
+ right: 30px;
|
|
|
+ background: @layout-color;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
|
|
|
- >.delete {
|
|
|
- right : 0px;
|
|
|
- background: @danger-color;
|
|
|
+ > .delete {
|
|
|
+ right: 0px;
|
|
|
+ background: @danger-color;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
}
|
|
|
@@ -584,31 +582,33 @@
|
|
|
|
|
|
// 表格右键菜单样式
|
|
|
.right-menu {
|
|
|
- width : 160px;
|
|
|
+ width: 160px;
|
|
|
background: #fff;
|
|
|
- border : 1px solid #ccc;
|
|
|
- position : fixed;
|
|
|
+ border: 1px solid #ccc;
|
|
|
+ position: fixed;
|
|
|
transition: all 0s;
|
|
|
box-shadow: 3px 3px 8px #999;
|
|
|
border-radius: 3px;
|
|
|
- padding : 8px 0;
|
|
|
- z-index : 2199;
|
|
|
+ padding: 8px 0;
|
|
|
+ z-index: 2199;
|
|
|
|
|
|
ul {
|
|
|
- padding : 0;
|
|
|
- margin : 0;
|
|
|
+ padding: 0;
|
|
|
+ margin: 0;
|
|
|
list-style: none;
|
|
|
|
|
|
li {
|
|
|
- cursor : pointer;
|
|
|
+ cursor: pointer;
|
|
|
user-select: none;
|
|
|
- padding : 0 15px;
|
|
|
- height : 30px;
|
|
|
+ padding: 0 15px;
|
|
|
+ height: 30px;
|
|
|
line-height: 30px;
|
|
|
- font-size : 14px;
|
|
|
- i{
|
|
|
+ font-size: 14px;
|
|
|
+
|
|
|
+ i {
|
|
|
margin-right: 4px;
|
|
|
}
|
|
|
+
|
|
|
&:hover {
|
|
|
background: #eee;
|
|
|
}
|
|
|
@@ -619,7 +619,7 @@
|
|
|
// 控件属性复选组件样式
|
|
|
.kk-checkbox {
|
|
|
.ant-checkbox-wrapper {
|
|
|
- margin-left : 0 !important;
|
|
|
+ margin-left: 0 !important;
|
|
|
margin-right: 8px;
|
|
|
}
|
|
|
}
|
|
|
@@ -636,9 +636,8 @@
|
|
|
.list-enter,
|
|
|
.list-leave-to
|
|
|
|
|
|
- /* .list-leave-active for below version 2.1.8 */
|
|
|
- {
|
|
|
- opacity : 0;
|
|
|
+ /* .list-leave-active for below version 2.1.8 */ {
|
|
|
+ opacity: 0;
|
|
|
transform: translateX(-100px);
|
|
|
}
|
|
|
|
|
|
@@ -648,35 +647,35 @@
|
|
|
|
|
|
::-webkit-scrollbar {
|
|
|
/*滚动条整体样式*/
|
|
|
- width : 6px;
|
|
|
+ width: 6px;
|
|
|
/*高宽分别对应横竖滚动条的尺寸*/
|
|
|
- height : 6px;
|
|
|
+ height: 6px;
|
|
|
scrollbar-arrow-color: red;
|
|
|
|
|
|
}
|
|
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
|
/*滚动条里面小方块*/
|
|
|
- border-radius : 5px;
|
|
|
- box-shadow : inset 0 0 5px rgba(0, 0, 0, 0.2);
|
|
|
- background : rgba(0, 0, 0, 0.2);
|
|
|
+ border-radius: 5px;
|
|
|
+ box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
|
|
|
+ background: rgba(0, 0, 0, 0.2);
|
|
|
scrollbar-arrow-color: red;
|
|
|
}
|
|
|
|
|
|
::-webkit-scrollbar-track {
|
|
|
/*滚动条里面轨道*/
|
|
|
- box-shadow : inset 0 0 5px rgba(0, 0, 0, 0.2);
|
|
|
+ box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
|
|
|
border-radius: 0;
|
|
|
- background : rgba(0, 0, 0, 0.1);
|
|
|
+ background: rgba(0, 0, 0, 0.1);
|
|
|
}
|
|
|
|
|
|
// 行内组件宽度默认175px
|
|
|
.ant-form-inline {
|
|
|
.list-main {
|
|
|
- display : flex;
|
|
|
- flex-wrap : wrap;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
justify-content: flex-start;
|
|
|
- align-content : flex-start;
|
|
|
+ align-content: flex-start;
|
|
|
|
|
|
.layout-width {
|
|
|
width: 100%;
|
|
|
@@ -690,27 +689,26 @@
|
|
|
}
|
|
|
|
|
|
|
|
|
-
|
|
|
// code盒子样式
|
|
|
.json-box-9136076486841527 {
|
|
|
- height : 570px;
|
|
|
+ height: 570px;
|
|
|
overflow: auto;
|
|
|
|
|
|
.vue-codemirror-wrap {
|
|
|
height: 100%;
|
|
|
|
|
|
.CodeMirror-wrap {
|
|
|
- height : 100%;
|
|
|
+ height: 100%;
|
|
|
background: #f6f6f6;
|
|
|
|
|
|
.CodeMirror-scroll {
|
|
|
height: 100%;
|
|
|
- width : 100%;
|
|
|
+ width: 100%;
|
|
|
}
|
|
|
|
|
|
pre.CodeMirror-line,
|
|
|
.CodeMirror-linenumber {
|
|
|
- min-height : 21px;
|
|
|
+ min-height: 21px;
|
|
|
line-height: 21px;
|
|
|
}
|
|
|
}
|
|
|
@@ -727,7 +725,7 @@
|
|
|
// modal复制按钮样式
|
|
|
.copy-btn-box-9136076486841527 {
|
|
|
padding-top: 8px;
|
|
|
- text-align : center;
|
|
|
+ text-align: center;
|
|
|
|
|
|
.copy-btn {
|
|
|
margin-right: 8px;
|
|
|
@@ -738,23 +736,23 @@
|
|
|
.k-form-build-9136076486841527 {
|
|
|
|
|
|
.select-input-list-box {
|
|
|
- color : rgba(0, 0, 0, 0.65);
|
|
|
+ color: rgba(0, 0, 0, 0.65);
|
|
|
font-size: 14px;
|
|
|
|
|
|
.ant-form-item {
|
|
|
margin-bottom: 2px;
|
|
|
- margin-right : 8px
|
|
|
+ margin-right: 8px
|
|
|
}
|
|
|
|
|
|
&.ant-form-horizontal {
|
|
|
.ant-col.ant-form-item-control-wrapper {
|
|
|
- height : 30px;
|
|
|
- display : flex;
|
|
|
+ height: 30px;
|
|
|
+ display: flex;
|
|
|
align-items: center;
|
|
|
}
|
|
|
|
|
|
.text-box {
|
|
|
- height : 30px;
|
|
|
+ height: 30px;
|
|
|
line-height: 30px;
|
|
|
}
|
|
|
}
|
|
|
@@ -770,9 +768,9 @@
|
|
|
position: relative;
|
|
|
|
|
|
.ant-form-explain {
|
|
|
- bottom : -16px;
|
|
|
+ bottom: -16px;
|
|
|
position: absolute;
|
|
|
- z-index : 10;
|
|
|
+ z-index: 10;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -792,12 +790,12 @@
|
|
|
width: 170px !important;
|
|
|
}
|
|
|
|
|
|
- .ant-table-thead>tr>th {
|
|
|
+ .ant-table-thead > tr > th {
|
|
|
|
|
|
padding: 12px;
|
|
|
}
|
|
|
|
|
|
- .ant-table-tbody>tr>td {
|
|
|
+ .ant-table-tbody > tr > td {
|
|
|
padding: 8px;
|
|
|
}
|
|
|
|
|
|
@@ -821,44 +819,34 @@
|
|
|
|
|
|
//颜色选择器覆盖
|
|
|
.m-colorPicker {
|
|
|
- width:25%;
|
|
|
- vertical-align:bottom;
|
|
|
+ width: 25%;
|
|
|
+ vertical-align: bottom;
|
|
|
padding: 5px;
|
|
|
border: 1px solid #e6e6e6;
|
|
|
border-radius: 4px;
|
|
|
font-size: 0;
|
|
|
+
|
|
|
.colorBtn {
|
|
|
height: 22px !important;
|
|
|
width: 100% !important;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-// .k-form-build-9136076486841527 {
|
|
|
-
|
|
|
-// }
|
|
|
-
|
|
|
-
|
|
|
-// footer样式
|
|
|
-// .footer-9136076486841527 {
|
|
|
-// width : 100%;
|
|
|
-// height : 30px;
|
|
|
-// line-height: 30px;
|
|
|
-// padding : 0 15px;
|
|
|
-// text-align : right;
|
|
|
-// background : #fafafa;
|
|
|
-// color : @primary-color;
|
|
|
-// font-size : 14px;
|
|
|
-// font-weight: bold;
|
|
|
-// border-top : 1px solid #e0e0e0;
|
|
|
-
|
|
|
-// >a {
|
|
|
-// color : @primary-color;
|
|
|
-// text-decoration: none;
|
|
|
-// }
|
|
|
-// }
|
|
|
|
|
|
.ant-drawer {
|
|
|
:deep(.ant-drawer-content) {
|
|
|
height: inherit !important;
|
|
|
}
|
|
|
-}
|
|
|
+}
|
|
|
+
|
|
|
+.ant-card .ant-card-body {
|
|
|
+ padding: 8px !important;
|
|
|
+ border-radius: 0 0 8px 8px;
|
|
|
+}
|
|
|
+
|
|
|
+.ant-card .ant-card-head {
|
|
|
+ min-height: 36px;
|
|
|
+}
|
|
|
+.ant-tabs-nav .ant-tabs-nav-list{
|
|
|
+ padding-left: 12px;
|
|
|
+}
|
liuc