t20-common-lib 0.9.14 → 0.10.1

package/packages/theme-chalk/src/common/normalize.scss

@@ -1,870 +1,870 @@
-// 项目中可以直接使用
-// .input-w {width: $--input-width;}
-// .button-4em{min-width: 72px;}
-/* 格式化样式 */
-
-
-
-html {
-  height: 100%;
-}
-
-body {
-  height: 100%;
-  // font-size: $--font-size-base;
-  font-family: PingFang SC, Microsoft YaHei, SUN, Arial, sans-serif;
-}
-
-li {
-  list-style: none;
-}
-
-a {
-  color: inherit;
-  text-decoration: none;
-}
-
-iframe {
-  border: 0;
-  outline: none;
-}
-
-/* 滚动条样式 */
-::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
-}
-
-::-webkit-scrollbar-button {
-  width: 0;
-  height: 0;
-}
-
-::-webkit-scrollbar-corner {
-  background-color: transparent;
-}
-
-::-webkit-scrollbar-thumb,
-::-webkit-scrollbar-track {
-  border-color: transparent;
-  border-style: solid;
-  border-radius: 4px;
-}
-
-::-webkit-scrollbar-thumb {
-  min-height: 28px;
-  background-color: rgba(0, 0, 0, 0.07);
-  border-width: 0;
-  border-radius: 4px;
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background-color: rgba(0, 0, 0, 0.2);
-}
-
-::-webkit-scrollbar-thumb:active {
-  background-color: rgba(0, 0, 0, 0.25);
-}
-
-::-webkit-scrollbar-track:hover {
-  background-color: rgba(0, 0, 0, 0.03);
-}
-
-// ::-webkit-scrollbar-track:active {
-//   background-color: rgba(0, 0, 0, 0.03);
-// }
-
-:root {
-  --client-height: calc(100vh - 110px);
-}
-
-/* 内外边距 */
-@mixin set-pm($m, $p) {
-  .p-a#{$m} {
-    padding: $p;
-  }
-
-  .p-t#{$m} {
-    padding-top: $p;
-  }
-
-  .p-b#{$m} {
-    padding-bottom: $p;
-  }
-
-  .p-l#{$m} {
-    padding-left: $p;
-  }
-
-  .p-r#{$m} {
-    padding-right: $p;
-  }
-
-  .m-a#{$m} {
-    margin: $p;
-  }
-
-  .m-t#{$m} {
-    margin-top: $p;
-  }
-
-  .m-b#{$m} {
-    margin-bottom: $p;
-  }
-
-  .m-l#{$m} {
-    margin-left: $p;
-  }
-
-  .m-r#{$m} {
-    margin-right: $p;
-  }
-}
-
-/* 内外边距 */
-.m-l-auto {
-  margin-left: auto !important;
-}
-
-.m-r-auto {
-  margin-right: auto !important;
-}
-
-.m-lr-auto {
-  margin-left: auto !important;
-  margin-right: auto !important;
-}
-
-@include set-pm('', 12px !important);
-@include set-pm('-xl', 32px !important);
-@include set-pm('-lg', 24px !important);
-@include set-pm('-m', 16px !important);
-@include set-pm('-s', 8px !important);
-@include set-pm('-b', 6px !important);
-@include set-pm('-ss', 4px !important);
-@include set-pm('-0', 0 !important);
-
-/* 内外边距 */
-@mixin pm-fn($n) {
-  .pa-#{$n} {
-    padding: #{$n}px;
-  }
-
-  .pt-#{$n} {
-    padding-top: #{$n}px;
-  }
-
-  .pl-#{$n} {
-    padding-left: #{$n}px;
-  }
-
-  .pr-#{$n} {
-    padding-right: #{$n}px;
-  }
-
-  .pb-#{$n} {
-    padding-bottom: #{$n}px;
-  }
-
-  .px-#{$n} {
-    padding-left: #{$n}px;
-    padding-right: #{$n}px;
-  }
-
-  .py-#{$n} {
-    padding-top: #{$n}px;
-    padding-bottom: #{$n}px;
-  }
-
-  .ma-#{$n} {
-    margin: #{$n}px;
-  }
-
-  .mt-#{$n} {
-    margin-top: #{$n}px;
-  }
-
-  .ml-#{$n} {
-    margin-left: #{$n}px;
-  }
-
-  .mr-#{$n} {
-    margin-right: #{$n}px;
-  }
-
-  .mb-#{$n} {
-    margin-bottom: #{$n}px;
-  }
-
-  .mx-#{$n} {
-    margin-left: #{$n}px;
-    margin-right: #{$n}px;
-  }
-
-  .py-#{$n} {
-    margin-top: #{$n}px;
-    margin-bottom: #{$n}px;
-  }
-}
-
-@include pm-fn(0);
-@include pm-fn(2);
-@include pm-fn(4);
-@include pm-fn(6);
-@include pm-fn(8);
-@include pm-fn(10);
-@include pm-fn(12);
-@include pm-fn(14);
-
-/* 浮动布局 */
-.left,
-.float-left {
-  float: left;
-}
-
-.right,
-.float-right {
-  float: right;
-}
-
-.overflow {
-  height: auto;
-  overflow: hidden;
-}
-
-.overflow-y {
-  overflow-y: auto;
-}
-
-.overflow-x {
-  overflow-x: auto;
-}
-
-// 清除浮动
-.overflow-clear {
-  &:after {
-    content: '';
-    display: block;
-    clear: both;
-  }
-}
-
-/* 清除左侧浮动，将元素放置在任何先前的左浮动元素的下方 */
-.clear-left {
-  clear: left;
-}
-
-/* 清除右侧浮动，将元素放置在任何先前的右浮动元素的下方 */
-.clear-right {
-  clear: right;
-}
-
-/* 行内块元素水平垂直对齐方式 */
-.b-center {
-  text-align: center;
-
-  &>* {
-    display: inline-block;
-    vertical-align: bottom;
-  }
-}
-
-.b-vertical {
-  font-size: 0;
-
-  &>* {
-    vertical-align: middle;
-    display: inline-block;
-    font-size: 14px;
-  }
-
-  &:before {
-    content: '';
-    vertical-align: middle;
-    display: inline-block;
-    width: 0;
-    height: 100%;
-  }
-}
-
-.block {
-  display: block;
-}
-
-.inline_block {
-  display: inline-block;
-}
-
-.inline {
-  display: inline;
-}
-
-/* 文字居中 */
-.text {
-  &-c {
-    text-align: center !important;
-  }
-
-  &-l {
-    text-align: left !important;
-  }
-
-  &-r {
-    text-align: right !important;
-  }
-
-  &-lr {
-    text-align: justify;
-    text-justify: inter-word;
-  }
-
-  &-ellipsis {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-}
-
-/* 弹性盒模型 */
-.flex-box {
-  display: flex;
-}
-
-.flex-column {
-  display: flex;
-  flex-direction: column;
-}
-
-.flex-box>*,
-.flex-column>* {
-  flex: none;
-}
-
-
-
-.flex {
-  &-wrap {
-    flex-wrap: wrap;
-  }
-
-  &-nowrap {
-    flex-wrap: nowrap;
-  }
-
-  &-v {
-    align-items: center;
-  }
-
-  &-s {
-    align-items: flex-start;
-  }
-
-  &-e {
-    align-items: flex-end;
-  }
-
-  &-l {
-    justify-content: flex-start;
-  }
-
-  &-r {
-    justify-content: flex-end;
-  }
-
-  &-c {
-    justify-content: center;
-  }
-
-  &-lr {
-    justify-content: space-between;
-  }
-
-  &-sa {
-    justify-content: space-around;
-  }
-}
-
-.flex-item {
-  flex: auto;
-}
-
-@for $n from 0 to 10 {
-  .flex-#{$n} {
-    flex: $n $n auto;
-  }
-}
-
-
-
-
-
-
-
-/* 旋转图标90度
--------------- */
-.rotate90 {
-  display: inline-block;
-  transform: rotate(90deg);
-  cursor: pointer;
-}
-
-/* 清除背景色
--------------- */
-.bg {
-  &-none {
-    background: none !important;
-  }
-}
-
-/* 阴影 */
-.box-shadow {
-  box-shadow: 0px 4px 16px 0px rgba($--color-black, 0.1);
-}
-
-.box-shadow-mini {
-  box-shadow: 0px 2px 8px 0px rgba($--color-black, 0.08);
-}
-
-// 底部统计翻页
-.page-footer-shadow {
-  position: relative;
-  height: 28px;
-  margin-bottom: -6px;
-
-  &::before {
-    content: '';
-    pointer-events: none;
-    position: absolute;
-    top: 0;
-    height: 100%;
-    left: -8px;
-    right: -8px;
-    box-shadow: 0 -2px 6px 0px rgba($--color-black, 0.08);
-  }
-}
-
-// 底部操作按钮
-.page-button-shadow {
-  position: relative;
-  height: 44px;
-  margin-bottom: -8px;
-
-  &::before {
-    content: '';
-    pointer-events: none;
-    position: absolute;
-    top: 0px;
-    height: 100%;
-    left: -8px;
-    right: -8px;
-    box-shadow: 0px -2px 6px 0px rgba($--color-black, 0.08);
-  }
-}
-
-.fixed-button-shadow {
-  position: absolute;
-  bottom: 10px;
-  left: 0;
-  right: 0;
-  height: 44px;
-  margin: 0 12px;
-  z-index: 1;
-  background-color: $--color-white;
-
-  &::before {
-    content: '';
-    pointer-events: none;
-    position: absolute;
-    left: 0;
-    right: 0;
-    top: 0px;
-    height: 100%;
-    box-shadow: 0px -2px 6px 0px rgba($--color-black, 0.08);
-  }
-}
-
-/* 边框
--------------- */
-.bd {
-
-  &-none,
-  &-0 {
-    border: none !important;
-  }
-
-  &-a {
-    border: 1px solid $--border-color-base;
-  }
-
-  &-t {
-    border-top: 1px solid $--border-color-base;
-  }
-
-  &-l {
-    border-left: 1px solid $--border-color-base;
-  }
-
-  &-r {
-    border-right: 1px solid $--border-color-base;
-  }
-
-  &-b {
-    border-bottom: 1px solid $--border-color-base;
-  }
-}
-
-.bd-rs {
-  border-radius: $--border-radius-base;
-}
-
-/* 设置弹窗内容区内边距
--------------- */
-.el-dialog__wrapper {
-  &.p-a-0 {
-    .el-dialog__body {
-      padding: 0;
-    }
-  }
-
-  &.p-t-0 {
-    .el-dialog__body {
-      padding-top: 0;
-    }
-  }
-
-  &.p-b-0 {
-    .el-dialog__body {
-      padding-bottom: 0;
-    }
-  }
-}
-
-/* 通用字号
--------------- */
-.font-size-base {
-  font-size: var(--font-size-base) !important;
-}
-
-.font-size-small {
-  font-size: var(--font-size-small) !important;
-}
-
-/* 通用颜色
--------------- */
-.color-primary {
-  color: var(--color-primary) !important;
-}
-
-.color-success {
-  color: var(--color-success);
-}
-
-.color-warning {
-  color: var(--color-warning);
-}
-
-.color-danger {
-  color: var(--color-danger);
-}
-
-.color-placeholder {
-  color: var(--color-text-placeholder);
-}
-
-.linear-grad {
-  background: var(--background-linear-gradient);
-}
-
-.color-white {
-  color: white;
-}
-
-.color-ccc {
-  color: #ccc;
-}
-
-.color-999 {
-  color: #999;
-}
-
-.color-666 {
-  color: #666;
-}
-
-.color-333 {
-  color: #333;
-}
-
-/* 鼠标默认样式 */
-.cursor-d {
-  cursor: default;
-}
-
-/* 鼠标小手 */
-.pointer {
-  cursor: pointer;
-}
-
-/* 鼠标禁止- */
-.cursor-not {
-  cursor: not-allowed;
-}
-
-/* 字重 */
-.font {
-  &-w600 {
-    font-weight: var(--font-weight-bold);
-  }
-}
-
-/* 字号 */
-.f-s {
-  &-s {
-    /* 12号字 */
-    font-size: var(--font-size-small) !important;
-  }
-
-  &-b {
-    /* 14号字 */
-    font-size: var(--font-size-base) !important;
-  }
-
-  &-m {
-    /*  16号字 */
-    font-size: var(--font-size-medium) !important;
-  }
-
-  &-l {
-    /* 18号 */
-    font-size: var(--font-size-large) !important;
-  }
-
-  &-xl {
-    font-size: var(--font-size-extra-large) !important;
-  }
-}
-
-.auto-width-input {
-  width: fit-content;
-}
-
-.width-auto {
-  width: auto !important;
-}
-
-/* 宽高范围是 60-1000- */
-$list: 45, 60, 80, 100, 110, 120, 130, 140, 150, 160, 170, 180, 190, 200, 210, 220, 230, 240, 250, 260, 270, 280, 290,
-  300, 400, 500, 600, 700, 800, 900, 1000;
-
-@each $n in $list {
-  .w-#{$n} {
-    width: #{$n}px !important;
-  }
-
-  .h-#{$n} {
-    height: #{$n}px !important;
-  }
-}
-
-/* 宽百分比 */
-@for $i from 1 through 10 {
-  .w-#{$i}0p {
-    width: #{$i + '0%'} !important;
-  }
-}
-
-/* height: 100%; 速龙浏览器下子元素无法继承父元素的高速度 */
-.n20-page-content {
-  height: 100%;
-  overflow-y: auto;
-  overflow-x: hidden;
-}
-
-/* 边框圆角
--------------- */
-.b {
-  &-r {
-    border-radius: 50%;
-  }
-
-  &-r-4 {
-    border-radius: 4px;
-  }
-
-  &-r-5 {
-    border-radius: 5px;
-  }
-
-  &-r-6 {
-    border-radius: 6px;
-  }
-
-  &-r-7 {
-    border-radius: 7px;
-  }
-
-  &-r-8 {
-    border-radius: 8px;
-  }
-
-  &-r-9 {
-    border-radius: 9px;
-  }
-
-  &-r-10 {
-    border-radius: 10px;
-  }
-}
-
-/* 垂直对齐 */
-.align {
-  &-baseline {
-    vertical-align: baseline; // 将一个元素的基线与其父元素的基线对齐。
-  }
-
-  &-top {
-    vertical-align: top; // 将一个元素的顶部和它的子代与整个行的顶部对齐。
-  }
-
-  &-middle {
-    vertical-align: middle; // 将元素的中间与基线加父元素的一半高度对齐。
-  }
-
-  &-bottom {
-    vertical-align: bottom; // 将一个元素的底部和它的子代与整个行的底部对齐。
-  }
-
-  &-text-top {
-    vertical-align: text-top; // 使元素的顶部与父元素的字体顶部对齐。
-  }
-
-  &-text-bottom {
-    vertical-align: text-bottom; // 使元素的底部与父元素的字体底部对齐。
-  }
-}
-
-/* 本文选择 */
-
-.select {
-  &-none {
-    user-select: none; // 防止选择元素及其子元素中的文本。
-  }
-
-  &-text {
-    user-select: text; // 允许选择元素及其子元素中的文本。
-  }
-
-  &-all {
-    user-select: all; // 在用户点击时自动选择元素中的所有文本。
-  }
-
-  &-auto {
-    user-select: auto; // 使用默认的浏览器行为来选择文本
-  }
-}
-
-/* 文本溢出显示省略号 */
-.truncate {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-/* 本文转换 */
-/* 使用 uppercase 功能类对文本进行大写转换 */
-.uppercase {
-  text-transform: uppercase;
-}
-
-/* 使用 lowercase 功能类对文本进行小写转换 */
-.lowercase {
-  text-transform: lowercase;
-}
-
-/* 使用 capitalize 功能类对文本进行首字母大写转换 */
-.capitalize {
-  text-transform: capitalize;
-}
-
-/* 下划线 */
-.underline {
-  text-decoration: underline;
-}
-
-/*  删除线 */
-.line-through {
-  text-decoration: line-through;
-}
-
-/*  移除文本装饰 */
-.no-underline {
-  text-decoration: none;
-}
-
-/* 动画 */
-.animate {
-  &-none {
-    animation: none;
-  }
-
-  &-spin {
-    animation: spin 1s linear infinite;
-  }
-
-  &-ping {
-    animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
-  }
-
-  &-pulse {
-    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
-  }
-
-  &-bounce {
-    animation: bounce 1s infinite;
-  }
-}
-
-@keyframes spin {
-  from {
-    transform: rotate(0deg);
-  }
-
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@keyframes ping {
-
-  75%,
-  100% {
-    transform: scale(2);
-    opacity: 0;
-  }
-}
-
-@keyframes pulse {
-
-  0%,
-  100% {
-    opacity: 1;
-  }
-
-  50% {
-    opacity: 0.5;
-  }
-}
-
-@keyframes bounce {
-
-  0%,
-  100% {
-    transform: translateY(-25%);
-    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
-  }
-
-  50% {
-    transform: translateY(0);
-    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
-  }
+// 项目中可以直接使用
+// .input-w {width: $--input-width;}
+// .button-4em{min-width: 72px;}
+/* 格式化样式 */
+
+
+
+html {
+  height: 100%;
+}
+
+body {
+  height: 100%;
+  // font-size: $--font-size-base;
+  font-family: PingFang SC, Microsoft YaHei, SUN, Arial, sans-serif;
+}
+
+li {
+  list-style: none;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+iframe {
+  border: 0;
+  outline: none;
+}
+
+/* 滚动条样式 */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-button {
+  width: 0;
+  height: 0;
+}
+
+::-webkit-scrollbar-corner {
+  background-color: transparent;
+}
+
+::-webkit-scrollbar-thumb,
+::-webkit-scrollbar-track {
+  border-color: transparent;
+  border-style: solid;
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb {
+  min-height: 28px;
+  background-color: rgba(0, 0, 0, 0.07);
+  border-width: 0;
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(0, 0, 0, 0.2);
+}
+
+::-webkit-scrollbar-thumb:active {
+  background-color: rgba(0, 0, 0, 0.25);
+}
+
+::-webkit-scrollbar-track:hover {
+  background-color: rgba(0, 0, 0, 0.03);
+}
+
+// ::-webkit-scrollbar-track:active {
+//   background-color: rgba(0, 0, 0, 0.03);
+// }
+
+:root {
+  --client-height: calc(100vh - 110px);
+}
+
+/* 内外边距 */
+@mixin set-pm($m, $p) {
+  .p-a#{$m} {
+    padding: $p;
+  }
+
+  .p-t#{$m} {
+    padding-top: $p;
+  }
+
+  .p-b#{$m} {
+    padding-bottom: $p;
+  }
+
+  .p-l#{$m} {
+    padding-left: $p;
+  }
+
+  .p-r#{$m} {
+    padding-right: $p;
+  }
+
+  .m-a#{$m} {
+    margin: $p;
+  }
+
+  .m-t#{$m} {
+    margin-top: $p;
+  }
+
+  .m-b#{$m} {
+    margin-bottom: $p;
+  }
+
+  .m-l#{$m} {
+    margin-left: $p;
+  }
+
+  .m-r#{$m} {
+    margin-right: $p;
+  }
+}
+
+/* 内外边距 */
+.m-l-auto {
+  margin-left: auto !important;
+}
+
+.m-r-auto {
+  margin-right: auto !important;
+}
+
+.m-lr-auto {
+  margin-left: auto !important;
+  margin-right: auto !important;
+}
+
+@include set-pm('', 12px !important);
+@include set-pm('-xl', 32px !important);
+@include set-pm('-lg', 24px !important);
+@include set-pm('-m', 16px !important);
+@include set-pm('-s', 8px !important);
+@include set-pm('-b', 6px !important);
+@include set-pm('-ss', 4px !important);
+@include set-pm('-0', 0 !important);
+
+/* 内外边距 */
+@mixin pm-fn($n) {
+  .pa-#{$n} {
+    padding: #{$n}px;
+  }
+
+  .pt-#{$n} {
+    padding-top: #{$n}px;
+  }
+
+  .pl-#{$n} {
+    padding-left: #{$n}px;
+  }
+
+  .pr-#{$n} {
+    padding-right: #{$n}px;
+  }
+
+  .pb-#{$n} {
+    padding-bottom: #{$n}px;
+  }
+
+  .px-#{$n} {
+    padding-left: #{$n}px;
+    padding-right: #{$n}px;
+  }
+
+  .py-#{$n} {
+    padding-top: #{$n}px;
+    padding-bottom: #{$n}px;
+  }
+
+  .ma-#{$n} {
+    margin: #{$n}px;
+  }
+
+  .mt-#{$n} {
+    margin-top: #{$n}px;
+  }
+
+  .ml-#{$n} {
+    margin-left: #{$n}px;
+  }
+
+  .mr-#{$n} {
+    margin-right: #{$n}px;
+  }
+
+  .mb-#{$n} {
+    margin-bottom: #{$n}px;
+  }
+
+  .mx-#{$n} {
+    margin-left: #{$n}px;
+    margin-right: #{$n}px;
+  }
+
+  .py-#{$n} {
+    margin-top: #{$n}px;
+    margin-bottom: #{$n}px;
+  }
+}
+
+@include pm-fn(0);
+@include pm-fn(2);
+@include pm-fn(4);
+@include pm-fn(6);
+@include pm-fn(8);
+@include pm-fn(10);
+@include pm-fn(12);
+@include pm-fn(14);
+
+/* 浮动布局 */
+.left,
+.float-left {
+  float: left;
+}
+
+.right,
+.float-right {
+  float: right;
+}
+
+.overflow {
+  height: auto;
+  overflow: hidden;
+}
+
+.overflow-y {
+  overflow-y: auto;
+}
+
+.overflow-x {
+  overflow-x: auto;
+}
+
+// 清除浮动
+.overflow-clear {
+  &:after {
+    content: '';
+    display: block;
+    clear: both;
+  }
+}
+
+/* 清除左侧浮动，将元素放置在任何先前的左浮动元素的下方 */
+.clear-left {
+  clear: left;
+}
+
+/* 清除右侧浮动，将元素放置在任何先前的右浮动元素的下方 */
+.clear-right {
+  clear: right;
+}
+
+/* 行内块元素水平垂直对齐方式 */
+.b-center {
+  text-align: center;
+
+  &>* {
+    display: inline-block;
+    vertical-align: bottom;
+  }
+}
+
+.b-vertical {
+  font-size: 0;
+
+  &>* {
+    vertical-align: middle;
+    display: inline-block;
+    font-size: 14px;
+  }
+
+  &:before {
+    content: '';
+    vertical-align: middle;
+    display: inline-block;
+    width: 0;
+    height: 100%;
+  }
+}
+
+.block {
+  display: block;
+}
+
+.inline_block {
+  display: inline-block;
+}
+
+.inline {
+  display: inline;
+}
+
+/* 文字居中 */
+.text {
+  &-c {
+    text-align: center !important;
+  }
+
+  &-l {
+    text-align: left !important;
+  }
+
+  &-r {
+    text-align: right !important;
+  }
+
+  &-lr {
+    text-align: justify;
+    text-justify: inter-word;
+  }
+
+  &-ellipsis {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
+
+/* 弹性盒模型 */
+.flex-box {
+  display: flex;
+}
+
+.flex-column {
+  display: flex;
+  flex-direction: column;
+}
+
+.flex-box>*,
+.flex-column>* {
+  flex: none;
+}
+
+
+
+.flex {
+  &-wrap {
+    flex-wrap: wrap;
+  }
+
+  &-nowrap {
+    flex-wrap: nowrap;
+  }
+
+  &-v {
+    align-items: center;
+  }
+
+  &-s {
+    align-items: flex-start;
+  }
+
+  &-e {
+    align-items: flex-end;
+  }
+
+  &-l {
+    justify-content: flex-start;
+  }
+
+  &-r {
+    justify-content: flex-end;
+  }
+
+  &-c {
+    justify-content: center;
+  }
+
+  &-lr {
+    justify-content: space-between;
+  }
+
+  &-sa {
+    justify-content: space-around;
+  }
+}
+
+.flex-item {
+  flex: auto;
+}
+
+@for $n from 0 to 10 {
+  .flex-#{$n} {
+    flex: $n $n auto;
+  }
+}
+
+
+
+
+
+
+
+/* 旋转图标90度
+-------------- */
+.rotate90 {
+  display: inline-block;
+  transform: rotate(90deg);
+  cursor: pointer;
+}
+
+/* 清除背景色
+-------------- */
+.bg {
+  &-none {
+    background: none !important;
+  }
+}
+
+/* 阴影 */
+.box-shadow {
+  box-shadow: 0px 4px 16px 0px rgba($--color-black, 0.1);
+}
+
+.box-shadow-mini {
+  box-shadow: 0px 2px 8px 0px rgba($--color-black, 0.08);
+}
+
+// 底部统计翻页
+.page-footer-shadow {
+  position: relative;
+  height: 28px;
+  margin-bottom: -6px;
+
+  &::before {
+    content: '';
+    pointer-events: none;
+    position: absolute;
+    top: 0;
+    height: 100%;
+    left: -8px;
+    right: -8px;
+    box-shadow: 0 -2px 6px 0px rgba($--color-black, 0.08);
+  }
+}
+
+// 底部操作按钮
+.page-button-shadow {
+  position: relative;
+  height: 44px;
+  margin-bottom: -8px;
+
+  &::before {
+    content: '';
+    pointer-events: none;
+    position: absolute;
+    top: 0px;
+    height: 100%;
+    left: -8px;
+    right: -8px;
+    box-shadow: 0px -2px 6px 0px rgba($--color-black, 0.08);
+  }
+}
+
+.fixed-button-shadow {
+  position: absolute;
+  bottom: 10px;
+  left: 0;
+  right: 0;
+  height: 44px;
+  margin: 0 12px;
+  z-index: 1;
+  background-color: $--color-white;
+
+  &::before {
+    content: '';
+    pointer-events: none;
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0px;
+    height: 100%;
+    box-shadow: 0px -2px 6px 0px rgba($--color-black, 0.08);
+  }
+}
+
+/* 边框
+-------------- */
+.bd {
+
+  &-none,
+  &-0 {
+    border: none !important;
+  }
+
+  &-a {
+    border: 1px solid $--border-color-base;
+  }
+
+  &-t {
+    border-top: 1px solid $--border-color-base;
+  }
+
+  &-l {
+    border-left: 1px solid $--border-color-base;
+  }
+
+  &-r {
+    border-right: 1px solid $--border-color-base;
+  }
+
+  &-b {
+    border-bottom: 1px solid $--border-color-base;
+  }
+}
+
+.bd-rs {
+  border-radius: $--border-radius-base;
+}
+
+/* 设置弹窗内容区内边距
+-------------- */
+.el-dialog__wrapper {
+  &.p-a-0 {
+    .el-dialog__body {
+      padding: 0;
+    }
+  }
+
+  &.p-t-0 {
+    .el-dialog__body {
+      padding-top: 0;
+    }
+  }
+
+  &.p-b-0 {
+    .el-dialog__body {
+      padding-bottom: 0;
+    }
+  }
+}
+
+/* 通用字号
+-------------- */
+.font-size-base {
+  font-size: var(--font-size-base) !important;
+}
+
+.font-size-small {
+  font-size: var(--font-size-small) !important;
+}
+
+/* 通用颜色
+-------------- */
+.color-primary {
+  color: var(--color-primary) !important;
+}
+
+.color-success {
+  color: var(--color-success);
+}
+
+.color-warning {
+  color: var(--color-warning);
+}
+
+.color-danger {
+  color: var(--color-danger);
+}
+
+.color-placeholder {
+  color: var(--color-text-placeholder);
+}
+
+.linear-grad {
+  background: var(--background-linear-gradient);
+}
+
+.color-white {
+  color: white;
+}
+
+.color-ccc {
+  color: #ccc;
+}
+
+.color-999 {
+  color: #999;
+}
+
+.color-666 {
+  color: #666;
+}
+
+.color-333 {
+  color: #333;
+}
+
+/* 鼠标默认样式 */
+.cursor-d {
+  cursor: default;
+}
+
+/* 鼠标小手 */
+.pointer {
+  cursor: pointer;
+}
+
+/* 鼠标禁止- */
+.cursor-not {
+  cursor: not-allowed;
+}
+
+/* 字重 */
+.font {
+  &-w600 {
+    font-weight: var(--font-weight-bold);
+  }
+}
+
+/* 字号 */
+.f-s {
+  &-s {
+    /* 12号字 */
+    font-size: var(--font-size-small) !important;
+  }
+
+  &-b {
+    /* 14号字 */
+    font-size: var(--font-size-base) !important;
+  }
+
+  &-m {
+    /*  16号字 */
+    font-size: var(--font-size-medium) !important;
+  }
+
+  &-l {
+    /* 18号 */
+    font-size: var(--font-size-large) !important;
+  }
+
+  &-xl {
+    font-size: var(--font-size-extra-large) !important;
+  }
+}
+
+.auto-width-input {
+  width: fit-content;
+}
+
+.width-auto {
+  width: auto !important;
+}
+
+/* 宽高范围是 60-1000- */
+$list: 45, 60, 80, 100, 110, 120, 130, 140, 150, 160, 170, 180, 190, 200, 210, 220, 230, 240, 250, 260, 270, 280, 290,
+  300, 400, 500, 600, 700, 800, 900, 1000;
+
+@each $n in $list {
+  .w-#{$n} {
+    width: #{$n}px !important;
+  }
+
+  .h-#{$n} {
+    height: #{$n}px !important;
+  }
+}
+
+/* 宽百分比 */
+@for $i from 1 through 10 {
+  .w-#{$i}0p {
+    width: #{$i + '0%'} !important;
+  }
+}
+
+/* height: 100%; 速龙浏览器下子元素无法继承父元素的高速度 */
+.n20-page-content {
+  height: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+/* 边框圆角
+-------------- */
+.b {
+  &-r {
+    border-radius: 50%;
+  }
+
+  &-r-4 {
+    border-radius: 4px;
+  }
+
+  &-r-5 {
+    border-radius: 5px;
+  }
+
+  &-r-6 {
+    border-radius: 6px;
+  }
+
+  &-r-7 {
+    border-radius: 7px;
+  }
+
+  &-r-8 {
+    border-radius: 8px;
+  }
+
+  &-r-9 {
+    border-radius: 9px;
+  }
+
+  &-r-10 {
+    border-radius: 10px;
+  }
+}
+
+/* 垂直对齐 */
+.align {
+  &-baseline {
+    vertical-align: baseline; // 将一个元素的基线与其父元素的基线对齐。
+  }
+
+  &-top {
+    vertical-align: top; // 将一个元素的顶部和它的子代与整个行的顶部对齐。
+  }
+
+  &-middle {
+    vertical-align: middle; // 将元素的中间与基线加父元素的一半高度对齐。
+  }
+
+  &-bottom {
+    vertical-align: bottom; // 将一个元素的底部和它的子代与整个行的底部对齐。
+  }
+
+  &-text-top {
+    vertical-align: text-top; // 使元素的顶部与父元素的字体顶部对齐。
+  }
+
+  &-text-bottom {
+    vertical-align: text-bottom; // 使元素的底部与父元素的字体底部对齐。
+  }
+}
+
+/* 本文选择 */
+
+.select {
+  &-none {
+    user-select: none; // 防止选择元素及其子元素中的文本。
+  }
+
+  &-text {
+    user-select: text; // 允许选择元素及其子元素中的文本。
+  }
+
+  &-all {
+    user-select: all; // 在用户点击时自动选择元素中的所有文本。
+  }
+
+  &-auto {
+    user-select: auto; // 使用默认的浏览器行为来选择文本
+  }
+}
+
+/* 文本溢出显示省略号 */
+.truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* 本文转换 */
+/* 使用 uppercase 功能类对文本进行大写转换 */
+.uppercase {
+  text-transform: uppercase;
+}
+
+/* 使用 lowercase 功能类对文本进行小写转换 */
+.lowercase {
+  text-transform: lowercase;
+}
+
+/* 使用 capitalize 功能类对文本进行首字母大写转换 */
+.capitalize {
+  text-transform: capitalize;
+}
+
+/* 下划线 */
+.underline {
+  text-decoration: underline;
+}
+
+/*  删除线 */
+.line-through {
+  text-decoration: line-through;
+}
+
+/*  移除文本装饰 */
+.no-underline {
+  text-decoration: none;
+}
+
+/* 动画 */
+.animate {
+  &-none {
+    animation: none;
+  }
+
+  &-spin {
+    animation: spin 1s linear infinite;
+  }
+
+  &-ping {
+    animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
+  }
+
+  &-pulse {
+    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  }
+
+  &-bounce {
+    animation: bounce 1s infinite;
+  }
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes ping {
+
+  75%,
+  100% {
+    transform: scale(2);
+    opacity: 0;
+  }
+}
+
+@keyframes pulse {
+
+  0%,
+  100% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0.5;
+  }
+}
+
+@keyframes bounce {
+
+  0%,
+  100% {
+    transform: translateY(-25%);
+    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
+  }
+
+  50% {
+    transform: translateY(0);
+    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
+  }
 }