1 |
- html,body{font-family:"Helvetica Neue","Hiragino Sans GB","Microsoft YaHei",Arial,sans-serif;height:100%;background-color:#1c1c20;color:#fff;font-size:16px}.qkhk-wrapper{height:100%;display:flex;flex-direction:row}.qkhk-wrapper .nav1{height:100%}.qkhk-wrapper .nav1 ul{height:100%;display:flex;flex-direction:column;justify-content:center}.qkhk-wrapper .nav1 ul li{cursor:pointer;padding:10px;font-weight:bolder;height:200px;font-size:32px;text-align:center}.qkhk-wrapper .nav1 ul li.active{background-color:#242832}.qkhk-wrapper .nav2-hk,.qkhk-wrapper .nav2-qk{width:120px;height:100%;background-color:#242832}.qkhk-wrapper .nav2-hk ul,.qkhk-wrapper .nav2-qk ul{height:100%;display:flex;flex-direction:column;flex-wrap:wrap;justify-content:center;align-content:center}.qkhk-wrapper .nav2-hk ul li,.qkhk-wrapper .nav2-qk ul li{position:relative;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:100px;cursor:pointer;margin:10px;font-size:18px;text-align:center}.qkhk-wrapper .nav2-hk ul li span,.qkhk-wrapper .nav2-qk ul li span{border-radius:100%;font-size:14px;width:18px;height:18px;position:absolute;top:5px;right:7px;background-color:#ff236e}.qkhk-wrapper .nav3-hk{height:100%;flex:1;display:flex;flex-direction:column}.qkhk-wrapper .nav3-hk .up{flex:1;display:flex;flex-direction:column}.qkhk-wrapper .nav3-hk .up .header{height:54px;border-bottom:2px solid #252932;display:flex;flex-direction:row;justify-content:space-between;align-items:center}.qkhk-wrapper .nav3-hk .up .header .cell-name{margin:5px 35px;font-weight:bolder;font-size:32px;text-align:center}.qkhk-wrapper .nav3-hk .up .header .handles{display:flex;flex-direction:row;align-items:center}.qkhk-wrapper .nav3-hk .up .header .handles .pattern-sw{border-radius:5px;padding:5px 10px;border:1px solid #e3e3e3;cursor:pointer}.qkhk-wrapper .nav3-hk .up .header .handles .save{margin:0 10px;padding:1px 6px;cursor:pointer;font-size:14px;border:1px solid #e3e3e3}.qkhk-wrapper .nav3-hk .up .cont{flex:1;margin:10px 30px 0 30px}.qkhk-wrapper .nav3-hk .up .cont .dw-pattern{height:100%;display:flex;flex-direction:row}.qkhk-wrapper .nav3-hk .up .cont .dw-pattern .left{flex:1;display:flex;flex-direction:column}.qkhk-wrapper .nav3-hk .up .cont .dw-pattern .left .dw-title{display:flex;flex-direction:row;justify-content:flex-start}.qkhk-wrapper .nav3-hk .up .cont .dw-pattern .left .dw-title li{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;margin:0 5px;font-weight:bolder;font-size:24px;color:#3c4147}.qkhk-wrapper .nav3-hk .up .cont .dw-pattern .left .dw-title li.active{color:#fff}.qkhk-wrapper .nav3-hk .up .cont .dw-pattern .left .control-wrapper{margin-top:20px;flex:1;display:flex;flex-direction:column}.qkhk-wrapper .nav3-hk .up .cont .dw-pattern .left .control-wrapper .title{display:flex;flex-direction:row;justify-content:center}.qkhk-wrapper .nav3-hk .up .cont .dw-pattern .left .control-wrapper .title li{width:200px;text-align:center}.qkhk-wrapper .nav3-hk .up .cont .dw-pattern .left .control-wrapper .fj-control{flex:1;display:flex;flex-direction:column;justify-content:flex-start}.qkhk-wrapper .nav3-hk .up .cont .dw-pattern .left .control-wrapper .fj-control li{display:flex;flex-direction:row;justify-content:center;padding:10px 0;align-items:center}.qkhk-wrapper .nav3-hk .up .cont .dw-pattern .left .control-wrapper .fj-control li .fj-name{width:70px;padding:0 10px}.qkhk-wrapper .nav3-hk .up .cont .dw-pattern .left .control-wrapper .fj-control li input{margin:0 20px;width:160px;border-radius:5px;background-color:#1c1c20;border:1px solid #ffe;text-align:center}.qkhk-wrapper .nav3-hk .up .cont .dw-pattern .left .control-wrapper .fj-control li .sw{width:60px;padding:0 10px;height:25px}.qkhk-wrapper .nav3-hk .up .cont .dw-pattern .left .control-wrapper .fj-control li.disabled{color:#a4a4a4}.qkhk-wrapper .nav3-hk .up .cont .dw-pattern .left .control-wrapper .fj-control li.disabled input{border-color:#a4a4a4}.qkhk-wrapper .nav3-hk .up .cont .dw-pattern .right{flex:1;background:url("../img/background/bubble1.png") no-repeat;-webkit-background-size:cover;background-size:cover;display:flex;flex-direction:row;flex-wrap:wrap}.qkhk-wrapper .nav3-hk .up .cont .dw-pattern .right .show{-webkit-background-size:contain;background-size:contain;background:url("../img/background/blue-arc.png") no-repeat 50% 50%;width:100%;height:75%;display:flex;flex-direction:column;justify-content:center}.qkhk-wrapper .nav3-hk .up .cont .dw-pattern .right .show .wd-cont{padding-top:10%;padding-left:10%;color:#fe236d;font-size:90px;font-weight:bolder}.qkhk-wrapper .nav3-hk .up .cont .dw-pattern .right .min-wrapper,.qkhk-wrapper .nav3-hk .up .cont .dw-pattern .right .max-wrapper{display:flex;flex-direction:row;justify-content:center;align-items:center;width:50%;height:25%;color:#fe236d}.qkhk-wrapper .nav3-hk .up .cont .dw-pattern .right .min-wrapper .btn-reduce,.qkhk-wrapper .nav3-hk .up .cont .dw-pattern .right .min-wrapper .btn-add,.qkhk-wrapper .nav3-hk .up .cont .dw-pattern .right .max-wrapper .btn-reduce,.qkhk-wrapper .nav3-hk .up .cont .dw-pattern .right .max-wrapper .btn-add{width:36px;font-size:36px;text-align:center;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.qkhk-wrapper .nav3-hk .up .cont .dw-pattern .right .min-wrapper .circle-wrapper,.qkhk-wrapper .nav3-hk .up .cont .dw-pattern .right .max-wrapper .circle-wrapper{text-align:center;position:relative;font-size:26px;line-height:80px;width:80px;height:80px;border-radius:100%;border:1px solid #fff}.qkhk-wrapper .nav3-hk .up .cont .dw-pattern .right .min-wrapper .circle-wrapper .info,.qkhk-wrapper .nav3-hk .up .cont .dw-pattern .right .max-wrapper .circle-wrapper .info{top:-54px;left:20px;font-size:14px;position:absolute}.qkhk-wrapper .nav3-hk .up .cont .dw-pattern .right .min-wrapper .circle-wrapper .unit,.qkhk-wrapper .nav3-hk .up .cont .dw-pattern .right .max-wrapper .circle-wrapper .unit{position:absolute;top:-36px;left:63px;font-size:18px}.qkhk-wrapper .nav3-hk .up .cont .auto-pattern{height:100%;-webkit-background-size:contain;background-size:contain;background:url("../img/background/bubble2.png") no-repeat 50% 50%;display:flex;flex-direction:row;justify-content:center}.qkhk-wrapper .nav3-hk .up .cont .auto-pattern .show{-webkit-background-size:contain;background-size:contain;background:url("../img/background/blue-arc.png") no-repeat 50% 50%;width:50%;display:flex;flex-direction:column;justify-content:center}.qkhk-wrapper .nav3-hk .up .cont .auto-pattern .show .wd-cont{padding-top:10%;padding-left:10%;color:#fe236d;font-size:90px;font-weight:bolder}.qkhk-wrapper .nav3-hk .up .cont .auto-pattern .min-wrapper,.qkhk-wrapper .nav3-hk .up .cont .auto-pattern .max-wrapper{display:flex;flex-direction:row;justify-content:center;align-items:center;width:15%;color:#fe236d}.qkhk-wrapper .nav3-hk .up .cont .auto-pattern .min-wrapper .btn-reduce,.qkhk-wrapper .nav3-hk .up .cont .auto-pattern .min-wrapper .btn-add,.qkhk-wrapper .nav3-hk .up .cont .auto-pattern .max-wrapper .btn-reduce,.qkhk-wrapper .nav3-hk .up .cont .auto-pattern .max-wrapper .btn-add{width:36px;font-size:36px;text-align:center;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.qkhk-wrapper .nav3-hk .up .cont .auto-pattern .min-wrapper .circle-wrapper,.qkhk-wrapper .nav3-hk .up .cont .auto-pattern .max-wrapper .circle-wrapper{text-align:center;position:relative;font-size:26px;line-height:80px;width:80px;height:80px;border-radius:100%;border:1px solid #fff}.qkhk-wrapper .nav3-hk .up .cont .auto-pattern .min-wrapper .circle-wrapper .info,.qkhk-wrapper .nav3-hk .up .cont .auto-pattern .max-wrapper .circle-wrapper .info{top:-54px;left:20px;font-size:14px;position:absolute}.qkhk-wrapper .nav3-hk .up .cont .auto-pattern .min-wrapper .circle-wrapper .unit,.qkhk-wrapper .nav3-hk .up .cont .auto-pattern .max-wrapper .circle-wrapper .unit{position:absolute;top:-36px;left:63px;font-size:18px}.qkhk-wrapper .nav3-hk .down{padding:10px 30px;background-color:#202226}.qkhk-wrapper .nav3-hk .down div.down-wrapper{height:100%;background:url("../img/background/bj-bg.png") no-repeat 80% 90%}.qkhk-wrapper .nav3-hk .down div.down-wrapper ul.title{font-size:18px;font-weight:600;padding:10px 0;display:flex;flex-direction:row;justify-content:flex-start}.qkhk-wrapper .nav3-hk .down div.down-wrapper ul.title li.degree{width:70px}.qkhk-wrapper .nav3-hk .down div.down-wrapper ul.title li.degree img{height:22px}.qkhk-wrapper .nav3-hk .down div.down-wrapper ul.title li.content{width:120px}.qkhk-wrapper .nav3-hk .down div.down-wrapper ul.bj-list{display:flex;flex-direction:column}.qkhk-wrapper .nav3-hk .down div.down-wrapper ul.bj-list ul.bj-item{padding:10px 0;display:flex;flex-direction:row}.qkhk-wrapper .nav3-hk .down div.down-wrapper ul.bj-list ul.bj-item li.degree{width:70px}.qkhk-wrapper .nav3-hk .down div.down-wrapper ul.bj-list ul.bj-item li.content{width:120px;font-size:16px;font-weight:600}.qkhk-wrapper .nav3-hk .down div.down-wrapper ul.bj-list ul.bj-item ul.act-lists{display:flex;flex-direction:row;justify-content:space-between;width:400px}.qkhk-wrapper .nav3-hk .down div.down-wrapper ul.bj-list ul.bj-item ul.act-lists li.active{color:#34bcc9}.qkhk-wrapper .nav3-qk{height:100%;flex:1;display:flex;flex-direction:column}.qkhk-wrapper .nav3-qk .header{margin:0 10px;border-bottom:2px solid #252932;height:64px;display:flex;flex-direction:row;justify-content:flex-end;align-items:center}.qkhk-wrapper .nav3-qk .header .save{padding:5px 10px;cursor:pointer;font-size:14px;border:1px solid #e3e3e3}.qkhk-wrapper .nav3-qk .content{flex:1;overflow-x:hidden;overflow-y:scroll}.qkhk-wrapper .nav3-qk .content section{margin:30px 0;float:left;width:500px;display:flex;flex-direction:column}.qkhk-wrapper .nav3-qk .content section ul{display:flex;flex-direction:row;justify-content:center}.qkhk-wrapper .nav3-qk .content section ul li{position:relative;padding:5px 0;text-align:center}.qkhk-wrapper .nav3-qk .content section ul li input{margin:0 20px;width:160px;border-radius:5px;background-color:#1c1c20;border:1px solid #ffe;text-align:center}.qkhk-wrapper .nav3-qk .content section ul li.item1{width:100px}.qkhk-wrapper .nav3-qk .content section ul li.item2{width:200px}.qkhk-wrapper .nav3-qk .content section ul li.item3{width:200px}.qkhk-wrapper .nav3-qk .content section ul li.sb-name:before{top:8px;border:8px solid transparent;border-left-color:#36c0cd;content:' ';height:0;left:80%;position:absolute;width:0}.qkhk-wrapper .nav3-qk .content section ul.title li.item2,.qkhk-wrapper .nav3-qk .content section ul.title li.item3{font-size:18px}.nav2-qk ul{margin-top:-80%}::-webkit-scrollbar{width:12px}::-webkit-scrollbar-track{box-shadow:inset 0 0 6px rgba(0,0,0,0.3);border-radius:10px;background-color:rgba(50,50,51,0.6)}::-webkit-scrollbar-thumb{border-radius:10px;background:rgba(141,135,135,0.6);-webkit-box-shadow:inset 0 0 6px rgba(141,135,135,0.6)}
|