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

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

@@ -0,0 +1,495 @@
+.hover-icon-rotate .o-icon[data-v-fee1bcb7] {
+  transition: all var(--o-duration-m1) var(--o-easing-standard-in);
+}
+@media (hover: hover) {
+.hover-icon-rotate:hover .o-icon[data-v-fee1bcb7] {
+    transform: rotate(-180deg);
+}
+}
+.info-title[data-v-fee1bcb7] {
+  border-bottom: 1px solid var(--o-color-control4);
+}
+@media (max-width: 840px) {
+.info-title[data-v-fee1bcb7] {
+    border-bottom: none;
+}
+}
+.title[data-v-fee1bcb7] {
+  font-size: 24px;
+  line-height: 32px;
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.title[data-v-fee1bcb7] {
+    font-size: 20px;
+    line-height: 28px;
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.title[data-v-fee1bcb7] {
+    font-size: 18px;
+    line-height: 26px;
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.title[data-v-fee1bcb7] {
+    font-size: 18px;
+    line-height: 26px;
+}
+}
+@media (max-width: 600px) {
+.title[data-v-fee1bcb7] {
+    font-size: 16px;
+    line-height: 24px;
+}
+}
+.title[data-v-fee1bcb7] {
+  color: var(--o-color-info1);
+  padding-bottom: var(--o-gap-3);
+  font-weight: 600;
+}
+.title-desc[data-v-fee1bcb7] {
+  font-size: 14px;
+  line-height: 28px;
+  color: var(--o-color-info2);
+  margin-bottom: var(--o-gap-5);
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.title-desc[data-v-fee1bcb7] {
+    line-height: 26px;
+}
+}
+@media (max-width: 1200px) {
+.title-desc[data-v-fee1bcb7] {
+    line-height: 24px;
+}
+}
+.common-item[data-v-fee1bcb7] {
+  display: flex;
+  align-items: center;
+  margin-top: 24px;
+  color: var(--o-color-info1);
+  font-size: 16px;
+  line-height: 24px;
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.common-item[data-v-fee1bcb7] {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.common-item[data-v-fee1bcb7] {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.common-item[data-v-fee1bcb7] {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (max-width: 600px) {
+.common-item[data-v-fee1bcb7] {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+.common-item[data-v-fee1bcb7] .o_input-input {
+  font-size: 16px;
+  line-height: 24px;
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.common-item[data-v-fee1bcb7] .o_input-input {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.common-item[data-v-fee1bcb7] .o_input-input {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.common-item[data-v-fee1bcb7] .o_input-input {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (max-width: 600px) {
+.common-item[data-v-fee1bcb7] .o_input-input {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+.common-item[data-v-fee1bcb7] .o_input-input {
+  color: var(--o-color-info2);
+}
+.common-item[data-v-fee1bcb7] {
+  /* 用户信息值 */
+}
+.common-item .text[data-v-fee1bcb7],
+.common-item .username[data-v-fee1bcb7],
+.common-item .common-value[data-v-fee1bcb7],
+.common-item .org-name[data-v-fee1bcb7] {
+  color: var(--o-color-info2);
+}
+.common-item[data-v-fee1bcb7] {
+  /* 行内 label 由自定义 div 承担，隐藏 OFormItem 自带 label */
+}
+.common-item[data-v-fee1bcb7] .o-form-item-label {
+  display: none;
+}
+.common-item[data-v-fee1bcb7] {
+  /* 隐藏的 label 节点仍在 DOM 中，OpenDesign 的
+     `.o-form-item-label + .o-form-item-main { margin-left: var(--form-label-main-gap) }`
+     依旧命中，需以同级相邻选择器提高特异性覆盖为 0 */
+}
+.common-item[data-v-fee1bcb7] .o-form-item-label + .o-form-item-main,
+.common-item[data-v-fee1bcb7] .o-form-item-main {
+  margin-left: 0;
+  flex: 1;
+}
+.common-item .sig-info[data-v-fee1bcb7] {
+  display: flex;
+  align-items: center;
+}
+.common-item .common-label[data-v-fee1bcb7] {
+  width: 96px;
+  min-width: 96px;
+  margin-right: var(--o-r-gap-8);
+  color: var(--o-color-info2);
+}
+@media (max-width: 840px) {
+.common-item .common-label[data-v-fee1bcb7] {
+    color: var(--o-color-info1);
+}
+}
+.common-item .common-label-en[data-v-fee1bcb7] {
+  width: 150px;
+  min-width: 150px;
+  margin-right: var(--o-r-gap-8);
+  font-size: 16px;
+  line-height: 24px;
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.common-item .common-label-en[data-v-fee1bcb7] {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.common-item .common-label-en[data-v-fee1bcb7] {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.common-item .common-label-en[data-v-fee1bcb7] {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (max-width: 600px) {
+.common-item .common-label-en[data-v-fee1bcb7] {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+.common-item[data-v-fee1bcb7] .o_box-main {
+  width: 480px;
+  height: 40px;
+  border-radius: 4px;
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.common-item[data-v-fee1bcb7] .o_box-main {
+    width: 360px;
+}
+}
+@media (max-width: 1200px) {
+.common-item[data-v-fee1bcb7] .o_box-main {
+    width: 320px;
+}
+}
+.common-item .username[data-v-fee1bcb7],
+.common-item .common-value[data-v-fee1bcb7] {
+  padding-left: 16px;
+}
+.common-item[data-v-fee1bcb7]:not(:first-child) {
+  height: 40px;
+  line-height: 40px;
+}
+.common-item[data-v-fee1bcb7]:not(:first-child) .o-input.o_box-medium {
+  height: 100%;
+}
+.user-avatar[data-v-fee1bcb7] {
+  --form-item-align: center;
+}
+.user-avatar .avatar[data-v-fee1bcb7] {
+  width: auto;
+  height: auto;
+  position: relative;
+  display: flex;
+  flex-shrink: 0;
+}
+@media (hover: hover) {
+.user-avatar .avatar:hover .avatar-img-mask[data-v-fee1bcb7] {
+    display: flex;
+}
+}
+.user-avatar .avatar .avatar-img-mask[data-v-fee1bcb7] {
+  cursor: pointer;
+  position: absolute;
+  background-color: var(--o-color-info4);
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  top: 0;
+  align-items: center;
+  justify-content: center;
+  display: none;
+  color: var(--o-color-info1-inverse);
+  font-size: 24px;
+  cursor: pointer;
+}
+.aside-userinfo[data-v-fee1bcb7] {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-bottom: var(--o-gap-5);
+  border-bottom: 1px solid var(--o-color-control4);
+  justify-content: center;
+  width: 100%;
+  min-width: 0;
+  overflow: hidden;
+}
+.aside-userinfo .o-form-layout-h[data-v-fee1bcb7] {
+  width: 100%;
+}
+.aside-userinfo .user-avatar[data-v-fee1bcb7] {
+  margin-right: 0;
+}
+.aside-item[data-v-fee1bcb7] {
+  margin-top: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  height: fit-content !important;
+  line-height: fit-content !important;
+  width: 100%;
+  min-width: 0;
+}
+.aside-item .username[data-v-fee1bcb7] {
+  font-size: 24px;
+  line-height: 32px;
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.aside-item .username[data-v-fee1bcb7] {
+    font-size: 20px;
+    line-height: 28px;
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.aside-item .username[data-v-fee1bcb7] {
+    font-size: 18px;
+    line-height: 26px;
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.aside-item .username[data-v-fee1bcb7] {
+    font-size: 18px;
+    line-height: 26px;
+}
+}
+@media (max-width: 600px) {
+.aside-item .username[data-v-fee1bcb7] {
+    font-size: 16px;
+    line-height: 24px;
+}
+}
+.aside-item .username[data-v-fee1bcb7] {
+  font-weight: 600;
+  height: 26px;
+  line-height: 26px;
+  margin-top: 4px;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding-left: 0;
+}
+.aside-item[data-v-fee1bcb7] {
+  /* 侧边栏简要信息：昵称 · 公司
+     两个文本各占 (100% - 8px(点) - --user-center-padding-value-2) / 2 的固定宽度，
+     昵称左对齐（从第一个字显示，省略号紧贴 ·），公司紧贴 · 向右展开（尾部省略），
+     超出各自宽度即显示省略号 */
+}
+.aside-item .brief-info[data-v-fee1bcb7] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 4px;
+  font-size: 14px;
+  line-height: 18px;
+  color: var(--o-color-info3);
+  width: 100%;
+  min-width: 0;
+}
+.aside-item .brief-info .brief-nickname[data-v-fee1bcb7],
+.aside-item .brief-info .brief-company[data-v-fee1bcb7] {
+  flex: 0 1 auto;
+  /* 上限：(100% - 8px(点) - --user-center-padding-value-2) / 2；
+     内容不超过上限时按内容自然显示（不出现省略号），超出才截断为 ... */
+  max-width: calc((100% - 8px - var(--user-center-padding-value-2)) / 2);
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  /* 覆盖 .aside-item 的 text-align: center，保证从首个字符开始显示 */
+  text-align: left;
+}
+.aside-item .brief-info .brief-dot[data-v-fee1bcb7] {
+  flex-shrink: 0;
+  width: 8px;
+  text-align: center;
+}
+@media (max-width: 840px) {
+.aside-item .brief-info[data-v-fee1bcb7] {
+    margin-bottom: 16px;
+}
+}
+.btn[data-v-fee1bcb7] {
+  margin-top: 24px;
+}
+.btn[data-v-fee1bcb7] .o-btn-large {
+  font-size: 16px;
+  line-height: 24px;
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.btn[data-v-fee1bcb7] .o-btn-large {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.btn[data-v-fee1bcb7] .o-btn-large {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.btn[data-v-fee1bcb7] .o-btn-large {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (max-width: 600px) {
+.btn[data-v-fee1bcb7] .o-btn-large {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+.btn[data-v-fee1bcb7] .o-btn-large {
+  border-radius: 20px;
+}
+.btn[data-v-fee1bcb7] .o-btn {
+  min-width: 112px;
+  width: 112px;
+  height: 40px;
+}
+.org-input[data-v-fee1bcb7] .o-form-item-label {
+  display: none;
+}
+.org-input[data-v-fee1bcb7] .o-form-item-label + .o-form-item-main,
+.org-input[data-v-fee1bcb7] .o-form-item-main {
+  margin-left: 0;
+}
+.userinfo-pad[data-v-fee1bcb7] {
+  flex-direction: column;
+  justify-content: center;
+  background-color: var(--o-color-fill2);
+  padding-bottom: 16px;
+  padding-top: 16px;
+  border-radius: 8px;
+}
+.userinfo-pad .common-item[data-v-fee1bcb7] {
+  justify-content: center !important;
+  border-bottom: none !important;
+}
+.userinfo-pad .common-item .username[data-v-fee1bcb7] {
+  margin-right: 0 !important;
+}
+.userinfo-pad .common-item .avatar[data-v-fee1bcb7] {
+  margin-right: 0 !important;
+}
+.userinfo-pad .common-item .avatar .img-avatar[data-v-fee1bcb7] {
+  margin-right: 0 !important;
+}
+.userinfo-pad .aside-item .username[data-v-fee1bcb7] {
+  padding-left: 0;
+}
+.input-org[data-v-fee1bcb7] {
+  display: flex;
+  margin-right: 16px;
+  align-items: center;
+}
+.input-org .org-name[data-v-fee1bcb7] {
+  margin-right: 8px;
+}
+.userinfo-settings-pad[data-v-fee1bcb7] {
+  background-color: var(--o-color-fill2);
+  border-radius: 4px;
+  border-bottom: none;
+  padding: 0 16px;
+}
+.userinfo-settings-pad .common-item[data-v-fee1bcb7] {
+  margin-top: 0;
+  border-bottom: 1px solid var(--o-color-control4);
+  height: 52px;
+  justify-content: space-between;
+}
+.userinfo-settings-pad .common-item .common-value[data-v-fee1bcb7] {
+  color: var(--o-color-info2);
+}
+.userinfo-settings-pad .common-item .username[data-v-fee1bcb7] {
+  color: var(--o-color-info2);
+}
+.userinfo-settings-pad .common-item .org-name[data-v-fee1bcb7] {
+  color: var(--o-color-info2);
+}
+.userinfo-settings-pad .common-item[data-v-fee1bcb7] {
+  /* 值区域与用户名一致：靠右对齐、同一右缩进 */
+}
+.userinfo-settings-pad .common-item .org-input[data-v-fee1bcb7] {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+.userinfo-settings-pad .common-item .avatar[data-v-fee1bcb7] {
+  display: flex;
+  justify-content: center;
+}
+.userinfo-settings-pad .common-item .avatar .img-avatar[data-v-fee1bcb7] {
+  margin-right: 8px;
+}
+.userinfo-settings-pad .common-item[data-v-fee1bcb7]:last-child {
+  border-bottom: none;
+}
+.userinfo-settings-pad .input-org[data-v-fee1bcb7] {
+  margin-right: 0;
+}
+.title-pad[data-v-fee1bcb7] {
+  border-bottom: none;
+}
+.label-role[data-v-fee1bcb7] {
+  display: flex;
+  align-items: center;
+}
+.label-role .o-icon[data-v-fee1bcb7] {
+  --icon-size: 16px;
+  margin-left: 8px;
+  cursor: pointer;
+}