elica品牌店设计方案

/* 三个按钮容器: 一排，间距舒适 */

.button-row {

display: flex;

flex-direction: row;

justify-content: center;

align-items: center;

gap: 0rem;

flex-wrap: nowrap;

}

/* 每个按钮项: 图标+文字, 垂直布局, 悬停区域 */

.btn-item {

display: flex;

flex-direction: column;

align-items: center;

cursor: pointer;

transition: transform 0.2s cubic-bezier(0.2, 0.9, 0.4, 1.1);

position: relative;

border-radius: 2rem;

background: rgba(255, 255, 255, 0.5);

backdrop-filter: blur(4px);

transition: all 0.25s ease;

}

.btn-item:hover {

transform: translateY(-6px);

background: rgba(255, 255, 255, 0.95);

box-shadow: 0 12px 22px -10px rgba(0, 0, 0, 0.15);

}

/* 按钮图片样式 (原始图标 wx.png / xhs.png / i.png) */

.btn-icon {

width: 40px;

height: 40px;

object-fit: contain;

display: block;

margin-bottom:5px;

pointer-events: none; /* 让图片不干扰鼠标事件, 统一由父级处理hover */

filter: drop-shadow(0 2px 4px rgba(0,0,0,0.05));

transition: filter 0.2s;

}

/* ------- 二维码弹出层 (绝对定位，悬停时显示) ------- */

.qrcode-popup {

position: absolute;

bottom: 100%; /* 位于按钮上方 */

left: 50%;

transform: translateX(-50%) translateY(-12px);

background: #ffffff;

border-radius: 28px;

padding: 16px 18px 14px 18px;

box-shadow: 0 20px 35px -12px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0,0,0,0.05);

display: flex;

flex-direction: column;

align-items: center;

gap: 8px;

z-index: 300;

opacity: 0;

visibility: hidden;

transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;

pointer-events: none; /* 避免鼠标移动到二维码上导致悬停闪烁, 完全由按钮控制 */

border: 1px solid rgba(0,0,0,0.05);

backdrop-filter: blur(0px);

}

/* 小三角箭头 (指向按钮) */

.qrcode-popup::after {

content: ”;

position: absolute;

top: 100%;

left: 50%;

transform: translateX(-50%);

width: 0;

height: 0;

border-left: 10px solid transparent;

border-right: 10px solid transparent;

border-top: 10px solid #ffffff;

filter: drop-shadow(0 1px 1px rgba(0,0,0,0.05));

}

/* 二维码图片 */

.qrcode-img {

width: 140px;

height: 140px;

object-fit: contain;

display: block;

border-radius: 16px;

background: #fff;

}

/* 悬停时显示二维码 */

.btn-item:hover .qrcode-popup {

opacity: 1;

visibility: visible;

transform: translateX(-50%) translateY(-20px);

}