/* 审核流程 */ *{ box-sizing:border-box; } .shenhe-liucheng { padding: 10px 0 50px; } .shenhe-line>h1, .shenhe-line>h6 { font-size: 16px; font-weight: bold; width: 85px; height: 34px; line-height: 32px; color: #fff; border-radius: 25px; text-align: center; } .shenhe-liucheng { display: flex; display: -webkit-flex; align-items: center; justify-content: center; flex-direction: column; } .shenhe-line>h6 { background: #f87b59; } .shenhe-line>h1 { background: #3296f9; } .shenhe-line>aside { width: 14px; height: 75px; background: url(../images/shenhe/sh-ic15.png) center center no-repeat; position: relative; font-size: 0; margin: 0 auto; } .shenhe-line>aside>a { display: inline-block; position: absolute; background: url(../images/shenhe/sh-ic16.png) center center no-repeat rgba(52, 142, 248, 1); ; border-radius: 50%; width: 25px; height: 25px; top: 25px; left: 50%; margin-left: -12px; box-shadow: 0 2px 5px rgba(52, 142, 248, .4); } .shenhe-line>aside>a:hover { background-color: rgba(52, 142, 248, .9); } .shenhe-spr { box-shadow: 0 5px 15px rgba(0, 0, 0, .1); width: 335px; min-height: 115px; border-radius: 5px 5px 0 0; margin: 8px 0; } .shenhe-spr:hover, .shenhe-spr.active { box-shadow: 0 5px 15px rgba(0, 0, 0, .1), 0 0 0 1px #4897FC; } .shenhe-spr.shenhe-csr:hover, .shenhe-spr.shenhe-csr.active { box-shadow: 0 5px 15px rgba(0, 0, 0, .1), 0 0 0 1px #f98a6b; } .shenhe-spr>header { height: 34px; display: flex; display: -webkit-flex; align-items: center; justify-content: space-between; background: #3296f9; border-radius: 5px 5px 0 0; color: #fff; padding: 0px 10px; } .shenhe-spr>header>span { background: url(../images/shenhe/sh-ic20.png) left center no-repeat; padding-left: 25px; font-size: 16px; } .shenhe-spr.shenhe-csr>header { background: #f87b59; } .shenhe-spr.shenhe-csr>header>span { background: url(../images/shenhe/sh-ic22.png) left center no-repeat; } .shenhe-spr>header>a { background: url(../images/shenhe/sh-ic21.png) center center no-repeat rgba(255, 255, 255, .2); font-size: 0; display: inline-block; width: 20px; height: 20px; border-radius: 50%; } .shenhe-spr>header>a:hover { background-color: rgba(255, 255, 255, .3); } .shenhe-spr>section { padding: 15px 10px; min-height: 81px; display: flex; display: -webkit-flex; align-items: center; justify-content: space-between; } .shenhe-spr>section>span { font-size: 16px; color: #333; padding-right: 15px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } .shenhe-spr>section>a { background: url(../images/shenhe/sh-ic24.png) center center no-repeat; display: inline-block; width: 25px; height: 11px; flex-shrink: 0; } .shenhe-showadd { position: absolute; left: 40px; top: -20px; width: 280px; height: 135px; border-radius: 5px; background: #fff; display: flex; display: -webkit-flex; align-items: center; justify-content: center; box-shadow: -4px 0 20px rgba(0, 0, 0, .2); z-index: 100; visibility: hidden; opacity: 0; transition: all 0.5s linear 0s; -webkit-transition: all 0.5s linear 0s; -moz-transition: all 0.5s linear 0s; -ms-transition: all 0.5s linear 0s; -o-transition: all 0.5s linear 0s; } .shenhe-showadd:before { position: absolute; content: ""; left: -8px; top: 25px; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-right: 8px solid #fff; } .shenhe-showadd>ul { font-size: 0; } .shenhe-showadd>ul>li { display: inline-block; font-size: 16px; color: #333; text-align: center; } .shenhe-showadd>ul>li+li { margin-left: 50px; } .shenhe-showadd>ul>li>span { width: 50px; height: 50px; display: inline-block; position: relative; background: url(../images/shenhe/sh-ic18.png) center center no-repeat; } .shenhe-showadd>ul>li>span>i { position: absolute; left: 0; width: 100%; top: 0; height: 100%; -webkit-transition: all cubic-bezier(0.85, 0.56, 0, 1.3) .2s; -moz-transition: all cubic-bezier(0.85, 0.56, 0, 1.3) .2s; -ms-transition: all cubic-bezier(0.85, 0.56, 0, 1.3) .2s; -o-transition: all cubic-bezier(0.85, 0.56, 0, 1.3) .2s; transition: all cubic-bezier(0.85, 0.56, 0, 1.3) .2s; -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); background: url(../images/shenhe/sh-ic18-h.png) center center no-repeat; } .shenhe-showadd>ul>li.shenhe-csr-i>span { background: url(../images/shenhe/sh-ic19.png) center center no-repeat; } .shenhe-showadd>ul>li.shenhe-csr-i>span>i { background: url(../images/shenhe/sh-ic19-h.png) center center no-repeat; } .shenhe-showadd>ul>li:hover>span>i { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .shenhe-add-hover .shenhe-showadd { left: 70px; visibility: visible; opacity: 1; } .shenhe-showadd>span { position: absolute; right: 10px; top: 10px; background: url(../images/shenhe/sh-ic17.png) center center no-repeat; width: 11px; height: 11px; } .shenhe-showadd>span:hover { background: url(../images/shenhe/sh-ic17-h.png) center center no-repeat; } /* 添加分支 */ .box-col-box{ border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; display:flex; justify-content:center; } .box-branch-box{ display: inline-block; } .box-col { padding: 0 30px; position: relative; background-color: #fff; } .box-col::before{ content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 0; margin: auto; width: 1px; height: 100%; background-color: #CACACA; } .shenhe-line{ position: relative;} .box-right-end{ content: ""; position: absolute; bottom: -1px; background: #fff; width: 50%; height: 1px; right: 0px; } .box-right-start{ content: ""; position: absolute; top: -1px; background: #fff; width: 50%; height: 1px; right: 0px; } .box-left-end{ content: ""; position: absolute; bottom: -1px; background: #fff; width: 50%; height: 1px; left: 0px; } .box-left-start{ content: ""; position: absolute; top: -1px; background: #fff; width: 50%; height: 1px; left: 0px; } .shenhe-spr{ margin: 8px auto; } .shenhe-condition.shenhe-line{ margin-top: 50px; } .shenhe-spr>section{ background-color: #fff; } .shenhe-condition .shenhe-spr.shenhe-csr>header{ background: #7abf9a; } .shenhe-condition .shenhe-spr.shenhe-csr:hover { box-shadow: 0 5px 15px rgba(0, 0, 0, .1), 0 0 0 1px #7abf9a; } .shenhe-absolute-center{ width: 100%; background-color: #fff; overflow: auto; position: absolute; bottom: 0; left: 0; right: 0; text-align:center; top: 0; } .shenhe-liucheng { display:inline-block; } .shenhe-line>h1, .shenhe-line>h6{ margin:0 auto; } /* windows */ .branch-windows{ } .branch-header{ padding:10px 20px; font-size: 16px; text-align: center; background-color: #ddd; } .branch-body{ padding:10px 30px; font-size: 14px;; } .branch-body a{ text-decoration: none; } .branch-sec-box{ display: flex; align-items: flex-start; justify-content: space-between; } .branch-sec-side:first-child{ padding-right:12px; } .branch-sec-side:last-child{ padding-left:12px; } .branch-sec-side{ width: 50%; } .branch-sec-tit{ padding: 10px; } .branch-sec-content{ padding: 10px 0; border: 1px solid #ddd; background-color: #f5f5f5; border-radius: 5px; height: 372px; } .branch-search{ background-color: #fff; margin: 0 10px 10px 10px; border: 1px solid #ccc; border-radius: 5px; height: 30px; display: flex; justify-content: flex-start; } .branch-search>input{ background-color: transparent; border: none; outline: none; height: 100%; width: 85%; flex: auto; padding: 0 10px; } .branch-tab{ margin: 0 10px 10px 10px; border-radius: 35px; background-color: #ddd; overflow: hidden; } .branch-tab>a{ float: left; width: 50%; line-height:30px; color:#333; text-align: center; text-decoration: none;} .branch-tab>a.active{ background-color: #3296f9; color: #fff; } .branch-bread{ margin: 0 10px 10px 10px; padding: 0 10px; } .branch-bread em,.branch-bread i{ font-style: normal;} .branch-bread i{ color: #666; margin: 0 5px; } .branch-link{ color: #3296f9; } .branch-link:hover{ text-decoration: underline; cursor: pointer; } .branch-link.disabled{ color: #999; cursor: default; text-decoration: none; } .branch-overall { margin: 0 10px 5px 15px;} .branch-checkbox input,.branch-checkbox label{ vertical-align: middle; cursor: pointer; } .branch-checkbox input{ margin: 5px 5px 5px 0; } .branch-useritem{ display: flex; justify-content: space-between; padding: 5px ;} .branch-useritem:hover{ background-color: #e0f2fa; cursor: pointer; } .branch-scroll{ height: 215px; overflow: auto; padding:0 10px; } .branch-btn-group{ text-align: center; padding: 20px ; } .branch-btn-group>button{ height:36px; min-width: 120px; border-radius: 5px; background-color: #fff; text-align: center; color: #333; margin: 0 10px; outline: none; font-size: 16px; border: 1px solid #ccc; } .branch-btn-group>button:hover{ opacity:0.8; cursor: pointer; } .branch-btn-group>button.blue{ background-color: #4897FC; color: #fff; border: 1px solid #4897FC; } .branch-sec-auto{ overflow: auto; padding:5px 12px; } .branch-del{ position: relative; border: 1px solid #333; border-radius: 50%; width: 17px; height: 17px; opacity: 0.4; } .branch-del::before{ position: absolute; content:""; width: 11px; height: 1px; top:7px; left:2px; transform: rotate(45deg); background-color: #333;} .branch-del::after{ position: absolute; content:""; width: 11px; height: 1px; transform: rotate(-45deg); top: 7px; left: 2px; background-color: #333;} .branch-del:hover{ opacity: 0.7; } .branch-i{ width:16px; display: inline-block; height: 16px; border-radius: 50%; border: 1px solid #999; position: relative; background-color: #fff; margin-left: 6px; margin-top: 5px; } .branch-i::before{ position: absolute; content:""; width: 5px; background:#999; height: 1px; height: 1px; transform: rotate(45deg); left: 12px; top: 14px; }