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