// 流程首页 .flowContainer { position: relative; display: flex; width: 100%; height: 100%; .treeContainer { position: relative; left: 0; top: 0; height: 100%; width: 250px; margin-right: 10px; transition-property: width, left; transition-duration: 0.5s; white-space: nowrap; .ant-card-body { height: 100%; padding: 12px 24px 24px 10px; } .processTitle { font-size: 15px; font-weight: bold; color: #333e51; padding-left: 14px; } .treeContent { height: calc(100% - 50px); overflow-y: scroll; } .treeHeadIcon { color: #1890ff; font-size: 25px; vertical-align: middle; margin-left: 130px; } .ant-tree-treenode { width: 100%; } .ant-tree-title { width: 100%; } .nodeTitle { width: 100%; display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; .nodeTip { display: none; .fs { font-size: 18px; margin-left: 5px; color: #1890ff; } } } .nodeTitle:hover { .nodeTip { display: flex; align-items: center; justify-content: flex-end; } } .switcher { display: block; position: absolute; font-size: 18px; color: #1890ff !important; top: 50%; right: 2px; transform: translate(0%, -50%); z-index: 1; } } .treeContainerHide { left: 0px; top: 0; width: 26px; } // 流程图 .flowChartContainer { position: relative; width: 100%; height: calc(100%); background-color: #fff; .chartBox { position: relative; // display: flex; height: calc(100% - 52px); .flowName { position: absolute; top: 10px; left: 50%; transform: translateX(-200%); font-size: 24px; font-weight: 700; color: #1585FF; z-index: 9; } .myOverviewDiv { position: absolute; height: 150px; width: 300px; left: 0; bottom: 0; background-color: #ccc; z-index: 9; } } .control { display: flex; justify-content: space-between; height: 52px; align-items: center; padding: 0 10px; .nodeList { display: flex; align-items: center; .myPaletteSubprocess { height: 52px; width: 130px; canvas { height: 100%; width: 1000px; } } .myPaletteDiv { // margin-right: 20px; height: 52px; width: 380px; canvas { height: 100%; width: 1000px; } } .lineBox { height: 52px; width: 1px; background-color: #ccc; // margin-right: 10px; } .nodeBox { display: flex; align-items: center; justify-content: center; height: 52px; padding: 0 10px; border-radius: 10px; background-color: #D9E0FF; margin-right: 10px; .nodeImg { img { height: 35px; } margin-right: 5px; } } } .buttonList { display: flex; justify-content: flex-start; margin: 15px 0 15px 0; .ant-btn { display: flex; align-items: center; justify-content: center; margin-left: 10px; } } } canvas { border: 0px; outline: none; } .myDiagramDiv { width: calc(100% - 360px); // flex: 1; height: 100%; } } } // 角色用户列表 .pageContent { display: flex; .roleContent { width: 50%; margin-right: 10px; .treeContent { width: 100%; height: 370px; margin: 10px 0 10px 0; padding: 8px 20px 20px 20px; box-sizing: border-box; border: 1px solid #ccc; .ant-tree-list-holder { height: 285px; } } .footer { position: relative; z-index: 999; } } .userContent { width: 50%; .userCheckBox { margin-top: 41px; padding: 20px; box-sizing: border-box; width: 100%; height: 370px; border: 1px solid #ccc; .checkContent { height: 285px; width: 100%; overflow-y: scroll; } } } }