60 lines
1008 B
SCSS
60 lines
1008 B
SCSS
// 微信二维码样式
|
|
|
|
.wechat-container {
|
|
position: relative;
|
|
cursor: pointer;
|
|
z-index: 1000;
|
|
}
|
|
|
|
.wechat-icon {
|
|
display: inline-block;
|
|
}
|
|
|
|
.qr-code {
|
|
position: absolute;
|
|
bottom: 100%;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
background: white;
|
|
padding: 8px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.qr-code img {
|
|
width: 150px;
|
|
height: 150px;
|
|
display: block;
|
|
}
|
|
|
|
.wechat-container:hover .qr-code {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
|
|
/* 夜间模式样式 */
|
|
[data-scheme="dark"] .qr-code {
|
|
background: #3B2B33;
|
|
box-shadow: 0 2px 10px rgba(0,0,0,0.5);
|
|
}
|
|
|
|
/* 默认隐藏深色二维码 */
|
|
.qr-code .qr-dark {
|
|
display: none;
|
|
}
|
|
|
|
.qr-code .qr-light {
|
|
display: block;
|
|
}
|
|
|
|
/* 在深色模式下切换显示 */
|
|
[data-scheme="dark"] .qr-code .qr-dark {
|
|
display: block;
|
|
}
|
|
|
|
[data-scheme="dark"] .qr-code .qr-light {
|
|
display: none;
|
|
} |