修复grid的scss，计算兼容性问题

duanyong · Jan 22, 2022 · 1398df5 · 1398df5
1 parent b103f55
commit 1398df5
Showing 1 changed file with 21 additions and 14 deletions.
diff --git a/mp-cu/colorUI/scss/style/_grid.scss b/mp-cu/colorUI/scss/style/_grid.scss
@@ -1,17 +1,7 @@
 /* ==================
           栅栏
  ==================== */
-
-@mixin make_col($screen) {
-    @for $i from 1 through 12 {
-        .ui-col-#{$screen}-#{$i} {
-            width: #{100% / 12 * $i};
-        }
-        .ui-cols-#{$screen}-#{$i} .ui-item {
-            width: #{100% / $i};
-        }
-    }
-}
+
 .ui-container {
     box-sizing: border-box;
     margin-left: auto;
@@ -50,8 +40,8 @@
         @for $i from 1 through 12 {
             &.ui-cols-#{$i} > .ui-item {
                 padding-bottom: calc((100% - #{20rpx * ($i - 1)}) / #{$i});
-                height: 0;
                 width: calc((100% - #{20rpx * ($i - 1)}) / #{$i});
+				height: 0;
             }
         }
         @for $i from 1 through 12 {
@@ -63,19 +53,31 @@
 }
 @for $i from 1 through 12 {
     .ui-cols-#{$i} .ui-item {
-        width: #{100% / $i};
+        width: calc(100% / #{$i});
     }
 }
 @for $i from 1 through 12 {
     .ui-col-#{$i} {
-        width: #{100% / 12 * $i};
+        width: calc(100% / 12 * #{$i});
     }
 }
 @for $i from 1 through 24 {
     .ui-col-lg-#{$i} {
         width: calc(100% / 24 * #{$i});
     }
 }
+
+@mixin make_col($screen) {
+    @for $i from 1 through 12 {
+        .ui-col-#{$screen}-#{$i} {
+            width: calc(100% / 12 * #{$i});
+        }
+        .ui-cols-#{$screen}-#{$i} .ui-item {
+			width: calc(100% / #{$i});
+        }
+    }
+}
+
 // 小屏
 @media screen and (min-width: 0px) {
     @include make_col('xs');
@@ -105,6 +107,11 @@
 @media screen and (min-width: 1920px) {
     @include make_col('xxl');
 }
+
+
+
+
+
 ui-col {
     display: contents;
 }