.pageContent { background: url("../../../../assets/images/workFlow/index/bg.png") no-repeat; background-size: 100% 100%; display: flex; flex-direction: column; padding: 12px; .headerBox { height: 50px; display: flex; background-color: #e9f0ff; justify-content: space-between; margin: -12px 0 0 -12px; .left { display: flex; flex: 1; .allFlows { width: 176px; height: 50px; background: url("../../../../assets/images/workFlow/index/all.png") no-repeat; background-size: 100% 100%; cursor: pointer; } .allFlowsChoose { background: url("../../../../assets/images/workFlow/index/allChoose.png") no-repeat; background-size: 100% 100%; } .flows { flex: 1; height: 50px; .tabBox { display: flex; .tab { height: 50px; line-height: 50px; text-align: center; padding: 0 20px; cursor: pointer; } .activeTab { // color: #3D78FF; color: white; background: #3D78FF; } } .ant-tabs-tab { height: 50px; background-color: #e9f0ff; border-bottom: none; } .ant-tabs-tab:hover { color: rgba(0, 0, 0, 0.85); } .ant-tabs-tab .anticon { margin-right: 0; } .ant-tabs-tab-active { // border-top: 2px solid #3D78FF; // border-bottom: none; // background: linear-gradient(0deg, #BED2F9 0%, #F2F7FF 100%); // color: #3D78FF; } } } .right { height: 50px; display: flex; align-items: center; color: #3D78FF; cursor: pointer; margin-right: 12px; .icon { width: 18px; height: 15px; background: url("../../../../assets/images/workFlow/index/add.png") no-repeat; background-size: 100% 100%; } } } .controlBox { height: 65px; display: flex; align-items: center; font-size: 14px; position: relative; .left { margin-right: 490px; margin-left: 12px; span { display: inline-block; width: 60px; font-size: 18px; font-weight: 700; color: #3D78FF; } } .right { display: flex; .btn { display: flex; margin-right: 5px; align-items: center; background: #3D78FF; box-shadow: 0px 2px 2px 0px rgba(0, 34, 97, 0.1); border-radius: 15px; color: #fff; padding: 3px 16px; cursor: pointer; } .ant-input-affix-wrapper { border: 1px solid #fff; border-right: none; height: 34px; background-color: #C2D6FA; border-radius: 16px 0 0 16px; .ant-input { background-color: #C2D6FA; color: #7E8BA3; border: none; outline: none; } .ant-input::placeholder { color: #7E8BA3; } } .ant-input-affix-wrapper-focused { height: 34px; outline: none; border: 1px solid #fff; border-right: none; box-shadow: none; } .ant-input-group-addon { border-radius: 0 16px 16px 0; border: 1px solid #fff; border-left: none; .ant-input-search-button { border-radius: 0 16px 16px 0; background-color: #C2D6FA; border: none; } } } .showPDF { position: absolute; right: 100px; top: 50%; transform: translateY(-50%); } } .flowTable { flex: 1; overflow-y: scroll; position: relative; .flowGroup { .header { display: flex; align-items: center; height: 45px; .line { width: 3px; height: 12px; background-color: #3D78FF; margin-right: 5px; margin-left: 5px; } .name { font-size: 14px; color: #2A4260; margin: 0 10px; // cursor: pointer; } } .groupBox { display: flex; flex-wrap: wrap; .flowBox { width: 350px; height: 222px; display: flex; flex-direction: column; justify-content: space-between; // cursor: pointer; transition: transform 0.5s; margin-bottom: 5px; position: relative; .header { display: flex; width: 100%; .title { width: 200px; margin-left: 15px; margin-top: 26px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-left: 5px; box-sizing: border-box; font-size: 16px; } .editBtn { font-size: 12px; display: flex; margin-left: 46px; width: 67px; margin-top: 11px; justify-content: center; align-items: center; color: #fff; cursor: pointer; >span { margin-right: 2px; } } } .mask { position: absolute; display: flex; align-items: center; justify-content: center; left: 50%; transform: translateX(-50%); width: 333px; height: 141px; border-radius: 0 20px 20px 20px; z-index: 1; } .maskHover { background: linear-gradient(0deg, #A3C7F9 0%, #FFFFFF 99%); opacity: 0.65; } .buttonBox { position: absolute; display: flex; align-items: center; justify-content: center; left: 50%; transform: translateX(-50%); width: 333px; height: 141px; font-size: 16px; z-index: 2; .delete { display: none; } .lookDetail { display: none; margin-right: 17px; } } .buttonHover { .lookDetail { display: block; } .delete { display: block; cursor: pointer; } } .imgBox { display: flex; justify-content: center; align-items: center; width: 100%; margin-top: 1px; height: 130px; overflow: hidden; img { width: 270px; } .noDataImg { width: 120px; height: 112px; } } .bottom { display: flex; width: 100%; justify-content: space-between; padding: 0 20px; margin-bottom: 8px; box-sizing: border-box; } &[type='1'] { background: url("../../../../assets/images/workFlow/index/card1.png") no-repeat; background-size: 100% 100%; } &[type='2'] { background: url("../../../../assets/images/workFlow/index/card2.png") no-repeat; background-size: 100% 100%; } &[type='3'] { background: url("../../../../assets/images/workFlow/index/card3.png") no-repeat; background-size: 100% 100%; } &[type='4'] { background: url("../../../../assets/images/workFlow/index/card4.png") no-repeat; background-size: 100% 100%; } &[type='0'] { background: url("../../../../assets/images/workFlow/index/card5.png") no-repeat; background-size: 100% 100%; } } // .flowBox:hover { // transform: translateY(-10px); // } } } } } .pageOms { margin-top: -12px; margin-left: -12px; width: calc(100% + 24px); height: calc(100% + 24px); } .pageEmbed { width: 100%; height: 100%; }