angelo
/
web-base-h5
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(raised-tabbar): tab组件样式调整

This commit is contained in:
woody 2025-07-25 16:49:19 +08:00
parent 93cad9032e
commit abc9fc5b98
1 changed files with 14 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
components/raised-tabbar.vue
View File

@ -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;