* {
margin: 0;
padding: 0;
}
html {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
/* 解决IOS默认滑动很卡的情况 */
-webkit-overflow-scrolling: touch;
font-size: 100px;
}
body {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
font-size: .16rem;
}
/* 禁止缩放表单 */
input[type="submit"], input[type="reset"], input[type="button"], input {
resize: none;
border: none;
}
ol, li, ul, dl, dt, dd {
list-style: none;
}
img {
height: auto;
object-fit: fill;
}
em, i {
font-style: normal;
}
textarea {
resize: none;
}
p {
word-wrap: break-word;
}
a {
text-decoration: none;
color: inherit;
outline: none;
-moz-outline-style: none;
}
a:active, a:focus {
outline: none;
}
.textEllipsis {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.sectionContainer {
display: flex;
justify-content: center;
}
.elementorContainer {
max-width: 13.2rem;
flex: 1;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/* <-- start 头部模块 */
.headerContainer {
width: 100%;
background-color: #FFF;
position: sticky;
top: 0;
left: 0;
right: 0;
z-index: 99;
-webkit-box-shadow: 0 .02rem .05rem rgba(0, 0, 0, .03);
box-shadow: 0 .02rem .05rem rgba(0, 0, 0, .03);
}
.computerMenu {
position: relative;
margin-right: .06rem;
z-index: 10;
}
#computerMenuBot {
height: .3rem;
display: flex;
align-items: center;
}
#computerMenuLink {
display: block;
position: relative;
width: .3rem;
height: .04rem;
background-color: #666666;
border-radius: .06rem;
}
#computerMenuLink:before,
#computerMenuLink:after {
content: '';
display: block;
width: 100%;
height: 100%;
border-radius: .06rem;
margin-top: .09rem;
position: absolute;
background: #666666;
-webkit-transition-property: margin, -webkit-transform;
transition-property: margin, -webkit-transform;
transition-property: margin, transform;
transition-property: margin, transform, -webkit-transform;
-webkit-transition-duration: 200ms;
transition-duration: 200ms;
}
#computerMenuLink:before {
margin-top: -.09rem;
}
#computerMenuLink:after {
margin-top: .09rem;
}
.open #computerMenuLink {
background: none
}
.open #computerMenuLink:before {
margin-top: 0;
transform: rotate(45deg);
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
}
.open #computerMenuLink:after {
margin-top: 0;
transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
}
.open #computerMenuLink:before,
.open #computerMenuLink:after {
background: #666666;
}
#pcMenuModel {
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
z-index: -1;
background-color: transparent;
display: none;
}
.pcMenuFixed {
border-top: .01rem solid #dfdfdf;
position: absolute;
background: white;
border-radius: 0 0 .06rem .06rem;
min-width: 1.5rem;
max-width: 3rem;
padding: .12rem;
top: .5rem;
right: 0;
z-index: 999;
display: none;
}
.pcMenuItem {
border-bottom: .01rem solid #dfdfdf;
}
.pcMenuFixed .pcMenuItem:last-child {
border: none;
}
.pcMenuItem .menuItemTitle {
height: .4rem;
display: flex;
align-items: center;
font-size: .16rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: #434343;
}
.pcMenuItem.active .menuItemTitle {
color: rgba(79, 73, 222, 1);
}
.warnContainer {
background-color: #434344;
width: 100%;
height: .5rem;
display: flex;
align-items: center;
justify-content: center;
}
.warnContainer .warnText {
max-width: 13.2rem;
word-break: break-all;
line-height: 1.4;
font-weight: bold;
font-size: .16rem;
color: rgba(255, 255, 255, .7);
}
/* PC端头部 */
#computerEndHeader {
width: 13.2rem;
height: .7rem;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
}
#computerEndHeader .computerLogo {
color: rgba(79, 73, 222, 1);
font-weight: bold;
font-size: .28rem;
padding-right: .5rem;
}
#computerEndHeader .computerLogo img {
height: .36rem;
width: auto;
}
.headNavContainer {
flex: 1;
display: flex;
align-items: center;
height: 100%;
overflow: hidden;
position: relative;
z-index: 10;
}
.headNavItem {
height: .7rem;
display: flex;
align-items: center;
justify-content: center;
position: relative;
margin-right: .36rem;
}
.headNavItem .headNavTitle {
padding: 0 .28rem;
font-weight: bold;
color: #333333;
font-size: .22rem;
position: relative;
z-index: 2;
letter-spacing: .02rem;
min-width: 1.5rem;
}
.headNavItem.active .headNavTitle {
color: #FFFFFF;
font-size: .24rem;
}
.headNavItem.active .back {
position: absolute;
width: 100%;
height: 116%;
top: -8%;
left: 0;
border-radius: .04rem;
background-color: rgba(79, 73, 222, 1);
z-index: 1;
}
.headIconContainer {
display: flex;
align-items: center;
height: 100%;
}
.headIconContainer .headIconItem {
padding: 0 .2rem;
height: .7rem;
display: flex;
align-items: center;
justify-content: center;
}
.headIconContainer .headIconItem img {
height: .24rem;
}
.headIconContainer .headIconItem .cart img {
height: .28rem;
}
/* 移动端头部 */
#mobileEndHeader {
display: none;
position: relative;
}
.mobileEndHeaderConten {
padding: 0 .24rem;
height: .9rem;
display: flex;
flex: 1;
align-items: center;
justify-content: space-between;
}
.mobileEndHeaderConten .mobileLogo {
color: rgba(79, 73, 222, 1);
font-weight: bold;
font-size: .28rem;
padding-right: .5rem;
}
.mobileEndHeaderConten .mobileLogo img {
height: .4rem;
width: auto;
}
.mobileRegisterIconList {
display: flex;
flex: 1;
align-items: center;
justify-content: flex-end;
padding-right: .24rem;
}
.mobileRegisterIcon img {
height: .3rem;
}
.mobileUserIconList {
display: flex;
flex: 0.2;
align-items: center;
justify-content: space-between;
padding-right: .01rem;
}
.mobileUserIcon img {
height: .3rem;
}
#mobileMenuBot {
height: .4rem;
display: flex;
align-items: center;
}
#mobileMenuLink {
display: block;
position: relative;
width: .42rem;
height: .06rem;
background-color: #666666;
border-radius: .08rem;
}
#mobileMenuLink:before,
#mobileMenuLink:after {
content: '';
display: block;
width: 100%;
height: 100%;
border-radius: .08rem;
margin-top: .13rem;
position: absolute;
background: #666666;
-webkit-transition-property: margin, -webkit-transform;
transition-property: margin, -webkit-transform;
transition-property: margin, transform;
transition-property: margin, transform, -webkit-transform;
-webkit-transition-duration: 200ms;
transition-duration: 200ms;
}
#mobileMenuLink:before {
margin-top: -.13rem;
}
#mobileMenuLink:after {
margin-top: .13rem;
}
.open #mobileMenuLink {
background: none
}
.open #mobileMenuLink:before {
margin-top: 0;
transform: rotate(45deg);
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
}
.open #mobileMenuLink:after {
margin-top: 0;
transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
}
.open #mobileMenuLink:before,
.open #mobileMenuLink:after {
background: #666666;
}
.mobileMenuFixed {
position: absolute;
background: white;
border-radius: .12rem;
min-width: 3rem;
max-width: 5rem;
padding: .12rem .24rem;
top: 1rem;
right: .08rem;
z-index: 999;
display: none;
}
.mobileMenuItem {
border-bottom: .01rem solid #dfdfdf;
}
.mobileMenuFixed .mobileMenuItem:last-child {
border: none;
}
.mobileMenuItem .menuItemTitle {
height: .8rem;
display: flex;
align-items: center;
font-size: .22rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: #434343;
}
.mobileMenuItem.active .menuItemTitle {
color: rgba(79, 73, 222, 1);
}
/* end 头部模块 --> */
/* start 年龄提示模块 --> */
.maskContainer {
position: fixed;
width: 100vw;
height: 100vh;
z-index: 999;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, .5);
display: none;
}
.ageReminderBox {
width: 7rem;
background-color: #FFF;
height: 3.8rem;
left: 50%;
transform: translateX(-50%);
top: 30%;
position: absolute;
}
.ageReminderBack {
position: absolute;
z-index: 1;
height: 100%;
width: 100%;
top: 0;
left: 0;
}
.ageReminderInfo {
position: relative;
z-index: 2;
margin-left: .32rem;
padding-top: 1rem;
color: #fff;
}
.ageReminderInfo h3 {
line-height: 1.4;
font-size: .36rem;
max-width: 60%;
font-weight: bold;
}
.ageReminderInfo .ageReminderButBox {
display: flex;
align-items: center;
padding-top: .32rem;
}
.ageReminderInfo .ageReminderButBox .ageRBut {
color: rgba(237, 109, 244, 1);
background-color: #fff;
display: flex;
align-items: center;
justify-content: center;
height: .56rem;
border-radius: .08rem;
font-size: .22rem;
font-weight: bold;
min-width: 1.6rem;
padding: 0 .12rem;
margin-right: .32rem;
cursor: pointer;
}
/* end 年龄提示模块 --> */
/* <-- start 底部模块 */
.footerContainer {
width: 100%;
background-color: rgba(32, 32, 32, 1);
position: relative;
z-index: 10;
}
.warningContainer {
background-color: gray;
}
.warningBox {
padding: .16rem 0;
color: rgba(255, 255, 255, .8);
font-size: .15rem;
line-height: 1.4;
word-break: break-all;
}
.footerConter {
color: #FFF;
padding-top: .3rem;
padding-bottom: .24rem;
display: flex;
}
.leftText {
max-width: 7rem;
margin-right: .8rem;
}
.leftText .ltK {
font-weight: bold;
font-size: .18rem;
word-break: break-all;
padding-bottom: .06rem;
}
.leftText .ltV {
font-size: .14rem;
color: rgba(255, 255, 255, .6);
word-break: break-all;
}
.footerInuptBox {
background: #FFF;
flex: 1;
height: .5rem;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 .16rem 0 .12rem;
max-width: 5rem;
margin-right: 1.5rem;
}
.footerInuptBox .mailIcon {
width: .38rem;
height: .38rem;
}
.footerInupt {
flex: 1;
height: 100%;
outline: none;
font-size: .18rem;
margin: 0 .12rem;
}
.footerInuptBox .arrowIcon {
height: .19rem;
width: auto;
}
.fLinkContainer {
flex: 1;
display: flex;
justify-content: flex-end;
padding-right: .5rem;
}
.fLinkBox {
padding: 0 .24rem;
}
.fLinkTitle {
font-size: .15rem;
color: #666666;
font-weight: 400;
margin-bottom: .04rem;
}
.fLinkTitle span {
display: none;
}
.fLinkItem {
font-size: .14rem;
color: #fff;
padding: .02rem 0;
cursor: pointer;
}
.footerIconContainer {
max-width: 4rem;
}
.fiContact {
font-size: .15rem;
color: #666666;
font-weight: 400;
margin-bottom: .1rem;
}
.fiContact span {
display: none;
}
.footerIconList {
overflow-x: scroll;
white-space: nowrap;
}
.footerIconList::-webkit-scrollbar {
display: none;
}
.footerIconItem {
margin-right: .1rem;
display: inline-flex;
}
.footerIconItem img {
width: 1.14rem;
height: 1.14rem;
border-radius: 1%;
}
.footerVlsaImg {
display: flex;
flex-wrap: wrap;
padding-top: .1rem;
}
.footerVlsaItem {
font-size: 0;
}
.footerVlsaImg img {
width: .4rem;
height: .26rem;
}
.acceptContainer {
background-color: #fff;
}
.acceptBox {
display: flex;
justify-content: space-between;
padding: .16rem 0;
}
.acceptLeftInfo {
max-width: 4.2rem;
}
.acceptLeftInfo .weAcc {
font-size: .14rem;
color: #434343;
}
.aLImgBox {
display: flex;
flex-wrap: wrap;
gap: .08rem;
padding-top: .08rem;
}
.aLImgItem {
font-size: 0;
}
.aLImgItem img {
width: 2.5rem;
height: .3rem;
}
.weText {
font-size: .14rem;
color: #434343;
line-height: 1.4;
word-break: break-all;
padding-top: .3rem;
}
.acceptRightInfo {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: .16rem;
flex: 1;
padding-left: .24rem;
}
.aRImgItem {
font-size: 0;
}
.aRImgItem img {
width: 1.3rem;
height: .7rem;
}
#toastContainer {
position: fixed;
top: 40%;
left: 50%;
transform: translateX(-50%);
background-color: #333;
color: #fff;
padding: .08rem .12rem;
border-radius: .04rem;
word-break: break-all;
z-index: 9999;
display: none;
font-size: .18rem;
max-width: 70%;
text-align: center;
line-height: 1.4;
}
/* <-- start 个人中心菜单 */
.navContainer {
background-color: #E8EEF6;
width: 3.4rem;
padding-bottom: 1rem;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.navItem {
padding-left: .24rem;
cursor: pointer;
}
.navItem .navItemFlex {
display: flex;
align-items: center;
height: .6rem;
padding-right: .22rem;
}
.navItem .navItemFlex.active .navTitle {
color: #fff;
background-color: rgba(79, 73, 222, 1);
}
.navItem .navItemFlex img {
width: .4rem;
}
.navItem .navItemFlex .navTitle {
font-weight: 400;
color: #434343;
font-size: .17rem;
padding-left: .08rem;
flex: 1;
height: .5rem;
border-radius: .04rem;
display: flex;
align-items: center;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.sunNavBox {
margin-left: .4rem;
padding-right: .22rem;
}
.sunNavItem {
height: .5rem;
display: flex;
align-items: center;
padding-left: .08rem;
color: #434343;
border-radius: .04rem;
margin: .05rem 0;
}
.sunNavItem .sunNavTitle {
font-weight: 400;
font-size: .17rem;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
flex: 1;
}
.sunNavItem.active {
color: #fff;
background-color: rgba(79, 73, 222, 1);
}
/* end 个人中心菜单 --> */
@media (max-width: 1499px) {
.navContainer {
width: 3rem;
}
.navItem {
padding-left: .16rem;
}
.navItem .navItemFlex {
padding-right: .16rem;
}
.navItem .navItemFlex img {
width: .34rem;
}
.navItem .navItemFlex .navTitle {
height: .46rem;
font-size: .16rem;
}
.sunNavBox {
margin-left: .34rem;
padding-right: .16rem;
}
.sunNavItem {
height: .46rem;
}
.sunNavItem .sunNavTitle {
font-size: .16rem;
}
.navContainer {
padding-bottom: .5rem;
}
}
@media (max-width: 1320px) {
#computerEndHeader {
width: auto;
}
.computerLogo {
margin-left: .12rem;
}
.headIconContainer {
margin-right: .12rem;
}
.headNavItem .headNavTitle {
font-size: .22rem;
}
.headNavItem.active .headNavTitle {
font-size: .26rem;
}
}
@media (max-width: 1199px) {
.warnContainer {
height: auto;
}
.warnContainer .warnText {
font-size: .2rem;
padding: .06rem .24rem;
}
#computerEndHeader {
display: none;
}
#mobileEndHeader {
display: flex;
}
.footerContainer {
height: auto;
}
.footerConter {
display: block;
padding: .24rem .12rem;
}
.leftText {
max-width: none;
margin-right: 0;
margin-bottom: .32rem;
}
.leftText .ltK {
font-size: .2rem;
}
.leftText .ltV {
font-size: .18rem;
}
.footerInuptBox {
max-width: 6rem;
margin-right: 0;
height: .6rem;
margin-bottom: .32rem;
}
.footerIconContainer {
max-width: none;
}
.footerIconBox {
display: flex;
align-items: center;
}
.fiContact {
padding-bottom: 0;
padding-right: .16rem;
font-size: .2rem;
}
.fiContact span {
display: inline-block;
}
.footerIconList {
white-space: normal;
overflow-x: hidden;
display: flex;
flex-wrap: wrap;
margin-bottom: .12rem;
}
.footerIconItem {
display: block;
margin-right: .24rem;
}
.acceptBox {
display: block;
}
.acceptLeftInfo {
max-width: none;
}
.acceptLeftInfo .weAcc {
font-size: .16rem;
}
.aLImgItem img {
width: .6rem;
height: .35rem;
}
.weText {
font-size: .16rem;
}
.acceptRightInfo {
justify-content: flex-start;
padding-left: 0.24rem;
padding-top: .4rem;
}
.fLinkContainer {
padding-right: 0;
margin-bottom: .4rem;
display: block;
}
.fLinkBox {
padding: 0;
margin-right: .4rem;
display: flex;
align-items: baseline;
flex-wrap: wrap;
padding-top: .12rem;
gap: .08rem .16rem;
}
.fLinkTitle {
font-size: .2rem;
margin-bottom: 0;
}
.fLinkTitle span {
display: inline-block;
}
.fLinkItem {
font-size: .18rem;
}
.fiContact {
font-size: .24rem;
}
}
@media (max-width: 999px) {
.navContainer {
width: 2.4rem;
}
}
@media (max-width: 899px) {
.ageReminderBox {
width: 6rem;
height: 3rem;
}
.ageReminderInfo {
padding-top: .6rem;
}
.ageReminderInfo h3 {
font-size: .3rem;
}
.ageReminderInfo .ageReminderButBox .ageRBut {
font-size: .2rem;
min-width: 1rem;
}
.leftText .ltK {
font-size: .22rem;
}
.leftText .ltV {
font-size: .2rem;
}
.footerIconItem img {
width: .5rem;
height: .5rem;
}
.footerVlsaImg img {
height: .4rem;
}
#toastContainer {
font-size: .24rem;
padding: .1rem .16rem;
}
.footerConter {
padding: .24rem;
}
}
@media (max-width: 750px) {
.navContainer {
width: 2.2rem;
}
.navItem {
padding-left: .12rem;
}
.navItem .navItemFlex {
padding-right: .12rem;
}
.navItem .navItemFlex img {
width: .34rem;
}
.navItem .navItemFlex .navTitle {
height: .6rem;
font-size: .2rem;
}
.sunNavBox {
margin-left: .34rem;
padding-right: .12rem;
}
.sunNavItem {
height: .6rem;
}
.sunNavItem .sunNavTitle {
font-size: .2rem;
}
.warningBox {
font-size: .2rem;
}
.acceptBox {
display: block;
}
.acceptLeftInfo {
max-width: none;
/*margin-left: .5rem;*/
}
.acceptLeftInfo .weAcc {
font-size: .2rem;
text-align: center;
}
.aLImgBox {
justify-content: center;
}
.aLImgItem img {
width: 2.7rem;
height: .4rem;
}
.weText {
font-size: .2rem;
text-align: center;
}
.aRImgItem img {
width: 1.5rem;
height: .75rem;
}
.fLinkTitle {
font-size: .24rem;
}
.fLinkItem {
font-size: .22rem;
}
}