feat: add WeChat and Alipay support section with QR code toggle functionality

This commit is contained in:
Will Miao
2025-05-02 19:15:54 +08:00
parent 2e3da03723
commit 44be75aeef
5 changed files with 85 additions and 1 deletions

View File

@@ -117,9 +117,49 @@
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
/* QR Code section styles */
.qrcode-toggle {
width: 100%;
margin-top: var(--space-2);
justify-content: center;
position: relative;
}
.qrcode-toggle .toggle-icon {
margin-left: 8px;
transition: transform 0.3s ease;
}
.qrcode-toggle.active .toggle-icon {
transform: rotate(180deg);
}
.qrcode-container {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease, opacity 0.3s ease;
opacity: 0;
display: flex;
flex-direction: column;
align-items: center;
}
.qrcode-container.show {
max-height: 500px;
opacity: 1;
margin-top: var(--space-3);
}
.qrcode-image {
max-width: 100%;
height: auto;
border-radius: var(--border-radius-sm);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
border: 1px solid var(--lora-border);
}
.support-footer {
text-align: center;
margin-top: var(--space-1);
font-style: italic;
color: var(--text-color);
}