@zcrkey/js-utils 0.0.4 → 0.0.5

package/.dumi/global.less

@@ -0,0 +1,1396 @@
+/* ==================
+        初始化
+ ==================== */
+:root {
+  /* 标准色 */
+  --red: #e54d42;
+  --orange: #f37b1d;
+  --yellow: #fbbd08;
+  --olive: #8dc63f;
+  --green: #39b54a;
+  --cyan: #1cbbb4;
+  --blue: #0081ff;
+  --purple: #6739b6;
+  --mauve: #9c26b0;
+  --pink: #e03997;
+  --brown: #a5673f;
+  --grey: #8799a3;
+  --black: #333333;
+  --darkGray: #666666;
+  --gray: #aaaaaa;
+  --ghostWhite: #f1f1f1;
+  --white: #ffffff;
+  /* 浅色 */
+  --redLight: #fadbd9;
+  --orangeLight: #fde6d2;
+  --yellowLight: #fef2ce;
+  --oliveLight: #e8f4d9;
+  --greenLight: #d7f0db;
+  --cyanLight: #d2f1f0;
+  --blueLight: #cce6ff;
+  --purpleLight: #e1d7f0;
+  --mauveLight: #ebd4ef;
+  --pinkLight: #f9d7ea;
+  --brownLight: #ede1d9;
+  --greyLight: #e7ebed;
+  /* 渐变色 */
+  --gradualRed: linear-gradient(45deg, #f43f3b, #ec008c);
+  --gradualOrange: linear-gradient(45deg, #ff9700, #ed1c24);
+  --gradualGreen: linear-gradient(45deg, #39b54a, #8dc63f);
+  --gradualPurple: linear-gradient(45deg, #9000ff, #5e00ff);
+  --gradualPink: linear-gradient(45deg, #ec008c, #6739b6);
+  --gradualBlue: linear-gradient(45deg, #0081ff, #1cbbb4);
+  /* 阴影透明色 */
+  --ShadowSize: 3px 3px 4px;
+  --redShadow: rgba(204, 69, 59, 0.2);
+  --orangeShadow: rgba(217, 109, 26, 0.2);
+  --yellowShadow: rgba(224, 170, 7, 0.2);
+  --oliveShadow: rgba(124, 173, 55, 0.2);
+  --greenShadow: rgba(48, 156, 63, 0.2);
+  --cyanShadow: rgba(28, 187, 180, 0.2);
+  --blueShadow: rgba(0, 102, 204, 0.2);
+  --purpleShadow: rgba(88, 48, 156, 0.2);
+  --mauveShadow: rgba(133, 33, 150, 0.2);
+  --pinkShadow: rgba(199, 50, 134, 0.2);
+  --brownShadow: rgba(140, 88, 53, 0.2);
+  --greyShadow: rgba(114, 130, 138, 0.2);
+  --grayShadow: rgba(114, 130, 138, 0.2);
+  --blackShadow: rgba(26, 26, 26, 0.2);
+}
+
+.round {
+  border-radius: 5000px;
+}
+
+.radius {
+  border-radius: 6px;
+}
+
+/* ==================
+          边框
+ ==================== */
+
+/* -- 实线 -- */
+
+.solid,
+.solid-top,
+.solid-right,
+.solid-bottom,
+.solid-left,
+.solids,
+.solids-top,
+.solids-right,
+.solids-bottom,
+.solids-left,
+.dashed,
+.dashed-top,
+.dashed-right,
+.dashed-bottom,
+.dashed-left {
+  position: relative;
+}
+
+.solid::after,
+.solid-top::after,
+.solid-right::after,
+.solid-bottom::after,
+.solid-left::after,
+.solids::after,
+.solids-top::after,
+.solids-right::after,
+.solids-bottom::after,
+.solids-left::after,
+.dashed::after,
+.dashed-top::after,
+.dashed-right::after,
+.dashed-bottom::after,
+.dashed-left::after {
+  content: ' ';
+  width: 200%;
+  height: 200%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  border-radius: inherit;
+  transform: scale(0.5);
+  transform-origin: 0 0;
+  pointer-events: none;
+  box-sizing: border-box;
+}
+
+.solid::after {
+  border: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+.solid-top::after {
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+.solid-right::after {
+  border-right: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+.solid-bottom::after {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+.solid-left::after {
+  border-left: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+.solids::after {
+  border: 4px solid #eee;
+}
+
+.solids-top::after {
+  border-top: 4px solid #eee;
+}
+
+.solids-right::after {
+  border-right: 4px solid #eee;
+}
+
+.solids-bottom::after {
+  border-bottom: 4px solid #eee;
+}
+
+.solids-left::after {
+  border-left: 4px solid #eee;
+}
+
+/* -- 虚线 -- */
+
+.dashed::after {
+  border: 1px dashed #ddd;
+}
+
+.dashed-top::after {
+  border-top: 1px dashed #ddd;
+}
+
+.dashed-right::after {
+  border-right: 1px dashed #ddd;
+}
+
+.dashed-bottom::after {
+  border-bottom: 1px dashed #ddd;
+}
+
+.dashed-left::after {
+  border-left: 1px dashed #ddd;
+}
+
+/* -- 阴影 -- */
+
+.shadow[class*='white'] {
+  box-shadow: 0 1px 3px;
+}
+
+.shadow-lg {
+  box-shadow: 0 20px 50px 0;
+}
+
+.shadow-warp {
+  position: relative;
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+}
+
+.shadow-warp::before,
+.shadow-warp::after {
+  position: absolute;
+  content: '';
+  top: 10px;
+  bottom: 15px;
+  left: 10px;
+  width: 50%;
+  box-shadow: 0 15px 10px rgba(0, 0, 0, 0.2);
+  transform: rotate(-3deg);
+  z-index: -1;
+}
+
+.shadow-warp::after {
+  right: 10px;
+  left: auto;
+  transform: rotate(3deg);
+}
+
+.shadow-blur {
+  position: relative;
+}
+
+.shadow-blur::before {
+  content: '';
+  display: block;
+  background: inherit;
+  filter: blur(5px);
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 5px;
+  left: 5px;
+  z-index: -1;
+  opacity: 0.4;
+  transform-origin: 0 0;
+  border-radius: inherit;
+  transform: scale(1, 1);
+}
+
+/* ==================
+          按钮
+ ==================== */
+
+.cr-btn {
+  position: relative;
+  border: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  padding: 0 15px;
+  font-size: 14px;
+  height: 32px;
+  line-height: 1;
+  text-align: center;
+  text-decoration: none;
+  overflow: visible;
+  margin-left: initial;
+  transform: translate(0, 0);
+  margin-right: initial;
+}
+
+.cr-btn::after {
+  display: none;
+}
+
+.cr-btn:not([class*='bg-']) {
+  background-color: #f0f0f0;
+}
+
+.cr-btn[class*='line'] {
+  background-color: transparent;
+}
+
+.cr-btn[class*='line']::after {
+  content: ' ';
+  display: block;
+  width: 200%;
+  height: 200%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  border: 1px solid;
+  transform: scale(0.5);
+  transform-origin: 0 0;
+  box-sizing: border-box;
+  border-radius: 6px;
+  z-index: 1;
+  pointer-events: none;
+}
+
+.cr-btn.round[class*='line']::after {
+  border-radius: 1000px;
+}
+
+.cr-btn[class*='lines']::after {
+  border: 3px solid;
+}
+
+.cr-btn[class*='bg-']::after {
+  display: none;
+}
+
+.cr-btn.sm {
+  padding: 0 10px;
+  font-size: 10px;
+  height: 24px;
+}
+
+.cr-btn.lg {
+  padding: 0 20px;
+  font-size: 16px;
+  height: 40px;
+}
+
+.cr-btn.icon.sm {
+  width: 24px;
+  height: 24px;
+}
+
+.cr-btn.icon {
+  width: 16px;
+  height: 16px;
+  border-radius: 500px;
+  padding: 0;
+}
+
+button.icon.lg {
+  width: 40px;
+  height: 40px;
+}
+
+.cr-btn.shadow-blur::before {
+  top: 2px;
+  left: 2px;
+  filter: blur(3px);
+  opacity: 0.6;
+}
+
+.cr-btn.button-hover {
+  transform: translate(1px, 1px);
+}
+
+.block {
+  display: block;
+}
+
+.cr-btn.block {
+  display: flex;
+}
+
+.cr-btn[disabled] {
+  opacity: 0.6;
+  color: var(--white);
+}
+
+.cr-btn + .cr-btn {
+  margin-left: 10px;
+}
+
+/* ==================
+          布局
+ ==================== */
+
+/*  -- flex弹性布局 -- */
+
+.flex {
+  display: flex;
+}
+
+.basis-xs {
+  flex-basis: 20%;
+}
+
+.basis-sm {
+  flex-basis: 40%;
+}
+
+.basis-df {
+  flex-basis: 50%;
+}
+
+.basis-lg {
+  flex-basis: 60%;
+}
+
+.basis-xl {
+  flex-basis: 80%;
+}
+
+.flex-sub {
+  flex: 1;
+}
+
+.flex-twice {
+  flex: 2;
+}
+
+.flex-treble {
+  flex: 3;
+}
+
+.flex-direction {
+  flex-direction: column;
+}
+
+.flex-wrap {
+  flex-wrap: wrap;
+}
+
+.align-start {
+  align-items: flex-start;
+}
+
+.align-end {
+  align-items: flex-end;
+}
+
+.align-center {
+  align-items: center;
+}
+
+.align-stretch {
+  align-items: stretch;
+}
+
+.self-start {
+  align-self: flex-start;
+}
+
+.self-center {
+  align-self: flex-center;
+}
+
+.self-end {
+  align-self: flex-end;
+}
+
+.self-stretch {
+  align-self: stretch;
+}
+
+.justify-start {
+  justify-content: flex-start;
+}
+
+.justify-end {
+  justify-content: flex-end;
+}
+
+.justify-center {
+  justify-content: center;
+}
+
+.justify-between {
+  justify-content: space-between;
+}
+
+.justify-around {
+  justify-content: space-around;
+}
+
+/*  -- 内外边距 -- */
+
+.margin-0 {
+  margin: 0;
+}
+
+.margin-xs {
+  margin: 5px;
+}
+
+.margin-sm {
+  margin: 10px;
+}
+
+.margin {
+  margin: 15px;
+}
+
+.margin-lg {
+  margin: 20px;
+}
+
+.margin-xl {
+  margin: 25px;
+}
+
+.margin-top-xs {
+  margin-top: 5px;
+}
+
+.margin-top-sm {
+  margin-top: 10px;
+}
+
+.margin-top {
+  margin-top: 15px;
+}
+
+.margin-top-lg {
+  margin-top: 20px;
+}
+
+.margin-top-xl {
+  margin-top: 25px;
+}
+
+.margin-right-xs {
+  margin-right: 5px;
+}
+
+.margin-right-sm {
+  margin-right: 10px;
+}
+
+.margin-right {
+  margin-right: 15px;
+}
+
+.margin-right-lg {
+  margin-right: 20px;
+}
+
+.margin-right-xl {
+  margin-right: 25px;
+}
+
+.margin-bottom-xs {
+  margin-bottom: 5px;
+}
+
+.margin-bottom-sm {
+  margin-bottom: 10px;
+}
+
+.margin-bottom {
+  margin-bottom: 15px;
+}
+
+.margin-bottom-lg {
+  margin-bottom: 20px;
+}
+
+.margin-bottom-xl {
+  margin-bottom: 25px;
+}
+
+.margin-left-xs {
+  margin-left: 5px;
+}
+
+.margin-left-sm {
+  margin-left: 10px;
+}
+
+.margin-left {
+  margin-left: 15px;
+}
+
+.margin-left-lg {
+  margin-left: 20px;
+}
+
+.margin-left-xl {
+  margin-left: 25px;
+}
+
+.margin-lr-xs {
+  margin-left: 5px;
+  margin-right: 5px;
+}
+
+.margin-lr-sm {
+  margin-left: 10px;
+  margin-right: 10px;
+}
+
+.margin-lr {
+  margin-left: 15px;
+  margin-right: 15px;
+}
+
+.margin-lr-lg {
+  margin-left: 20px;
+  margin-right: 20px;
+}
+
+.margin-lr-xl {
+  margin-left: 25px;
+  margin-right: 25px;
+}
+
+.margin-tb-xs {
+  margin-top: 5px;
+  margin-bottom: 5px;
+}
+
+.margin-tb-sm {
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+
+.margin-tb {
+  margin-top: 15px;
+  margin-bottom: 15px;
+}
+
+.margin-tb-lg {
+  margin-top: 20px;
+  margin-bottom: 20px;
+}
+
+.margin-tb-xl {
+  margin-top: 25px;
+  margin-bottom: 25px;
+}
+
+.padding-0 {
+  padding: 0;
+}
+
+.padding-xs {
+  padding: 5px;
+}
+
+.padding-sm {
+  padding: 10px;
+}
+
+.padding {
+  padding: 15px;
+}
+
+.padding-lg {
+  padding: 20px;
+}
+
+.padding-xl {
+  padding: 25px;
+}
+
+.padding-top-xs {
+  padding-top: 5px;
+}
+
+.padding-top-sm {
+  padding-top: 10px;
+}
+
+.padding-top {
+  padding-top: 15px;
+}
+
+.padding-top-lg {
+  padding-top: 20px;
+}
+
+.padding-top-xl {
+  padding-top: 25px;
+}
+
+.padding-right-xs {
+  padding-right: 5px;
+}
+
+.padding-right-sm {
+  padding-right: 10px;
+}
+
+.padding-right {
+  padding-right: 15px;
+}
+
+.padding-right-lg {
+  padding-right: 20px;
+}
+
+.padding-right-xl {
+  padding-right: 25px;
+}
+
+.padding-bottom-xs {
+  padding-bottom: 5px;
+}
+
+.padding-bottom-sm {
+  padding-bottom: 10px;
+}
+
+.padding-bottom {
+  padding-bottom: 15px;
+}
+
+.padding-bottom-lg {
+  padding-bottom: 20px;
+}
+
+.padding-bottom-xl {
+  padding-bottom: 25px;
+}
+
+.padding-left-xs {
+  padding-left: 5px;
+}
+
+.padding-left-sm {
+  padding-left: 10px;
+}
+
+.padding-left {
+  padding-left: 15px;
+}
+
+.padding-left-lg {
+  padding-left: 20px;
+}
+
+.padding-left-xl {
+  padding-left: 25px;
+}
+
+.padding-lr-xs {
+  padding-left: 5px;
+  padding-right: 5px;
+}
+
+.padding-lr-sm {
+  padding-left: 10px;
+  padding-right: 10px;
+}
+
+.padding-lr {
+  padding-left: 15px;
+  padding-right: 15px;
+}
+
+.padding-lr-lg {
+  padding-left: 20px;
+  padding-right: 20px;
+}
+
+.padding-lr-xl {
+  padding-left: 25px;
+  padding-right: 25px;
+}
+
+.padding-tb-xs {
+  padding-top: 5px;
+  padding-bottom: 5px;
+}
+
+.padding-tb-sm {
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+
+.padding-tb {
+  padding-top: 15px;
+  padding-bottom: 15px;
+}
+
+.padding-tb-lg {
+  padding-top: 20px;
+  padding-bottom: 20px;
+}
+
+.padding-tb-xl {
+  padding-top: 25px;
+  padding-bottom: 25px;
+}
+
+/* -- 浮动 --  */
+
+.cf::after,
+.cf::before {
+  content: ' ';
+  display: table;
+}
+
+.cf::after {
+  clear: both;
+}
+
+.fl {
+  float: left;
+}
+
+.fr {
+  float: right;
+}
+
+/* ==================
+          背景
+ ==================== */
+
+.line-red::after,
+.lines-red::after {
+  border-color: var(--red);
+}
+
+.line-orange::after,
+.lines-orange::after {
+  border-color: var(--orange);
+}
+
+.line-yellow::after,
+.lines-yellow::after {
+  border-color: var(--yellow);
+}
+
+.line-olive::after,
+.lines-olive::after {
+  border-color: var(--olive);
+}
+
+.line-green::after,
+.lines-green::after {
+  border-color: var(--green);
+}
+
+.line-cyan::after,
+.lines-cyan::after {
+  border-color: var(--cyan);
+}
+
+.line-blue::after,
+.lines-blue::after {
+  border-color: var(--blue);
+}
+
+.line-purple::after,
+.lines-purple::after {
+  border-color: var(--purple);
+}
+
+.line-mauve::after,
+.lines-mauve::after {
+  border-color: var(--mauve);
+}
+
+.line-pink::after,
+.lines-pink::after {
+  border-color: var(--pink);
+}
+
+.line-brown::after,
+.lines-brown::after {
+  border-color: var(--brown);
+}
+
+.line-grey::after,
+.lines-grey::after {
+  border-color: var(--grey);
+}
+
+.line-gray::after,
+.lines-gray::after {
+  border-color: var(--gray);
+}
+
+.line-black::after,
+.lines-black::after {
+  border-color: var(--black);
+}
+
+.line-white::after,
+.lines-white::after {
+  border-color: var(--white);
+}
+
+.bg-red {
+  background-color: var(--red);
+  color: var(--white);
+}
+
+.bg-orange {
+  background-color: var(--orange);
+  color: var(--white);
+}
+
+.bg-yellow {
+  background-color: var(--yellow);
+  color: var(--black);
+}
+
+.bg-olive {
+  background-color: var(--olive);
+  color: var(--white);
+}
+
+.bg-green {
+  background-color: var(--green);
+  color: var(--white);
+}
+
+.bg-cyan {
+  background-color: var(--cyan);
+  color: var(--white);
+}
+
+.bg-blue {
+  background-color: var(--blue);
+  color: var(--white);
+}
+
+.bg-purple {
+  background-color: var(--purple);
+  color: var(--white);
+}
+
+.bg-mauve {
+  background-color: var(--mauve);
+  color: var(--white);
+}
+
+.bg-pink {
+  background-color: var(--pink);
+  color: var(--white);
+}
+
+.bg-brown {
+  background-color: var(--brown);
+  color: var(--white);
+}
+
+.bg-grey {
+  background-color: var(--grey);
+  color: var(--white);
+}
+
+.bg-gray {
+  background-color: #f0f0f0;
+  color: var(--black);
+}
+
+.bg-black {
+  background-color: var(--black);
+  color: var(--white);
+}
+
+.bg-white {
+  background-color: var(--white);
+  color: var(--darkGray);
+}
+
+.bg-shade-top {
+  background-image: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.01));
+  color: var(--white);
+}
+
+.bg-shade-bottom {
+  background-image: linear-gradient(rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 1));
+  color: var(--white);
+}
+
+.bg-red.light {
+  color: var(--red);
+  background-color: var(--redLight);
+}
+
+.bg-orange.light {
+  color: var(--orange);
+  background-color: var(--orangeLight);
+}
+
+.bg-yellow.light {
+  color: var(--yellow);
+  background-color: var(--yellowLight);
+}
+
+.bg-olive.light {
+  color: var(--olive);
+  background-color: var(--oliveLight);
+}
+
+.bg-green.light {
+  color: var(--green);
+  background-color: var(--greenLight);
+}
+
+.bg-cyan.light {
+  color: var(--cyan);
+  background-color: var(--cyanLight);
+}
+
+.bg-blue.light {
+  color: var(--blue);
+  background-color: var(--blueLight);
+}
+
+.bg-purple.light {
+  color: var(--purple);
+  background-color: var(--purpleLight);
+}
+
+.bg-mauve.light {
+  color: var(--mauve);
+  background-color: var(--mauveLight);
+}
+
+.bg-pink.light {
+  color: var(--pink);
+  background-color: var(--pinkLight);
+}
+
+.bg-brown.light {
+  color: var(--brown);
+  background-color: var(--brownLight);
+}
+
+.bg-grey.light {
+  color: var(--grey);
+  background-color: var(--greyLight);
+}
+
+.bg-gradual-red {
+  background-image: var(--gradualRed);
+  color: var(--white);
+}
+
+.bg-gradual-orange {
+  background-image: var(--gradualOrange);
+  color: var(--white);
+}
+
+.bg-gradual-green {
+  background-image: var(--gradualGreen);
+  color: var(--white);
+}
+
+.bg-gradual-purple {
+  background-image: var(--gradualPurple);
+  color: var(--white);
+}
+
+.bg-gradual-pink {
+  background-image: var(--gradualPink);
+  color: var(--white);
+}
+
+.bg-gradual-blue {
+  background-image: var(--gradualBlue);
+  color: var(--white);
+}
+
+.shadow[class*='-red'] {
+  box-shadow: var(--ShadowSize) var(--redShadow);
+}
+
+.shadow[class*='-orange'] {
+  box-shadow: var(--ShadowSize) var(--orangeShadow);
+}
+
+.shadow[class*='-yellow'] {
+  box-shadow: var(--ShadowSize) var(--yellowShadow);
+}
+
+.shadow[class*='-olive'] {
+  box-shadow: var(--ShadowSize) var(--oliveShadow);
+}
+
+.shadow[class*='-green'] {
+  box-shadow: var(--ShadowSize) var(--greenShadow);
+}
+
+.shadow[class*='-cyan'] {
+  box-shadow: var(--ShadowSize) var(--cyanShadow);
+}
+
+.shadow[class*='-blue'] {
+  box-shadow: var(--ShadowSize) var(--blueShadow);
+}
+
+.shadow[class*='-purple'] {
+  box-shadow: var(--ShadowSize) var(--purpleShadow);
+}
+
+.shadow[class*='-mauve'] {
+  box-shadow: var(--ShadowSize) var(--mauveShadow);
+}
+
+.shadow[class*='-pink'] {
+  box-shadow: var(--ShadowSize) var(--pinkShadow);
+}
+
+.shadow[class*='-brown'] {
+  box-shadow: var(--ShadowSize) var(--brownShadow);
+}
+
+.shadow[class*='-grey'] {
+  box-shadow: var(--ShadowSize) var(--greyShadow);
+}
+
+.shadow[class*='-gray'] {
+  box-shadow: var(--ShadowSize) var(--grayShadow);
+}
+
+.shadow[class*='-black'] {
+  box-shadow: var(--ShadowSize) var(--blackShadow);
+}
+
+.shadow[class*='-white'] {
+  box-shadow: var(--ShadowSize) var(--blackShadow);
+}
+
+.text-shadow[class*='-red'] {
+  text-shadow: var(--ShadowSize) var(--redShadow);
+}
+
+.text-shadow[class*='-orange'] {
+  text-shadow: var(--ShadowSize) var(--orangeShadow);
+}
+
+.text-shadow[class*='-yellow'] {
+  text-shadow: var(--ShadowSize) var(--yellowShadow);
+}
+
+.text-shadow[class*='-olive'] {
+  text-shadow: var(--ShadowSize) var(--oliveShadow);
+}
+
+.text-shadow[class*='-green'] {
+  text-shadow: var(--ShadowSize) var(--greenShadow);
+}
+
+.text-shadow[class*='-cyan'] {
+  text-shadow: var(--ShadowSize) var(--cyanShadow);
+}
+
+.text-shadow[class*='-blue'] {
+  text-shadow: var(--ShadowSize) var(--blueShadow);
+}
+
+.text-shadow[class*='-purple'] {
+  text-shadow: var(--ShadowSize) var(--purpleShadow);
+}
+
+.text-shadow[class*='-mauve'] {
+  text-shadow: var(--ShadowSize) var(--mauveShadow);
+}
+
+.text-shadow[class*='-pink'] {
+  text-shadow: var(--ShadowSize) var(--pinkShadow);
+}
+
+.text-shadow[class*='-brown'] {
+  text-shadow: var(--ShadowSize) var(--brownShadow);
+}
+
+.text-shadow[class*='-grey'] {
+  text-shadow: var(--ShadowSize) var(--greyShadow);
+}
+
+.text-shadow[class*='-gray'] {
+  text-shadow: var(--ShadowSize) var(--grayShadow);
+}
+
+.text-shadow[class*='-black'] {
+  text-shadow: var(--ShadowSize) var(--blackShadow);
+}
+
+.bg-img {
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+.bg-mask {
+  background-color: var(--black);
+  position: relative;
+}
+
+.bg-mask::after {
+  content: '';
+  border-radius: inherit;
+  width: 100%;
+  height: 100%;
+  display: block;
+  background-color: rgba(0, 0, 0, 0.4);
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+}
+
+.bg-video {
+  position: relative;
+}
+
+.bg-video video {
+  display: block;
+  height: 100%;
+  width: 100%;
+  object-fit: cover;
+  position: absolute;
+  top: 0;
+  z-index: 0;
+  pointer-events: none;
+}
+
+/* ==================
+           文本
+  ==================== */
+
+.text-xs {
+  font-size: 10px;
+}
+
+.text-sm {
+  font-size: 12px;
+}
+
+.text-df {
+  font-size: 14px;
+}
+
+.text-lg {
+  font-size: 16px;
+}
+
+.text-xl {
+  font-size: 18px;
+}
+
+.text-xxl {
+  font-size: 22px;
+}
+
+.text-sl {
+  font-size: 40px;
+}
+
+.text-xsl {
+  font-size: 60px;
+}
+
+.text-Abc {
+  text-transform: capitalize;
+}
+
+.text-ABC {
+  text-transform: uppercase;
+}
+
+.text-abc {
+  text-transform: lowercase;
+}
+
+.text-price::before {
+  content: '¥';
+  font-size: 80%;
+  margin-right: 2px;
+}
+
+.text-cut {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.text-bold {
+  font-weight: bold;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.text-content {
+  line-height: 1.6;
+}
+
+.text-left {
+  text-align: left;
+}
+
+.text-right {
+  text-align: right;
+}
+
+.text-red,
+.line-red,
+.lines-red {
+  color: var(--red);
+}
+
+.text-orange,
+.line-orange,
+.lines-orange {
+  color: var(--orange);
+}
+
+.text-yellow,
+.line-yellow,
+.lines-yellow {
+  color: var(--yellow);
+}
+
+.text-olive,
+.line-olive,
+.lines-olive {
+  color: var(--olive);
+}
+
+.text-green,
+.line-green,
+.lines-green {
+  color: var(--green);
+}
+
+.text-cyan,
+.line-cyan,
+.lines-cyan {
+  color: var(--cyan);
+}
+
+.text-blue,
+.line-blue,
+.lines-blue {
+  color: var(--blue);
+}
+
+.text-purple,
+.line-purple,
+.lines-purple {
+  color: var(--purple);
+}
+
+.text-mauve,
+.line-mauve,
+.lines-mauve {
+  color: var(--mauve);
+}
+
+.text-pink,
+.line-pink,
+.lines-pink {
+  color: var(--pink);
+}
+
+.text-brown,
+.line-brown,
+.lines-brown {
+  color: var(--brown);
+}
+
+.text-grey,
+.line-grey,
+.lines-grey {
+  color: var(--grey);
+}
+
+.text-gray,
+.line-gray,
+.lines-gray {
+  color: var(--gray);
+}
+
+.text-black,
+.line-black,
+.lines-black {
+  color: var(--black);
+}
+
+.text-white,
+.line-white,
+.lines-white {
+  color: var(--white);
+}
+
+/* ==================
+          分割线
+  ==================== */
+.divider {
+  box-sizing: border-box;
+  padding: 0;
+  list-style: none;
+  border-block-start: 1px solid rgba(5, 5, 5, 0.08);
+  margin: 15px 0;
+}
+
+.divider.xs {
+  margin: 5px 0;
+}
+
+.divider.sm {
+  margin: 10px 0;
+}
+
+.divider.lg {
+  margin: 20px 0;
+}
+
+.divider.xl {
+  margin: 25px 0;
+}