chore:电话按钮客服按钮背景白色圈改成正圆
This commit is contained in:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user