/* 通用样式 */
body {
    font-family: Arial, sans-serif; /* 设置字体 */
    margin: 0; /* 去掉默认的边距 */
    padding: 20px; /* 添加内边距 */
    background-color: #f4f4f9; /* 背景颜色 */
}

/* 二维码容器样式 */
.qr-container {
    position: relative; /* 使子元素可以绝对定位 */
    display: inline-block; /* 使元素适应内容 */
}

/* 二维码样式 */
.qr-code {
    display: none; /* 初始隐藏二维码 */
    position: absolute; /* 绝对定位 */
    bottom: 100%; /* 在图标上方 */
    left: 50%; /* 居中对齐 */
    transform: translateX(-50%); /* 使其完全居中 */
    background: white; /* 背景颜色 */
    border: 1px solid #ccc; /* 边框样式 */
    padding: 10px; /* 内边距 */
    z-index: 1000; /* 确保在上层可见 */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 添加阴影 */
}

/* 鼠标悬停时显示二维码 */
.qr-container:hover .qr-code {
    display: block; /* 鼠标悬停时显示二维码 */
}

/* 图标样式 */
.iconfont {
    font-size: 24px; /* 图标大小 */
    color: #333; /* 图标颜色 */
    transition: color 0.3s; /* 添加过渡效果 */
}

.iconfont:hover {
    color: #007bff; /* 悬停时改变颜色 */
}