@javaguns/flow-ui/es/src/flow-node/flow-simple-node/style/index.css

``` <template> <a-spin :spinning="loading"> <FlowDesigner ref="flowDesigner" top="50px"> </FlowDesigner> </a-spin> </template> <script lang="ts" setup> import { ref, provide, onMounted } from 'vue'; import { FlowDesigner, LoadingKey } from '@j

.guns-flow-node {
  position: relative;
  display: flexbox;
  display: flex;
  flex-direction: column;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
}
.guns-flow-node .guns-flow-node-box {
  position: relative;
  flex-grow: 1;
  padding: 0 50px;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
}
.guns-flow-node .guns-flow-node-box::before {
  position: absolute;
  inset: 0;
  width: 1px;
  height: 100%;
  margin: auto;
  content: '';
  background-color: #cccfdb;
}
.guns-flow-node .guns-flow-node-box .guns-flow-node-item {
  position: relative;
  padding-top: 0;
  cursor: pointer;
  /** 未进行 **/
}
.guns-flow-node .guns-flow-node-box .guns-flow-node-item.has-error {
  border: 1px solid #ff5b4c;
  box-shadow: 0 0 3px 0 #ff5b4c;
}
.guns-flow-node .guns-flow-node-box .guns-flow-node-item .node-error {
  width: 32px;
  height: 32px;
  position: absolute;
  top: 32px;
  right: -40px;
  font-size: 32px;
  color: #ff5b4c;
}
.guns-flow-node .guns-flow-node-box .guns-flow-node-item .node-status-current {
  background-image: linear-gradient(to left, #1890ff, #1890ff), linear-gradient(#909399, #909399);
  background-image: linear-gradient(to left, #1890ff 0, #1890ff 100%), linear-gradient(#909399, #909399);
  background-image: linear-gradient(90deg, #1890ff, #1890ff), linear-gradient(#1890ff, #1890ff);
}
.guns-flow-node .guns-flow-node-box .guns-flow-node-item .node-status-not {
  background-image: linear-gradient(to left, #909399, #909399), linear-gradient(#909399, #909399);
  background-image: linear-gradient(to left, #909399 0, #909399 100%), linear-gradient(#909399, #909399);
  background-image: linear-gradient(90deg, #909399, #909399), linear-gradient(#909399, #909399);
}
.guns-flow-node .guns-flow-node-box .guns-flow-node-item .node-status-complete {
  background-image: linear-gradient(to left, #20b2aa, #20b2aa), linear-gradient(#20b2aa, #20b2aa);
  background-image: linear-gradient(to left, #20b2aa 0, #20b2aa 100%), linear-gradient(#20b2aa, #20b2aa);
  background-image: linear-gradient(90deg, #20b2aa, #20b2aa), linear-gradient(#20b2aa, #20b2aa);
}
.guns-flow-node .guns-flow-node-box .guns-flow-node-item .node-status-reject {
  background-image: linear-gradient(to left, #fc653f, #fc653f), linear-gradient(#fc653f, #fc653f);
  background-image: linear-gradient(to left, #fc653f 0, #fc653f 100%), linear-gradient(#fc653f, #fc653f);
  background-image: linear-gradient(90deg, #fc653f, #fc653f), linear-gradient(#fc653f, #fc653f);
}
.guns-flow-node .guns-flow-node-box .guns-flow-node-item .node-status-skip {
  background-image: linear-gradient(to left, #d9db9b, #d9db9b), linear-gradient(#d9db9b, #d9db9b);
  background-image: linear-gradient(to left, #d9db9b 0, #d9db9b 100%), linear-gradient(#d9db9b, #d9db9b);
  background-image: linear-gradient(90deg, #d9db9b, #d9db9b), linear-gradient(#d9db9b, #d9db9b);
}
.guns-flow-node .guns-flow-node-box .guns-flow-node-item .node-status-back {
  background-image: linear-gradient(to left, #EBADAD, #EBADAD), linear-gradient(#EBADAD, #EBADAD);
  background-image: linear-gradient(to left, #EBADAD 0, #EBADAD 100%), linear-gradient(#EBADAD, #EBADAD);
  background-image: linear-gradient(90deg, #EBADAD, #EBADAD), linear-gradient(#EBADAD, #EBADAD);
}
.guns-flow-node .guns-flow-node-box .guns-flow-node-item .node-status-revoke {
  background-image: linear-gradient(to left, #f00056, #f00056), linear-gradient(#f00056, #f00056);
  background-image: linear-gradient(to left, #f00056 0, #f00056 100%), linear-gradient(#f00056, #f00056);
  background-image: linear-gradient(90deg, #f00056, #f00056), linear-gradient(#f00056, #f00056);
}
.guns-flow-node .guns-flow-node-box .guns-flow-node-branch {
  margin-top: 20px;
}
.guns-flow-node .guns-flow-node-box .guns-flow-item-hover:hover {
  box-shadow: 0 0 0 1px var(--hover-color), 0 0 5px 4px rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}
.guns-flow-node .guns-flow-node-box .guns-flow-item-hover:hover + .guns-flow-remove-button {
  display: flex !important;
}
.guns-flow-node .guns-flow-node-box .guns-flow-item-hover:hover .guns-flow-remove-button {
  display: flex !important;
}
.guns-flow-node .guns-flow-node-box .guns-flow-item-hover:hover .guns-flow-item-card-footer-handle {
  display: flex !important;
}
.guns-flow-node .guns-flow-node-box .guns-flow-item-active {
  box-shadow: 0 3px 30px var(--hover-color);
  border-radius: 4px;
}
.guns-flow-node .guns-flow-complete::before {
  width: 2px !important;
  background-color: #20b2aa !important;
}