.tab-bar { position: fixed; bottom: 0; left: 0; right: 0; height: 48px; padding-bottom: 34px !important; background: white; display: flex; justify-content: space-between; box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.6); padding-bottom: env(safe-area-inset-bottom); } .tab-bar-border { /* background-color: rgba(0, 0, 0, 0.33); */ position: absolute; left: 0; top: 0; width: 100%; height: 1px; transform: scaleY(0.5); } .tab-bar-item { /* width: 60px; */ flex: 1; height: 80px; } .tab-bar-item view { flex: 1; text-align: center; display: flex; justify-content: center; align-items: center; flex-direction: column; } .tabImg { width: 26px; height: 26px; position: absolute; top: 7px; } .tab-bar-item:nth-child(2) .tabImg{ width: 24px; height: 24px; } .tab-bar-item:nth-child(3) .tabImg{ width: 28px; height: 28px; } .tab-bar-item:nth-child(6) .tabImg{ width: 22px; height: 22px; } .tabText { margin-top: 36px; } .tab-bar-item view { font-size: 10px; } .middle { position: relative; top: -15px; width: 70px; height: 70px; left: 50%; transform: translateX(-50%); padding-top: 10px; border-radius: 50%; box-sizing: border-box; /* border-top: 1px solid rgba(0, 0, 0, 0.33); */ box-shadow: 0px -6px 10px -8px rgba(0, 0, 0, 0.6); background-color: #fff; } .middle image { width: 80%; height: 80%; } .biggerSize2 { position: relative; } .biggerSize2::after { content: ""; /* display: inline-block; */ width: 100px; height: 70px; position: absolute; left: 50%; top: 50%; z-index: 99; transform: translate(-50%, -50%); }