添加钉钉官方logo到登录按钮:使用钉钉官方logo图片替换通用图标

This commit is contained in:
Your Name 2026-01-02 13:12:09 +08:00
parent 2f73a15694
commit 02cab58447

View File

@ -194,11 +194,17 @@
<a-button
v-if="dingTalkLoginEnabled"
block
class="alt-login-button"
class="alt-login-button dingtalk-login-button"
@click="handleDingTalkLogin"
:loading="dingTalkLoginLoading"
>
<Icon name="share" size="sm" style="margin-right: 8px;" />
<img
src="https://img.alicdn.com/imgextra/i1/O1CN01CHK9VA1YTzZJxXGf7_!!6000000003022-2-tps-400-400.png"
alt="钉钉"
class="dingtalk-logo"
onerror="this.style.display='none'; this.nextSibling.style.display='inline-block';"
/>
<span class="dingtalk-logo-text" style="display: none;">D</span>
钉钉登录
</a-button>
</div>
@ -884,6 +890,9 @@ onUnmounted(() => {
color: $text-white;
font-size: $font-size-base;
transition: all 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
&:hover:not(:disabled) {
background: $bg-tertiary;
@ -892,6 +901,24 @@ onUnmounted(() => {
&:disabled {
opacity: 0.5;
}
}
.dingtalk-login-button {
background: #0070f3;
border-color: #0070f3;
color: #ffffff;
&:hover:not(:disabled) {
background: #0051cc;
border-color: #0051cc;
}
.dingtalk-logo {
width: 20px;
height: 20px;
margin-right: 8px;
vertical-align: middle;
cursor: not-allowed;
}
}