.main-view{ width:100vw; height:100vh; overflow: hidden; } .voice-btn{ position: absolute; width: 72px; height: 72px; background: rgba(0, 0, 0, 0.5); left: 30px; top: 30px; border-radius: 50%; z-index: 99999; } page { -webkit-user-select: none; user-select: none; width: 100%; height:100vh; overflow-x: hidden; overflow-y: hidden; } .music-view{ position: absolute; right: 30px; top: 38px; font-family: "Verdana"; font-weight: 400; font-size: 24px; color: #fff; z-index: 9; .icon-yinle{ width: 32px; height: 38.5px; color: #fff; margin-right: 20px; } } .mask-lottery{ position: fixed; width: 100vw; height: 100vh; left: 0px; top: 0px; z-index: 999; background-color: transparent; .main{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 450px; height: 594px; border-radius: 60px; box-sizing: border-box; padding-top: 78px; // padding-left:30px; text-align: center } .win{ width: 100%; height: 1026px; padding-top: 0px; background-image: url('https://dm.static.elab-plus.com/miniProgram/red-get.png'); background-repeat: no-repeat; background-size: cover; // backdrop-filter: blur(30px); // background: linear-gradient(360deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 64, 64, 0.8)100%); // border: 6px solid #ffb8a7; } .win-title{ font-family: "Helvetica Bold"; font-weight: 700; font-size: 44px; color: #fff; margin-top: 362px; margin-bottom: 38px; } .win-info{ color: rgb(255, 255, 255); font-family: Verdana; font-weight: 700; margin-bottom: 36px; font-size: 100px; // line-height: 100px; box-sizing: border-box; } .win-unit{ font-size: 52px; margin-bottom: 10px; } .win-messges{ font-family: "Verdana Bold"; font-weight: 700; font-size: 40px; color: #931029; } .fail{ background: linear-gradient(360deg, #fff 0%, #ffeaea 100%); } .btn{ width: 290px; height: 84px; border-radius: 40px; background: #fff; font-family: "Helvetica Neue Bold"; font-weight: 700; font-size: 32px; color: #ff895e; } .btn-style{ position: absolute; bottom: 180px; left: 50%; transform: translateX(-50%); } .common-style{ position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); background: #c96161; color: #fff; } .common-title{ font-family: "Helvetica Bold"; font-weight: 700; font-size: 44px; color: #5f1a1a; margin-bottom: 20px; } .common-desc{ font-family: "Helvetica"; font-weight: 400; font-size: 26px; color: rgba(39, 39, 39, 0.6); margin-bottom: 20px; } .common-img{ width: 192.46px; height: 144.6px; opacity: 0.24; } .common-img1{ margin-top: 48px; width: 204.72px; height: 148.5px; opacity: 0.46; object-fit: cover; } .imgSty2{ margin-top: 23px; width: 158px; height: 172.24px; } .imgSty3{ width: 111px; height: 111px; } .icon-cancel{ position: absolute; right: -30px; top: -50px; font-size: 50px; color: #fff; } .win .icon-cancel{ position: absolute; right: 60px; top: 75px; font-size: 50px; color: #fff; } } .lottie-view{ position: fixed; left: 0px; top: 0px; width: 100vw; height: 100vh; z-index: 9999; pointer-events: none; }