diff --git a/src/components/FollowUserCard/index.scss b/src/components/FollowUserCard/index.scss index 6f18048..51f47db 100644 --- a/src/components/FollowUserCard/index.scss +++ b/src/components/FollowUserCard/index.scss @@ -58,17 +58,38 @@ padding: 6px 16px; border-radius: 20px; white-space: nowrap; + position: relative; + background: transparent !important; + + // 使用伪元素实现真正的 0.5px 边框 + &::before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 200%; + height: 200%; + border: 1px solid; + border-radius: 40px; // 20px * 2 + transform: scale(0.5); + transform-origin: 0 0; + pointer-events: none; + box-sizing: border-box; + } .button_text { font-family: PingFang SC; font-weight: 400; font-size: 12px; line-height: 16px; + position: relative; + z-index: 1; } &.follow_button { - border: 0.5px solid #000000 !important; - background: transparent !important; + &::before { + border-color: #000000; + } .button_text { color: #000000 !important; @@ -76,8 +97,9 @@ } &.following_button { - border: 0.5px solid rgba(120, 120, 128, 0.12) !important; - background: transparent !important; + &::before { + border-color: rgba(120, 120, 128, 0.2); + } .button_text { color: rgba(0, 0, 0, 0.8) !important; @@ -85,8 +107,9 @@ } &.mutual_button { - border: 0.5px solid rgba(120, 120, 128, 0.12) !important; - background: transparent !important; + &::before { + border-color: rgba(120, 120, 128, 0.2); + } .button_text { color: rgba(0, 0, 0, 0.8) !important; diff --git a/src/other_pages/comment_reply/index.scss b/src/other_pages/comment_reply/index.scss index 756d654..b978140 100644 --- a/src/other_pages/comment_reply/index.scss +++ b/src/other_pages/comment_reply/index.scss @@ -172,7 +172,7 @@ .quote-line { width: 2px; height: 14px; - background: rgba(120, 120, 128, 0.12); + background: rgba(120, 120, 128, 0.2); border-radius: 7px; flex-shrink: 0; } @@ -194,7 +194,7 @@ align-items: center; gap: 4px; padding: 4px 8px; - background: rgba(120, 120, 128, 0.12); + background: rgba(120, 120, 128, 0.2); border-radius: 20px; width: fit-content; margin-top: 4px; diff --git a/src/other_pages/new_follow/index.scss b/src/other_pages/new_follow/index.scss index c0d331b..3397685 100644 --- a/src/other_pages/new_follow/index.scss +++ b/src/other_pages/new_follow/index.scss @@ -154,18 +154,36 @@ justify-content: center; align-items: center; padding: 4px 16px; - border: 0.5px solid #000000; border-radius: 20px; cursor: pointer; flex-shrink: 0; + position: relative; + background: transparent; + + // 使用伪元素实现真正的 0.5px 边框 + &::before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 200%; + height: 200%; + border: 1px solid #000000; + border-radius: 40px; // 20px * 2 + transform: scale(0.5); + transform-origin: 0 0; + pointer-events: none; + box-sizing: border-box; + } &:active { opacity: 0.8; } &.mutual { - border-color: rgba(120, 120, 128, 0.12); - background: transparent; + &::before { + border-color: rgba(120, 120, 128, 0.2); + } } .button-text { @@ -174,6 +192,8 @@ font-size: 12px; line-height: 1.33; color: #000000; + position: relative; + z-index: 1; } &.mutual .button-text { diff --git a/src/user_pages/follow/index.scss b/src/user_pages/follow/index.scss index 8400038..059a280 100644 --- a/src/user_pages/follow/index.scss +++ b/src/user_pages/follow/index.scss @@ -47,12 +47,7 @@ height: 30px; margin-right: 7px; - .action_icon { - width: 20px; - height: 20px; - background: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Ccircle cx='5' cy='10' r='1.5' fill='%23191919'/%3E%3Ccircle cx='10' cy='10' r='1.5' fill='%23191919'/%3E%3Ccircle cx='15' cy='10' r='1.5' fill='%23191919'/%3E%3C/g%3E%3C/svg%3E") no-repeat center; - background-size: contain; - } + } } diff --git a/src/user_pages/wallet/index.scss b/src/user_pages/wallet/index.scss index 78ace31..28ca752 100644 --- a/src/user_pages/wallet/index.scss +++ b/src/user_pages/wallet/index.scss @@ -205,7 +205,7 @@ justify-content: space-between; align-items: center; padding: 12px 20px; - border-bottom: 0.5px solid rgba(120, 120, 128, 0.12); + border-bottom: 0.5px solid rgba(120, 120, 128, 0.2); position: sticky; top: -1px; background-color: #fff;