.narBarCon { width: 100%; position: fixed; top: 0; left: 0; height: 176rpx; .topBarCon { width: 100%; height: 176rpx; background-image: url('../../static/img/bg.png'); background-size: 100% 100%; background-repeat: no-repeat; position: relative; .itemCon { color: #fff; width: 100%; height: 60rpx; display: flex; flex-direction: row; align-items: center; padding: 0 40rpx; box-sizing: border-box; position: absolute; left: 0; bottom: 20rpx; .leftIcon { width: 10%; } .title { width: 78%; text-align: center; font-size: 36rpx; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .rightIcon { width: 12%; .yuan { margin-left: 20rpx; width: 52rpx; height: 52rpx; background-color: #fff; border-radius: 50%; display: flex; flex-direction: row; align-items: center; justify-content: center; } } } } .searchOptions { width: 100%; height: auto; position: absolute; margin-top: 0; z-index: 999; display: flex; flex-direction: column; background-color: #fff; .myList { width: 100%; height: 100rpx; display: flex; flex-direction: row; align-items: center; justify-content: space-around; border-bottom: 1px solid #ccc; .name { width: 70%; font-size: 28rpx; } } } .addMenuCon { position: absolute; z-index: 99; right: 20rpx; top: 175rpx; width: 210rpx; height: 310rpx; background-color: #444; border-radius: 12rpx; color: white; font-size: 28rpx; } .addMenuCon::after { content: ''; position: absolute; top: -10rpx; left: 60%; width: 0; height: 0; border-left: 10rpx solid transparent; border-right: 10rpx solid transparent; border-bottom: 10rpx solid #444; } .addMenuConZhe { position: absolute; z-index: 90; width: 100vw; height: 100vh; top: 0; left: 0; } .close-icon { position: absolute; right: 28rpx; bottom: 28rpx; } }