You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
111 lines
4.7 KiB
111 lines
4.7 KiB
.bg-black { /*background: rgb(48, 65, 86) !important;margin: -10px;border-radius: 0 !important;color: #fff*/
|
|
}
|
|
|
|
.container-screen {display: flex;justify-content: space-between;padding: 0 !important;
|
|
.tabs {
|
|
.el-tabs__nav {display: flex;justify-content: space-between;width: 100%}
|
|
.el-tabs__item {flex: 2;padding: 0;text-align: center}
|
|
}
|
|
.main-left {width: 180px;transition: all .3s;
|
|
.scroll {height: calc(100vh - 114px)}
|
|
.components-list {width: 100%;
|
|
ul {
|
|
li {padding: 0 5px;
|
|
i {font-size: 13px;margin-right: 3px}
|
|
}
|
|
}
|
|
}
|
|
.layer-list {font-size: 14px;overflow-y: auto;
|
|
ul {height: 100%}
|
|
li {line-height: 36px;padding: 0 8px;background: #f4f6fc;transition: all .3s;display: flex;justify-content: space-between;align-items: center;border: 1px solid transparent;border-bottom-color: #fff;
|
|
span {flex: 2;cursor: move;}
|
|
i {margin: 0 3px}
|
|
.icon {font-size: 20px;cursor: pointer}
|
|
&:hover {color: #66b1ff}
|
|
&.active { color: #fff;background: #66b1ff}
|
|
&.lock { color: #eebe77;
|
|
span {cursor: not-allowed}
|
|
}
|
|
&.display {opacity: .5}
|
|
&.isGroup{padding-left: 20px}
|
|
}
|
|
}
|
|
}
|
|
.main-box {flex: 2;border-left: 1px solid #e0e0e0;border-right: 1px solid #e0e0e0;height: calc(100vh - 66px);display: flex;flex-direction: column;color: #fff;width: 100%;position: relative;overflow: hidden;
|
|
.main-tools {line-height: 20px;
|
|
.control-tools {flex: 2;color: #999;margin-left: 20px;
|
|
i {margin-right: 5px;cursor: pointer}
|
|
.active {color: #409eff}
|
|
}
|
|
}
|
|
.design-box {background: rgb(48, 65, 86);flex: 2;padding: 0 0 0 20px;position: relative;overflow: auto;}
|
|
.draw-react {border: 1px solid #409eff;position: absolute;z-index: 999}
|
|
.design-canvas {height: 100%;position: absolute;cursor: pointer;top: 20px;left: 20px;transform-origin: left top;
|
|
.drag {height: 100%}
|
|
.resize-box {
|
|
position: absolute;left: 0;top: 0;width: 100%;height: 100%;border: 1px dotted #409eff;z-index: 5;
|
|
span {width: 8px;height: 8px;display: block;border-radius: 50%;background: #409eff;position: absolute;border: 1px solid rgba(255, 255, 255, .8);
|
|
}
|
|
.rs1 {left: -4px;top: -4px;cursor: se-resize;}
|
|
.rs2 {left: 50%;top: -4px;margin-left: -4px;cursor: s-resize}
|
|
.rs3 {right: -4px;top: -4px;cursor: sw-resize}
|
|
.rs4 {left: -4px;top: 50%;margin-top: -4px;cursor: e-resize}
|
|
.rs5 {right: -4px;top: 50%;margin-top: -4px;cursor: e-resize}
|
|
.rs6 {left: -4px;bottom: -4px;cursor: sw-resize}
|
|
.rs7 {left: 50%;bottom: -4px;margin-left: -4px;cursor: s-resize}
|
|
.rs8 {right: -4px;bottom: -4px;cursor: se-resize;}
|
|
&:hover {background: rgba(64, 158, 255, .5);cursor: move}
|
|
.position {font-size: 12px;position: absolute;left: 0;top: -20px}
|
|
}
|
|
&.preview {position: fixed;left: 0;top: 0;z-index: 50;
|
|
transform: scale(1) translate(0px, 0px) !important;transition: all .3s;
|
|
.resize-box {display: none}
|
|
}
|
|
}
|
|
.design-footer {background: rgb(48, 65, 86);display: flex;justify-content: space-between;padding: 0 5px;align-items: center;
|
|
.center {flex: 2;display: flex;justify-content: center}
|
|
.item {display: flex;align-items: center;margin: 0 10px;
|
|
.label {margin-right: 5px;display: block;white-space: nowrap}
|
|
}
|
|
.slider {
|
|
.label {margin-right: 10px}
|
|
.el-slider {width: 150px}
|
|
}
|
|
.icon {cursor: pointer}
|
|
//.offset{width: 120px;text-align: center;color: red}
|
|
}
|
|
.el-slider__marks-stop {background: red}
|
|
.no-date {color: #ccc;position: absolute;left: 50%;top: 30%;transform: translateX(-50%);font-size: 20px}
|
|
}
|
|
.main-right {width: 220px;transition: all .3s;position: relative;
|
|
form {padding: 0 10px}
|
|
.el-form-item {margin-bottom: 8px}
|
|
.color-picker {
|
|
.el-color-picker__trigger, .el-color-picker {width: 100%}
|
|
}
|
|
.upload-image {
|
|
.el-form-item__content {display: flex}
|
|
.el-input {flex: 2}
|
|
.el-upload-list {display: none}
|
|
}
|
|
&.lock {
|
|
&:after {position: absolute;left: 0;top: 0;bottom: 0;right: 0;content: '';background: rgba(255, 255, 255, .3)}
|
|
.lock {z-index: 2}
|
|
}
|
|
}
|
|
.close-preview {position: fixed;right: 10px;top: 10px;z-index: 51;color: #999;cursor: pointer}
|
|
.screen-right-menu {position: absolute;z-index: 100;background: #fff;width: 160px;transform: translateY(-50%);
|
|
li {padding: 5px 15px;cursor: pointer;
|
|
&:hover {background: #409eff;color: #fff}
|
|
&.display{cursor: not-allowed;opacity: .5;
|
|
&:hover{background: #fff;color: #333}}
|
|
}
|
|
}
|
|
}
|
|
|
|
.design-canvas {
|
|
.group {
|
|
position: absolute;
|
|
}
|
|
.default-img, .default-bg {display: block;width: 100%;height: 100%}
|
|
}
|
|
|