.home{ width: 100%; font-family:PingFang SC; } .home-box{ padding: 0.5rem 0.37rem 0 0.31rem; } .home-fiexd{ height: 4.22rem; width: 100%; background-color: #fff; } .home-fiexdBox{ position: fixed; width: 100%; top: 0; left: 0; z-index: 999; } .home-video{ width: 100%; height: 4.22rem; background-color: #fff; } .home-video video{ width: 100%; height: 100%; } .fiexd-heard{ width: 100%; height: 1.2rem; background: rgba(255, 255, 255, 0); } .fiexd-heardBox{ padding: 0 0.3rem; display: flex; align-items: center; justify-content: space-between; font-size: 0.32rem; color: #007AFF; line-height: 1.2rem; height: 100%; } .fiexd-heardBox>img{ width: 0.6rem; height: 0.6rem; border-radius: 0.1rem; } .fiexd-pay{ display: flex; align-items: center; } .fiexd-pay>span{ color: #A9A9A9; font-size: 0.2rem; margin-right: 0.14rem; } .download{ width: 1.5rem; height: 0.6rem; background-color: #007AFF; border-radius: 0.3rem; color: 0.32rem; text-align: center; line-height: 0.6rem; color: #fff; font-weight: 500; } .heard{ width: 100%; display: flex; align-items: center; justify-content: space-between; } .heard>div>img{ width: 2.5rem; height: 2.5rem; border-radius: 0.3rem; } .heard>.right{ margin-left: 0.3rem; } .heard>.right>div:first-child{ font-size:0.4rem; font-weight:500; color:rgba(41,41,41,1); } .heard>.right>div:nth-child(2){ overflow: hidden; text-overflow:ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 0.28rem; color: #A9A9A9; margin-top: 0.23rem; } .heard>.right>div:nth-child(3){ display: flex; align-items: center; justify-content: space-between; margin-top: 0.32rem; } .heard>.right>div:nth-child(3) .download{ width: 1.8rem; height: 0.6rem; background:rgba(34,129,245,1); border-radius:0.3rem; color:#fff ; font-size: 0.28rem; font-weight: 400; text-align: center; line-height: 0.6rem; } .heard>.right>div:nth-child(3) >img{ width: 0.6rem; height: 0.6rem; } .evaluate{ font-size: 0.32rem; color: #757575; font-weight: bold; display: flex; align-items: center; justify-content: space-between; margin-top: 0.33rem; } .evaluate .number{ display: flex; align-items: center; } .evaluate .start{ display: flex; align-items: center; margin-left: 0.22rem; } .evaluate .start .iconImg{ display: inline-block; vertical-align: middle; width: 1.84rem; height: 0.3rem; background: url("../images/game_score1.png")no-repeat left center; background-size: auto 100%; } .evaluate .start .iconImg>div{ display: block; height: 100%; background: url("../images/game_score2.png")no-repeat left center; background-size: auto 100%; } .evaluate-box{ display: flex; flex-direction: column; } .evaluate-box:last-child,.evaluate-box:nth-child(2){ align-items: center; justify-content: center; } .evaluate-box .grade{ margin-top: 0.19rem; font-size: 0.24rem; color: #D3D3D3; font-weight: 400; } .slide_list{ width: 100%; margin-top:0.4rem; padding-bottom: 0.39rem; border-bottom: 1px solid #DEDEDE; } .slide-box{ display: -webkit-box; overflow-x: auto; /*适应苹果*/ -webkit-overflow-scrolling:touch; font-size: 0.2rem; font-size: 100%; font-weight: normal; margin: 0; padding: 0; } .slide-item{ width: 4.4rem; /*height: 6.22rem;*/ margin-right: 30px; list-style: none; } .slide-item >img{ width: 100%; height: 7.82rem; pointer-events: none; } /*隐藏掉滚动条*/ .slide-box::-webkit-scrollbar { display: none; } .synopsis{ margin-top: 0.41rem; padding-bottom: 0.38rem; border-bottom: 1px solid #DEDEDE; } .synopsis>div:first-child{ font-size:0.4rem; font-weight:700; color:rgba(41,41,41,1); margin-bottom: 0.41rem; } .synopsis>div:nth-child(2){ font-weight:400; color:rgba(41,41,41,1); line-height:0.4rem; font-size: 0.28rem; overflow: hidden; text-overflow:ellipsis; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; padding-bottom: 20px; } .synopsis>div:last-child{ position: relative; margin-top: -0.4rem; } .synopsis>div:last-child .bg-blur{ background-color: #fff; -webkit-filter:blur(0.2rem); filter:blur(0.2rem); width: 100%; height: 1rem; } .more{ position: absolute; top: 0.6rem; left: 50%; margin-left: -0.7948rem; font-size: 0.36rem; color: #2281F5; /* background-color: #fff; */ } .appraisal{ margin-top: 0.38rem; } .appraisal .title{ font-size:0.4rem; font-weight:700; color:rgba(41,41,41,1); } .appraisal-box{ display: flex; align-items: flex-end; justify-content: space-between; margin-top: 0.4rem; padding-bottom: 0.39rem; border-bottom: 1px solid #DEDEDE; } .appraisal-box .left{ display: flex; flex-direction: column; align-items: center; justify-content: center; } .appraisal-box .left>span:first-child{ font-size: 1.2rem; font-weight: 800; color: #4B4C50; } .appraisal-box .left>span:last-child{ font-size: 0.28rem; color: #4B4C50; font-weight: 500; } .appraisal-box .right{ display: flex; align-items: flex-end; flex-direction: column; justify-content: flex-end; } .appraisal-box .right>.start-number{ display: flex; align-items:center; justify-content: flex-end; margin-bottom: 0.06rem; } .appraisal-box .right>.start-number .start{ display: flex; align-items: center; } .appraisal-box .right>.start-number .start>img{ width: 0.16rem; height: 0.16rem; } .appraisal-box .right>.start-number .strip{ width: 3rem; height: 0.04rem; background-color: #E0E0E0; position: relative; margin-left: 0.33rem; } .appraisal-box .right>.start-number .strip>div{ position: absolute; top: 0; left: 0; height: 100%; background-color: #4B4C50; } .appraisal-box .right>.mark{ font-size:0.24rem; font-weight:400; color:rgba(75,76,80,1); margin-top: 0.26rem; } .device{ margin-top: 0.4rem; padding-bottom: 0.4rem; border-bottom: 1px solid #DEDEDE; } .device .title{ font-size:0.4rem; font-weight:500; color:rgba(41,41,41,1); } .device .soon-title{ margin-top: 0.4rem; font-size: 0.28rem; color: #292929; } .device .del{ font-size: 0.28rem; color: #292929; } .information{ margin-top: 0.39rem; } .information .title{ font-size:0.4rem; font-weight:500; color:rgba(41,41,41,1); margin-bottom: 0.52rem; } .information .data-box{ width: 100%; display: flex; align-items: center; justify-content: space-between; padding-bottom: 0.3rem; border-bottom: 1px solid #DEDEDE; margin-bottom: 0.29rem; } .information .data-box>span{ font-size: 0.24rem; color: #A9A9A9; font-weight: 400; } .information .data-box>div{ font-size: 0.24rem; color: #292929; font-weight: 400; } .privacy{ font-size: 0.24rem; color: #292929; font-weight: 400; } .foot{ background-color: #101010; width: 100%; padding: 0.29rem 0 0.24rem 0; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 0.2rem; color: #D3D3D3; margin-top: 0.92rem; } .foot div:first-child{ display: flex; align-items: center; color: #D3D3D3; font-weight:400; font-size: 0.24rem; } .foot div:first-child>div{ font-size: 0.24rem; } .foot div:first-child>div:first-child{ margin-right: 0.5rem; } .foot div:nth-child(2){ margin-top: 0.18rem; margin-bottom: 0.18rem; } .window{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background:rgba(0,0,0,0.6); } .containner{ width: 5.50rem; /* height: 9.20rem; */ /* background: url(../images/landing_bg.png) no-repeat; */ /* background-size: 100% 100%; */ /* background-color: #fff; */ /* display: flex; justify-content: flex-end; */ } .containner-box{ /* padding: 0 0.39rem 0.15rem 0.36rem; */ display: flex; flex-direction: column; align-items: center; justify-content: flex-end; } .containner-box .text-wrapper { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; background-color: #fff; width: 100%; border-bottom-left-radius: 0.2rem; border-bottom-right-radius: 0.2rem; } .containner-box .text{ font-size:0.24rem; font-weight:400; color:rgba(41,41,41,1); line-height:0.36rem; width: 100%; } .blue-btn{ width: 4.40rem; height:0.7rem; margin: 0.15rem 0; background:linear-gradient(0deg,rgba(33,177,235,1),rgba(88,197,240,1)); box-shadow:0px 0.11rem 0.27rem 0px rgba(24,24,24,0.17); border-radius:0.35rem; text-align: center; line-height: 0.7rem; font-size: 0.28rem; color: #FFf; } .quick-btn { position: relative; } .quick-btn i { position: absolute; background-image: url(../images/tuijian.png); width: 17px; height: 21px; display: inline-block; left: 3.40rem; top: 0rem; } .gray-btn{ width: 4.40rem; height:0.7rem; margin: 0.15rem 0; background:linear-gradient(0deg,rgba(196,196,196,1),rgba(217,218,218,1)); box-shadow:0px 0.11rem 0.27rem 0px rgba(24,24,24,0.17); border-radius:0.35rem; text-align: center; line-height: 0.7rem; font-size: 0.28rem; color: #FFf; } .second{ position: fixed; top: 0; left: 0; width: 5.7rem; height: 7rem; left: 50%; top: 50%; margin-left: -2.85rem; margin-top: -3.5rem; display: flex; align-items: center; justify-content: center; background:rgba(0,0,0,0); z-index: 1000; } .second-box{ width: 5.50rem; height: 6rem; border-radius:0.3rem; background-color: #fff; display: flex; flex-direction: column; align-items: center; } .second-box .title{ border-top-left-radius: 0.3rem; border-top-right-radius: 0.3rem; height: 1rem; width: 100%; line-height: 1rem; background-color: #489EF6; font-size: 0.32rem; font-weight: 500; text-align: center; color: #fff; } .carousel{ width: 100%; margin-top: 0.3rem; } .swiper-container{ padding-bottom: 0.6rem; } .swiper-slide{ width: 100%; } .swiper-slide-box{ padding: 0 0.32rem; } .swiper-slide-box>div{ font-size:0.24rem; font-weight:500; color:rgba(41,41,41,1); line-height:0.36rem; text-align: center; } .swiper-slide-box>.slide-img{ width: 100%; position: relative; font-size: 0.2rem; } .swiper-slide-box>.slide-img .case{ position: absolute; right: 0; top: -0.18rem; width: 0.8rem; height: 0.8rem; } .swiper-slide-box>.slide-img>img:first-child{ width: 100%; } .swiper-container-horizontal>.swiper-pagination-bullets{ bottom: -10px !important; } .safari{ position: fixed; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.4); display: flex; flex-direction: column; align-items: center; font-family:PingFang SC; } .safari-heard{ width: 6.3rem; margin-top: 1.4rem; font-size:0.36rem; font-weight:500; color:rgba(255,255,255,1); display: flex; justify-content: flex-end; } .safari-heard>div{ margin-top: 0.65rem; } .safari-heard>img{ width: 1rem; height: 0.8rem; margin-left: 0.25rem; } .safari-info{ margin-top: 2.4rem; background: url("../images/safari_bg.png") no-repeat; width: 6.3rem; height: 2.8rem; background-size: 100% 100%; display: flex; align-items: center; justify-content: center; } .safari-info>img{ width: 1.5rem; height: 1.5rem; margin-right: 0.24rem; } .safari-info>div{ color: #fff; font-size: 0.32rem; font-weight: 500; } .safari-info>div a{ color: #FCE44B; font-size: 0.32rem; font-weight: 500; } .register{ position: fixed; top: 0; left: 0; width: 5.7rem; height: 7.3rem; left: 50%; top: 50%; margin-left: -2.85rem; margin-top: -3.5rem; display: flex; align-items: center; justify-content: center; background:rgba(0,0,0,0); z-index: 1000; } .register-box{ width: 6rem; height: 7.3rem; background-color: #fff; border-radius: 0.3rem; } .register-heard{ height: 1rem; width: 100%; text-align: center; line-height: 1rem; background-color: #489EF6; font-size: 0.32rem; color: #fff; font-weight: 500; border-top-left-radius: 0.3rem; border-top-right-radius: 0.3rem; position: relative; } .register-heard>a{ position: absolute; left: 0.4rem; top: 0.35rem; width: 0.17rem; height: 0.3rem; background: url("../images/20191225/fanhui.png"); background-size: 100% 100%; } .register-input{ margin-top:0.75rem ; display: flex; flex-direction: column; align-items: center; justify-content: center; } .input-box{ display: flex; align-items: center; width: 4.4rem; border-bottom: 1px solid #C9C9C9; padding-bottom: 0.14rem; margin-bottom: 0.51rem; } .input-box>img{ width: 0.3rem; height: 0.3rem; margin-right: 0.16rem; } .input-box>input{ border: 0; outline: 0; font-size: 0.24rem; width: 4rem; } .input-code{ width: 4.4rem; display: flex; align-items: flex-end; justify-content: space-between; } .input-code>div:first-child{ display: flex; align-items: center; width: 2.6rem; padding-bottom: 0.14rem; border-bottom: 1px solid #C9C9C9; font-size: 0.24rem; } .input-code>div>img{ width: 0.3rem; height: 0.3rem; margin-right: 0.16rem; } .input-code>div>input{ border: 0; outline: 0; font-size: 0.24rem; width: 2rem; } .input-code>img{ width: 1.6rem; height: 0.6rem; border: 1px solid #C9C9C9; border-radius: 0.1rem; } .register-btn{ margin-top: 0.94rem; width:4.6rem; display: flex; align-items: center; justify-content: space-between; } .register-btn>div{ width:2rem; height:0.7rem; background:linear-gradient(0deg,rgba(33,177,235,1),rgba(88,197,240,1)); box-shadow:0px 0.11rem 0.27rem 0px rgba(24,24,24,0.17); border-radius:0.35rem; font-size: 0.28rem; color: #FFFFFF; text-align: center; line-height: 0.7rem; } .register-forget{ width: 4.8rem; display: flex; align-items: center; justify-content: space-between; margin-top: 0.4rem; } .register-forget>div{ display: flex; align-items: center; color: #21B1EB; font-size: 0.24rem; } .register-forget>div>img{ width: 0.3rem; height: 0.3rem; margin-right: 0.06rem; } .input-code .gain{ width: 1.6rem; height: 0.5rem; background:rgba(33,177,235,1); border-radius:0.25rem; font-size: 0.24rem; color: #fff; text-align: center; line-height: 0.5rem; align-content: center; justify-content: center; } .modification{ width:4.40rem; height:0.7rem; background:linear-gradient(0deg,rgba(33,177,235,1),rgba(88,197,240,1)); box-shadow:0px 0.11rem 0.27rem 0px rgba(24,24,24,0.17); border-radius:0.35rem; margin-top: 0.84rem; text-align: center; line-height: 0.7rem; color: #fff; font-size: 0.28rem; } .register-forget>div>div>div{ color: #292929; font-size: 0.18rem; } .register-forget>div>div>div>span{ color: #E30000; font-size: 0.2rem; } .mounting{ position: fixed; top: 0; left: 0; width: 5.7rem; height: 8rem; left: 50%; top: 50%; margin-left: -2.85rem; margin-top: -4rem; display: flex; align-items: center; justify-content: center; background:rgba(0,0,0,0); z-index: 1000; } .mounting-box{ width: 5.7rem; height: 8rem; background-color: #fff; border-radius: 0.3rem; } .mounting-text{ display: flex; flex-direction: column; align-items: center; justify-content: center; } .mounting-btn{ width:4.4rem; height:0.7rem; background:linear-gradient(0deg,rgba(33,177,235,1),rgba(88,197,240,1)); box-shadow:0px 0.11rem 0.27rem 0px rgba(24,24,24,0.17); border-radius:0.35rem; text-align: center; line-height: 0.7rem; font-size: 0.28rem; color: #FFFFFF; margin-top: 0.25rem; } .carousel{ width: 100%; margin-top: 0.3rem; } .swiper-container{ padding-bottom: 0.6rem; } .swiper-slide{ width: 100%; } .title-one>img{ width: 0.3rem; height: 0.3rem; } .one-contain{ width: 4.6rem; margin-top: 0.32rem; color: #292929; font-size: 0.24rem; font-weight: 400; line-height: 0.4rem; } .one-contain>span{ color: #489EF6; font-size: 0.24rem; font-weight: 400; } .title-two{ margin-top: 0.67rem; color: #292929; font-size: 0.28rem; font-weight: bold; width: 4.6rem; } .title-one{ height: 2.78rem; padding: 0 0.38rem; color: #292929; font-size: 0.28rem; font-weight: bold; line-height: 0.42rem; } .title-one>img{ width: 0.3rem; height: 0.3rem; } .mounting-btn{ width:4.4rem; height:0.7rem; background:linear-gradient(0deg,rgba(33,177,235,1),rgba(88,197,240,1)); box-shadow:0px 0.11rem 0.27rem 0px rgba(24,24,24,0.17); border-radius:0.35rem; text-align: center; line-height: 0.7rem; font-size: 0.28rem; color: #FFFFFF; margin-top: 0.35rem; } .title-two{ margin-top: 0.77rem; color: #292929; font-size: 0.28rem; font-weight: bold; } .register-heard{ height: 1rem; width: 100%; text-align: center; line-height: 1rem; background-color: #489EF6; font-size: 0.32rem; color: #fff; font-weight: 500; border-top-left-radius: 0.3rem; border-top-right-radius: 0.3rem; position: relative; border-top-left-radius:0.3rem; border-top-right-radius:0.3rem; } .register-heard>li{ width: 50%; height: 100%; text-align: center; list-style: none; background-color: #F5F5F5; } .register-heard>li.select{ background-color: #46BEEE; color: #fff; position: relative; } .register-heard>li.select::after{ position: absolute; content: ''; bottom: -40%; right: 50%; margin-right: -0.33rem; margin-top: 0.28rem; width: 0.66rem; height: 0.56rem; background-image: url("../images/20191225/sanjiao.png"); background-size: 100% 100%; font-size: 0.12rem; }