From ca4d2e830dc604ec307faf12bb27055c8d99adf7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=B0=B1=E7=9C=A0=E4=BB=AA=E5=BC=8F?= <854085467@qq.com> Date: Thu, 6 Aug 2020 16:56:57 +0800 Subject: [PATCH] =?UTF-8?q?24=20=E6=A0=85=E6=A0=BC=E7=B3=BB=E7=BB=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- component/pear/css/pear-module/layout.css | 945 +++++++++++++++++++++- 1 file changed, 944 insertions(+), 1 deletion(-) diff --git a/component/pear/css/pear-module/layout.css b/component/pear/css/pear-module/layout.css index 58fc877..debfe50 100644 --- a/component/pear/css/pear-module/layout.css +++ b/component/pear/css/pear-module/layout.css @@ -1,4 +1,4 @@ -.pear-container{ +.pear-container { margin: 10px; background-color: whitesmoke; } @@ -54,6 +54,7 @@ body::-webkit-scrollbar-corner { .mainBox::-webkit-scrollbar-thumb:hover { background: #E6E6E6; } + .mainBox::-webkit-scrollbar-corner { background: #f6f6f6; } @@ -91,3 +92,945 @@ body::-webkit-scrollbar-corner { 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%; +} + +.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 +}