| 1 |
- #app{font-family:Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;height:100vh}.el-container{height:100%}.el-aside{background-color:#f8f9fa;border-right:1px solid #e9ecef}.logo-container{padding:20px;text-align:center}.search-container{padding:0 20px 20px 20px}.el-menu-vertical{border-right:none}.el-menu-item{font-size:15px}.el-menu-item i{color:#606266;margin-right:5px}.mobile-header{background-color:#fff;box-shadow:0 2px 10px rgba(0,0,0,.1);z-index:100;padding:0}.mobile-header-content{display:flex;justify-content:space-between;align-items:center;height:60px;padding:0 15px}.mobile-title{margin:0;font-size:18px;color:#303133}.mobile-sidebar{padding:20px 0}.el-drawer__header{margin-bottom:0;padding:20px;border-bottom:1px solid #ebeef5}@media screen and (max-width:768px){.el-main{padding:10px}}.flow-node.end,.flow-node.start{background-color:#ecf5ff;border-color:#409eff}.employee-process .flow-node{border-color:#409eff}.employee-process .flow-node.condition{border-color:#e6a23c;background-color:#fdf6ec}.employee-process .process-line{stroke:#409eff}.employee-process .process-line.main{stroke:#409eff;stroke-width:2.5px}.path-label{fill:#409eff}.employee-process .zoom-btn i,.employee-process .zoom-tip i,.stat-value,.wheel-tip i{color:#409eff}.process-flow{height:900px}.flow-node{border:2px solid #409eff}.flow-node.end,.flow-node.start{background-color:#f0f9eb;border-color:#67c23a}.process-line{stroke:#dcdfe6}.process-line.main{stroke:#409eff}.sales-process .flow-node{border-color:#67c23a}.sales-process .flow-node.condition{border-color:#67c23a;background-color:#f0f9eb}.sales-process .process-line{stroke:#67c23a}.sales-process .process-line.main{stroke:#67c23a;stroke-width:2.5px}.path-label{fill:#67c23a}.zoom-btn i,.zoom-tip i{color:#409eff}.sales-process .zoom-btn i,.sales-process .zoom-tip i,.wheel-tip i{color:#67c23a}@media screen and (max-width:768px){.process-flow{height:700px}.intro-content{flex-direction:column}.intro-description{padding-right:0;margin-bottom:20px}.flow-node{width:100px;height:50px}.flow-node.condition{width:70px;height:70px}.node-label{font-size:12px}.zoom-controls{bottom:20px;right:20px;top:auto}.zoom-btn{width:32px;height:32px}.zoom-btn i{font-size:16px}.wheel-tip,.zoom-tip{bottom:20px;top:auto;font-size:12px}.wheel-tip{left:20px}}.process-container{padding:20px}.process-intro{margin-bottom:30px}.intro-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.intro-header h2{margin:0;color:#303133}.intro-content{display:flex;justify-content:space-between}.intro-description{flex:1;padding-right:30px}.intro-description p{line-height:1.6;color:#606266}.intro-stats{display:flex;gap:30px}.stat-item{text-align:center}.stat-value{font-size:24px;font-weight:700;color:#e6a23c}.stat-label{font-size:14px;color:#909399;margin-top:5px}.process-flow-container{margin-top:20px;border:1px solid #ebeef5;border-radius:4px;background-color:#fff;overflow:hidden;box-shadow:0 2px 12px 0 rgba(0,0,0,.1)}.process-flow{position:relative;height:1100px;padding:20px;overflow:auto;transform-origin:top left}.flow-node{position:absolute;display:flex;align-items:center;justify-content:center;width:120px;height:60px;border-radius:8px;background-color:#fff;border:2px solid #e6a23c;cursor:pointer;transform:translate(-50%,-50%);transition:all .3s;box-shadow:0 2px 12px 0 rgba(0,0,0,.1);z-index:10}.flow-node:hover{box-shadow:0 4px 20px 0 rgba(0,0,0,.15);transform:translate(-50%,-50%) scale(1.05)}.flow-node.condition,.flow-node.end,.flow-node.start{background-color:#fdf6ec;border-color:#e6a23c}.flow-node.condition{border-radius:50%;width:80px;height:80px}.node-label{font-size:14px;text-align:center;padding:8px}.process-lines{position:absolute;top:0;left:0;width:100%;height:100%;z-index:5}.process-line{stroke:#e6a23c;stroke-width:2px;fill:none}.process-line.main{stroke:#e6a23c;stroke-width:2.5px}.shipping-process .flow-node{border-color:#e6a23c}.shipping-process .flow-node.condition{border-color:#e6a23c;background-color:#fdf6ec}.shipping-process .process-line{stroke:#e6a23c}.shipping-process .process-line.main{stroke:#e6a23c;stroke-width:2.5px}.path-label{fill:#e6a23c;font-size:12px;font-weight:700}.node-details p{margin:8px 0}.node-actions{margin-top:20px;display:flex;gap:10px}.zoom-controls{position:absolute;top:20px;right:20px;z-index:100;display:flex;flex-direction:column;gap:10px}.zoom-btn{width:36px;height:36px;background-color:#fff;border-radius:4px;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 12px 0 rgba(0,0,0,.1);transition:all .3s}.zoom-btn:hover{background-color:#f2f6fc;transform:translateY(-2px);box-shadow:0 4px 12px 0 rgba(0,0,0,.15)}.zoom-btn i{font-size:18px;color:#e6a23c}.zoom-tip{position:absolute;top:20px;left:50%;transform:translateX(-50%);background-color:#fff;padding:5px 10px;border-radius:4px;font-size:14px;display:flex;align-items:center;gap:5px;box-shadow:0 2px 12px 0 rgba(0,0,0,.1);z-index:100}.zoom-tip i{color:#e6a23c}.wheel-tip{position:absolute;top:20px;left:20px;background-color:#fff;padding:5px 10px;border-radius:4px;font-size:14px;display:flex;align-items:center;gap:5px;box-shadow:0 2px 12px 0 rgba(0,0,0,.1);z-index:100;opacity:.8;transition:opacity .3s}.wheel-tip:hover{opacity:1}.shipping-process .zoom-btn i,.shipping-process .zoom-tip i,.wheel-tip i{color:#e6a23c}@media screen and (max-width:768px){.process-flow{height:900px}.intro-content{flex-direction:column}.intro-description{padding-right:0;margin-bottom:20px}.flow-node{width:100px;height:50px}.flow-node.condition{width:70px;height:70px}.node-label{font-size:12px}.zoom-controls{bottom:20px;right:20px;top:auto}.zoom-btn{width:32px;height:32px}.zoom-btn i{font-size:16px}.wheel-tip,.zoom-tip{bottom:20px;top:auto;font-size:12px}.wheel-tip{left:20px}}
|
