.pear-container { margin: 10px; background-color: whitesmoke; width: calc(100vw - 20px); } body::-webkit-scrollbar { width: 0px; height: 0px; } body::-webkit-scrollbar { width: 6px; height: 6px; } body::-webkit-scrollbar-track { background: white; border-radius: 2px; } body::-webkit-scrollbar-thumb { background: #E6E6E6; border-radius: 2px; } body::-webkit-scrollbar-thumb:hover { background: #E6E6E6; } body::-webkit-scrollbar-corner { background: #f6f6f6; } .mainBox::-webkit-scrollbar { width: 0px; height: 0px; } .mainBox::-webkit-scrollbar { width: 6px; height: 6px; } .mainBox::-webkit-scrollbar-track { background: white; border-radius: 2px; } .mainBox::-webkit-scrollbar-thumb { background: #E6E6E6; border-radius: 2px; } .mainBox::-webkit-scrollbar-thumb:hover { background: #E6E6E6; } .mainBox::-webkit-scrollbar-corner { background: #f6f6f6; } .mainBox { width: 100%; position: absolute; top: 0px; left: 0px; bottom: 50px; overflow: auto; } .bottom { width: 100%; position: absolute; bottom: 0px; left: 0px; height: 50px; line-height: 50px; background-color: #F8F8F8; border-top: 1px solid #eee; } .button-container { position: absolute; right: 15px; } .main-container { margin: 15px; } .main-container .layui-form-item { margin-bottom: 15px !important; margin-top: 10px !important; } .pear-row::before, .pear-row::after { content: ""; display: table; clear: both; } .pear-col { float: left; min-height: 1px; } .pear-row * { box-sizing: border-box } .pear-col-md1 { width: 4.16%; } .pear-col-md2 { width: 8.33%; } .pear-col-md3 { width: 12.5%; } .pear-col-md4 { width: 16.66%; } .pear-col-md5 { width: 20.83%; } .pear-col-md6 { width: 25%; } .pear-col-md7 { width: 29.16%; } .pear-col-md8 { width: 33.33%; } .pear-col-md9 { width: 37.5%; } .pear-col-md10 { width: 41.66%; } .pear-col-md11 { width: 45.83%; } .pear-col-md12 { width: 50%; } .pear-col-md13 { width: 54.16%; } .pear-col-md14 { width: 58.33%; } .pear-col-md15 { width: 62.5%; } .pear-col-md16 { width: 66.66%; } .pear-col-md17 { width: 70.83%; } .pear-col-md18 { width: 75%; } .pear-col-md19 { width: 79.16%; } .pear-col-md20 { width: 83.33%; } .pear-col-md21 { width: 87.5%; } .pear-col-md22 { width: 91.66%; } .pear-col-md23 { width: 95.83%; } .pear-col-md24 { width: 100%; } @media all and (min-width:993px) and (max-width:1199px) { .pear-col-md-offset1 { margin-left: 4.16%; } .pear-col-md-offset2 { margin-left: 8.33%; } .pear-col-md-offset3 { margin-left: 12.5%; } .pear-col-md-offset4 { margin-left: 16.66%; } .pear-col-md-offset5 { margin-left: 20.83%; } .pear-col-md-offset6 { margin-left: 25%; } .pear-col-md-offset7 { margin-left: 29.16%; } .pear-col-md-offset8 { margin-left: 33.33%; } .pear-col-md-offset9 { margin-left: 37.5%; } .pear-col-md-offset10 { margin-left: 41.66%; } .pear-col-md-offset11 { margin-left: 45.83%; } .pear-col-md-offset12 { margin-left: 50%; } .pear-col-md-offset13 { margin-left: 54.16%; } .pear-col-md-offset14 { margin-left: 58.33%; } .pear-col-md-offset15 { margin-left: 62.5%; } .pear-col-md-offset16 { margin-left: 66.66%; } .pear-col-md-offset17 { margin-left: 70.83%; } .pear-col-md-offset18 { margin-left: 75%; } .pear-col-md-offset19 { margin-left: 79.16%; } .pear-col-md-offset20 { margin-left: 83.33%; } .pear-col-md-offset21 { margin-left: 87.5%; } .pear-col-md-offset22 { margin-left: 91.66%; } .pear-col-md-offset23 { margin-left: 95.83%; } .pear-col-md-offset24 { margin-left: 100%; } } @media all and (max-width:768px) { .pear-col-xs1 { width: 4.16%; } .pear-col-xs2 { width: 8.33%; } .pear-col-xs3 { width: 12.5%; } .pear-col-xs4 { width: 16.66%; } .pear-col-xs5 { width: 20.83%; } .pear-col-xs6 { width: 25%; } .pear-col-xs7 { width: 29.16%; } .pear-col-xs8 { width: 33.33%; } .pear-col-xs9 { width: 37.5%; } .pear-col-xs10 { width: 41.66%; } .pear-col-xs11 { width: 45.83%; } .pear-col-xs12 { width: 50%; } .pear-col-xs13 { width: 54.16%; } .pear-col-xs14 { width: 58.33%; } .pear-col-xs15 { width: 62.5%; } .pear-col-xs16 { width: 66.66%; } .pear-col-xs17 { width: 70.83%; } .pear-col-xs18 { width: 75%; } .pear-col-xs19 { width: 79.16%; } .pear-col-xs20 { width: 83.33%; } .pear-col-xs21 { width: 87.5%; } .pear-col-xs22 { width: 91.66%; } .pear-col-xs23 { width: 95.83%; } .pear-col-xs24 { width: 100%; } .pear-col-xs-offset1 { margin-left: 4.16%; } .pear-col-xs-offset2 { margin-left: 8.33%; } .pear-col-xs-offset3 { margin-left: 12.5%; } .pear-col-xs-offset4 { margin-left: 16.66%; } .pear-col-xs-offset5 { margin-left: 20.83%; } .pear-col-xs-offset6 { margin-left: 25%; } .pear-col-xs-offset7 { margin-left: 29.16%; } .pear-col-xs-offset8 { margin-left: 33.33%; } .pear-col-xs-offset9 { margin-left: 37.5%; } .pear-col-xs-offset10 { margin-left: 41.66%; } .pear-col-xs-offset11 { margin-left: 45.83%; } .pear-col-xs-offset12 { margin-left: 50%; } .pear-col-xs-offset13 { margin-left: 54.16%; } .pear-col-xs-offset14 { margin-left: 58.33%; } .pear-col-xs-offset15 { margin-left: 62.5%; } .pear-col-xs-offset16 { margin-left: 66.66%; } .pear-col-xs-offset17 { margin-left: 70.83%; } .pear-col-xs-offset18 { margin-left: 75%; } .pear-col-xs-offset19 { margin-left: 79.16%; } .pear-col-xs-offset20 { margin-left: 83.33%; } .pear-col-xs-offset21 { margin-left: 87.5%; } .pear-col-xs-offset22 { margin-left: 91.66%; } .pear-col-xs-offset23 { margin-left: 95.83%; } .pear-col-xs-offset24 { margin-left: 100%; } } @media all and (min-width:768px) and (max-width:992px) { .pear-col-sm1 { width: 4.16%; } .pear-col-sm2 { width: 8.33%; } .pear-col-sm3 { width: 12.5%; } .pear-col-sm4 { width: 16.66%; } .pear-col-sm5 { width: 20.83%; } .pear-col-sm6 { width: 25%; } .pear-col-sm7 { width: 29.16%; } .pear-col-sm8 { width: 33.33%; } .pear-col-sm9 { width: 37.5%; } .pear-col-sm10 { width: 41.66%; } .pear-col-sm11 { width: 45.83%; } .pear-col-sm12 { width: 50%; } .pear-col-sm13 { width: 54.16%; } .pear-col-sm14 { width: 58.33%; } .pear-col-sm15 { width: 62.5%; } .pear-col-sm16 { width: 66.66%; } .pear-col-sm17 { width: 70.83%; } .pear-col-sm18 { width: 75%; } .pear-col-sm19 { width: 79.16%; } .pear-col-sm20 { width: 83.33%; } .pear-col-sm21 { width: 87.5%; } .pear-col-sm22 { width: 91.66%; } .pear-col-sm23 { width: 95.83%; } .pear-col-sm24 { width: 100%; } .pear-col-sm-offset1 { margin-left: 4.16%; } .pear-col-sm-offset2 { margin-left: 8.33%; } .pear-col-sm-offset3 { margin-left: 12.5%; } .pear-col-sm-offset4 { margin-left: 16.66%; } .pear-col-sm-offset5 { margin-left: 20.83%; } .pear-col-sm-offset6 { margin-left: 25%; } .pear-col-sm-offset7 { margin-left: 29.16%; } .pear-col-sm-offset8 { margin-left: 33.33%; } .pear-col-sm-offset9 { margin-left: 37.5%; } .pear-col-sm-offset10 { margin-left: 41.66%; } .pear-col-sm-offset11 { margin-left: 45.83%; } .pear-col-sm-offset12 { margin-left: 50%; } .pear-col-sm-offset13 { margin-left: 54.16%; } .pear-col-sm-offset14 { margin-left: 58.33%; } .pear-col-sm-offset15 { margin-left: 62.5%; } .pear-col-sm-offset16 { margin-left: 66.66%; } .pear-col-sm-offset17 { margin-left: 70.83%; } .pear-col-sm-offset18 { margin-left: 75%; } .pear-col-sm-offset19 { margin-left: 79.16%; } .pear-col-sm-offset20 { margin-left: 83.33%; } .pear-col-sm-offset21 { margin-left: 87.5%; } .pear-col-sm-offset22 { margin-left: 91.66%; } .pear-col-sm-offset23 { margin-left: 95.83%; } .pear-col-sm-offset24 { margin-left: 100%; } } @media all and (min-width:1200px) { .pear-col-lg1 { width: 4.16%; } .pear-col-lg2 { width: 8.33%; } .pear-col-lg3 { width: 12.5%; } .pear-col-lg4 { width: 16.66%; } .pear-col-lg5 { width: 20.83%; } .pear-col-lg6 { width: 25%; } .pear-col-lg7 { width: 29.16%; } .pear-col-lg8 { width: 33.33%; } .pear-col-lg9 { width: 37.5%; } .pear-col-lg10 { width: 41.66%; } .pear-col-lg11 { width: 45.83%; } .pear-col-lg12 { width: 50%; } .pear-col-lg13 { width: 54.16%; } .pear-col-lg14 { width: 58.33%; } .pear-col-lg15 { width: 62.5%; } .pear-col-lg16 { width: 66.66%; } .pear-col-lg17 { width: 70.83%; } .pear-col-lg18 { width: 75%; } .pear-col-lg19 { width: 79.16%; } .pear-col-lg20 { width: 83.33%; } .pear-col-lg21 { width: 87.5%; } .pear-col-lg22 { width: 91.66%; } .pear-col-lg23 { width: 95.83%; } .pear-col-lg24 { width: 100%; } .pear-col-lg-offset1 { margin-left: 4.16%; } .pear-col-lg-offset2 { margin-left: 8.33%; } .pear-col-lg-offset3 { margin-left: 12.5%; } .pear-col-lg-offset4 { margin-left: 16.66%; } .pear-col-lg-offset5 { margin-left: 20.83%; } .pear-col-lg-offset6 { margin-left: 25%; } .pear-col-lg-offset7 { margin-left: 29.16%; } .pear-col-lg-offset8 { margin-left: 33.33%; } .pear-col-lg-offset9 { margin-left: 37.5%; } .pear-col-lg-offset10 { margin-left: 41.66%; } .pear-col-lg-offset11 { margin-left: 45.83%; } .pear-col-lg-offset12 { margin-left: 50%; } .pear-col-lg-offset13 { margin-left: 54.16%; } .pear-col-lg-offset14 { margin-left: 58.33%; } .pear-col-lg-offset15 { margin-left: 62.5%; } .pear-col-lg-offset16 { margin-left: 66.66%; } .pear-col-lg-offset17 { margin-left: 70.83%; } .pear-col-lg-offset18 { margin-left: 75%; } .pear-col-lg-offset19 { margin-left: 79.16%; } .pear-col-lg-offset20 { margin-left: 83.33%; } .pear-col-lg-offset21 { margin-left: 87.5%; } .pear-col-lg-offset22 { margin-left: 91.66%; } .pear-col-lg-offset23 { margin-left: 95.83%; } .pear-col-lg-offset24 { margin-left: 100%; } } .pear-col-space1 { margin: -.5px } .pear-col-space1>* { padding: .5px } .pear-col-space2 { margin: -1px } .pear-col-space2>* { padding: 1px } .pear-col-space4 { margin: -2px } .pear-col-space4>* { padding: 2px } .pear-col-space5 { margin: -2.5px } .pear-col-space5>* { padding: 2.5px } .pear-col-space6 { margin: -3px } .pear-col-space6>* { padding: 3px } .pear-col-space8 { margin: -4px } .pear-col-space8>* { padding: 4px } .pear-col-space10 { margin: -5px } .pear-col-space10>* { padding: 5px } .pear-col-space12 { margin: -6px } .pear-col-space12>* { padding: 6px } .pear-col-space14 { margin: -7px } .pear-col-space14>* { padding: 7px } .pear-col-space15 { margin: -7.5px } .pear-col-space15>* { padding: 7.5px } .pear-col-space16 { margin: -8px } .pear-col-space16>* { padding: 8px } .pear-col-space18 { margin: -9px } .pear-col-space18>* { padding: 9px } .pear-col-space20 { margin: -10px } .pear-col-space20>* { padding: 10px } .pear-col-space22 { margin: -11px } .pear-col-space22>* { padding: 11px } .pear-col-space24 { margin: -12px } .pear-col-space24>* { padding: 12px } .pear-col-space25 { margin: -12.5px } .pear-col-space25>* { padding: 12.5px } .pear-col-space26 { margin: -13px } .pear-col-space26>* { padding: 13px } .pear-col-space28 { margin: -14px } .pear-col-space28>* { padding: 14px } .pear-col-space30 { margin: -15px } .pear-col-space30>* { padding: 15px }