@opendesign-plus-test/components 0.0.1-rc.215 → 0.0.1-rc.216

package/dist/treeshaking/components/user-center/styles/global.css

@@ -0,0 +1,349 @@
+.hover-icon-rotate .o-icon {
+  transition: all var(--o-duration-m1) var(--o-easing-standard-in);
+}
+@media (hover: hover) {
+  .hover-icon-rotate:hover .o-icon {
+    transform: rotate(-180deg);
+  }
+}
+
+.o-icon svg {
+  width: 1em;
+  height: 1em;
+}
+
+/* 输入框统一圆角 */
+.o_box-main {
+  border-radius: 4px;
+}
+
+/* 隐藏表单必填星号（euler 风格无星号） */
+.o-form-require-symbol {
+  display: none !important;
+}
+
+.form-input {
+  width: 100%;
+}
+.form-input .o_box,
+.form-input .o_box-large {
+  --box-radius: var(--o-radius_control-xs);
+  width: 100%;
+}
+.form-input .o_box .o_input,
+.form-input .o_box-large .o_input {
+  width: 100%;
+}
+.form-input .o_box .o_input input::placeholder,
+.form-input .o_box-large .o_input input::placeholder {
+  font-size: var(--o-font_size-tip1);
+}
+.form-input .o_box .o_input-disabled,
+.form-input .o_box-large .o_input-disabled {
+  -webkit-text-fill-color: #a8abb2;
+  font-size: var(--o-font_size-tip1);
+}
+
+.o-form .o_box-main {
+  background-color: transparent;
+}
+.o-form .o_box-main:hover {
+  background-color: transparent;
+  border-color: var(--o-color-primary2);
+}
+
+/**
+ * o-dialog寮规閲岃〃鍗曟牱寮忎慨鏀?
+*/
+.o-dlg-main.o-layer-main .main {
+  max-width: 480px;
+}
+.o-dlg-main.o-layer-main .o-form-item:last-child,
+.o-dlg-main.o-layer-main .o-form-item:last-child {
+  margin-bottom: var(--form-item-gap);
+}
+.o-dlg-main.o-layer-main .o-form-item-danger.o-form-item,
+.o-dlg-main.o-layer-main .o-form-item-warning.o-form-item {
+  margin-bottom: 0;
+}
+.o-dlg-main.o-layer-main .o-form-layout-h .o-form-item-label,
+.o-dlg-main.o-layer-main .o-form-layout-inline .o-form-item-label {
+  margin-bottom: 4px;
+}
+.o-dlg-main.o-layer-main .o-form-item-message {
+  padding-top: 0;
+  padding-left: 16px;
+}
+
+.o-btn.o-btn-large {
+  --btn-radius: 28px;
+}
+
+.o-btn + .o-btn {
+  margin-left: var(--o-spacing-h4);
+}
+
+:root {
+  font-weight: 400;
+}
+
+:root.dark {
+  font-weight: 400;
+}
+
+.o-form .o-form-item-label span {
+  white-space: nowrap;
+}
+
+.nowrap {
+  white-space: nowrap;
+}
+
+.ellipsis {
+  display: inline-block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.o-dlg-main {
+  justify-content: center;
+  background-color: var(--o-color-fill2);
+  margin: 24px;
+}
+.o-dlg-main .o-form-item-label {
+  display: none;
+}
+
+.modify-dialog .o-dlg-main {
+  border-radius: 8px;
+  padding: 24px;
+}
+.modify-dialog .o-form-layout-h .o-form-item {
+  margin-bottom: 16px !important;
+}
+.modify-dialog .o-dlg-body {
+  min-height: fit-content;
+}
+.modify-dialog .o_box-main {
+  border-radius: 4px;
+}
+.modify-dialog .o_box-main .o_input-suffix-icon {
+  display: inline-block;
+  height: 22px;
+  line-height: 22px;
+  margin-top: -2px;
+}
+.modify-dialog .o_box-main .o_input-suffix-icon .o-link-main {
+  font-size: 14px;
+}
+.modify-dialog .o_box-outline.o_box-normal {
+  --_box-bd-color-focus: var(--o-color-primary4);
+  --_box-bd-color-hover: var(--o-color-primary2);
+}
+.modify-dialog .o-link-main {
+  color: var(--o-color-primary1);
+}
+.modify-dialog .o-link-main:hover {
+  color: var(--o-color-primary2);
+}
+.modify-dialog .o-link-disabled .o-link-main, .modify-dialog .o-link-disabled:hover .o-link-main, .modify-dialog .o-link-disabled:active .o-link-main {
+  color: var(--o-color-primary3);
+}
+.modify-dialog .o_box-outline.o_box-normal {
+  width: 100%;
+}
+
+.unbind-dialog .o-dlg-header {
+  margin-bottom: 0;
+}
+.unbind-dialog .o-dlg-body {
+  min-height: fit-content;
+}
+.unbind-dialog .o-dlg-footer {
+  margin-top: 0;
+}
+.unbind-dialog .o_box-main {
+  border-radius: 4px;
+}
+.unbind-dialog .o_box-outline.o_box-normal {
+  --_box-bd-color-focus: var(--o-color-primary4);
+}
+
+.bind-email-dialog .o-dlg-body {
+  padding-left: 92px;
+  padding-right: 92px;
+  min-height: fit-content;
+}
+.bind-email-dialog .o-form-layout-h .o-form-item-label + .o-form-item-main,
+.bind-email-dialog .o-form-layout-inline .o-form-item-label + .o-form-item-main {
+  margin-left: 0;
+}
+.bind-email-dialog .o_box-main {
+  border-radius: 4px;
+}
+.bind-email-dialog .o_box-outline.o_box-normal {
+  --_box-bd-color-focus: var(--o-color-primary4);
+}
+
+.delete-account-dialog .o-dlg-main {
+  border-radius: 4px;
+}
+.delete-account-dialog .o-dlg-body-content {
+  height: 100%;
+}
+.delete-account-dialog .o-dlg-body {
+  min-height: fit-content;
+}
+.delete-account-dialog .o_box-main {
+  border-radius: 4px;
+}
+.delete-account-dialog .o_box-outline.o_box-normal {
+  --_box-bd-color-focus: var(--o-color-primary4);
+}
+.delete-account-dialog .o_box-main.o_box-disabled {
+  background-color: var(--o-color-control4-light);
+  border-color: var(--o-color-control4);
+}
+.delete-account-dialog .o_box-main.o_box-disabled:hover {
+  background-color: var(--o-color-control4-light);
+  border-color: var(--o-color-control4);
+}
+
+.o-popup.o-popup-pos-top {
+  --popup-radius: 4px;
+}
+.o-popup.o-popup-pos-top .o-popup-body {
+  box-shadow: 0 4px 24px 0 rgba(var(--o-grey-14), 0.15);
+}
+.o-popup.o-popup-pos-top .o-popup-anchor {
+  z-index: 2;
+}
+
+.o-popup-wrap {
+  border-radius: 8px;
+  background-color: var(--o-color-fill2);
+}
+
+.valid-tip-content {
+  padding: 8px;
+}
+.valid-tip-content .tip-title {
+  font-size: 16px;
+  font-weight: 500;
+  margin-left: 18px;
+  margin-bottom: 5px;
+}
+.valid-tip-content .tip-item {
+  font-size: 14px;
+  color: var(--o-color-info4);
+  gap: 5px;
+  display: flex;
+  align-items: flex-start;
+}
+.valid-tip-content .tip-item.active {
+  color: #0bb151;
+}
+.valid-tip-content .tip-item .o-icon {
+  margin-top: 3px;
+  width: 20px;
+  height: 20px;
+}
+.valid-tip-content .tip-item .tip-desc {
+  display: inline-block;
+  line-height: 20px;
+}
+
+.form-item-extra {
+  padding-left: 16px;
+}
+.form-item-extra .error-tip {
+  margin-right: 3px;
+}
+.form-item-extra .error-color {
+  color: #eb232d;
+}
+
+.verifybox {
+  --border-radius: 4px;
+  --varify-error-color1: 240, 87, 90;
+  --varify-error-color2: 230, 0, 18;
+  border-radius: var(--border-radius);
+}
+.verifybox .verifybox-top {
+  padding: 32px 32px 12px;
+  height: auto;
+  line-height: normal;
+  font-size: 16px;
+  line-height: 24px;
+  color: rgba(var(--o-black), 0.6);
+}
+.verifybox .verifybox-bottom {
+  padding: 16px 32px 32px !important;
+}
+
+.o-message-list {
+  z-index: 1008;
+  --app-header-height: 64px;
+  --app-footer-height: 300px;
+  --message-list-top-offset: calc(var(--app-header-height) + 32px);
+  --message-list-bottom-offset: calc(var(--app-footer-height) + 32px);
+}
+.o-message-list .o-message {
+  border-radius: 4px !important;
+}
+
+.avatar-dialog .o-btn-primary.o-btn-solid {
+  width: 110px;
+  background-color: var(--o-color-primary1);
+  border-color: var(--o-color-primary1);
+}
+.avatar-dialog .o-btn-primary.o-btn-solid:hover {
+  background-color: var(--o-color-primary2);
+  border-color: var(--o-color-primary2);
+}
+.avatar-dialog .o-btn-outline {
+  width: 110px;
+  color: var(--o-color-primary1);
+  border-color: var(--o-color-primary1);
+}
+.avatar-dialog .o-btn-outline:hover {
+  color: var(--o-color-primary2);
+  border-color: var(--o-color-primary2);
+}
+
+.o-tag.tag-new {
+  background: linear-gradient(135deg, #0bb151 0%, #2dc165 100%);
+  border: 0 none;
+  color: var(--o-color-white);
+}
+.o-tag.tag-hot {
+  background: var(--o-color-danger1);
+  border: 0 none;
+  color: var(--o-color-white);
+}
+
+.view-agreement-dialog .o-dlg-main {
+  border-radius: 8px;
+}
+
+.unbind-dialog .o-dlg-main, .edit-org-dialog .o-dlg-main, .deregister-account-dialog .o-dlg-main {
+  border-radius: 8px;
+}
+
+.modify-dialog-pad .o-dlg-main {
+  padding: 16px;
+}
+.modify-dialog-pad .o-dlg-header {
+  margin-bottom: 16px;
+}
+.modify-dialog-pad .o-btn-primary.o-btn-solid, .modify-dialog-pad .o-btn-outline {
+  font-size: 16px !important;
+}
+.modify-dialog-pad .footer {
+  padding-top: 0;
+}
+
+.o-select, .o-popup-wrap {
+  border-radius: 4px;
+}

package/dist/treeshaking/components/user-center/styles/variables.css

@@ -0,0 +1,361 @@
+.hover-icon-rotate .o-icon {
+  transition: all var(--o-duration-m1) var(--o-easing-standard-in);
+}
+@media (hover: hover) {
+  .hover-icon-rotate:hover .o-icon {
+    transform: rotate(-180deg);
+  }
+}
+
+/**
+ * 全局响应式变量定义（桌面优先方式）
+ * 基于栅格布局系统的响应式设计
+ *
+ * 设计方式：桌面优先（Desktop-First）
+ * - 默认值为大屏幕（>= 1680px）设置
+ * - 使用 @include uc-screen.respond-to() 在较小断点覆盖值
+ *
+ * 栅格布局规则：
+ * 1680px+      - 24栅格 + 两侧64px间距，栅格间距32px，侧边栏5栅格+4间距，内容区15栅格+14间距
+ * 1440-1680    - 24栅格 + 两侧64px间距，栅格间距32px，侧边栏5栅格+4间距，内容区17栅格+16间距
+ * 1200-1440    - 24栅格 + 两侧40px间距，栅格间距24px，侧边栏5栅格+4间距，内容区17栅格+16间距
+ * 840-1200     - 12栅格 + 两侧32px间距，栅格间距16px，侧边栏3栅格+2间距，内容区9栅格+8间距
+ * <= 840       - 单栏布局
+ */
+/* ============================================================
+   DEFAULT VALUES - 1680px+ (桌面 - 最高优先级)
+   24栅格 + 两侧64px间距，栅格间距32px
+   侧边栏: 5栅格 + 4间距 = (5 * 栅格宽 + 4 * 32px)
+   内容区: 15栅格 + 14间距 = (15 * 栅格宽 + 14 * 32px)
+   ============================================================ */
+:root {
+  /* 栅格系统 */
+  --grid-columns: 24;
+  --grid-gap: 32px;
+  --container-padding-x: 64px;
+  --container-padding-top: 40px;
+  --container-padding-bottom: 72px;
+  --header-height: 72px;
+  --footer-height: 56px;
+  --container-border-radius: 4px;
+  --item-height: 46px;
+  --item-padding: 15px 8px;
+  /* 两栏布局 - 栅格计算 */
+  --sidebar-grid-columns: 5;
+  --sidebar-grid-gaps: 4;
+  --content-grid-columns: 15;
+  --content-grid-gaps: 14;
+  /* 栅格宽度计算 (动态) */
+  /* 总宽度 = 100vw - 2*64px = 100vw - 128px */
+  /* 栅格宽度 = (100vw - 128px - 23*32px) / 24 */
+  /* 栅格宽度 = (100vw - 128px - 736px) / 24 = (100vw - 864px) / 24 */
+  --grid-item-width: calc((100vw - 128px - 736px) / 24);
+  --sidebar-width: calc(5 * var(--grid-item-width) + 4 * 32px);
+  --content-width: calc(15 * var(--grid-item-width) + 14 * 32px);
+  --footer-width: calc(20 * var(--grid-item-width) + 19 * 32px);
+  --page-min-height: calc(100vh - var(--container-padding-top) - var(--header-height) - var(--footer-height) - var(--container-padding-bottom));
+  /* 布局间距 */
+  --layout-gap: 32px;
+  --layout-gap2: 24px;
+  --layout-gap3: 16px;
+  --layout-gap4: 12px;
+  --padding-value-1: 32px;
+  --padding-value-2: 24px;
+  /* 字体大小 */
+  --font-size1: 24px;
+  --font-size2: 22px;
+  --font-size3: 20px;
+  --font-size4: 18px;
+  --font-size5: 16px;
+  --font-size6: 14px;
+  --font-size7: 12px;
+  /* 行高 */
+  --line-height1: 32px;
+  --line-height2: 30px;
+  --line-height3: 28px;
+  --line-height4: 26px;
+  --line-height5: 24px;
+  --line-height6: 22px;
+  --line-height7: 18px;
+  /* 输入框的宽度 */
+  --input-width1: 480px;
+  /* 输入框的高度 */
+  --input-height1: 40px;
+}
+
+/* ============================================================
+   1440-1680px - 平板横屏/笔记本
+   24栅格 + 两侧64px间距，栅格间距32px
+   侧边栏: 5栅格 + 4间距，内容区: 17栅格 + 16间距
+   ============================================================ */
+@media (min-width: 1401px) and (max-width: 1680px) {
+  :root {
+    /* 栅格系统 */
+    --grid-columns: 24;
+    --grid-gap: 32px;
+    --container-padding-x: 64px;
+    --container-padding-top: 24px;
+    --container-padding-bottom: 56px;
+    --header-height: 64px;
+    --footer-height: 48px;
+    --item-height: 38px;
+    --item-padding: 8px;
+    /* 两栏布局 - 栅格计算 */
+    --sidebar-grid-columns: 5;
+    --sidebar-grid-gaps: 4;
+    --content-grid-columns: 17;
+    --content-grid-gaps: 16;
+    /* 栅格宽度计算 */
+    /* 总宽度 = 1440px - 2*64px = 1312px */
+    /* 栅格宽度 = (1312px - 23*32px) / 24 = (1312px - 736px) / 24 = 576px / 24 = 24px */
+    --grid-item-width: calc((100vw - 736px - 128px) / 24);
+    --sidebar-width: calc(5 * var(--grid-item-width) + 4 * 32px);
+    --content-width: calc(17 * var(--grid-item-width) + 16 * 32px);
+    --footer-width: calc(22 * var(--grid-item-width) + 21 * 32px);
+    --page-min-height: calc(100vh - var(--container-padding-top) - var(--header-height) - var(--footer-height) - var(--container-padding-bottom));
+    /* 布局间距 */
+    --layout-gap: 24px;
+    --layout-gap2: 16px;
+    --layout-gap3: 12px;
+    --layout-gap4: 8px;
+    --padding-value-1: 24px;
+    --padding-value-2: 16px;
+    /* 字体大小 */
+    --font-size1: 20px;
+    --font-size2: 18px;
+    --font-size3: 18px;
+    --font-size4: 16px;
+    --font-size5: 14px;
+    --font-size6: 14px;
+    --font-size7: 12px;
+    /* 行高 */
+    --line-height1: 28px;
+    --line-height2: 26px;
+    --line-height3: 26px;
+    --line-height4: 24px;
+    --line-height5: 22px;
+    --line-height6: 22px;
+    --line-height7: 18px;
+    /* 输入框的宽度 */
+    --input-width1: 360px;
+    /* 输入框的高度 */
+    --input-height1: 36px;
+  }
+}
+/* ============================================================
+   1200-1440px - 平板横屏
+   24栅格 + 两侧40px间距，栅格间距24px
+   侧边栏: 5栅格 + 4间距，内容区: 17栅格 + 16间距
+   ============================================================ */
+@media (min-width: 1201px) and (max-width: 1440px) {
+  :root {
+    /* 栅格系统 */
+    --grid-columns: 24;
+    --grid-gap: 24px;
+    --container-padding-x: 40px;
+    --container-padding-top: 24px;
+    --container-padding-bottom: 56px;
+    --header-height: 64px;
+    --footer-height: 48px;
+    --item-height: 38px;
+    --item-padding: 8px;
+    /* 两栏布局 - 栅格计算 */
+    --sidebar-grid-columns: 5;
+    --sidebar-grid-gaps: 4;
+    --content-grid-columns: 17;
+    --content-grid-gaps: 16;
+    /* 栅格宽度计算 */
+    /* 总宽度 = 1200px - 2*40px = 1120px */
+    /* 栅格宽度 = (1120px - 23*24px) / 24 = (1120px - 552px) / 24 = 568px / 24 ≈ 23.67px */
+    --grid-item-width: calc((100vw - 552px - 80px) / 24);
+    --sidebar-width: calc(5 * var(--grid-item-width) + 4 * 24px);
+    --content-width: calc(17 * var(--grid-item-width) + 16 * 24px);
+    --footer-width: calc(22 * var(--grid-item-width) + 21 * 24px);
+    --page-min-height: calc(100vh - var(--container-padding-top) - var(--header-height) - var(--footer-height) - var(--container-padding-bottom));
+    /* 布局间距 */
+    --layout-gap: 24px;
+    --layout-gap2: 16px;
+    --layout-gap3: 12px;
+    --layout-gap4: 8px;
+    --padding-value-1: 24px;
+    --padding-value-2: 16px;
+    /* 字体大小 */
+    --font-size1: 20px;
+    --font-size2: 18px;
+    --font-size3: 18px;
+    --font-size4: 16px;
+    --font-size5: 14px;
+    --font-size6: 14px;
+    --font-size7: 12px;
+    /* 行高 */
+    --line-height1: 28px;
+    --line-height2: 26px;
+    --line-height3: 26px;
+    --line-height4: 24px;
+    --line-height5: 22px;
+    --line-height6: 22px;
+    --line-height7: 18px;
+    /* 输入框的宽度 */
+    --input-width1: 360px;
+    /* 输入框的高度 */
+    --input-height1: 36px;
+  }
+}
+/* ============================================================
+   840-1200px - 平板竖屏
+   12栅格 + 两侧32px间距，栅格间距16px
+   侧边栏: 3栅格 + 2间距，内容区: 9栅格 + 8间距
+   ============================================================ */
+@media (min-width: 841px) and (max-width: 1200px) {
+  :root {
+    /* 栅格系统 */
+    --grid-columns: 12;
+    --grid-gap: 16px;
+    --container-padding-x: 32px;
+    --container-padding-top: 16px;
+    --container-padding-bottom: 40px;
+    --header-height: 56px;
+    --footer-height: 40px;
+    --item-height: 38px;
+    --item-padding: 8px;
+    /* 两栏布局 - 栅格计算 */
+    --sidebar-grid-columns: 3;
+    --sidebar-grid-gaps: 2;
+    --content-grid-columns: 9;
+    --content-grid-gaps: 8;
+    /* 栅格宽度计算 */
+    /* 总宽度 = 840px - 2*32px = 776px */
+    /* 栅格宽度 = (776px - 11*16px) / 12 = (776px - 176px) / 12 = 600px / 12 = 50px */
+    --grid-item-width: calc((100vw - 176px - 64px) / 12);
+    --sidebar-width: calc(3 * var(--grid-item-width) + 2 * 16px);
+    --content-width: calc(9 * var(--grid-item-width) + 8 * 16px);
+    --footer-width: calc(12 * var(--grid-item-width) + 11 * 16px);
+    --page-min-height: calc(100vh - var(--container-padding-top) - var(--header-height) - var(--footer-height) - var(--container-padding-bottom));
+    /* 布局间距 */
+    --layout-gap: 16px;
+    --layout-gap2: 12px;
+    --layout-gap3: 8px;
+    --layout-gap4: 8px;
+    --padding-value-1: 16px;
+    --padding-value-2: 12px;
+    /* 字体大小 */
+    --font-size1: 18px;
+    --font-size2: 16px;
+    --font-size3: 16px;
+    --font-size4: 14px;
+    --font-size5: 14px;
+    --font-size6: 12px;
+    --font-size7: 12px;
+    /* 行高 */
+    --line-height1: 26px;
+    --line-height2: 24px;
+    --line-height3: 24px;
+    --line-height4: 22px;
+    --line-height5: 22px;
+    --line-height6: 18px;
+    --line-height7: 18px;
+    /* 输入框的宽度 */
+    --input-width1: 320px;
+    /* 输入框的高度 */
+    --input-height1: 36px;
+  }
+}
+/* ============================================================
+   <840px - 手机端 (单栏布局)
+   ============================================================ */
+@media (max-width: 840px) {
+  :root {
+    /* 栅格系统 */
+    --grid-columns: 1;
+    --grid-gap: 0px;
+    --container-padding-x: 16px;
+    --container-padding-y: 16px;
+    --header-height: 48px;
+    --footer-height: 102px;
+    --item-height: 38px;
+    --item-padding: 8px;
+    --container-padding-bottom: 32px;
+    /* 两栏布局 - 单栏模式 */
+    --sidebar-grid-columns: 0;
+    --sidebar-grid-gaps: 0;
+    --content-grid-columns: 1;
+    --content-grid-gaps: 0;
+    /* 栅格宽度 */
+    --grid-item-width: 100%;
+    --sidebar-width: 0px;
+    --content-width: 100%;
+    --footer-width: 100%;
+    --page-min-height: calc(100vh - var(--container-padding-top) - var(--header-height) - var(--footer-height) - var(--container-padding-bottom));
+    /* 布局间距 */
+    --layout-gap: 12px;
+    --layout-gap2: 12px;
+    --layout-gap3: 8px;
+    --layout-gap4: 8px;
+    --container-bg-color: transparent;
+    --padding-value-1: 24px;
+    --padding-value-2: 24px;
+    /* 字体大小 */
+    --font-size1: 18px;
+    --font-size2: 16px;
+    --font-size3: 16px;
+    --font-size4: 14px;
+    --font-size5: 14px;
+    --font-size6: 12px;
+    --font-size7: 10px;
+    /* 行高 */
+    --line-height1: 26px;
+    --line-height2: 24px;
+    --line-height3: 24px;
+    --line-height4: 22px;
+    --line-height5: 22px;
+    --line-height6: 18px;
+    --line-height7: 16px;
+    /* 输入框的宽度 */
+    --input-width1: 320px;
+    /* 输入框的高度 */
+    --input-height1: 36px;
+  }
+}
+/* ============================================================
+   设计令牌补充：字号 / 行高 / 间距
+   （迁移自 personComponents base/_font.scss、base/_spacing.scss，
+   OpenDesignPlus 的 token css 不包含这三组，由本文件统一提供）
+   ============================================================ */
+/* 字号 */
+:root {
+  --o-font-size-h1: 64px;
+  --o-font-size-h2: 54px;
+  --o-font-size-h3: 36px;
+  --o-font-size-h4: 28px;
+  --o-font-size-h5: 24px;
+  --o-font-size-h6: 20px;
+  --o-font-size-h7: 18px;
+  --o-font-size-h8: 16px;
+  --o-font-size-text: 14px;
+  --o-font-size-tip: 12px;
+  /* 行高 */
+  --o-line-height-h1: 84px;
+  --o-line-height-h2: 76px;
+  --o-line-height-h3: 48px;
+  --o-line-height-h4: 36px;
+  --o-line-height-h5: 32px;
+  --o-line-height-h6: 28px;
+  --o-line-height-h7: 24px;
+  --o-line-height-h8: 22px;
+  --o-line-height-text: 22px;
+  --o-line-height-tip: 18px;
+}
+
+/* 间距 */
+:root {
+  --o-spacing-h1: 64px;
+  --o-spacing-h2: 40px;
+  --o-spacing-h3: 32px;
+  --o-spacing-h4: 24px;
+  --o-spacing-h5: 16px;
+  --o-spacing-h6: 12px;
+  --o-spacing-h7: 10px;
+  --o-spacing-h8: 8px;
+  --o-spacing-h9: 6px;
+  --o-spacing-h10: 4px;
+}