body { background: #f4f2f2; } .header { width: 100%; position: fixed; top: 0; z-index: 10; background: transparent; border: none; box-shadow: 0 0 0; height: 66px; } body .header1 { z-index: 11; opacity: 0; width: 100%; position: fixed; top: 0; background: rgba(255, 255, 255, 1); border: none; box-shadow: 0 0 0; height: 66px; display: none; border-bottom: 1px solid #efefef; } .mui-bar-nav.mui-bar .mui-icon { /*margin-left: 0;*/ } .mui-title { color: black; } .zhe { opacity: 0; } .icon-cart{ margin-top:.35rem; margin-right:.5rem; float: right; } .header .mui-action-back { margin-top: 10px; margin-left: 10px; border-radius: 50%; background: rgba(0, 0, 0, 0.2); color: white; } .header1 .mui-action-back { /*margin-top: 20px;*/ color: black; float: left; } .mui-bar-nav { box-shadow: none; background: rgba(0, 0, 0, 0) } .header1 .on { border-bottom: 3px solid #ff0000; color: #e61329; } .p1 { float: left; height: 45px; line-height: 46px; width: 26.41px; margin-left: calc(25% - 35px); font-size: 13.2px; } .back { position: absolute; left: 15px; top: 25px; } .back img, .like img, .menu img { width: 37.2px; height: 37.2px; } .like { position: absolute; left: 279px; top: 15px; } .menu { position: absolute; right: 15px; top: 25px; } .banner { width: 100%; height: 387px; position: relative; z-index: 1; } .swiper-container { width: 100%; /*height: 387px;*/ box-shadow: 0 -1px 3px #ddd; } .swiper-slide { text-align: center; /* Center slide text vertically */ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .swiper-pagination-bullet-active { background: #e94947; } .swiper-slide {} .swiper-slide img { width: 100%; height: 100%; } .summarize { background: white; width: 100%; margin-bottom: 5px ; } .cname { font-size: 14.4px; padding:0 10px 5px; margin: 0; } .price { color: #F02A40; font-size: 21.6px; margin: 0; padding:5px 10px; } .summarize .xxl{ color: white; background: -moz-linear-gradient(left, #f5364c, #e51329); /*Mozilla*/ background: -webkit-gradient(linear, 0 50%, 100% 50%, from(#f5364c), to(#e51329)); /*Old gradient for webkit*/ background: -webkit-linear-gradient(left, #f5364c, #e51329); /*new gradient for Webkit*/ background: -o-linear-gradient(left, #f5364c, #e51329); /*Opera11*/ } .price o{ font-size: 15px; color: #909090; } .summarize .xxl o{ font-size: 15px; color: white; } .price_old { color: #909090; font-size: 15px; /*padding-left: 9px;*/ /*padding-bottom: 9px;*/ margin: 0; padding: 5px 10px 0; } .compilations { position: relative; width: 100%; height: 30px; line-height: 24px; font-size: 10.8px; color: #727272; } .myf { position: absolute; left: 9px; } .yx { position: absolute; margin: 0 auto; left: 0; right: 0; text-align: center; } .dz { position: absolute; right: 9px; } .compilations { /*border-bottom: 1px solid #e6e6e6;*/ /*padding-bottom: 9px;*/ } .guarantee { width: 100%; margin-bottom: 5px ; background: white; } .guarantee .row { width: 100%; height: 42px; border-bottom: 1px solid #ebebeb; } .mui-table-view-cell:after{ height: 0; } .mui-table-view-cell.mui-collapse .mui-collapse-content{ width: 100%; background: transparent; } .row_{ width: 100%; font-size: 13.2px; border-bottom: 1px solid #ebebeb; } .guarantee .row img { height: 15px; margin-left: 12px; margin-top: 12px; float: left; } .guarantee .row .text { color: #525252; line-height: 42px; font-size: 13.2px; float: left; max-width: calc(100% - 65px); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; margin-left: 12px; } .guarantee .row .text1 { color: #e1202a; background: white; /*line-height: 42px;*/ font-size: 10.2px; float: left; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; margin-left: 12px; padding: 0 8px; margin-top: 10px; height: 20px; border: 1px solid #e1202a; border-radius: 3px; } .guarantee .row .lq { float: right; margin-top: 6px; margin-right: 9px; color: #909090; border-radius: 15px; line-height: 19px; padding: 4px 10px 2px; } .guarantee .row .caidan img { width: 15px; margin: 0; height: 3px; } .guarantee .row .caidan { border: none; float: right; margin-top: 13px; margin-right: 12px; } .guarantee .row .caidan:active { background: transparent; } #guarantee .row .text { color: black; } .cc1 { width: 100%; height: 27px; } .cclass_con { position: absolute; bottom: 0; left: 0; right: 0; } .cc2 { width: 100%; height: 81px; background: white; position: relative; border-bottom: 1px solid #e3e6ea; } .cc2 p { font-size: 17.6px; color: #e94744; position: absolute; left: 120px; top: 24px; } .cc2 span { font-size: 15px; position: absolute; left: 120px; top: 48px; } .cc2 o{ font-size: 12px; color: #e94744; position: absolute; left: 200px; top: 24px; } .cc2 l{ font-size: 10px; position: absolute; left: 200px; top: 48px; } .closecclass { font-size: 15.6px; color: #9b9b9b; position: absolute; padding: 9px 12px; right: 0; top: 0; } .closecclass img { width: 18px; } .cclass_con .img { background: white; padding: 6px; position: absolute; border: 1px solid #f2f2f2; border-radius: 6px; width: 85.8px; height: 85.8px; top: 0; left: 12px; z-index: 60; } .cclass_con .img img { width: 100%; height: 100%; border-radius: 3px; } .cclass1 { padding: 9px 0 0 12px; background: white; width: 100%; /*border-bottom: 1px solid #e3e6ea;*/ } .cclass1 p { color: #626262; font-size: 17.2px; padding-bottom: 6px; margin: 0; } .cclass1 .block { padding: 2px 6px; float: left; /*border: 1px solid #9e9e9e;*/ margin: 0px 18px 4px 0; border-radius: 6px; font-size: 14.4px; color: #909090; background: #f5f5f5; font-size: 17.5px; } .cclass1 .on { /*border: 1px solid #e94947;*/ color: #fff; background: #e61329; } .ensure { width: 50%; height: 48px; color: white; font-size: 14.4px; display: block; line-height: 51px; text-align: center; background: #e6122b; float: left; } .engwc { width: 50%; height: 48px; color: white; font-size: 14.4px; display: block; line-height: 51px; text-align: center; background: #ff9402; float: left; } .num { background: white; width: 100%; height: 51.6px; border-bottom: 1px solid #e3e6ea; color: #626262; font-size: 13.2px; padding: 0 18px; line-height: 51.6px; position: relative; } .num span { font-size: 15px; } .change_num { width: 168px; height: 30px; position: absolute; right: 30px; top: 10.5px; } .jia { background: #ebebeb; position: absolute; font-size: 21px; color: #e94947; line-height: 30px; width: 30px; text-align: center; right: 0; } .jian { background: #ebebeb; position: absolute; font-size: 21px; color: #e94947; line-height: 30px; width: 30px; text-align: center; left: 0; } .change_num input { position: absolute; width: 78px; margin: 0 15px; left: 30px; height: 30px; border: none; text-align: center; font-size: 18px; } .pjrk { width: 100%; background: white; margin-bottom: 5px ; } .pj_title { color: black; padding: 9px 12px; margin: 0; } .pj_remark { padding-left: 12px; } .pjr { padding: 3px 20px; margin: 0 12px 12px 0; font-size: 12px; float: left; background: #fdecea; color: #525252; border-radius: 20px; } .pjbtitle img { width: 25.2px; height: 25.2px; border-radius: 50%; overflow: hidden; float: left; } .pj_breviary { padding: 0 12px; } .pjbtitle p { color: #e61329; font-size: 13.2px; float: left; margin: 0; line-height: 25.2px; padding-left: 6px; } .pjbcon { color: #525252; font-size: 13.2px; margin: 3px 0; } .pjclass { color: #909090; font-size: 13.2px; margin-bottom: 6px; } .pj_all { margin: 14px auto; text-align: center; width: 99px; height: 36px; line-height: 36px; border: 1px solid #e61329; color: #e61329; border-radius: 6px; font-size: 14.4px; } .shop_info { background: white; width: 100%; margin-bottom: 5px; } .shop_title { padding: 12px; } .shop_title img { width: 48px; height: 48px; float: left; } .shop_title p { float: left; font-size: 16.8px; color: black; margin: 0; margin-top: 3px; margin-left: 6px; } .shopinfocon {} .sicl { width: 24%; border-right: 1px solid #e6e6e6; text-align: center; float: left; margin: 6px 0; } .sicl_p1 { color: #525252; font-size: 13.2px; } .sicl_p2 { color: #909090; font-size: 13.2px; margin-top: 9px; } .sicr { text-align: center; float: left; width: calc(28% - 3px); } .sicr_p { color: #909090; font-size: 12px; } .sicr_p o { color: #e61329; } .footer { width: 100%; height: 50px; background: white; position: fixed; bottom: 0; left: 0; border-top: 1px solid #ebebeb; z-index: 13; } .footerl { position: relative; float: left; height: 50px; width: calc(14% - 2px); text-align: center; } .footerl img { width: 22.8px; margin-top: 6px; } .footerl p { width: 100%; margin: 0; font-size: 13.2px; position: absolute; bottom: 0; } .footerl1 { position: relative; width: 13%; float: left; height: 50px; text-align: center; border-left: 1px solid #ebebeb; } .footerl1 img { height: 16.8px; margin-top: 8px; } .footerl1 p { width: 100%; margin: 0; position: absolute; bottom: 0; font-size: 13.2px } .footerr1 { width: 30%; height: 50px; line-height: 50px; text-align: center; color: white; background: #ff9402; float: right; } .footerr2 { width: 30%; height: 50px; line-height: 50px; text-align: center; color: white; background: #E6122B; float: right; } .imgcon { border-bottom: 50px solid #ebebeb; } .imgcon img { width: 100%; padding: 0 1%; display: block; } .pswp__top-bar { margin-top: 20px; } .ccclass { width: 100%; } .youhuiquan_con { position: relative; } .yhq_con { position: absolute; bottom: 0; right: 0; left: 0; background: white; } .thq_close { width: 100%; height: 51px; background: #E6122B; color: white; text-align: center; line-height: 51px; } .yhqcon { padding: 3%; } .thq_block { width: 100%; border-radius: 6px; position: relative; } .thq_block img { width: 100%; } .thq_block p { position: absolute; font-size: 35px; color: white; top: 50%; left: 10px; transform: translateY(-50%); } .thq_block span { position: absolute; font-size: 18px; color: white; top: 50%; right: 30%; transform: translateY(-50%); } .lq_btn{ position: absolute; font-size: 18px; color: white; top: 50%; right: 0; transform: translateY(-50%); border: none; background: transparent; width: 25%; height: 60px; } .thq_block .lq_btn:hover{ background: transparent; } .ccclass{ /*max-height: 800px;*/ } .ccclass .mui-scroll-wrapper{ /*max-height: 500px;*/ } #shareout{ position: relative; } #shareout o{ width: calc(100% - 50px); display: block; } #shareout img{ position: absolute; width: 34.4px; padding: 10px; right: 20px; top: 50%; transform: translateY(-50%); } /*秒杀*/ .banner{ position: relative; } .miaosha{ /*position: absolute;*/ width: 100%; /*padding:0 1%;*/ bottom: 5px; left: 0; right: 0; z-index: 100000; position: relative; background: -moz-linear-gradient(left, #ff0048, #ff3b85); /*Mozilla*/ background: -webkit-gradient(linear, 0 50%, 100% 50%, from(#ff0048), to(#ff3b85)); /*Old gradient for webkit*/ background: -webkit-linear-gradient(left, #ff0048, #ff3b85); /*new gradient for Webkit*/ background: -o-linear-gradient(left, #ff0048, #ff3b85); /*Opera11*/ } .miaosha img{ width: 100%; display: block; } .con{ transform: translateY(-10px); } .xiangou{ position: absolute; color: white; bottom: 1%; left: 44%; font-size: 13px; } .miaosha1{ position: absolute; font-size: 30px; color: white; top: 18%; left: 5%; } .miaosha1 o{ font-size: 10px; } .miaosha2{ position: absolute; font-size: 13px; color: white; left: 27%; bottom: 0; height: 20px; } .miaosha3{ position: absolute; left: 65%; right: 2%; bottom: 5%; text-align: center; font-size: 14px; color: #ff2870; } .miaosha3 o{ background: #ff2870; color: white; margin: 0 2%; display: inline-block; padding: 2px 4px; border-radius: 5px ; } .miaosha4{ font-size: 12px; color: white; border: 1px solid white; position: absolute; left: 5%; bottom: 5%; padding: 0 10px; border-radius:50px; height: 16px; line-height: 14px; } .miaosha5{ position: absolute; left: 65%; right: 2%; top: 10%; font-weight: bold; text-align: center; font-size: 14px; color: #ff2870; } .summarize{ border-top: none; }