diff --git a/src/css/layui.css b/src/css/layui.css index b558a937..0a3dbaf5 100644 --- a/src/css/layui.css +++ b/src/css/layui.css @@ -1062,746 +1062,6 @@ a cite { padding: 0 15px; } -.layui-row:after, -.layui-row:before { - content: ''; - display: block; - clear: both; -} - -.layui-col-lg1, -.layui-col-lg10, -.layui-col-lg11, -.layui-col-lg12, -.layui-col-lg2, -.layui-col-lg3, -.layui-col-lg4, -.layui-col-lg5, -.layui-col-lg6, -.layui-col-lg7, -.layui-col-lg8, -.layui-col-lg9, -.layui-col-md1, -.layui-col-md10, -.layui-col-md11, -.layui-col-md12, -.layui-col-md2, -.layui-col-md3, -.layui-col-md4, -.layui-col-md5, -.layui-col-md6, -.layui-col-md7, -.layui-col-md8, -.layui-col-md9, -.layui-col-sm1, -.layui-col-sm10, -.layui-col-sm11, -.layui-col-sm12, -.layui-col-sm2, -.layui-col-sm3, -.layui-col-sm4, -.layui-col-sm5, -.layui-col-sm6, -.layui-col-sm7, -.layui-col-sm8, -.layui-col-sm9, -.layui-col-xs1, -.layui-col-xs10, -.layui-col-xs11, -.layui-col-xs12, -.layui-col-xs2, -.layui-col-xs3, -.layui-col-xs4, -.layui-col-xs5, -.layui-col-xs6, -.layui-col-xs7, -.layui-col-xs8, -.layui-col-xs9 { - position: relative; - display: block; - box-sizing: border-box; -} - -.layui-col-xs1, -.layui-col-xs10, -.layui-col-xs11, -.layui-col-xs12, -.layui-col-xs2, -.layui-col-xs3, -.layui-col-xs4, -.layui-col-xs5, -.layui-col-xs6, -.layui-col-xs7, -.layui-col-xs8, -.layui-col-xs9 { - float: left; -} - -.layui-col-xs1 { - width: 8.33333333%; -} - -.layui-col-xs2 { - width: 16.66666667%; -} - -.layui-col-xs3 { - width: 25%; -} - -.layui-col-xs4 { - width: 33.33333333%; -} - -.layui-col-xs5 { - width: 41.66666667%; -} - -.layui-col-xs6 { - width: 50%; -} - -.layui-col-xs7 { - width: 58.33333333%; -} - -.layui-col-xs8 { - width: 66.66666667%; -} - -.layui-col-xs9 { - width: 75%; -} - -.layui-col-xs10 { - width: 83.33333333%; -} - -.layui-col-xs11 { - width: 91.66666667%; -} - -.layui-col-xs12 { - width: 100%; -} - -.layui-col-xs-offset1 { - margin-left: 8.33333333%; -} - -.layui-col-xs-offset2 { - margin-left: 16.66666667%; -} - -.layui-col-xs-offset3 { - margin-left: 25%; -} - -.layui-col-xs-offset4 { - margin-left: 33.33333333%; -} - -.layui-col-xs-offset5 { - margin-left: 41.66666667%; -} - -.layui-col-xs-offset6 { - margin-left: 50%; -} - -.layui-col-xs-offset7 { - margin-left: 58.33333333%; -} - -.layui-col-xs-offset8 { - margin-left: 66.66666667%; -} - -.layui-col-xs-offset9 { - margin-left: 75%; -} - -.layui-col-xs-offset10 { - margin-left: 83.33333333%; -} - -.layui-col-xs-offset11 { - margin-left: 91.66666667%; -} - -.layui-col-xs-offset12 { - margin-left: 100%; -} - -@media screen and (max-width: 768px) { - .layui-hide-xs { - display: none !important; - } - - .layui-show-xs-block { - display: block !important; - } - - .layui-show-xs-inline { - display: inline !important; - } - - .layui-show-xs-inline-block { - display: inline-block !important; - } -} - -@media screen and (min-width: 768px) { - .layui-container { - width: 750px; - } - - .layui-hide-sm { - display: none !important; - } - - .layui-show-sm-block { - display: block !important; - } - - .layui-show-sm-inline { - display: inline !important; - } - - .layui-show-sm-inline-block { - display: inline-block !important; - } - - .layui-col-sm1, - .layui-col-sm10, - .layui-col-sm11, - .layui-col-sm12, - .layui-col-sm2, - .layui-col-sm3, - .layui-col-sm4, - .layui-col-sm5, - .layui-col-sm6, - .layui-col-sm7, - .layui-col-sm8, - .layui-col-sm9 { - float: left; - } - - .layui-col-sm1 { - width: 8.33333333%; - } - - .layui-col-sm2 { - width: 16.66666667%; - } - - .layui-col-sm3 { - width: 25%; - } - - .layui-col-sm4 { - width: 33.33333333%; - } - - .layui-col-sm5 { - width: 41.66666667%; - } - - .layui-col-sm6 { - width: 50%; - } - - .layui-col-sm7 { - width: 58.33333333%; - } - - .layui-col-sm8 { - width: 66.66666667%; - } - - .layui-col-sm9 { - width: 75%; - } - - .layui-col-sm10 { - width: 83.33333333%; - } - - .layui-col-sm11 { - width: 91.66666667%; - } - - .layui-col-sm12 { - width: 100%; - } - - .layui-col-sm-offset1 { - margin-left: 8.33333333%; - } - - .layui-col-sm-offset2 { - margin-left: 16.66666667%; - } - - .layui-col-sm-offset3 { - margin-left: 25%; - } - - .layui-col-sm-offset4 { - margin-left: 33.33333333%; - } - - .layui-col-sm-offset5 { - margin-left: 41.66666667%; - } - - .layui-col-sm-offset6 { - margin-left: 50%; - } - - .layui-col-sm-offset7 { - margin-left: 58.33333333%; - } - - .layui-col-sm-offset8 { - margin-left: 66.66666667%; - } - - .layui-col-sm-offset9 { - margin-left: 75%; - } - - .layui-col-sm-offset10 { - margin-left: 83.33333333%; - } - - .layui-col-sm-offset11 { - margin-left: 91.66666667%; - } - - .layui-col-sm-offset12 { - margin-left: 100%; - } -} - -@media screen and (min-width: 992px) { - .layui-container { - width: 970px; - } - - .layui-hide-md { - display: none !important; - } - - .layui-show-md-block { - display: block !important; - } - - .layui-show-md-inline { - display: inline !important; - } - - .layui-show-md-inline-block { - display: inline-block !important; - } - - .layui-col-md1, - .layui-col-md10, - .layui-col-md11, - .layui-col-md12, - .layui-col-md2, - .layui-col-md3, - .layui-col-md4, - .layui-col-md5, - .layui-col-md6, - .layui-col-md7, - .layui-col-md8, - .layui-col-md9 { - float: left; - } - - .layui-col-md1 { - width: 8.33333333%; - } - - .layui-col-md2 { - width: 16.66666667%; - } - - .layui-col-md3 { - width: 25%; - } - - .layui-col-md4 { - width: 33.33333333%; - } - - .layui-col-md5 { - width: 41.66666667%; - } - - .layui-col-md6 { - width: 50%; - } - - .layui-col-md7 { - width: 58.33333333%; - } - - .layui-col-md8 { - width: 66.66666667%; - } - - .layui-col-md9 { - width: 75%; - } - - .layui-col-md10 { - width: 83.33333333%; - } - - .layui-col-md11 { - width: 91.66666667%; - } - - .layui-col-md12 { - width: 100%; - } - - .layui-col-md-offset1 { - margin-left: 8.33333333%; - } - - .layui-col-md-offset2 { - margin-left: 16.66666667%; - } - - .layui-col-md-offset3 { - margin-left: 25%; - } - - .layui-col-md-offset4 { - margin-left: 33.33333333%; - } - - .layui-col-md-offset5 { - margin-left: 41.66666667%; - } - - .layui-col-md-offset6 { - margin-left: 50%; - } - - .layui-col-md-offset7 { - margin-left: 58.33333333%; - } - - .layui-col-md-offset8 { - margin-left: 66.66666667%; - } - - .layui-col-md-offset9 { - margin-left: 75%; - } - - .layui-col-md-offset10 { - margin-left: 83.33333333%; - } - - .layui-col-md-offset11 { - margin-left: 91.66666667%; - } - - .layui-col-md-offset12 { - margin-left: 100%; - } -} - -@media screen and (min-width: 1200px) { - .layui-container { - width: 1170px; - } - - .layui-hide-lg { - display: none !important; - } - - .layui-show-lg-block { - display: block !important; - } - - .layui-show-lg-inline { - display: inline !important; - } - - .layui-show-lg-inline-block { - display: inline-block !important; - } - - .layui-col-lg1, - .layui-col-lg10, - .layui-col-lg11, - .layui-col-lg12, - .layui-col-lg2, - .layui-col-lg3, - .layui-col-lg4, - .layui-col-lg5, - .layui-col-lg6, - .layui-col-lg7, - .layui-col-lg8, - .layui-col-lg9 { - float: left; - } - - .layui-col-lg1 { - width: 8.33333333%; - } - - .layui-col-lg2 { - width: 16.66666667%; - } - - .layui-col-lg3 { - width: 25%; - } - - .layui-col-lg4 { - width: 33.33333333%; - } - - .layui-col-lg5 { - width: 41.66666667%; - } - - .layui-col-lg6 { - width: 50%; - } - - .layui-col-lg7 { - width: 58.33333333%; - } - - .layui-col-lg8 { - width: 66.66666667%; - } - - .layui-col-lg9 { - width: 75%; - } - - .layui-col-lg10 { - width: 83.33333333%; - } - - .layui-col-lg11 { - width: 91.66666667%; - } - - .layui-col-lg12 { - width: 100%; - } - - .layui-col-lg-offset1 { - margin-left: 8.33333333%; - } - - .layui-col-lg-offset2 { - margin-left: 16.66666667%; - } - - .layui-col-lg-offset3 { - margin-left: 25%; - } - - .layui-col-lg-offset4 { - margin-left: 33.33333333%; - } - - .layui-col-lg-offset5 { - margin-left: 41.66666667%; - } - - .layui-col-lg-offset6 { - margin-left: 50%; - } - - .layui-col-lg-offset7 { - margin-left: 58.33333333%; - } - - .layui-col-lg-offset8 { - margin-left: 66.66666667%; - } - - .layui-col-lg-offset9 { - margin-left: 75%; - } - - .layui-col-lg-offset10 { - margin-left: 83.33333333%; - } - - .layui-col-lg-offset11 { - margin-left: 91.66666667%; - } - - .layui-col-lg-offset12 { - margin-left: 100%; - } -} - -.layui-col-space1 { - margin: -0.5px; -} - -.layui-col-space1 > * { - padding: 0.5px; -} - -.layui-col-space2 { - margin: -1px; -} - -.layui-col-space2 > * { - padding: 1px; -} - -.layui-col-space4 { - margin: -2px; -} - -.layui-col-space4 > * { - padding: 2px; -} - -.layui-col-space5 { - margin: -2.5px; -} - -.layui-col-space5 > * { - padding: 2.5px; -} - -.layui-col-space6 { - margin: -3px; -} - -.layui-col-space6 > * { - padding: 3px; -} - -.layui-col-space8 { - margin: -4px; -} - -.layui-col-space8 > * { - padding: 4px; -} - -.layui-col-space10 { - margin: -5px; -} - -.layui-col-space10 > * { - padding: 5px; -} - -.layui-col-space12 { - margin: -6px; -} - -.layui-col-space12 > * { - padding: 6px; -} - -.layui-col-space14 { - margin: -7px; -} - -.layui-col-space14 > * { - padding: 7px; -} - -.layui-col-space15 { - margin: -7.5px; -} - -.layui-col-space15 > * { - padding: 7.5px; -} - -.layui-col-space16 { - margin: -8px; -} - -.layui-col-space16 > * { - padding: 8px; -} - -.layui-col-space18 { - margin: -9px; -} - -.layui-col-space18 > * { - padding: 9px; -} - -.layui-col-space20 { - margin: -10px; -} - -.layui-col-space20 > * { - padding: 10px; -} - -.layui-col-space22 { - margin: -11px; -} - -.layui-col-space22 > * { - padding: 11px; -} - -.layui-col-space24 { - margin: -12px; -} - -.layui-col-space24 > * { - padding: 12px; -} - -.layui-col-space25 { - margin: -12.5px; -} - -.layui-col-space25 > * { - padding: 12.5px; -} - -.layui-col-space26 { - margin: -13px; -} - -.layui-col-space26 > * { - padding: 13px; -} - -.layui-col-space28 { - margin: -14px; -} - -.layui-col-space28 > * { - padding: 14px; -} - -.layui-col-space30 { - margin: -15px; -} - -.layui-col-space30 > * { - padding: 15px; -} - .layui-btn, .layui-input, .layui-select, diff --git a/src/module/col/index.vue b/src/module/col/index.vue index 0153f87d..1b44dcbf 100644 --- a/src/module/col/index.vue +++ b/src/module/col/index.vue @@ -1,32 +1,39 @@ + + + + - - diff --git a/src/module/row/index.less b/src/module/row/index.less new file mode 100644 index 00000000..ed7165ed --- /dev/null +++ b/src/module/row/index.less @@ -0,0 +1,201 @@ +.layui-row:after, +.layui-row:before { + content: ''; + display: block; + clear: both; +} + +/** generate space */ +.generate-space(@a) { + + .layui-col-space@{a} { + margin: -0.5px * @a; + } + + .layui-col-space@{a}>* { + padding: 0.5px * @a; + } +} + +.loop-generate-space(@index) when (@index <=30) { + .generate-space(@index); + .loop-generate-space(@index + 1); +} + +.loop-generate-space(1); + +/** generate col xs */ + +.generate-col-xs(@a) { + + .layui-col-xs@{a} { + float: left; + display: block; + position: relative; + box-sizing: border-box; + width: 100% * (@a / 24); + } + + .layui-col-xs-offset@{a} { + margin-left: 100% * (@a / 24); + } +} + +.generate-col-sm(@a) { + + .layui-col-sm@{a} { + float: left; + display: block; + position: relative; + box-sizing: border-box; + width: 100% * (@a / 24); + } + + .layui-col-sm-offset@{a} { + margin-left: 100% * (@a / 24); + } +} + +.generate-col-md(@a) { + + .layui-col-md@{a} { + float: left; + display: block; + position: relative; + box-sizing: border-box; + width: 100% * (@a / 24); + } + + .layui-col-md-offset@{a} { + margin-left: 100% * (@a / 24); + } +} + +.generate-col-lg(@a) { + + .layui-col-lg@{a} { + float: left; + display: block; + position: relative; + box-sizing: border-box; + width: 100% * (@a / 24); + } + + .layui-col-lg-offset@{a} { + margin-left: 100% * (@a / 24); + } +} + +.loop-generate-col-xs(@index) when (@index <=24) { + .generate-col-xs(@index); + .loop-generate-col-xs(@index + 1) +} + +.loop-generate-col-sm(@index) when (@index <=24) { + .generate-col-sm(@index); + .loop-generate-col-sm(@index + 1) +} + +.loop-generate-col-md(@index) when (@index <=24) { + .generate-col-md(@index); + .loop-generate-col-md(@index + 1) +} + +.loop-generate-col-lg(@index) when (@index <=24) { + .generate-col-lg(@index); + .loop-generate-col-lg(@index + 1) +} + +@media screen and (max-width: 768px) { + .layui-hide-xs { + display: none !important; + } + + .layui-show-xs-block { + display: block !important; + } + + .layui-show-xs-inline { + display: inline !important; + } + + .layui-show-xs-inline-block { + display: inline-block !important; + } + + .loop-generate-col-xs(1); +} + + +@media screen and (min-width: 768px) { + .layui-container { + width: 750px; + } + + .layui-hide-sm { + display: none !important; + } + + .layui-show-sm-block { + display: block !important; + } + + .layui-show-sm-inline { + display: inline !important; + } + + .layui-show-sm-inline-block { + display: inline-block !important; + } + + .loop-generate-col-sm(1) +} + + +@media screen and (min-width: 992px) { + .layui-container { + width: 970px; + } + + .layui-hide-md { + display: none !important; + } + + .layui-show-md-block { + display: block !important; + } + + .layui-show-md-inline { + display: inline !important; + } + + .layui-show-md-inline-block { + display: inline-block !important; + } + + .loop-generate-col-md(1) +} + +@media screen and (min-width: 1200px) { + .layui-container { + width: 1170px; + } + + .layui-hide-lg { + display: none !important; + } + + .layui-show-lg-block { + display: block !important; + } + + .layui-show-lg-inline { + display: inline !important; + } + + .layui-show-lg-inline-block { + display: inline-block !important; + } + + .loop-generate-col-lg(1) +} \ No newline at end of file diff --git a/src/module/row/index.ts b/src/module/row/index.ts index 56f22dfc..dc7cdb59 100644 --- a/src/module/row/index.ts +++ b/src/module/row/index.ts @@ -6,4 +6,4 @@ Component.install = (app: App) => { app.component(Component.name || 'LayRow', Component) } -export default Component as IDefineComponent +export default Component as IDefineComponent \ No newline at end of file diff --git a/src/module/row/index.vue b/src/module/row/index.vue index 2c8c70b9..465eb792 100644 --- a/src/module/row/index.vue +++ b/src/module/row/index.vue @@ -1,13 +1,25 @@ + + + + -