@font-face { font-family: "iconfont"; /* Project id 4374774 */ src: url("//at.alicdn.com/t/c/font_4374774_pt88dt6fxcj.woff2?t=1741923897019") format("woff2"), url("//at.alicdn.com/t/c/font_4374774_pt88dt6fxcj.woff?t=1741923897019") format("woff"), url("//at.alicdn.com/t/c/font_4374774_pt88dt6fxcj.ttf?t=1741923897019") format("truetype"); } .iconfont { font-family: "iconfont" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-home:before { content: "\e7e1"; } .icon-message:before { content: "\e78a"; } .icon-shop:before { content: "\e7e5"; } .icon-user:before { content: "\e7ae"; } .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); */ padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/ padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/ min-height: 72px; } .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; font-size: 24px; position: absolute; top: 6px; fill: red; } .tabText { margin-top: 34px; } .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: 36px; height: 36px; } .middle .tabImg { top: 13px; } .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%); }