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.
125 lines
5.8 KiB
125 lines
5.8 KiB
.flow-container {
|
|
$background: #fff;
|
|
$borderColor: #eee;
|
|
overflow-x: auto;
|
|
.flow-main { min-width: min-content;display: flex;flex-direction: column;align-items: center;}
|
|
.flow-group {position: relative;background: $background;min-width: min-content}
|
|
.flow-item {border: 1px solid $borderColor;box-shadow: 0 0 6px rgba(102, 102, 102, 0.1);height: 80px;border-radius: 5px;overflow: hidden;display: flex;flex-direction: column;transition: all .3s;position: relative;z-index: 2;background: $background;width: 180px;
|
|
&:hover {border-color: rgb(85, 197, 192);
|
|
.title .close {visibility: visible;opacity: 1}
|
|
}
|
|
.title {background: rgb(85, 197, 192);color: #fff;display: flex;align-items: center;padding: 3px 10px;justify-content: space-between;
|
|
span {flex: 2}
|
|
.close {transform: scale(.8);visibility: hidden;transition: all .3s;opacity: 0;cursor: pointer}
|
|
i {font-size: 14px;margin-right: 3px}
|
|
&.bg-2 {background: rgb(255, 148, 62)}
|
|
&.bg-5 {background: none;color: #666}
|
|
&.bg-3 {background: rgb(50, 150, 250)}
|
|
}
|
|
.text {flex: 1;display: flex;align-items: center;padding: 5px 15px;cursor: pointer;
|
|
div {display: block;max-height: 38px;overflow: hidden;color: #666;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;}
|
|
}
|
|
}
|
|
.flow-add {padding: 8px 0;position: relative;font-size: 12px;
|
|
i {width: 30px;height: 30px;border-radius: 50%;border: 1px solid #eee;box-shadow: 0 0 6px rgba(102, 102, 102, 0.1);display: flex;align-items: center;justify-content: center;margin: 0 auto;background: $background;position: relative;z-index: 2;cursor: pointer;transform: scale(.7);
|
|
}
|
|
&:before {content: '';display: block;width: 1px;left: 50%;background: #eee;position: absolute;top: 0;bottom: 0}
|
|
}
|
|
.flow-col {flex: 1;margin: 0 5px;display: flex;flex-direction: column;align-items: center;position: relative;
|
|
&:before {content: '';display: block;width: 1px;top: 0; bottom: 0;left: 50%;background: #eee;position: absolute}
|
|
}
|
|
.flow-row {display: flex;position: relative}
|
|
.flow-branch-btn {display: none}
|
|
.flow-branch {padding: 40px 0 1px;display: flex;flex-direction: column;
|
|
.flow-branch-btn {display: block;position: absolute;left: 50%;top: 0;transform: translateX(-50%);z-index: 2}
|
|
&:before {content: '';display: block;left: 0;right: 0;bottom: 46px;top: 12px;border: 1px solid #eee;position: absolute}
|
|
.flow-col { // 中线
|
|
&:before {top: -28px}
|
|
&:after {content: '';display: none;width: 50%;top: 0;background: $borderColor;}
|
|
}
|
|
.mask-left, .mask-right {position: absolute;background: $background;top: -28px;display: block;bottom: -1px;width: calc(50% + 9px)}
|
|
.mask-left {left: -10px}
|
|
.mask-right {right: -10px}
|
|
}
|
|
.flow-end {
|
|
box-shadow: 0 2px 10px 0 rgb(145 145 153 / 50%);margin: 0 auto 30px;border-radius: 50%;position: relative;background: #bcbcc5;width: 50px;height: 50px;color: #fff;display: flex;align-items: center;justify-content: center;
|
|
}
|
|
&.type-show {
|
|
// 展示模式
|
|
.flow-branch {padding-top: 28px}
|
|
.flow-item {margin-bottom: 20px}
|
|
.flow-branch:before {bottom: 0;top: 0}
|
|
.flow-end {position: relative;margin-top: 20px;
|
|
&:before {content: '';width: 1px;background: $borderColor;position: absolute;left: 50%;top: -20px;height: 20px;}
|
|
}
|
|
}
|
|
.tools {text-align: right}
|
|
}
|
|
.flow-node-down {
|
|
h3 {font-size: 14px;margin-bottom: 10px}
|
|
div {display: flex}
|
|
i {font-size: 14px;margin-right: 5px}
|
|
}
|
|
.flow-container.horizontal {
|
|
$borderColor: #eee;
|
|
.flow-main {flex-direction: row;justify-content: center}
|
|
.flow-group:first-child {overflow: hidden;}
|
|
.flow-col {flex-direction: row;margin: 8px 0;
|
|
&:before {width: auto; right: 0;height: 1px;left: -29px;top: 50%}
|
|
}
|
|
.flow-add {padding: 0 8px;
|
|
&:before {left: 0;top: 50%;height: 1px;width: 100%}
|
|
}
|
|
.flow-row {flex-direction: column}
|
|
.flow-branch {flex-direction: row;align-items: center;padding: 0;
|
|
.flow-branch-btn {position: static;transform: translateX(0);margin-right: 8px;
|
|
button {width: 50px;white-space: normal;padding: 15px 10px;overflow: hidden;line-height: 14px}
|
|
}
|
|
&:before {bottom: 0;top: 0;left: 30px;right: 45px}
|
|
.mask-left, .mask-right {left: -29px;right: -1px;width: auto; height: calc(50% + 8px)}
|
|
.mask-left {top: -8px;}
|
|
.mask-right {bottom: -9px;top: auto}
|
|
.flow-col {
|
|
|
|
}
|
|
}
|
|
.flow-end {margin: 0}
|
|
&.type-show {
|
|
.flow-branch {margin-left: 20px}
|
|
.flow-item {margin-right: 20px;margin-bottom: 0}
|
|
.flow-branch .flow-col:before {left: -20px}
|
|
.flow-branch:before {left: -20px;right: -1px}
|
|
.flow-end {position: relative;margin-left: 20px;
|
|
&:before {content: '';height: 1px;background: $borderColor;position: absolute;top: 50%;left: -20px;width: 20px;}
|
|
}
|
|
}
|
|
}
|
|
// 侧栏drawer
|
|
.flow-modal-class {
|
|
$borderColor: #eee;
|
|
.el-drawer__header {border-bottom: 1px solid $borderColor;margin-bottom: 0;padding-bottom: 20px}
|
|
}
|
|
.flow-drawer {
|
|
.tip {margin-bottom: 20px;color: #999;line-height: 22px}
|
|
}
|
|
// 设计主页
|
|
.design-flow-container {position: relative;
|
|
.tools {position: absolute;right: 20px;top: 13px;z-index: 2}
|
|
.tabs-info {display: flex;justify-content: center;
|
|
form {width: 680px;}
|
|
}
|
|
}
|
|
//工作台
|
|
.task-apply {
|
|
.item {margin-bottom: 20px;
|
|
h3 {font-size: 14px;margin-bottom: 10px}
|
|
}
|
|
.list {display: flex;margin: 0 -8px;
|
|
> div {border: 1px solid #dcdfe6;padding: 16px;border-radius: 8px;height: 100px;margin: 0 8px;width: 24%;display: flex;align-items: center;font-weight: 700;transition: all .3s;cursor: pointer;box-shadow: 0 0 2px #ddd;
|
|
&:hover {border-color: #409eff}
|
|
}
|
|
.icon {font-size: 36px;width: 50px;height: 50px;display: flex;align-items: center;justify-content: center;border-radius: 4px;overflow: hidden;color: #fff;margin-right: 10px;
|
|
&:before {font-weight: 400}
|
|
}
|
|
}
|
|
}
|
|
|