123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184 |
- .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;
- }
|