.A1Home { background-size: 100% 100%; position: relative; :global { .A1locBox { position: absolute; z-index: 3; width: 158px; height: 129px; .A1locBoxName { text-align: center; background-image: url('../../assets/img/btn_normal.png'); background-size: 100% 100%; width: 158px; height: 34px; display: flex; justify-content: center; align-items: center; letter-spacing: 2px; color: var(--themeColor2); font-weight: 700; transition: all .3s; } .A1locBoxLoc { margin: 15px auto 0; width: 60px; height: 60px; background-image: url('../../assets/img/homeB.png'); background-size: 100% 100%; transition: all .3s; } } .A1locBoxHide { .A1locBoxName, .A1locBoxLoc { opacity: 0; } } .A1locHover { position: absolute; z-index: 3; background-size: 100% 100%; opacity: 0; transition: all .3s; cursor: pointer; &>div { position: absolute; top: -50px; left: 50%; transform: translateX(-50%); width: 188px; height: 50px; padding-bottom: 16px; &>div { width: 100%; height: 100%; text-align: center; background-image: url('../../assets/img/btn_active.png'); background-size: 100% 100%; display: flex; justify-content: center; align-items: center; letter-spacing: 2px; color: var(--themeColor); font-weight: 700; } } &:hover { opacity: 1; } } // .A1locHoverAc { // opacity: 1; // } .A1leftBtn { position: absolute; left: 70px; bottom: 60px; z-index: 1; width: 138px; height: 40px; line-height: 38px; text-align: center; color: #fff; letter-spacing: 2px; font-size: 18px; background-image: url('../../assets/img/btn_s_normal.png'); background-size: 100% 100%; cursor: pointer; } .A1mapBox { position: absolute; z-index: 20; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; transition: all .3s; .A1back { position: absolute; bottom: 50px; left: 50px; cursor: pointer; width: 60px; height: 60px; background-image: url('../../assets/img/back.png'); background-size: 100% 100%; } .A1mapRow { position: absolute; z-index: 3; cursor: pointer; width: 50px; height: 50px; .A1mapRowDian { width: 100%; height: 100%; background-image: url('../../assets/img/homeB.png'); background-size: 100% 100%; margin: 0 auto 0px; } &>p { padding-top: 8px; color: #fff; } &:hover { .A1mapRowDian { background-image: url('../../assets/img/homeBAc.png'); } &>P { color: var(--themeColor2); } } .A1mapTxt { transition: all .3s; opacity: 0; pointer-events: none; background-color: var(--themeColor); padding: 6px; border-radius: 4px; width: 300px; height: auto; position: absolute; &>div { width: 100%; height: 100%; border: 1px solid var(--themeColor2); border-radius: 4px; padding: 20px 20px; color: var(--themeColor2); &>h3 { font-size: 18px; text-align: center; } .A1mapXian { width: 100%; height: 16px; background-image: url('../../assets/img/line.png'); background-size: 100% 100%; margin: 15px 0; } &>p { text-indent: 2em; font-size: 14px; line-height: 22px; letter-spacing: 2px; } } } &:hover { .A1mapTxt { opacity: 1; } } } } .A1mapBoxShow { opacity: 1; pointer-events: auto; } } }