.header{ position: fixed; background: #fff; top: 0; left: 0; right: 0; z-index: 999; padding-left: 32rpx; padding-right: 32rpx; padding-top:calc(var(--status-bar-height) + 32rpx); padding-bottom: 32rpx; border-bottom: 1px solid #f5f5f5; .search{ height: 80rpx; background: #f5f5f5; border-radius: 8rpx; font-size: 32rpx; color: #999; display: flex; align-items: center; padding-left: 30rpx; } .iconfont{ margin-right: 20rpx; margin-top: 4rpx; font-size: 40rpx; } span{ font-size: 32rpx; color: #999; } } .left{ height: 100%; width: 160rpx; position: fixed; left: 0px; bottom: 0px; z-index: 210; background: #f5f5f5; box-sizing: border-box; padding-top:calc(var(--status-bar-height) + 130rpx); } .aaa{ background: url(../../../static/img/2019.png); display: inline-block; height: 50rpx; width: 50rpx; background-size: 50rpx 1000rpx; } .title{ padding-top: 10px; padding-bottom: 10px; display: flex; justify-content: center; flex-direction: column; align-items: center; span{ padding-top: 3px; line-height: 24px; color: #333; font-size: 12px; } } .active{ background: #ffffff; } .right{ margin-left: 160rpx; padding-left: 12rpx; padding-right: 12rpx; display: flex; align-items: center; flex-wrap: wrap; overflow: hidden; overflow-y: overlay; height: 100%; padding-top:calc(var(--status-bar-height) + 152rpx); background: #ffffff; } .title_a{ width: 29%; display: flex; align-items: center; flex-direction: column; padding: 0px 6px; image{ width: 124rpx; height: 124rpx; } }