From 8cb958c9e764e864e0271b1f7efd6020e721f5fe Mon Sep 17 00:00:00 2001 From: MNZhu Date: Tue, 21 Feb 2023 19:47:41 +0800 Subject: [PATCH 1/2] =?UTF-8?q?feat(userhead):=20=E5=A2=9E=E5=8A=A0?= =?UTF-8?q?=E7=A7=BB=E5=8A=A8=E7=AB=AF=E5=A4=B4=E5=83=8F=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: MNZhu --- src/user-head/index.js | 17 ++++++ src/user-head/index.less | 123 +++++++++++++++++++++++++++++++++++++++ src/user-head/vars.less | 17 ++++++ 3 files changed, 157 insertions(+) create mode 100644 src/user-head/index.js create mode 100644 src/user-head/index.less create mode 100644 src/user-head/vars.less diff --git a/src/user-head/index.js b/src/user-head/index.js new file mode 100644 index 0000000..d261c33 --- /dev/null +++ b/src/user-head/index.js @@ -0,0 +1,17 @@ +/** + * Copyright (c) 2022 - present TinyVue Authors. + * Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd. + * + * Use of this source code is governed by an MIT-style license. + * + * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL, + * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR + * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS. + * + */ + +export default { + "tiny-mobile-userhead-head-icon-size-normal": "20px", + "tiny-mobile-userhead-head-icon-size-small": "16px", + "tiny-mobile-userhead-head-border-radius": "15%", +}; diff --git a/src/user-head/index.less b/src/user-head/index.less new file mode 100644 index 0000000..1b8d378 --- /dev/null +++ b/src/user-head/index.less @@ -0,0 +1,123 @@ +/** +* Copyright (c) 2022 - present TinyVue Authors. +* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd. +* +* Use of this source code is governed by an MIT-style license. +* +* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL, +* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR +* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS. +* +*/ + +@import '../custom.less'; +@import './vars.less'; + +@user-head-prefix-cls: ~'@{css-prefix}mobile-user-head'; + +.@{user-head-prefix-cls} { + .component-css-vars-user-head(); + + display: inline-block; + position: relative; + + &__portrait { + overflow: hidden; + text-align: center; + border-radius: var(--ti-mobile-userhead-head-border-radius); + background-position: center center; + background-repeat: no-repeat; + background-size: cover; + + &.round { + border-radius: 50%; + } + + &.min { + width: var(--ti-mobile-userhead-head-size-small); + height: var(--ti-mobile-userhead-head-size-small); + line-height: var(--ti-mobile-userhead-head-size-small); + } + + &.icon { + font-size: var(--ti-mobile-userhead-head-icon-size-normal); + + &.min { + font-size: var(--ti-mobile-userhead-head-icon-size-small); + } + + svg { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + } + } + + &.label { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + + > span { + overflow: hidden; + width: calc(~'100% - 6px'); + display: block; + margin: 0 3px; + font-size: 20px; + } + } + } + + &__message { + position: absolute; + top: -9px; + height: 18px; + line-height: 16px; + min-width: 18px; + width: auto; + border-radius: 9px; + background: red; + color: #fff; + text-align: center; + padding: 0 2px; + border: 2px solid #fff; + font-size: 12px; + word-break: initial; + + &.round { + top: 0; + left: 54px; + } + + &.min { + top: -9px; + left: 21px; + } + + &.basic { + top: -4px; + left: 68px; + height: 8px; + width: 8px; + min-width: 8px; + line-height: 0; + border-radius: 4px; + + &.round { + top: 10px; + left: 64px; + } + + &.min { + top: -4px; + left: 26px; + + &.round { + top: 0; + } + } + } + } +} diff --git a/src/user-head/vars.less b/src/user-head/vars.less new file mode 100644 index 0000000..21672ac --- /dev/null +++ b/src/user-head/vars.less @@ -0,0 +1,17 @@ +/** +* Copyright (c) 2022 - present TinyVue Authors. +* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd. +* +* Use of this source code is governed by an MIT-style license. +* +* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL, +* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR +* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS. +* +*/ + +.component-css-vars-user-head() { + --ti-mobile-userhead-head-icon-size-normal: 20px; + --ti-mobile-userhead-head-icon-size-small: 16px; + --ti-mobile-userhead-head-border-radius: 15%; +} From 124a1d60593c0cdfec07d7480269003bfd094854 Mon Sep 17 00:00:00 2001 From: MNZhu Date: Wed, 22 Feb 2023 09:40:13 +0800 Subject: [PATCH 2/2] =?UTF-8?q?fix(userhead):=20=E9=85=8D=E7=BD=AE?= =?UTF-8?q?=E9=BB=98=E8=AE=A4=E8=83=8C=E6=99=AF=E8=89=B2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: MNZhu --- src/user-head/index.js | 1 + src/user-head/index.less | 1 + src/user-head/vars.less | 1 + 3 files changed, 3 insertions(+) diff --git a/src/user-head/index.js b/src/user-head/index.js index d261c33..cb44918 100644 --- a/src/user-head/index.js +++ b/src/user-head/index.js @@ -14,4 +14,5 @@ export default { "tiny-mobile-userhead-head-icon-size-normal": "20px", "tiny-mobile-userhead-head-icon-size-small": "16px", "tiny-mobile-userhead-head-border-radius": "15%", + "tiny-mobile-userhead-head-bg-color": "#4a79fe", }; diff --git a/src/user-head/index.less b/src/user-head/index.less index 1b8d378..d7c8c3f 100644 --- a/src/user-head/index.less +++ b/src/user-head/index.less @@ -28,6 +28,7 @@ background-position: center center; background-repeat: no-repeat; background-size: cover; + background-color: var(--ti-mobile-userhead-head-bg-color); &.round { border-radius: 50%; diff --git a/src/user-head/vars.less b/src/user-head/vars.less index 21672ac..a5abfef 100644 --- a/src/user-head/vars.less +++ b/src/user-head/vars.less @@ -14,4 +14,5 @@ --ti-mobile-userhead-head-icon-size-normal: 20px; --ti-mobile-userhead-head-icon-size-small: 16px; --ti-mobile-userhead-head-border-radius: 15%; + --ti-mobile-userhead-head-bg-color: var(--ti-mobile-common-bg-color-main, #4a79fe); }