// 流程首页 .flowContainer { position: relative; display: flex; width: 100%; .treeContainer { position: relative; left: 0; top: 0; height: calc(100vh - 74px); width: 250px; margin-right: 10px; overflow-x: hidden; transition-property: width, left; transition-duration: 0.5s; white-space: nowrap; .processTitle { font-size: 15px; font-weight: bold; color: #333e51; padding-left: 14px; } .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; .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(100vh - 74px); background-color: #fff; .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: 100%; height: calc(100vh - 135px); } } } // 角色用户列表 .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; } } } }