diff --git a/components/raised-tabbar.vue b/components/raised-tabbar.vue index 39e4982..6558bed 100644 --- a/components/raised-tabbar.vue +++ b/components/raised-tabbar.vue @@ -184,18 +184,19 @@ export default { height: 60px; background: #ffffff; - // 中间凸起的圆形背景 - // .raised-circle { - // position: absolute; - // top: -30rpx; - // left: 50%; - // transform: translateX(-50%); - // width: 110rpx; - // height: 110rpx; - // background: #ffffff; - // border-radius: 50%; - // box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); - // } + // 使用伪元素创建拱形切口 + &::before { + content: ''; + position: absolute; + top: -20px; + left: 50%; + transform: translateX(-50%); + width: 80px; + height: 40px; + background: transparent; + border-radius: 0 0 40px 40px; + box-shadow: 0 20px 0 0 #ffffff; + } // 添加底部安全区域 &::after { @@ -285,7 +286,7 @@ export default { // box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); position: relative; // 添加呼吸动画 - animation: breathe 3s ease-in-out infinite; + // animation: breathe 3s ease-in-out infinite; .center-image { width: 92rpx;