.svm-nav { position: relative; } .svm-nav:first-child { border-bottom: 1px solid #f8f8f8; } .flow-right { font-size: 24px; position: absolute; right: 13px; top: 9px; color: #999999; } .flow-rights { position: absolute; right: 15px; top: 11px; } .flow-rights i { position: absolute; display: inline-block; background: #d8d8d8; width: 20px; height: 20px; border-radius: 100%; left: -26px; top: -1px; background: url(../../../img/flow/number_icon@3x.png) no-repeat; background-size: 100%; } .flow-rights a { color: #999999; } .flow-con { margin-top: 10px; background: #FFFFFF; } .flow-con .flow-con-nav { height: 120px; overflow: hidden; position: relative; } .flow-con .flow-con-nav>div { float: left; } .flow-con .flow-con-nav>div:first-child { width: 4px; height: 120px; } .flow-con .flow-con-nav .flow-r { height: 100%; border-left: 4px solid #D8D8D8; margin-left: 27px; padding-left: 20px; } .flow-con .flow-con-nav .flow-r-nav { height: 40px; line-height: 42px; } .flow-con .flow-con-nav .flow-r-nav span:nth-child(2) { position: absolute; top: 0; right: 15px; color: #999999; } .flow-con .flow-con-nav .flow-r-con { overflow: hidden; } .flow-con .flow-con-nav .flow-r-con>div { overflow: hidden; } .flow-con .flow-con-nav .flow-r-con>div:first-child { margin-bottom: 8px; } .flow-con .flow-con-nav .flow-r-con span { font-size: 12px; } .flow-con .flow-con-nav .flow-r-con .flow-r-z { position: relative; float: left; } .flow-con .flow-con-nav .flow-r-con .flow-r-z span{ float: left; } .flow-con .flow-con-nav .flow-r-con .flow-r-z:first-child { margin-right: 9px; } .flow-con .flow-con-nav .flow-r-con .flow-r-z:first-child span:nth-child(3) { width: 60px; overflow: hidden; } .flow-con .flow-con-nav .flow-r-con span:first-child { display: inline-block; width: 14px; height: 14px; border-radius: 50%; position: absolute; top: 2px; } .flow-con .flow-con-nav .flow-r-con .flow-r-z:first-child span:first-child { background: #d7d7d7 url(../../../img/flow/people_small_icon@3x.png) no-repeat; background-size: 100%; } .flow-con .flow-con-nav .flow-r-con .flow-r-z:nth-child(2) span:first-child { background: #d7d7d7 url(../../../img/flow/time_small_icon@3x.png) no-repeat; background-size: 100%; } .flow-con .flow-con-nav .flow-r-con span:nth-child(2) { padding-left: 17px; color: #999999; } .flow-con .flow-con-nav .flow-r-icons { position: absolute; width: 20px; height: 20px; left: 22px; top: 50%; margin-top: -10px; } .flow-con .flow-con-nav .flow-r-icon { position: absolute; width: 20px; height: 20px; border-radius: 50%; background: #0ec764; left: 22px; top: 50%; margin-top: -10px; background: #0ec764 url(../../../img/flow/dui.png) no-repeat; background-size: 59%; background-position: 5px 6px; } .flow-con .flow-con-nav .flow-r-icons span { display: inline-block; position: absolute; border-radius: 50%; } .flow-con .flow-con-nav .flow-r-fail { width: 100%; height: 100%; background: rgb(255, 26, 26); } .flow-con .flow-con-nav .flow-r-fails { width: 14px; height: 14px; top: 50%; left: 50%; margin-top: -7px; margin-left: -7px; background: #FFFFFF; } .flow-con .flow-con-nav .flow-r-failss { width: 8px; height: 8px; top: 50%; left: 50%; margin-top: -4px; margin-left: -4px; background: rgb(255, 26, 26); } .flow-con .flow-con-nav .flow-r-loading { width: 100%; height: 100%; background: #fcaa00; } .flow-con .flow-con-nav .flow-r-loadings { width: 14px; height: 14px; top: 50%; left: 50%; margin-top: -7px; margin-left: -7px; background: #FFFFFF; } .flow-con .flow-con-nav .flow-r-loadingss { width: 8px; height: 8px; top: 50%; left: 50%; margin-top: -4px; margin-left: -4px; background: #fcaa00; } .flow-con .flow-con-nav .flow-r-common { background: #d8d8d8; width: 100%; height: 100%; } .flow-con .flow-con-nav .flow-r-commons { width: 14px; height: 14px; top: 50%; left: 50%; margin-top: -7px; margin-left: -7px; background: #FFFFFF; } .flow-con .flow-con-nav .flow-r-commonss { width: 8px; height: 8px; top: 50%; left: 50%; margin-top: -4px; margin-left: -4px; background: #d8d8d8; } .flow-con .gr { background: #0ec764; } .flow-con .or { background: #fcaa00; } .flow-con .bl { background: #1badf8; } .flow-con .re { background: #f8651b; } .flow-con .ye { background: #d2f81b; } .flow-con .zi { background: #ce1bf8; } .flow-con .sy { background: #5ff0d1; } .flow-con .red { background: #ea567a; } .flow-con .gree { background: #55c19f; } .flow-con .green { background: #50e3c2; } /*具体内容*/ .flow-con .flow-con-con { background: #f5f5f5; padding: 0 15px 0 32px; display: none; } .flow-con .flow-con-con .flow-con-approve { border-left: 2px solid #D8D8D8; padding: 10px 0 30px 26px; position: relative; } .flow-con .flow-con-con .flow-con-approve div { padding: 9px 15px 8px 15px; background: #e5e5e5; border-radius: 4px; } .flow-con .flow-con-con .flow-con-approve .flow-apr-icon { position: absolute; width: 14px; height: 14px; padding: 0; border-radius: 50%; background: #0ec764; left: -8px; top: 20px; background: #0ec764 url(../../../img/flow/dui.png) no-repeat; background-size: 59%; background-position: 3px 5px; } .flow-con .flow-con-con .flow-con-approve div:first-child { margin-bottom: 10px; } .flow-con .flow-con-con .flow-con-approve div span { font-size: 12px; display: inline-block; } .flow-con .flow-con-con .flow-con-approve div span:first-child { color: #999999; } .file { margin-top: 10px; } .file span.open { margin-right: 5px; } .bg { background: rgba(0, 0, 0, 0.8); width: 100%; position: fixed; top: 46px; left: 0; bottom: 0; right: 0; text-align: center; display: none; } .bg img { padding: 15px; width: 100%; margin-top: 35%; } .bg .close { position: fixed; bottom: 30px; left: 50%; margin-left: -17px; width: 34px; height: 34px; border-radius: 50%; } .bg .close span { font-size: 40px; color: #FFFFFF; border: 1px solid #FFFFFF; border-radius: 50%; } .bg .close p:first-child { width: 18px; height: 1px; background: #FFFFFF; position: absolute; top: 50%; left: 7px; transform: rotate(45deg); } .bg .close p:last-child { width: 1px; height: 18px; background: #FFFFFF; position: absolute; left: 50%; top: 8px; transform: rotate(45deg); } /*20170703点击查看详情*/ .onclick-details{ color:#ccc; text-align: center; }