| | |
| | | }, |
| | | data() { |
| | | return { |
| | | isV:this.$isVertical |
| | | } |
| | | }, |
| | | |
| | | |
| | | created() { |
| | | console.log("this.isV",this.flowText) |
| | | }, |
| | | methods: {} |
| | | } |
| | | </script> |
| | | |
| | | <style lang="scss" :src="$cssSrc" scoped > |
| | | <style lang="less" scoped> |
| | | |
| | | .root { |
| | | &:before { |
| | | display: none !important; |
| | | } |
| | | } |
| | | |
| | | .node-error-state { |
| | | .node-body { |
| | | box-shadow: 0px 0px 5px 0px #F56C6C !important; |
| | | } |
| | | } |
| | | |
| | | .node { |
| | | padding: 0 50px; |
| | | width: 220px; |
| | | position: relative; |
| | | |
| | | &:before { |
| | | content: ''; |
| | | position: absolute; |
| | | top: -12px; |
| | | left: 50%; |
| | | -webkit-transform: translateX(-50%); |
| | | transform: translateX(-50%); |
| | | width: 0; |
| | | border-style: solid; |
| | | border-width: 8px 6px 4px; |
| | | border-color: #CACACA transparent transparent; |
| | | background: #F5F5F7; |
| | | } |
| | | |
| | | .node-body { |
| | | cursor: pointer; |
| | | max-height: 120px; |
| | | position: relative; |
| | | border-radius: 5px; |
| | | background-color: white; |
| | | box-shadow: 0px 0px 5px 0px #d8d8d8; |
| | | |
| | | &:hover { |
| | | box-shadow: 0px 0px 3px 0px @theme-primary; |
| | | |
| | | .node-body-header { |
| | | .el-icon-close { |
| | | display: inline; |
| | | font-size: medium; |
| | | } |
| | | } |
| | | } |
| | | |
| | | .node-body-header { |
| | | border-top-left-radius: 5px; |
| | | border-top-right-radius: 5px; |
| | | padding: 5px 15px; |
| | | color: white; |
| | | font-size: xx-small; |
| | | |
| | | .el-icon-close { |
| | | display: none; |
| | | } |
| | | |
| | | .name { |
| | | height: 14px; |
| | | width: 150px; |
| | | display: inline-block |
| | | } |
| | | } |
| | | |
| | | .node-body-content { |
| | | padding: 18px; |
| | | color: #656363; |
| | | font-size: 14px; |
| | | |
| | | i { |
| | | position: absolute; |
| | | top: 55%; |
| | | right: 5px; |
| | | font-size: medium; |
| | | } |
| | | |
| | | .placeholder { |
| | | color: #8c8c8c; |
| | | } |
| | | } |
| | | |
| | | .node-error { |
| | | position: absolute; |
| | | right: -40px; |
| | | top: 20px; |
| | | font-size: 25px; |
| | | color: #F56C6C; |
| | | } |
| | | } |
| | | |
| | | .node-footer { |
| | | position: relative; |
| | | |
| | | .btn { |
| | | width: 100%; |
| | | display: flex; |
| | | padding: 20px 0 32px; |
| | | justify-content: center; |
| | | } |
| | | |
| | | /deep/ .el-button { |
| | | height: 32px; |
| | | } |
| | | |
| | | &::before { |
| | | content: ""; |
| | | position: absolute; |
| | | top: 0; |
| | | left: 0; |
| | | right: 0; |
| | | bottom: 0; |
| | | z-index: -1; |
| | | margin: auto; |
| | | width: 2px; |
| | | height: 100%; |
| | | background-color: #CACACA; |
| | | } |
| | | } |
| | | } |
| | | </style> |
| | | |