@media screen and (max-width: 750px) { html { font-size: calc(100vw / 7.5); } } @media screen and (min-width: 750px) { html { font-size: calc(450px / 7.5); } } html, body, div, ul, li, p { padding: 0; margin: 0; } ul, li { list-style: none; } .code-container{ width: 7.5rem; height: 10.44rem; margin: 0 auto; position: relative; background: url(../../static/img/springFestivalActivity/bg.png) no-repeat; background-size: 100% 100%; padding-bottom: 0.5rem; } .award-tip{ width: 7.5rem; height: 0.56rem; line-height: 0.56rem; text-align: center; position: absolute; top: 3.6rem; left: 50%; transform: translateX(-50%); color: #FF4747; font-size: 0.26rem; text-shadow: 0 0 0.12rem rgba(170, 0, 0, 0.46); background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.64) 49%, rgba(255, 255, 255, 0) 100%); } .rule-wrap{ position: absolute; top: 0.56rem; right: 0; } .rule,.award{ width: 1.3rem; height: 0.64rem; line-height: 0.64rem; text-align: center; padding-left: 0.2rem; background: url(../../static/img/springFestivalActivity/rule.png) no-repeat; background-size: 100% 100%; font-size: 0.24rem; font-weight: 600; color: #FFFFFF; } .award{ margin-top: 0.2rem; } .gift-box{ width: 5.18rem; height: 4.68rem; position: absolute; top: 4.2rem; left: 1.06rem; } .have-buff{ animation: mymove2 1.6s infinite; } @keyframes mymove2 { 0% {transform: translateY(0) scale(1);} 50% {transform: translateY(-0.2rem) scale(1.05);} 100% {transform: translateY(0) scale(1);} } .gift-img{ width: 100%; height: 100%; } .next-container{ width: 7.5rem; height: 9.18rem; position: relative; background: url(../../static/img/springFestivalActivity/nextBg.png) no-repeat; background-size: 100% 100%; margin: auto; margin-top: -2.52rem; } .lottery-tip{ position: absolute; top: 2.5rem; left: 50%; transform: translateX(-50%); font-size: 0.24rem; color: #EE0B1A; } .lottery-wrap{ position: absolute; top: 3rem; left: 50%; transform: translateX(-50%); display: flex; justify-content: space-between; } .once,.five-times{ width: 3.2rem; height: 1rem; line-height: 1rem; text-align: center; background: url(../../static/img/springFestivalActivity/award.png) no-repeat; background-size: 100% 100%; font-size: 0.24rem; font-weight: 600; color: #FFFFFF; } .five-times{ margin-left: 0.3rem; } .rest-times{ width: 6.7rem; height: 0.7rem; line-height: 0.7rem; background: #FFBEAF; border-radius: 0.35rem; border: 0.04rem solid #FF8585; position: absolute; top: 4.2rem; left: 50%; transform: translateX(-50%); display: flex; justify-content: space-between; } .rest-times-text{ font-size: 0.3rem; color: #EE0B1A; margin-left: 0.3rem; } .get-times{ position: absolute; top: -0.04rem; right: -0.064rem; width: 2.46rem; height: 0.8rem; line-height: 0.8rem; text-align: center; background: url(../../static/img/springFestivalActivity/getTimer.png) no-repeat; background-size: 100% 100%; font-size: 0.24rem; font-weight: 600; color: #FFF5D3; padding-left: 0.2rem; } .no-join-activity{ width: 4.8rem; position: absolute; bottom: 3.6rem; left: 50%; transform: translateX(-50%); font-size: 0.24rem; color: rgba(238, 11, 26, 0.6); } .share-wrap{ position: absolute; bottom: 2.1rem; left: 50%; transform: translateX(-50%); width: 6.7rem; height: 0.94rem; line-height: 0.94rem; text-align: center; background: rgba(255, 109, 109, 0); border: 0.02rem solid #EE0B1A; font-size: 0.3rem; font-weight: 600; color: rgba(238, 11, 26, 0.8); border-radius: 0.2rem; } .get-award{ position: absolute; bottom: 1.4rem; left: 50%; transform: translateX(-50%); font-size: 0.32rem; font-weight: 600; text-decoration: underline; color: #EE0B1A; } .activity-time{ width: 100%; position: absolute; bottom: 0.8rem; text-align: center; font-size: 0.28rem; color: rgba(238, 11, 26, 0.6); } .activity-tip{ width: 100%; position: absolute; bottom: 0.4rem; text-align: center; font-size: 0.28rem; color: rgba(238, 11, 26, 0.6); } .no-times-tip{ position: absolute; top: 3.94rem; left: 50%; transform: translateX(-50%); font-size: 0.32rem; font-weight: 600; color: #FFFAA5; line-height: 0.6rem; text-shadow: 0 0 0.1rem rgba(222, 13, 16, 0.7); } .no-times-btn{ position: absolute; bottom: 0.54rem; left: 50%; transform: translateX(-50%); width: 4.6rem; height: 1.02rem; line-height: 1.02rem; text-align: center; background: url(../../static/img/springFestivalActivity/noTimes.png) no-repeat; background-size: 100% 100%; font-size: 0.34rem; font-weight: 600; color: #EE0B1A; } .award-record-mask,.rule-mask,.award-mask,.award-result-mask,.distribution-mask { width: 100%; height: 100vh; position: fixed; top: 0; left: 0; background: rgba(0, 0, 0, 0.24); display: none; } .dialog { width: 5.97rem; height: 8.7rem; background: url(../../static/img/springFestivalActivity/record-bg.png) no-repeat; background-size: 100% 100%; border-radius: 0.2rem; position: absolute; left: 50%; top: -10.96rem; z-index: 999; transform: translateX(-50%); } .tab-wrap{ width: 4.52rem; height: 0.62rem; background: url(../../static/img/springFestivalActivity/selectedBg.png) no-repeat; background-size: 100% 100%; text-align: center; margin: auto; margin-top: 1.36rem; font-size: 0.28rem; display: flex; justify-content: space-between; align-items: center; padding: 0 0.3rem; } .award-change-btn{ width: 1.92rem; height: 0.54rem; line-height: 0.52rem; color: #FFE4BD; } .active{ color: #EE0B1A; background: url(../../static/img/springFestivalActivity/selected.png) no-repeat; background-size: 100% 100%; } .record-wrap{ margin: auto; margin-top: 0.2rem; width: 5.48rem; /* height: 6.16rem; */ height: 5.2rem; background: rgba(255, 255, 255, 0); border-radius: 0.12rem; border: 0.02rem solid rgba(255, 214, 189, 0.7); } .title-row{ display: flex; justify-content: space-between; padding: 0.1rem 0.48rem; margin-top: 0.14rem; font-size: 0.28rem; font-weight: 600; color: #FFF5BD; } .line{ width: 5.28rem; height: 0.02rem; background: linear-gradient(117deg, rgba(255, 219, 209, 0) 0%, #FEB4A4 47%, rgba(254, 180, 164, 0) 100%); } .data-list{ height: 5.22rem; padding: 0.1rem 0.2rem; overflow-y: scroll; } .data-row{ display: flex; justify-content: space-between; margin-bottom: 0.24rem; font-size: 0.28rem; color: #FFE4BD; } .record-operate{ width: 1.08rem; height: 0.52rem; line-height: 0.52rem; text-align: center; background: rgba(255, 245, 189, 0.5); border-radius: 0.26rem; font-size: 0.24rem; color: #D40D1A; } .sure-btn{ width: 3.22rem; height: 0.76rem; line-height: 0.76rem; text-align: center; position: absolute; bottom: 0.2rem; left: 50%; transform: translateX(-50%); background: url(../../static/img/springFestivalActivity/sureBg.png) no-repeat; background-size: 100% 100%; font-size: 0.34rem; color: #FFF5BD; } .close,.rule-close,.award-close,.award-result-close{ width: 0.56rem; height: 0.56rem; position: absolute; left: 50%; bottom: -1rem; transform: translateX(-50%); } .rule-dialog{ width: 7rem; height: 8.42rem; background: url(../../static/img/springFestivalActivity/ruleBg.png) no-repeat; background-size: 100% 100%; border-radius: 0.2rem; position: absolute; left: 50%; top: -10.96rem; transform: translateX(-50%); } .rule-text{ position: absolute; width: 3.4rem; height: 1.14rem; top: 0.72rem; left: 50%; transform: translateX(-50%); } .rule-list{ width: 4.76rem; position: absolute; bottom: 1.1rem; left: 50%; transform: translateX(-50%); font-size: 0.26rem; color: #BE000D; } .rule-point{ width: 4.76rem; margin-top: 0.3rem; } .award-dialog{ width: 7rem; height: 8.42rem; background: url(../../static/img/springFestivalActivity/awardBg.png) no-repeat; background-size: 100% 100%; border-radius: 0.2rem; position: absolute; left: 50%; top: -10.96rem; transform: translateX(-50%); } .award-result-row{ margin-top: 2.8rem; display: flex; justify-content: center; align-items: center; } .icon{ width: 0.5rem; height: 0.26rem; margin-right: 0.1rem; } .award-result{ color: #FFF5BD; font-size: 0.28rem; margin: 0 0.1rem; } .card-wrap{ display: flex; justify-content: center; flex-wrap: wrap; margin: auto; margin-top: 0.2rem; } .card-item{ margin: 0.18rem; text-align: center; } .card{ width: 1.4rem; height: 1.4rem; } .card-text{ font-size: 0.28rem; color: #FFF5BD; margin-top: -0.14rem; } .award-result-dialog{ width: 7.5rem; height: 9.64rem; background: url(../../static/img/springFestivalActivity/resultBg.png) no-repeat; background-size: 100% 100%; border-radius: 0.2rem; position: absolute; left: 50%; top: -10.86rem; transform: translateX(-50%); } .award-result-wrap{ width: 5.6rem; } .result-tip-row{ margin-top: 2rem; text-align: center; } .award-result-tip{ font-size: 0.32rem; font-weight: 600; color: #FFFAA5; line-height: 0.44rem; text-shadow: 0 0 0.1rem rgba(222, 13, 16, 0.7); color: linear-gradient(180deg, #FFF3E0 0%, #FFFAA5 100%); } .join-result-tip{ margin-top: 0.1rem; font-size: 0.24rem; color: #FFFAA5; } .one-card{ margin-top: 0.54rem; width: 2.4rem; height: 2.4rem; } .btn-row{ width: 5.6rem; display: flex; margin: auto; margin-top: 0.5rem; } .left-btn{ width: 3.02rem; height: 1.02rem; line-height: 1.02rem; text-align: center; background: url(../../static/img/springFestivalActivity/report.png) no-repeat; background-size: 100% 100%; font-size: 0.34rem; font-weight: 600; color: #EE0B1A; margin-left: 0.3rem; } .look-btn{ width: 1.8rem; height: 1.02rem; line-height: 1.02rem; text-align: center; background: url(../../static/img/springFestivalActivity/lookBg.png) no-repeat; background-size: 100% 100%; font-size: 0.34rem; color: #FFF5BD; margin-left: 0.3rem; } .times-text{ font-size: 0.24rem; color: #FFE4BD; margin-left: 1.6rem; margin-top: 0.06rem; } .one-result{ margin-bottom: 1.2rem; } .distribution-dialog{ width: 6.22rem; height: 2.8rem; border-radius: 0.2rem; position: absolute; left: 50%; top: -10.96rem; transform: translateX(-50%); background-color: #FFFFFF; } .limit-tip{ margin-top: 0.4rem; text-align: center; font-size: 0.32rem; color: #333333; padding-bottom: 0.5rem; border-bottom: 0.01rem solid rgba(238,238,238,1); } .distribution-btn{ font-size: 0.32rem; font-weight: 600; color: #3B7FFF; text-align: center; margin-top: 0.24rem; } .operate-btn{ background: linear-gradient(180deg, #FFFBE0 0%, #FFF6C4 56%, #FFFBE0 100%); } #toast-container>.toast-error { background-image: none !important; } .toast-error { background-color: rgba(0, 0, 0, 0.8); } #toast-container>div { font-size: 14px; min-width: 80px !important; padding: 12px !important; box-shadow: none; } .toast-center-center { min-width: 100px; top: 50%; left: 50%; text-align: center; transform: translateX(-50%); } @media (max-width: 480px) and (min-width: 241px) { #toast-container>div { min-width: 80px !important; width: auto; } }