.switchPage { position: fixed; bottom: 0; left: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; width: 100%; height: 0px; .switchPageCase { position: absolute; bottom: 0; padding: 0 10px; display: flex; align-items: center; justify-content: center; border-radius: 14px; overflow: hidden; height: 8px; width: 80px; background: rgba(94, 121, 143, .65); transition: height .5s ease; margin: 0 0 6px 0; &:hover { height: 50px; width: auto; .switchPageLi { display: flex; } } } .switchPageLi { padding: 10px; display: none; height: 100%; overflow: hidden; opacity: 0.8; &:hover { opacity: 1; } } .switchPageList { display: flex; align-items: center; justify-content: center; flex-direction: column; height: 100%; >img { height: 100%; cursor: pointer; } } }