chore:电话按钮客服按钮背景白色圈改成正圆

This commit is contained in:
2025-12-19 17:18:36 +08:00
parent 95375d5476
commit ed5181b382

View File

@@ -236,46 +236,42 @@ export default {
</script>
<style scoped>
/* 父容器:不限制高度,避免挤压按钮 */
.fixed-box {
position: fixed;
right: 0;
right: 20rpx; /* 增加右侧边距,避免贴边 */
bottom: 200rpx;
z-index: 10;
border-radius: 120rpx;
padding: 20rpx 0;
z-index: 9999;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100rpx;
box-sizing: border-box;
gap: 14rpx; /* 替代margin更稳定 */
}
/* 核心修改:确保按钮背景是正圆 */
/* 核心:强制按钮为正方形+正圆 */
.btn-item {
display: flex;
justify-content: center;
align-items: center;
width: 80rpx;
height: 80rpx;
margin: 14rpx 0;
/* 强制正圆使用远大于宽高的固定值比50%更稳定 */
border-radius: 100rpx;
/* 确保背景色是白色(即使图片加载失败也能看到正圆) */
background-color: #ffffff;
/* 防止边框/内边距影响宽高比 */
box-sizing: border-box;
/* 移除默认边框button标签可能有默认边框 */
border: none;
/* 清除默认内边距 */
padding: 0;
position: relative;
transition: all 0.1s ease;
/* 防止背景图片拉伸导致视觉上的非正圆 */
background-position: center;
background-repeat: no-repeat;
/* 宽高强制相等,必须是正方形 */
width: 88rpx !important;
height: 88rpx !important;
/* 强制正圆(优先级最高) */
border-radius: 50% !important;
/* 白色背景(确保是圆) */
background-color: #ffffff !important;
/* 背景图居中显示,不拉伸 */
background-size: 60% 60% !important;
background-position: center !important;
background-repeat: no-repeat !important;
/* 清除默认样式 */
border: none !important;
padding: 0 !important;
margin: 0 !important;
/* 居中内容 */
display: flex !important;
justify-content: center !important;
align-items: center !important;
/* 阴影增强视觉(可选) */
box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.1);
}
/* 清除button标签的默认点击样式微信小程序/浏览器) */
.btn-item::after {
border: none !important;