feat: 新增预设样式

css/common.scss

@@ -0,0 +1,390 @@
+@import './variable.scss';
+
+/** 背景颜色 */
+.zh-bg-success {
+  background-color: $zh-green;
+}
+
+.zh-bg-gray {
+  background-color: $zh-light-gray;
+}
+
+.zh-bg-blue {
+  background-color: $zh-blue;
+}
+
+.zh-bg-red {
+  background-color: $zh-red;
+}
+
+.zh-bg-yellow {
+  background-color: $zh-yellow;
+}
+
+.zh-bg-green {
+  background-color: $zh-green;
+}
+
+.zh-bg-white {
+  background-color: $zh-white;
+}
+
+/** 字体颜色 */
+.zh-gray {
+  color: $zh-gray;
+}
+
+.zh-red {
+  color: $zh-red;
+}
+
+.zh-blue {
+  color: $zh-blue;
+}
+
+.zh-green {
+  color: $zh-green;
+}
+
+.zh-yellow {
+  color: $zh-yellow;
+}
+
+.zh-muted {
+  color: $zh-muted;
+}
+
+/** 文本水平对齐方向 */
+.zh-text-center {
+  text-align: center;
+}
+
+.zh-text-left {
+  text-align: left;
+}
+
+.zh-text-right {
+  text-align: right;
+}
+
+
+
+.zh-width-100P {
+  width: 100%;
+}
+
+.zh-height-100P {
+  height: 100%;
+}
+
+/** 字体粗细*/
+@for $i from 1 through 9 {
+  .zh-fw-#{$i * 100} {
+    font-weight: $i * 100;
+  }
+}
+
+/* 预设常用样式 */
+@for $i from 1 through 50 {
+  /* font-size */
+  .zh-fz-#{$i} {
+    font-size: 1px * $i;
+  }
+
+  /* padding */
+  .zh-pd-#{$i} {
+    padding: 1px * $i;
+  }
+  .zh-pd-top-#{$i} {
+    padding-top: 1px * $i;
+  }
+  .zh-pd-right-#{$i} {
+    padding-right: 1px * $i;
+  }
+  .zh-pd-bottom-#{$i} {
+    padding-bottom: 1px * $i;
+  }
+  .zh-pd-left-#{$i} {
+    padding-left: 1px * $i;
+  }
+  .zh-pd-tb-#{$i} {
+    padding-top: 1px * $i;
+    padding-bottom: 1px * $i;
+  }
+  .zh-pd-lr-#{$i} {
+    padding-right: 1px * $i;
+    padding-left: 1px * $i;
+  }
+
+  /* margin */
+  .zh-mg-#{$i} {
+    margin: 1px * $i;
+  }
+  .zh-mg-top-#{$i} {
+    margin-top: 1px * $i;
+  }
+  .zh-mg-right-#{$i} {
+    margin-right: 1px * $i;
+  }
+  .zh-mg-bottom-#{$i} {
+    margin-bottom: 1px * $i;
+  }
+  .zh-mg-left-#{$i} {
+    margin-left: 1px * $i;
+  }
+  .zh-mg-tb-#{$i} {
+    margin-top: 1px * $i;
+    margin-bottom: 1px * $i;
+  }
+  .zh-mg-lr-#{$i} {
+    margin-right: 1px * $i;
+    margin-left: 1px * $i;
+  }
+  // width & height
+  .zh-width-#{$i} {
+    width: 1px * $i;
+  }
+  .zh-height-#{$i} {
+    height: 1px * $i;
+  }
+
+  // radius
+  .zh-radius-#{$i} {
+    border-radius: 1px * $i;
+  }
+
+  // line-height
+  .zh-lh-#{$i} {
+    line-height: 1px * $i;
+  }
+}
+
+/** flex布局 */
+.zh-flex {
+  display: flex;
+}
+
+.zh-flex-wrap {
+  @extend .zh-flex;
+
+  flex-wrap: wrap;
+}
+
+.zh-flex-row {
+  @extend .zh-flex;
+
+  flex-direction: row;
+}
+
+.zh-flex-column {
+  @extend .zh-flex;
+
+  flex-direction: column;
+}
+
+.zh-flex-sub {
+  flex: 1;
+}
+
+.zh-flex-twice {
+  flex: 2;
+}
+
+.zh-flex-treble {
+  flex: 3;
+}
+
+.zh-flex-quadruple {
+  flex: 4;
+}
+
+.zh-flex-quintuple {
+  flex: 5;
+}
+.zh-align-start {
+  @extend .zh-flex;
+
+  align-items: flex-start;
+}
+
+.zh-align-end {
+  @extend .zh-flex;
+
+  align-items: flex-end;
+}
+
+.zh-align-center {
+  @extend .zh-flex;
+
+  align-items: center;
+}
+
+.zh-align-stretch {
+  @extend .zh-flex;
+
+  align-items: stretch;
+}
+
+.zh-align-baseline {
+  @extend .zh-flex;
+
+  align-items: baseline;
+}
+
+.zh-self-start {
+  @extend .zh-flex;
+
+  align-self: flex-start;
+}
+
+.zh-self-center {
+  @extend .zh-flex;
+
+  align-self: flex-center;
+}
+
+.zh-self-end {
+  @extend .zh-flex;
+
+  align-self: flex-end;
+}
+
+.zh-self-stretch {
+  @extend .zh-flex;
+
+  align-self: stretch;
+}
+
+.zh-justify-start {
+  @extend .zh-flex;
+
+  justify-content: flex-start;
+}
+
+.zh-justify-end {
+  @extend .zh-flex;
+
+  justify-content: flex-end;
+}
+
+.zh-justify-center {
+  @extend .zh-flex;
+
+  justify-content: center;
+}
+
+.zh-justify-between {
+  @extend .zh-flex;
+
+  justify-content: space-between;
+}
+
+.zh-justify-around {
+  @extend .zh-flex;
+
+  justify-content: space-around;
+}
+
+.zh-flex-row-center {
+  @extend .zh-flex-row;
+  @extend .zh-justify-center;
+  @extend .zh-align-center;
+}
+
+.zh-flex-column-center {
+  @extend .zh-flex-column;
+  @extend .zh-justify-center;
+  @extend .zh-align-center;
+}
+
+
+// grid布局
+.zh-grid {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+@mixin multi-border($n) {
+  &.zh-grid-border {
+    & > div {
+      @include zh-border;
+      &:not(:nth-last-child(-n + #{$n})) {
+        &::after {
+          border-bottom: 1px solid $zh-line-color;
+        }
+      }
+      &:not(:nth-child(#{$n}n)) {
+        &::after {
+          border-right: 1px solid $zh-line-color;
+        }
+      }
+    }
+  }
+}
+
+.zh-grid.zh-col-2 {
+  & > div {
+    width: 50%;
+  }
+
+  @include multi-border(2);
+}
+
+.zh-grid.zh-col-3 {
+  & > div {
+    width: calc(100% / 3);
+  }
+
+  @include multi-border(3);
+}
+
+@mixin space-calc($i, $n) {
+  & > div {
+    width: calc((100% - #{($n - 1) * $i}px) / #{$n});
+    &:not(:nth-last-child(-n + #{$n})) {
+      margin-bottom: #{$i}px;
+    }
+    &:not(:nth-child(#{$n}n)) {
+      margin-right: #{$i}px;
+    }
+  }
+}
+
+// 处理列之间需要有空隙情况
+@for $i from 1 through 50 {
+  .zh-grid.zh-col-1.zh-col-space-#{$i} {
+    & > div {
+      margin-bottom: #{$i}px;
+    }
+  }
+  .zh-grid.zh-col-2.zh-col-space-#{$i} {
+    @include space-calc($i, 2);
+  }
+  .zh-grid.zh-col-3.zh-col-space-#{$i} {
+    @include space-calc($i, 3);
+  }
+  .zh-grid.zh-col-4.zh-col-space-#{$i} {
+    @include space-calc($i, 4);
+  }
+  .zh-grid.zh-col-5.zh-col-space-#{$i} {
+    @include space-calc($i, 5);
+  }
+  .zh-grid.zh-col-6.zh-col-space-#{$i} {
+    @include space-calc($i, 6);
+  }
+}
+
+/** 省略号 */
+@for $i from 1 through 2 {
+  .zh-ellipsis-#{$i} {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: #{$i};
+    overflow: hidden;
+  }
+}
+
+/** 鼠标手 */
+.zh-pointer {
+  cursor: pointer;
+}

css/variable.scss

@@ -0,0 +1,28 @@
+$zh-font-size: 12px !default;
+$zh-green: #28a745 !default;
+$zh-gray: #757575 !default;
+$zh-muted: #6c757d !default;
+$zh-light-gray: #bbb !default;
+$zh-blue: #007bff !default;
+$zh-red: #dc3545 !default;
+$zh-yellow: #ffc170 !default;
+$zh-white: #fff !default;
+$zh-line-color: rgba(0,0,0,.125) !default;
+
+
+// 实现0.5px的效果
+@mixin zh-border {
+  position: relative;
+  &::after {
+    content: ' ';
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    border-radius: inherit;
+    pointer-events: none;
+    box-sizing: border-box;
+    z-index: 2;
+  }
+}