.overflowS { overflow: scroll; -webkit-overflow-scrolling: touch; } .overflowDot { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .marginC { margin: 0 auto; } @-webkit-keyframes wiggle { 10% { -webkit-transform: rotate(3deg) scale3d(1.1, 1.1, 1.1); transform: rotate(3deg) scale(1.1); } 20% { -webkit-transform: rotate(-3deg) scale3d(1.1, 1.1, 1.1); transform: rotate(-3deg) scale(1.1); } 30% { -webkit-transform: rotate(3deg) scale3d(1.1, 1.1, 1.1); transform: rotate(3deg) scale(1.1); } 40% { -webkit-transform: rotate(-3deg) scale3d(1.1, 1.1, 1.1); transform: rotate(-3deg) scale(1.1); } 50% { -webkit-transform: rotate(3deg) scale3d(1.1, 1.1, 1.1); transform: rotate(3deg) scale(1.1); } 60% { -webkit-transform: rotate(-3deg) scale(1.1); transform: rotate(-3deg) scale(1.1); } 70% { -webkit-transform: rotate(0deg) scale3d(1.1, 1.1, 1.1); transform: rotate(0deg) scale(1); } to { -webkit-transform: rotate(0deg) scale3d(1.1, 1.1, 1.1); transform: rotate(0deg) scale(1); } } @keyframes wiggle { 10% { -webkit-transform: rotate(3deg) scale3d(1.1, 1.1, 1.1); transform: rotate(3deg) scale(1.1); } 20% { -webkit-transform: rotate(-3deg) scale3d(1.1, 1.1, 1.1); transform: rotate(-3deg) scale(1.1); } 30% { -webkit-transform: rotate(3deg) scale3d(1.1, 1.1, 1.1); transform: rotate(3deg) scale(1.1); } 40% { -webkit-transform: rotate(-3deg) scale3d(1.1, 1.1, 1.1); transform: rotate(-3deg) scale(1.1); } 50% { -webkit-transform: rotate(3deg) scale3d(1.1, 1.1, 1.1); transform: rotate(3deg) scale(1.1); } 60% { -webkit-transform: rotate(-3deg) scale(1.1); transform: rotate(-3deg) scale(1.1); } 70% { -webkit-transform: rotate(0deg) scale3d(1.1, 1.1, 1.1); transform: rotate(0deg) scale(1); } to { -webkit-transform: rotate(0deg) scale3d(1.1, 1.1, 1.1); transform: rotate(0deg) scale(1); } } .rule-btn { width: 1.15rem; position: fixed; right: 0.15rem; top: 5.5rem; z-index: 50; animation-name: wiggle; -webkit-animation-name: wiggle; animation-duration: 2s; -webkit-animation-duration: 2s; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; } @keyframes line { 0% { height: 0.2rem; } 50% { height: 0.05rem; } 100% { height: 0.2rem; } } @-webkit-keyframes line { 0% { height: 0.2rem; } 50% { height: 0.05rem; } 100% { height: 0.2rem; } } .lines { display: inline-block; width: 1px; height: 0.2rem; background: #fff; position: absolute; left: 0.12rem; bottom: 0.08rem; animation-name: line; -webkit-animation-name: line; animation-duration: 0.5s; -webkit-animation-duration: 0.5s; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; z-index: 1; border: 0; box-shadow: 0 0.03rem 0.03rem #a3320a; } .lines1 { left: 0.2rem; animation-delay: 0.1s; } .lines2 { left: 0.28rem; animation-delay: 0.2s; } .alert { min-width: 2rem; max-width: 8rem; min-height: 1rem; line-height: 1rem; text-align: center; background: rgba(0, 0, 0, 0.8); color: #fff; position: fixed; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); font-size: 0.4rem; padding: 0rem 0.3rem; z-index: 99999; border-radius: 0.1rem; white-space: nowrap; } [v-cloak] { display: none; } html, body { position: relative; height: 100%; background: #1F0D33; } .header { width: 10rem; height: 1.6rem; position: fixed; top: 0; left: 50%; margin-left: -5rem; z-index: 5; padding: 0 0.4rem; box-sizing: border-box; } .header .language, .header .center, .header .recharge { height: 1.6rem; line-height: 1.6rem; font-size: 0.4rem; color: #fff; } .header .language a, .header .center a, .header .recharge a { color: #fff; } .header .language { float: left; width: 3.866rem; position: relative; } .header .language ul{ position: absolute; left: 0; top: 1.28rem; width: 3.866rem; z-index: 10; background-color: #1E4E7B; border-radius: 0.106rem; -webkit-border-radius: 0.106rem; -moz-border-radius: 0.106rem; } .header .language i{ background: url(../img/phonedown.png) no-repeat; background-size: 100% 100%; display: inline-block; width: 0.173rem; height: 0.093rem; vertical-align: middle; margin-right: 0.226rem; } .header .language i.check{ background: url(../img/phoneup.png) no-repeat; background-size: 100% 100%; } .header .language ul li{ text-align: center; color:#6BCBFD; font-size: 0.346rem; height: 1.2rem; line-height: 1.2rem; } .header .language .jt { width: 0.2rem; position: relative; top: -0.05rem; } .header .logo { display: block; width: 2.2rem; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); } .header .recharge { float: right; } .swiper-container { width: 100%; height: 100%; } .swiper-slide { text-align: center; font-size: 18px; background-size: 100% 100%; } .swiper-slide1 { text-align: center; font-size: 18px; background-image: url(../img/bg1.png); } .swiper-slide2 { text-align: center; font-size: 18px; background-image: url(../img/bg2.png); } .swiper-slide3 { text-align: center; font-size: 18px; background-image: url(../img/bg3.png); } .title { width: 7.7rem; display: block; margin: 0 auto; margin-top: 2.2rem; } .img3 { display: block; width: 6.6rem; position: absolute; left: 1.9rem; top: 7rem; z-index: 5; transition: top 0.5s; } .img2 { display: block; width: 8.85rem; position: absolute; left: 0.6rem; top: 8rem; z-index: 4; transition: top 0.8s; } .img1 { display: block; width: 1.65rem; position: absolute; left: 3.5rem; top: 9rem; z-index: 3; transition: top 1s; } .img3s { top: 2.3rem; } .img2s { top: 3.3rem; } .img1s { top: 7rem; } .txt1 { display: block; width: 6.38rem; position: absolute; top: 9.4rem; left: 50%; transform: translate(-50%, 0); -webkit-transform: translate(-50%, 0); z-index: 2; } .txt2 { display: block; width: 8.5rem; position: absolute; top: 1.7rem; left: 50%; transform: translate(-50%, 0); -webkit-transform: translate(-50%, 0); z-index: 2; } .width-box { width: 10rem; height: 8.25rem; position: absolute; top: 3.7rem; left: 50%; transform: translate(-50%, 0); -webkit-transform: translate(-50%, 0); z-index: 5; } .img-box { width: 8.2rem; height: 8.25rem; margin: 0 auto; } .img-box .man { width: 6.2rem; display: block; position: absolute; top: 0; left: 50%; margin-left: -3.1rem; transition: all 0.5s; } .img-box .man.mid.left { transform: translateX(-0.9rem) scale(0.87); } .img-box .man.sm.left { transform: translateX(-1.7rem) scale(0.76); } .img-box .man.mid.right { transform: translateX(0.9rem) scale(0.87); } .img-box .man.sm.right { transform: translateX(1.7rem) scale(0.76); } .img-box .man.cen { z-index: 3; } .img-box .man.mid { z-index: 2; } .img-box .man.sm { z-index: 1; } .download { width: 7.36rem; height: 1.173rem; line-height: 1.173rem; position: fixed; bottom: 1.68rem; font-size: 0.426rem; color:#FFF; left: 50%; text-align: center; transform: translate(-50%, 0); -webkit-transform: translate(-50%, 0); z-index: 5; border: 2px solid #FFF; border-radius: 0.666rem; -webkit-border-radius: 0.666rem; -moz-border-radius: 0.666rem; } .bottom { display: block; width: 5rem; position: fixed; left: 50%; bottom: 0.5rem; transform: translate(-50%, 0); -webkit-transform: translate(-50%, 0); z-index: 5; } .note { width: 10rem; font-size: 0.3rem; text-align: center; color: #8B7E83; position: fixed; left: 50%; transform: translate(-50%, 0); -webkit-transform: translate(-50%, 0); z-index: 5; } .note1 { bottom: 0.9rem; } .note2 { bottom: 0.5rem; } .layer-box,.layer-box2{ width: 7.2rem; height: 6.973rem; background: url(../img/phonembg.png) no-repeat; background-size: 100% 100%; position: relative; } .layui-layer-close2{ display: none !important; } .layui-layer{ border-radius: 0.5rem !important; } .layui-layer-page .layui-layer-content{ border-radius: 0.5rem !important; } .newtxt1{ font-size: 0; text-align: center; width: 10rem; position: absolute; top: 9.4rem; left: 0; z-index: 2; } .newtxt1 p:first-child,.newtxt2 p:first-child{ font-size: 0.906rem; color:#FFF; font-weight: bold; width: 100%; } .newtxt1 p:last-child,.newtxt2 p:last-child{ font-size: 0.4rem; color:#FFF } .newtxt2{ width: 10rem; position: absolute; top: 1.5rem; left: 0; font-size: 0; text-align: center; } .googleDown,.apkDown,.appStoreDown,.iosCompanyDown{ background: url(../img/phonembtn1.png) no-repeat; background-size: 100% 100%; width: 4.813rem; height: 1.2rem; line-height: 1.2rem; position: absolute; top: 1.733rem; left: 50%; transform: translate(-50%,0); -webkit-transform: translate(-50%,0); text-align: center; font-size: 0.426rem; color:#FFF; } .apkDown,.iosCompanyDown{ background: url(../img/phonembtn2.png) no-repeat; background-size: 100% 100%; top: 3.933rem; } .googleDown img,.apkDown img{ width: 0.373rem; height: 0.413rem; vertical-align: middle; margin-top: -.05rem; margin-right: 0.133rem; }