.m-tab-bar { position: fixed; bottom: 0; left: 0; right: 0; height: 62px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; } .m-tab-list { display: flex; width: 100%; flex-direction: row; } .bg-tab-bar { position: fixed; bottom: 0; left: 0; right: 0; flex-direction: column; z-index: -1; display: flex; } .bg-bottom { background: white; padding-bottom: env(safe-area-inset-bottom); } .m-tab-box { display: flex; padding-top: 26px; padding-bottom: env(safe-area-inset-bottom); flex: 1; } .m-tab-box-l { padding-right: 40px; } .m-tab-box-r { padding-left: 40px; } /* .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); } */ .m-tab-bar-item { flex: 1; text-align: center; display: flex; padding: 13px 0 10px 0; justify-content: center; align-items: center; flex-direction: column; } .m-tab-bar-item image { width: 22px; height: 22px; display: block; } .m-tab-bar-item view { font-size: 10px; } .scan-code-btn-view { display: flex; flex-direction: column; position: fixed; left: calc(50vw - 38px); bottom: 100px; padding-bottom: env(safe-area-inset-bottom); } .scan-code-btn { width: 80px; height: 80px; position: fixed; }