.A2visit2 { position: relative; :global { .A22bacImgOk { position: relative; z-index: 9; width: 100%; height: 100%; img { width: 100%; height: 100%; object-fit: fill; } } video { width: 100%; height: 100%; object-fit: fill; } .A22imgBox { width: 100%; height: 100%; transition: all 0.5s; position: relative; z-index: 2; // 3个视频 .A22videoBox { position: absolute; top: 0; left: 0; width: 100%; height: 100%; .A22video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; // transition: all 0.3s; } } // 底部 .A22btn { position: absolute; z-index: 1; left: 50%; bottom: 15px; transform: translateX(-50%); display: flex; .A22btnRow { cursor: pointer; width: 100px; height: 32px; display: flex; justify-content: center; align-items: center; color: #fffddc; background-size: 100% 100%; transition: transform 0.3s; &:hover { transform: scale(1.1); } } } // 加载进度条 .A22xian { position: absolute; bottom: 10%; left: 50%; transform: translateX(-50%); width: 100px; padding: 0 10px; height: 2px; & > div { width: 100%; height: 100%; background-color: rgba(231, 214, 142, 0.6); & > div { width: 0%; height: 100%; background-color: #fffddc; } } } } // 全景图 .A22Pano { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; // 左下角按钮 .A22Pbtn { cursor: pointer; position: absolute; z-index: 10; bottom: 12px; left: 50%; transform: translateX(-50%); width: 100px; height: 32px; display: flex; justify-content: center; align-items: center; color: #fffddc; background-size: 100% 100%; transition: transform 0.3s; &:hover { transform: translateX(-50%) scale(1.1); } } } // 百戏 .A22baiXi { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 20; background-size: 100% 100%; #BtnRight { bottom: 60px; } // 底部 .pvfloor { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); display: flex; z-index: 31; .pvflRow { width: 60px; height: 70px; position: relative; cursor: pointer; .pvflR1 { position: absolute; width: 100%; height: 100%; z-index: 3; top: 0; left: 0; background-size: 100% 100%; transition: all 0.3s; background-image: url('../../assets/img/Vector1.png'); } .pvflR2 { position: absolute; width: 100%; height: 100%; z-index: 2; top: 0; left: 0; text-align: center; & > img { width: 50px; height: auto; } } .pvflR3 { opacity: 0.3; position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%); width: 56px; z-index: 4; color: #fffddc; font-size: 14px; transition: all 0.3s; text-align: center; } &:hover { .pvflR1 { z-index: 1; background-image: url('../../assets/img/Vector2.png'); } .pvflR3 { opacity: 1; background-image: url('../../assets/img/danceAc.png'); background-size: 100% auto; background-repeat: no-repeat; background-position: center; } } } .pvflRowAc { .pvflR1 { z-index: 1; background-image: url('../../assets/img/Vector2.png'); } .pvflR3 { opacity: 1; background-image: url('../../assets/img/danceAc.png'); background-size: 100% auto; background-repeat: no-repeat; background-position: center; } } } // 视频 .A22BvideoBox { transition: all 0.3s; position: absolute; width: 100%; height: 100%; } } } }