.A3hotList { position: absolute; top: 50%; right: 0; transform: translate(0, -50%); width: 250px; height: 100%; z-index: 30001; display: flex; align-items: center; justify-content: flex-end; :global { .A3main { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 10px; width: 250px; height: 100%; background: url('../../assets/img/hotlist_bg.png') center center; background-size: 100% 100%; color: rgba(43, 31, 23, 0.9); font-size: 17px; font-weight: 500; font-family: 'fzFont'; overflow: auto; padding-bottom: 40px; // 隐藏滚动条 &::-webkit-scrollbar { display: none; } .A3title { padding: 40px 0 30px 0; font-size: 24px; font-weight: 400; color: rgba(43, 31, 23, 0.9); } .A3item { display: flex; align-items: center; justify-content: center; width: 100%; height: fit-content; padding: 4px 3px; cursor: pointer; &:hover { background-color: rgba(163, 124, 79, 1); } } .A3close { position: fixed; bottom: 0; width: 250px; height: 40px; background-color: rgba(148, 113, 76, 0.9); border-top: 1px solid rgba(43, 31, 23, 0.1); cursor: pointer; &:hover { opacity: 1; } img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 24px; height: 24px; opacity: 0.6; } } } } } @media screen and (max-width: 600px) { .A3hotList { width: 100%; height: 50%; transform: translate(0, -100%); :global { .A3main { width: 100%; height: 100%; background: url('../../assets/img/hotlist_bg.png') center center; background-size: 100% 100%; padding-bottom: 20px; .A3title { padding: 20px 0 10px 0; font-size: 16px; } .A3item { font-size: 14px; padding: 10px 3px; &:touch { background-color: rgba(163, 124, 79, 1); } } .A3close { width: 100%; height: 20px; background-color: rgba(148, 113, 76, 0.9); border-top: 1px solid rgba(43, 31, 23, 0.1); img { width: 16px; height: 16px; } } } } } }