内置CSS类名

scss
@use './var.scss' as a;
@use './el.scss';

body {
  // 主要作用于页面
  --padding: 16px;
  --margin: 16px;
}

.g-card-title {
  .#{a.$prefix}-card-header__title {
    padding-left: 8px;
    position: relative;

    &::before {
      content: '';
      width: 4px;
      height: 20px;
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      background-color: var(--el-color-primary);
      border-radius: 0 4px 4px 0;
    }
  }
}

.g-w-full {
  width: 100%;
}

.g-h-full {
  height: 100%;
}

.g-line-1 {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.g-line-2 {
  line-clamp: 2;
  -webkit-line-clamp: 2;
}

.g-line-3 {
  line-clamp: 3;
  -webkit-line-clamp: 3;
}

.g-line-4 {
  line-clamp: 4;
  -webkit-line-clamp: 4;
}

.g-line-5 {
  line-clamp: 5;
  -webkit-line-clamp: 5;
}

.g-line-2,
.g-line-3,
.g-line-4,
.g-line-5 {
  overflow: hidden;
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box; // 弹性伸缩盒
  -webkit-box-orient: vertical; // 设置伸缩盒子元素排列方式
}

.g-mt {
  margin-top: var(--margin);
}

.g-mb {
  margin-bottom: var(--margin);
}

.g-ml {
  margin-left: var(--margin);
}

.g-mr {
  margin-right: var(--margin);
}

.g-mx {
  margin-left: var(--margin);
  margin-right: var(--margin);
}

.g-my {
  margin-top: var(--margin);
  margin-bottom: var(--margin);
}

.g-m0 {
  margin: 0 !important;
}

.g-pt {
  padding-top: var(--padding);
}

.g-pb {
  padding-bottom: var(--padding);
}

.g-pl {
  padding-left: var(--padding);
}

.g-pr {
  padding-right: var(--padding);
}

.g-px {
  padding-left: var(--padding);
  padding-right: var(--padding);
}

.g-py {
  padding-top: var(--padding);
  padding-bottom: var(--padding);
}

.g-p0 {
  padding: 0 !important;
}

// 主要作用在el-row组件
.g-flex-column {
  flex-direction: column;
}

.g-tool {
  gap: 8px;
}
内置CSS类名 ​

内置CSS类名
