@opendesign-plus-test/components 0.0.1-rc.217 → 0.0.1-rc.218

package/dist/treeshaking/components/user-center/OAccountSetting.css

@@ -1,57 +1,109 @@
-.hover-icon-rotate .o-icon[data-v-423d3be1] {
+.hover-icon-rotate .o-icon[data-v-53bda6f7] {
   transition: all var(--o-duration-m1) var(--o-easing-standard-in);
 }
 @media (hover: hover) {
-.hover-icon-rotate:hover .o-icon[data-v-423d3be1] {
+.hover-icon-rotate:hover .o-icon[data-v-53bda6f7] {
     transform: rotate(-180deg);
 }
 }
-.user-info-setting[data-v-423d3be1] {
+.user-info-setting[data-v-53bda6f7] {
   border-bottom: 1px solid var(--o-color-control4);
 }
 @media (max-width: 840px) {
-.user-info-setting[data-v-423d3be1] {
+.user-info-setting[data-v-53bda6f7] {
     border-bottom: none;
 }
 }
-.title[data-v-423d3be1] {
-  font-size: var(--font-size1);
-  line-height: var(--line-height1);
+.title[data-v-53bda6f7] {
+  font-size: 24px;
+  line-height: 32px;
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.title[data-v-53bda6f7] {
+    font-size: 20px;
+    line-height: 28px;
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.title[data-v-53bda6f7] {
+    font-size: 18px;
+    line-height: 26px;
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.title[data-v-53bda6f7] {
+    font-size: 18px;
+    line-height: 26px;
+}
+}
+@media (max-width: 600px) {
+.title[data-v-53bda6f7] {
+    font-size: 16px;
+    line-height: 24px;
+}
+}
+.title[data-v-53bda6f7] {
   font-weight: 600;
   color: var(--o-color-info1);
   margin-bottom: 12px;
 }
-.login-setting[data-v-423d3be1] {
+.login-setting[data-v-53bda6f7] {
   font-size: 14px;
   line-height: 22px;
   font-weight: normal;
   color: var(--o-color-info2);
-  padding-bottom: var(--layout-gap2);
+  padding-bottom: var(--o-gap-5);
   border-bottom: 1px solid var(--o-color-control4);
-  margin-bottom: var(--layout-gap2);
+  margin-bottom: var(--o-gap-5);
 }
 @media (max-width: 840px) {
-.login-setting[data-v-423d3be1] {
+.login-setting[data-v-53bda6f7] {
     border-bottom: none;
 }
 }
-.section-label[data-v-423d3be1] {
-  font-size: var(--font-size3);
-  line-height: var(--line-height3);
+.section-label[data-v-53bda6f7] {
+  font-size: 20px;
+  line-height: 28px;
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.section-label[data-v-53bda6f7] {
+    font-size: 18px;
+    line-height: 26px;
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.section-label[data-v-53bda6f7] {
+    font-size: 16px;
+    line-height: 24px;
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.section-label[data-v-53bda6f7] {
+    font-size: 16px;
+    line-height: 24px;
+}
+}
+@media (max-width: 600px) {
+.section-label[data-v-53bda6f7] {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+.section-label[data-v-53bda6f7] {
   font-weight: 600;
-  margin-top: var(--layout-gap2);
-  margin-bottom: var(--layout-gap2);
+  margin-top: var(--o-gap-5);
+  margin-bottom: var(--o-gap-5);
 }
 
 /* 移动端：白色卡片行（与三方账号绑定一致） */
-.setting-content-pad[data-v-423d3be1] {
+.setting-content-pad[data-v-53bda6f7] {
   background-color: var(--o-color-fill2);
   padding-bottom: 0;
   border-radius: 4px;
   margin-top: 4px;
   padding: 0 16px;
 }
-.setting-content-pad .opt-item[data-v-423d3be1] {
+.setting-content-pad .opt-item[data-v-53bda6f7] {
   width: 100%;
   /* 重置基础规则的 max-width:592px，移动端卡片行始终通栏（与三方账号绑定一致） */
   max-width: 100%;
@@ -60,15 +112,15 @@
   margin: 0;
   border-bottom: 1px solid var(--o-color-control4);
 }
-.setting-content-pad .opt-item[data-v-423d3be1]:last-child {
+.setting-content-pad .opt-item[data-v-53bda6f7]:last-child {
   border-bottom: none;
 }
-.setting-content-pad .opt-item .left-content[data-v-423d3be1] {
+.setting-content-pad .opt-item .left-content[data-v-53bda6f7] {
   flex: 1;
   align-items: center;
   margin-left: 0;
 }
-.setting-content-pad .opt-item .left-content .content-info[data-v-423d3be1] {
+.setting-content-pad .opt-item .left-content .content-info[data-v-53bda6f7] {
   /* 基础规则的 flex-grow:1 会占满剩余空间导致值紧贴标签（auto margin 失效），
      移动端需与三方账号绑定行一致：值靠右、紧贴箭头 */
   flex-grow: 0;
@@ -76,11 +128,11 @@
   margin-right: 0;
   justify-content: flex-end;
 }
-.setting-content-pad .opt-item .left-content .content-label[data-v-423d3be1] {
+.setting-content-pad .opt-item .left-content .content-label[data-v-53bda6f7] {
   color: var(--o-color-info1);
 }
-.opt-item[data-v-423d3be1] {
-  margin: var(--layout-gap2) 0;
+.opt-item[data-v-53bda6f7] {
+  margin: var(--o-gap-5) 0;
   line-height: 40px;
   display: flex;
   width: 592px;
@@ -88,143 +140,143 @@
   color: var(--o-color-info1);
 }
 @media (min-width: 841px) and (max-width: 1200px) {
-.opt-item[data-v-423d3be1] {
+.opt-item[data-v-53bda6f7] {
     width: 480px;
 }
 }
-.opt-item .opt-label[data-v-423d3be1] {
+.opt-item .opt-label[data-v-53bda6f7] {
   color: var(--o-color-info1);
 }
-.opt-item .o-link + .o-link[data-v-423d3be1] {
-  margin-left: var(--o-spacing-h4);
+.opt-item .o-link + .o-link[data-v-53bda6f7] {
+  margin-left: var(--o-gap-5);
 }
-.opt-item .left-content .content-label[data-v-423d3be1],
-.opt-item .left-content .content-info[data-v-423d3be1] {
+.opt-item .left-content .content-label[data-v-53bda6f7],
+.opt-item .left-content .content-info[data-v-53bda6f7] {
   font-size: 16px;
   line-height: 24px;
 }
 @media (min-width: 1201px) and (max-width: 1680px) {
-.opt-item .left-content .content-label[data-v-423d3be1],
-  .opt-item .left-content .content-info[data-v-423d3be1] {
+.opt-item .left-content .content-label[data-v-53bda6f7],
+  .opt-item .left-content .content-info[data-v-53bda6f7] {
     font-size: 14px;
     line-height: 22px;
 }
 }
 @media (min-width: 841px) and (max-width: 1200px) {
-.opt-item .left-content .content-label[data-v-423d3be1],
-  .opt-item .left-content .content-info[data-v-423d3be1] {
+.opt-item .left-content .content-label[data-v-53bda6f7],
+  .opt-item .left-content .content-info[data-v-53bda6f7] {
     font-size: 14px;
     line-height: 22px;
 }
 }
 @media (min-width: 601px) and (max-width: 840px) {
-.opt-item .left-content .content-label[data-v-423d3be1],
-  .opt-item .left-content .content-info[data-v-423d3be1] {
+.opt-item .left-content .content-label[data-v-53bda6f7],
+  .opt-item .left-content .content-info[data-v-53bda6f7] {
     font-size: 14px;
     line-height: 22px;
 }
 }
 @media (max-width: 600px) {
-.opt-item .left-content .content-label[data-v-423d3be1],
-  .opt-item .left-content .content-info[data-v-423d3be1] {
+.opt-item .left-content .content-label[data-v-53bda6f7],
+  .opt-item .left-content .content-info[data-v-53bda6f7] {
     font-size: 12px;
     line-height: 18px;
 }
 }
-.opt-item .left-content .content-label[data-v-423d3be1] {
+.opt-item .left-content .content-label[data-v-53bda6f7] {
   min-width: 120px;
   color: var(--o-color-info2);
   padding-left: 8px;
 }
-.opt-item .left-content[data-v-423d3be1] {
+.opt-item .left-content[data-v-53bda6f7] {
   /* 用户信息值 */
 }
-.opt-item .left-content .content-info[data-v-423d3be1],
-.opt-item .left-content .opt-label[data-v-423d3be1] {
+.opt-item .left-content .content-info[data-v-53bda6f7],
+.opt-item .left-content .opt-label[data-v-53bda6f7] {
   color: var(--o-color-info2);
 }
-.opt-item .left-content .content-info[data-v-423d3be1] {
+.opt-item .left-content .content-info[data-v-53bda6f7] {
   flex-grow: 1;
   margin-right: 16px;
 }
-.opt-item .left-content .content-label-en[data-v-423d3be1] {
+.opt-item .left-content .content-label-en[data-v-53bda6f7] {
   min-width: 160px;
   padding-left: 8px;
 }
-.opt-item .left-content .mask-icon[data-v-423d3be1]:hover {
+.opt-item .left-content .mask-icon[data-v-53bda6f7]:hover {
   color: var(--o-color-link2);
 }
-.opt-item.lang-en[data-v-423d3be1] {
+.opt-item.lang-en[data-v-53bda6f7] {
   width: 592px;
 }
 @media (min-width: 841px) and (max-width: 1200px) {
-.opt-item.lang-en[data-v-423d3be1] {
+.opt-item.lang-en[data-v-53bda6f7] {
     width: 480px;
 }
 }
-.icon[data-v-423d3be1] {
+.icon[data-v-53bda6f7] {
   font-size: 24px;
   line-height: 1;
 }
-.center[data-v-423d3be1] {
+.center[data-v-53bda6f7] {
   display: flex;
   align-items: center;
 }
-.center .unbind[data-v-423d3be1] {
+.center .unbind[data-v-53bda6f7] {
   margin-right: 16px;
   font-size: 16px;
   line-height: 24px;
 }
 @media (min-width: 1201px) and (max-width: 1680px) {
-.center .unbind[data-v-423d3be1] {
+.center .unbind[data-v-53bda6f7] {
     font-size: 14px;
     line-height: 22px;
 }
 }
 @media (min-width: 841px) and (max-width: 1200px) {
-.center .unbind[data-v-423d3be1] {
+.center .unbind[data-v-53bda6f7] {
     font-size: 14px;
     line-height: 22px;
 }
 }
 @media (min-width: 601px) and (max-width: 840px) {
-.center .unbind[data-v-423d3be1] {
+.center .unbind[data-v-53bda6f7] {
     font-size: 14px;
     line-height: 22px;
 }
 }
 @media (max-width: 600px) {
-.center .unbind[data-v-423d3be1] {
+.center .unbind[data-v-53bda6f7] {
     font-size: 12px;
     line-height: 18px;
 }
 }
-.center .unbind[data-v-423d3be1] .o-link-label {
+.center .unbind[data-v-53bda6f7] .o-link-label {
   color: var(--o-color-info3);
   transition: none;
   background: none;
   background-size: 0;
 }
-.skeleton-text[data-v-423d3be1] {
+.skeleton-text[data-v-53bda6f7] {
   --skeleton-item-gap: 0px;
   --skeleton-height: 32px;
   width: 440px;
 }
-[data-v-423d3be1] .o-link-normal {
+[data-v-53bda6f7] .o-link-normal {
   --link-color-hover: var(--o-color-link2);
 }
 @media screen and (max-width: 1440px) {
-.skeleton-text[data-v-423d3be1] {
+.skeleton-text[data-v-53bda6f7] {
     --skeleton-height: 28px;
 }
 }
 @media screen and (max-width: 1200px) {
-.skeleton-text[data-v-423d3be1] {
+.skeleton-text[data-v-53bda6f7] {
     --skeleton-height: 24px;
 }
 }
 @media screen and (max-width: 840px) {
-.skeleton-text[data-v-423d3be1] {
+.skeleton-text[data-v-53bda6f7] {
     --skeleton-height: 24px;
 }
 }

package/dist/treeshaking/components/user-center/OAccountSetting.vue.mjs

@@ -1,7 +1,7 @@
 import _sfc_main from "./OAccountSetting.vue2.mjs";
 import './OAccountSetting.css';
 import _export_sfc from "../../_virtual/_plugin-vue_export-helper.mjs";
-const _OAccountSetting = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-423d3be1"]]);
+const _OAccountSetting = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-53bda6f7"]]);
 export {
   _OAccountSetting as default
 };

package/dist/treeshaking/components/user-center/OAppHeader.css

@@ -1,12 +1,12 @@
-.hover-icon-rotate .o-icon[data-v-15810903] {
+.hover-icon-rotate .o-icon[data-v-c5aea772] {
   transition: all var(--o-duration-m1) var(--o-easing-standard-in);
 }
 @media (hover: hover) {
-.hover-icon-rotate:hover .o-icon[data-v-15810903] {
+.hover-icon-rotate:hover .o-icon[data-v-c5aea772] {
     transform: rotate(-180deg);
 }
 }
-.header-toolbar[data-v-15810903] {
+.header-toolbar[data-v-c5aea772] {
   display: flex;
   align-items: center;
   height: 100%;

package/dist/treeshaking/components/user-center/OAppHeader.vue.d.ts

@@ -14,6 +14,7 @@ type __VLS_Props = {
         icon?: string;
     };
     mainDomainUrl: string;
+    community?: string;
     homeUrl?: string;
     theme?: 'light' | 'dark';
     activeIndex?: number;
@@ -37,6 +38,7 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {
     onNavigate?: ((url: string) => any) | undefined;
     "onTheme-change"?: ((val: string) => any) | undefined;
 }>, {
+    community: string;
     theme: "light" | "dark";
     activeIndex: number;
     headerTitle: string;

package/dist/treeshaking/components/user-center/OAppHeader.vue.mjs

@@ -1,7 +1,7 @@
 import _sfc_main from "./OAppHeader.vue2.mjs";
 import './OAppHeader.css';
 import _export_sfc from "../../_virtual/_plugin-vue_export-helper.mjs";
-const _OAppHeader = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-15810903"]]);
+const _OAppHeader = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-c5aea772"]]);
 export {
   _OAppHeader as default
 };

package/dist/treeshaking/components/user-center/OAppHeader.vue2.mjs

@@ -15,6 +15,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     navData: {},
     logo: {},
     mainDomainUrl: {},
+    community: { default: "openEuler" },
     homeUrl: { default: "" },
     theme: { default: "light" },
     activeIndex: { default: -1 },
@@ -132,7 +133,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     ]);
     return (_ctx, _cache) => {
       return openBlock(), createBlock(OCommonHeader, {
-        community: "openEuler",
+        community: __props.community,
         logo: __props.logo,
         "nav-data": __props.navData,
         "code-data": __props.codeData,
@@ -197,7 +198,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           }, null, 8, ["theme", "onChange"])
         ]),
         _: 1
-      }, 8, ["logo", "nav-data", "code-data", "lang-options", "theme", "active-index", "simple-header", "header-title", "locale"]);
+      }, 8, ["community", "logo", "nav-data", "code-data", "lang-options", "theme", "active-index", "simple-header", "header-title", "locale"]);
     };
   }
 });

package/dist/treeshaking/components/user-center/OAsideBar.css

@@ -1,15 +1,15 @@
-.hover-icon-rotate .o-icon[data-v-e00e6ef3] {
+.hover-icon-rotate .o-icon[data-v-52e6041d] {
   transition: all var(--o-duration-m1) var(--o-easing-standard-in);
 }
 @media (hover: hover) {
-.hover-icon-rotate:hover .o-icon[data-v-e00e6ef3] {
+.hover-icon-rotate:hover .o-icon[data-v-52e6041d] {
     transform: rotate(-180deg);
 }
 }
-.aside-menu[data-v-e00e6ef3] {
+.aside-menu[data-v-52e6041d] {
   padding-top: 8px;
 }
-.aside-menu .aside-menu-item[data-v-e00e6ef3] {
+.aside-menu .aside-menu-item[data-v-52e6041d] {
   display: flex;
   align-items: center;
   gap: 8px;
@@ -21,23 +21,23 @@
   color: var(--o-color-info2);
   transition: color var(--o-duration-s) var(--o-easing-standard);
 }
-.aside-menu .aside-menu-item .menu-icon svg[data-v-e00e6ef3] {
+.aside-menu .aside-menu-item .menu-icon svg[data-v-52e6041d] {
   font-size: 24px;
   flex-shrink: 0;
   height: 24px;
   width: 24px;
 }
-.aside-menu .aside-menu-item[data-v-e00e6ef3]:hover {
+.aside-menu .aside-menu-item[data-v-52e6041d]:hover {
   background-color: var(--o-color-control3-light);
   border-radius: 4px;
   color: var(--o-color-primary1);
 }
-.aside-menu .menu-divider[data-v-e00e6ef3] {
+.aside-menu .menu-divider[data-v-52e6041d] {
   height: 1px;
   margin: 8px 8px;
   background-color: var(--o-color-control4);
 }
-.aside-menu-pad[data-v-e00e6ef3] {
+.aside-menu-pad[data-v-52e6041d] {
   background-color: var(--o-color-fill2);
   margin-top: 16px;
   border-radius: 4px;
@@ -45,19 +45,19 @@
   padding-right: 16px;
   padding-top: 0;
 }
-.aside-menu-pad .menu-divider[data-v-e00e6ef3] {
+.aside-menu-pad .menu-divider[data-v-52e6041d] {
   margin: 0;
 }
-.aside-menu-pad .aside-menu-item[data-v-e00e6ef3] {
+.aside-menu-pad .aside-menu-item[data-v-52e6041d] {
   height: 54px;
 }
-.aside-menu-pad .left-arrow[data-v-e00e6ef3] {
+.aside-menu-pad .left-arrow[data-v-52e6041d] {
   margin-left: auto;
 }
-.aside-content[data-v-e00e6ef3] {
-  padding: var(--padding-value-1) var(--padding-value-2);
+.aside-content[data-v-52e6041d] {
+  padding: var(--user-center-padding-value-1) var(--user-center-padding-value-2);
 }
-.aside-content .active[data-v-e00e6ef3] {
+.aside-content .active[data-v-52e6041d] {
   color: var(--o-color-primary1);
   background-color: var(--o-color-control3-light);
   border-radius: 4px;

package/dist/treeshaking/components/user-center/OAsideBar.vue.mjs

@@ -1,7 +1,7 @@
 import _sfc_main from "./OAsideBar.vue2.mjs";
 import './OAsideBar.css';
 import _export_sfc from "../../_virtual/_plugin-vue_export-helper.mjs";
-const _OAsideBar = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-e00e6ef3"]]);
+const _OAsideBar = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-52e6041d"]]);
 export {
   _OAsideBar as default
 };

package/dist/treeshaking/components/user-center/OLayout.css

@@ -1,30 +1,64 @@
-.hover-icon-rotate .o-icon[data-v-588133ac] {
+.hover-icon-rotate .o-icon[data-v-c7fa0ab8] {
   transition: all var(--o-duration-m1) var(--o-easing-standard-in);
 }
 @media (hover: hover) {
-.hover-icon-rotate:hover .o-icon[data-v-588133ac] {
+.hover-icon-rotate:hover .o-icon[data-v-c7fa0ab8] {
     transform: rotate(-180deg);
 }
 }
-.main-page[data-v-588133ac] {
+.main-page[data-v-c7fa0ab8] {
   display: flex;
   justify-content: center;
   width: 100%;
-  min-height: var(--page-min-height);
-  margin-top: var(--grid-gap);
-  margin-bottom: var(--container-padding-bottom);
+  min-height: var(--user-center-page-min-height);
+  margin-top: 32px;
 }
-.main-page .aside-bar[data-v-588133ac] {
+@media (min-width: 1201px) and (max-width: 1680px) {
+.main-page[data-v-c7fa0ab8] {
+    margin-top: 24px;
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.main-page[data-v-c7fa0ab8] {
+    margin-top: 16px;
+}
+}
+@media (max-width: 840px) {
+.main-page[data-v-c7fa0ab8] {
+    margin-top: 0;
+}
+}
+.main-page[data-v-c7fa0ab8] {
+  margin-bottom: var(--user-center-container-padding-bottom);
+}
+.main-page .aside-bar[data-v-c7fa0ab8] {
   flex-shrink: 0;
-  width: var(--sidebar-width);
+  width: var(--user-center-sidebar-width);
   background-color: var(--o-color-fill2);
-  margin-right: var(--layout-gap);
-  border-radius: var(--container-border-radius);
+  margin-right: 32px;
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.main-page .aside-bar[data-v-c7fa0ab8] {
+    margin-right: 24px;
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.main-page .aside-bar[data-v-c7fa0ab8] {
+    margin-right: 16px;
+}
+}
+@media (max-width: 840px) {
+.main-page .aside-bar[data-v-c7fa0ab8] {
+    margin-right: 12px;
+}
+}
+.main-page .aside-bar[data-v-c7fa0ab8] {
+  border-radius: var(--user-center-container-border-radius);
   overflow: hidden;
 }
-.main-page .main-content[data-v-588133ac] {
+.main-page .main-content[data-v-c7fa0ab8] {
   flex: 1;
   min-width: 0;
-  max-width: var(--content-width);
-  border-radius: var(--container-border-radius);
+  max-width: var(--user-center-content-width);
+  border-radius: var(--user-center-container-border-radius);
 }

package/dist/treeshaking/components/user-center/OLayout.vue.mjs

@@ -1,7 +1,7 @@
 import _sfc_main from "./OLayout.vue2.mjs";
 import './OLayout.css';
 import _export_sfc from "../../_virtual/_plugin-vue_export-helper.mjs";
-const _OLayout = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-588133ac"]]);
+const _OLayout = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-c7fa0ab8"]]);
 export {
   _OLayout as default
 };

package/dist/treeshaking/components/user-center/OLayout.vue2.mjs

@@ -1,6 +1,6 @@
 import { defineComponent, openBlock, createElementBlock, unref, renderSlot, createCommentVNode, createElementVNode } from "vue";
 import { useScreen } from "@opendesign-plus/composables";
-const _hoisted_1 = { class: "main-page" };
+const _hoisted_1 = { class: "main-page user-center" };
 const _hoisted_2 = {
   key: 0,
   class: "aside-bar"

package/dist/treeshaking/components/user-center/OTheAccountManage.css

@@ -1,26 +1,43 @@
-.hover-icon-rotate .o-icon[data-v-d3f5b5b0] {
+.hover-icon-rotate .o-icon[data-v-77534a05] {
   transition: all var(--o-duration-m1) var(--o-easing-standard-in);
 }
 @media (hover: hover) {
-.hover-icon-rotate:hover .o-icon[data-v-d3f5b5b0] {
+.hover-icon-rotate:hover .o-icon[data-v-77534a05] {
     transform: rotate(-180deg);
 }
 }
-.account-manage .user-info[data-v-d3f5b5b0] {
+.account-manage .user-info[data-v-77534a05] {
   background-color: var(--o-color-fill2);
-  margin-bottom: var(--layout-gap);
-  padding: var(--padding-value-1) var(--padding-value-2);
-  border-radius: var(--container-border-radius);
+  margin-bottom: 32px;
 }
-.account-manage .settings[data-v-d3f5b5b0] {
+@media (min-width: 1201px) and (max-width: 1680px) {
+.account-manage .user-info[data-v-77534a05] {
+    margin-bottom: 24px;
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.account-manage .user-info[data-v-77534a05] {
+    margin-bottom: 16px;
+}
+}
+@media (max-width: 840px) {
+.account-manage .user-info[data-v-77534a05] {
+    margin-bottom: 12px;
+}
+}
+.account-manage .user-info[data-v-77534a05] {
+  padding: var(--user-center-padding-value-1) var(--user-center-padding-value-2);
+  border-radius: var(--user-center-container-border-radius);
+}
+.account-manage .settings[data-v-77534a05] {
   background-color: var(--o-color-fill2);
-  padding: var(--padding-value-1) var(--padding-value-2);
-  border-radius: var(--container-border-radius);
+  padding: var(--user-center-padding-value-1) var(--user-center-padding-value-2);
+  border-radius: var(--user-center-container-border-radius);
 }
-.account-manage .user-info-pad[data-v-d3f5b5b0] {
+.account-manage .user-info-pad[data-v-77534a05] {
   background-color: transparent;
 }
-.account-manage .settings-pad[data-v-d3f5b5b0] {
+.account-manage .settings-pad[data-v-77534a05] {
   background-color: transparent;
   padding-bottom: 0;
 }

package/dist/treeshaking/components/user-center/OTheAccountManage.vue.mjs

@@ -1,7 +1,7 @@
 import _sfc_main from "./OTheAccountManage.vue2.mjs";
 import './OTheAccountManage.css';
 import _export_sfc from "../../_virtual/_plugin-vue_export-helper.mjs";
-const _OTheAccountManage = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-d3f5b5b0"]]);
+const _OTheAccountManage = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-77534a05"]]);
 export {
   _OTheAccountManage as default
 };