body{ background-color: #F8F8F8; } .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; } .footerContainer{ padding-bottom: 1.2rem; } .productContainer{ padding-top: .3rem; display: flex; justify-content: space-between; margin-bottom: .6rem; } .productImgContainer{ width: 6.48rem; } .prViewImgBox{ background-color: #fff; width: 100%; height: 6.48rem; overflow: hidden; font-size: 0; position: relative; } .prViewImgBox .prViewImg{ width: 100%; height: 100%; } .prImgContainer{ width: 100%; overflow: hidden; position: relative; } .prImgList{ padding-top: .3rem; cursor: pointer; width: 100%; white-space: nowrap; font-size: 0; transition: transform 0.3s ease; } .prImgList .prImgItem{ display: inline-block; width: 1.42rem; height: 1.42rem; overflow: hidden; font-size: 0; background-color: #fff; margin-right: .25rem; } .prImgList .prImgItem:last-child{ margin-right: 0; } .prImgList .prImgItem img{ width: 100%; height: 100%; } .prevArrow, .nextArrow { position: absolute; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; background-color: #000; color: #fff; text-align: center; line-height: 30px; cursor: pointer; display: none; } .prevArrow { left: 10px; } .nextArrow { right: 10px; } .productInfoContainer{ flex: 1; border: .02rem solid rgba(0, 0, 0, .1); min-height: 8.36rem; margin-left: .34rem; padding: 0 .28rem; display: flex; flex-direction: column; justify-content: space-between; box-sizing: border-box; } .productTitle{ color: #434343; line-height: 1.6; padding-top: .6rem; font-size: .24rem; word-break: break-all; } .productPrice p{ color: #333333; font-weight: bold; font-size: .32rem; padding-top: .32rem; } .productPrice p span{ padding-right: .02rem; } /* 新增开始 */ .tasteContainer{ border-top: .01rem solid rgba(0, 0, 0, .1); padding-top: .32rem; } .tasteItem{ display: flex; align-items: center; gap: .16rem; margin-bottom: .10rem; } .tasteInput{ height: 100%; flex: 1; font-size: .16rem; border: none; width: .3rem; text-align: center; } .tasteNumberBox{ display: flex; align-items: center; height: .3rem; box-sizing: border-box; border: .01rem solid rgba(0, 0, 0, .1); cursor: pointer; } .tasteReduce,.tasteAdd{ height: 100%; width: .28rem; border-right: .01rem solid rgba(0, 0, 0, .1); display: flex; align-items: center; justify-content: center; font-size: .18rem; } .tasteAdd{ border-right: none; border-left: .01rem solid rgba(0, 0, 0, .1); } .tasteImg{ width: .3rem; height: .3rem; border-radius: .02rem; object-fit: cover; } .tasteTitle{ font-size: .14rem; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 3rem; } /* 新增结束 */ .productNContainer{ display: flex; align-items: center; padding: .28rem 0; border-top: .02rem solid rgba(0, 0, 0, .02); border-bottom: .02rem solid rgba(0, 0, 0, .02); margin-bottom: .24rem; } .productNumberBox{ display: flex; align-items: center; height: .62rem; box-sizing: border-box; border: .02rem solid rgba(0, 0, 0, .1); cursor: pointer; } .numberReduce,.numberAdd{ height: 100%; width: .6rem; border-right: .02rem solid rgba(0, 0, 0, .1); display: flex; align-items: center; justify-content: center; font-size: .2rem; } .numberAdd{ border-right: none; border-left: .02rem solid rgba(0, 0, 0, .1); } #numberInput{ height: 100%; flex: 1; font-size: .2rem; border: none; width: .8rem; text-align: center; } .addToCart{ background-color: rgba(191, 77, 240, 1); height: .62rem; display: flex; align-items: center; justify-content: center; width: 3rem; color: #fff; font-weight: bold; font-size: .2rem; cursor: pointer; margin-left: .24rem; border-radius: .08rem; } .addToCart .tag{ font-weight: 400; margin-right: .08rem; } .safeContainer{ width: 100%; min-height: .9rem; border: .02rem solid rgba(0, 0, 0, .05); border-radius: .06rem; position: relative; margin-bottom: .32rem; } .safeContainer .safeTag{ position: absolute; height: .2rem; padding: 0 .12rem; background: #F8F8F8; font-size: .16rem; color: #666666; left: 50%; transform: translateX(-50%); top: -.1rem; z-index: 1; } .safeList{ display: flex; flex-wrap: wrap; gap: .12rem; align-items: center; justify-content: center; padding-top: .28rem; padding-bottom: .12rem; } .safeList .safeItem{ width: .6rem; height: .42rem; } .safeList .safeItem img{ width: 100%; height: 100%; } .articleContainer{ } .articleTabBox{ display: flex; border-top: .02rem solid rgba(0, 0, 0, .1); } .articleTabItem{ position: relative; min-width: .6rem; margin-right: .24rem; cursor: pointer; } .articleTabItem .tabTag{ width: 80%; left: 0; top: -.04rem; height: .08rem; background-color: rgba(191, 77, 240, 1); z-index: 1; display: none; position: absolute; } .articleTabTitle{ font-size: .2rem; font-weight: 400; padding-top: .12rem; color: #666666; display: flex; align-items: center; } .active .articleTabTitle{ font-weight: bold; color: #333333; } .active .tabTag{ display: block; } .articleInfo{ padding: .36rem 0; } .articleTitle{ color: #333333; font-size: .28rem; line-height: 1.4; } #richTextContainer, #richTextContainer p, #richTextContainer span, #richTextContainer h1, #richTextContainer h2, #richTextContainer h3, #richTextContainer h4, #richTextContainer h5, #richTextContainer h6, #richTextContainer p, #richTextContainer ul, #richTextContainer ol { font-size: .2rem; color: #434343; line-height: 1.5; /* margin-bottom: .32rem; */ word-break: break-all; } #richTextContainer img{ max-width: 100%; vertical-align: middle; } .fixedAddSection{ display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999; height: 1.1rem; background: #FFF; -webkit-box-shadow: 0 -.02rem .05rem rgba(0,0,0,.01); box-shadow: 0 -.02rem .05rem rgba(0,0,0,.01); } .fixedAddContainer{ height: 100%; display: flex; justify-content: center; } .fixedAddBox{ display: flex; justify-content: space-between; align-items: center; height: 100%; } .fPrInfo{ display: flex; align-items: center; flex: 1; } .fPrInfo img{ width: .67rem; height: .67rem; } .fPrInfo .fTitle{ color: #666666; font-size: .18rem; padding-left: .12rem; font-weight: 400; } .fPrNumberContainer{ display: flex; align-items: center; box-sizing: border-box; cursor: pointer; } .fPrPrice{ color: #333333; font-size: .24rem; font-weight: bold; padding-right: .24rem; } .fPrNumberBox{ display: flex; align-items: center; border: .02rem solid rgba(0, 0, 0, .1); height: .4rem; } .fPrNumberReduce,.fPrNumberAdd{ height: 100%; width: .4rem; border-right: .02rem solid rgba(0, 0, 0, .1); display: flex; align-items: center; justify-content: center; font-size: .18rem; } .fPrNumberAdd{ border-right: none; border-left: .02rem solid rgba(0, 0, 0, .1); } #fPrNumberInput{ height: 100%; flex: 1; font-size: .18rem; border: none; width: .4rem; text-align: center; } .fPrAddToCart{ background-color: rgba(191, 77, 240, 1); height: .4rem; display: flex; align-items: center; justify-content: center; width: 2.1rem; color: #fff; font-weight: bold; font-size: .18rem; cursor: pointer; margin-left: .24rem; border-radius: .08rem; } .fPrAddToCart .tag{ font-weight: 400; margin-right: .08rem; } #reviewsInfo{ padding: .36rem 0; display: none; } .reviewItem{ display: flex; align-items: flex-start; margin-bottom: .24rem; border-bottom: .02rem solid rgba(0, 0, 0, .02); padding-bottom: .12rem; } .userInfo{ display: flex; align-items: center; padding-right: .24rem; } .userImg{ background-color: #F8F8F8; width: .4rem; height: .4rem; border-radius: 50%; overflow: hidden; font-size: 0; } .userImg img{ width: 100%; height: 100%; } .userName{ font-size: .17rem; color: #434343; padding-left: .12rem; max-width: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .reInfo{ flex: 1; } .starBox{ display: flex; align-items: center; gap: .08rem; margin-bottom: .12rem; font-size: 0; } .starBox img{ width: .2rem; } .reviewValues{ font-size: .16rem; line-height: 1.5; word-break: break-all; font-weight: 400; } #loadingIndicator{ text-align: center; font-size: .16rem; color: #999999; padding-bottom: .24rem; } #reviewsButtonContainer{ display: block; } #reviewsButtonBox{ display: flex; align-items: center; gap: .24rem; justify-content: flex-end; } #prevPage,#nextPage{ color: #fff; height: .4rem; padding: 0 .16rem; border-radius: .04rem; background-color: rgba(79, 73, 222, 1); display: flex; align-items: center; cursor: pointer; } @media (max-width: 1320px) { .sectionContainer{ padding: 0 .12rem; } .fixedAddBox{ padding: 0 .12rem; } .productContainer{ } .productImgContainer{ width: 5.4rem; } .prViewImgBox{ height: 5rem; } .prImgList .prImgItem{ width: 1.16rem; height: 1.16rem; } .productInfoContainer{ min-height: 6.46rem; } } @media (max-width: 1199px) { .elementorContainer{ width: 100%; max-width: none; } .productInfoContainer{ padding-left: .24rem; } .productNumberBox{ height: .5rem; } .numberReduce, .numberAdd{ width: .5rem; } .addToCart{ width: auto; flex: 1; height: .5rem; } .productImgContainer{ width: 4.8rem; } .prImgList .prImgItem{ width: 1.01rem; height: 1.01rem; } .productInfoContainer{ min-height: 6.3rem; } } @media (max-width: 1080px) { .sectionContainer{ padding: 0 .24rem; } .productContainer{ display: block; } .productImgContainer{ width: 7rem; margin: 0 auto; } .prViewImgBox{ height: 7rem; } .prImgList .prImgItem{ width: 1.56rem; height: 1.56rem; } .productInfoContainer{ margin-top: .4rem; margin-left: 0; height: auto; min-height: auto; } .productTitle{ padding-top: .24rem; } #numberInput{ width: 1.2rem; } .productNContainer{ padding: .20rem 0; margin-top: .12rem; } .productNumberBox{ height: .64rem; } .numberReduce,.numberAdd{ width: .64rem; } .addToCart{ height: .64rem; font-size: .22rem; } .articleTabTitle{ font-size: .26rem; padding-top: .16rem; } .articleTitle{ font-size: .32rem; } #richTextContainer, #richTextContainer h1, #richTextContainer h2, #richTextContainer h3, #richTextContainer h4, #richTextContainer h5, #richTextContainer h6, #richTextContainer p, #richTextContainer ul, #richTextContainer ol { font-size: .2rem; color: #434343; line-height: 1.5; margin-bottom: .32rem; word-break: break-all !important; } #richTextContainer{ overflow-x: scroll; } .fixedAddSection{ height: 1.2rem; } .fPrInfo{ display: none; } .fPrNumberContainer{ flex: 1; } .fPrPrice{ flex: 1; font-size: .28rem; } .fPrNumberBox{ height: .5rem; } .fPrNumberReduce,.fPrNumberAdd{ width: .5rem; font-size: .22rem; } #fPrNumberInput{ font-size: .22rem; width: 1rem; } .fPrAddToCart{ height: .6rem; font-size: .2rem; } /* 新增开始 */ .tasteNumberBox{ height: .4rem; } .tasteInput{ width: .5rem; font-size: .2rem; } .tasteReduce,.tasteAdd{ width: .5rem; font-size: .2rem; } .tasteImg{ width: .5rem; height: .5rem; } .tasteTitle{ max-width: 4rem; font-size: .18rem; } /* 新增结束 */ } @media (max-width: 750px) { .prViewImgBox{ width: 100%; } .reviewItem{ display: block; } .userInfo{ margin-bottom: .16rem; } .userImg{ width: .6rem; height: .6rem; } .userName{ font-size: .22rem; } .starBox img{ width: .28rem; } .reviewValues{ font-size: .2rem; } .reviewItem{ padding-bottom: .24rem; margin-bottom: .24rem; } /* 新增开始 */ .tasteNumberBox{ height: .5rem; } .tasteInput{ width: .6rem; font-size: .22rem; } .tasteReduce,.tasteAdd{ width: .6rem; font-size: .22rem; } .tasteImg{ width: .6rem; height: .6rem; } .tasteTitle{ font-size: .2rem; } /* 新增结束 */ #prevPage,#nextPage{ font-size: .22rem; height: .52rem; } }