123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749 |
- page {
- background: #f4f4f4;
- height: 100%;
- }
- image {
- width: 100%;
- height: 100%;
- }
- .container {
- height: auto;
- padding-bottom: 110rpx;
- }
- .swiper-con {
- position: relative;
- }
- swiper {
- height: 750rpx;
- width: 100%;
- }
- swiper image {
- height: 750rpx;
- width: 100%;
- }
- .video-container {
- position: relative;
- display: flex;
- flex-direction: column;
- width: 100%;
- height: 750rpx;
- justify-content: center;
- align-items: center;
- background: #000;
- z-index: 10;
- }
- .video-container video {
- display: block;
- width: 100%;
- }
- .play-btn {
- position: absolute;
- left: 50%;
- bottom: 8%;
- padding: 2rpx;
- background: rgba(255, 255, 255, 0.75);
- border-radius: 50rpx;
- color: #000;
- font-size: 24rpx;
- text-align: center;
- transform: translateX(-50%);
- display: flex;
- justify-content: space-between;
- align-items: center;
- z-index: 5;
- }
- .play-icon {
- width: 50rpx;
- height: 50rpx;
- }
- .play-text {
- padding-right: 10rpx;
- margin: 0 10rpx;
- }
- .video-stop {
- padding: 2rpx 8rpx;
- }
- .video-index {
- z-index: 15;
- }
- .content{
- padding: 24rpx;
- background: #F6F6F6;
- /* background: linear-gradient( 180deg, #FFFFFF 0%, #F6F6F6 100%); */
- border-radius: 32rpx 32rpx 0rpx 0rpx;
- margin-top: -20rpx;
- position: relative;
- z-index: 2;
- }
- /** 商品信息 */
- .prod-info {
- padding: 20rpx;
- position: relative;
- background: #fff;
- border-radius: 16rpx;
- }
- .tit-wrap {
- position: relative;
- line-height: 32rpx;
- /* padding-right: 104rpx; */
- text-align: justify;
- }
- .prod-tit {
- line-height: 46rpx;
- font-size: 32rpx;
- color: #222222;
- padding-right: 20rpx;
- font-weight: bold;
- }
- .tit-wrap .col {
- position: absolute;
- top: -90rpx;
- right: 0;
- width: 80rpx;
- color: #666;
- font-size: 24rpx;
- padding-left: 20rpx;
- text-align: center;
- }
- .tit-wrap .col image {
- display: block;
- margin: auto;
- width: 40rpx;
- height: 40rpx;
- }
- .tit-wrap .col::after {
- content: "";
- display: block;
- width: 1px;
- height: auto;
- background: #f1f1f1;
- position: absolute;
- top: 0;
- bottom: 5px;
- left: 0;
- }
- .sales-p {
- background: #fff;
- line-height: 40rpx;
- color: #999;
- font-size: 28rpx;
- margin-top: 6rpx;
- margin-right: 104rpx;
- text-align: justify;
- }
- .prod-price {
- font-size: 30rpx;
- height: 100rpx;
- line-height: 100rpx;
- }
- .price {
- color: #e43130;
- font-size: 26rpx;
- font-weight: 600;
- margin-right: 30rpx;
- font-size: 48rpx;
- }
- .price-num {
- font-size: 48rpx;
- font-weight: 600;
- /* font-weight: 400; */
- }
- .sales {
- color: #999;
- }
- .share-icon {
- position: absolute;
- right: 50rpx;
- top: 50rpx;
- background: none;
- line-height: 40rpx;
- border: none;
- outline: none;
- box-shadow: 0;
- padding: 0;
- }
- .share-icon::after {
- border: none;
- }
- .share-icon image {
- width: 60rpx;
- height: 60rpx;
- }
- .share-text {
- font-size: 26rpx;
- color: #999;
- line-height: 30rpx;
- }
- /* 积分商品价格 */
- .integral-prod-price {
- display: inline-block;
- padding: 10rpx 0 40rpx;
- color: #e43130;
- font-size: 30rpx;
- }
- /** end 商品信息 */
- /* 商品促销活动(优惠 */
- .discount {
- background: #fff;
- position: relative;
- margin-top: 20rpx;
- padding: 28rpx 100rpx;
- }
- .discount-con {
- display: flex;
- flex-direction: column;
- }
- .discount-item {
- display: flex;
- }
- .popup-discount {
- margin: 30rpx 0;
- }
- .popup-discount .discount-item {
- margin-bottom: 10rpx;
- padding-bottom: 8rpx;
- }
- .popup-discount .discount-item:last-child {
- padding-bottom: 8rpx;
- }
- .discount-tag {
- color: #e43130;
- font-size: 20rpx;
- border-radius: 4rpx;
- border: 2rpx solid #e43130;
- margin-right: 10rpx;
- padding: 0 6rpx;
- align-self: center;
- }
- .discount-content {
- font-size: 24rpx;
- flex: 1;
- display: -webkit-box;
- -webkit-box-orient: vertical;
- -webkit-line-clamp: 1;
- overflow: hidden;
- text-overflow: ellipsis;
- }
- /* 商品促销活动(优惠-end*/
- /**优惠券*/
- .coupon {
- padding: 28rpx 100rpx 14rpx 100rpx;
- background: #fff;
- position: relative;
- margin-top: 20rpx;
- }
- .discount .coupon-tit,
- .coupon .coupon-tit {
- position: absolute;
- display: inline-block;
- width: 60rpx;
- left: 20rpx;
- font-size: 24rpx;
- top: 28rpx;
- line-height: 36rpx;
- color: #999;
- }
- .coupon-con .item {
- position: relative;
- display: inline-block;
- vertical-align: top;
- padding: 0 18rpx;
- background: #e43130;
- height: 36rpx;
- line-height: 36rpx;
- color: #fff;
- font-size: 22rpx;
- margin: 0 16rpx 16rpx 0;
- font-family: arial;
- }
- .coupon-con .item:before,
- .coupon-con .item:after {
- content: "";
- display: block;
- width: 0;
- height: 0;
- position: absolute;
- top: 0;
- border: 18rpx solid transparent;
- }
- .coupon-con .item:before {
- left: 0;
- border-left: 4rpx solid #fff;
- }
- .coupon-con .item:after {
- right: 0;
- border-right: 4rpx solid #fff;
- }
- .coupon .num {
- position: absolute;
- right: 80rpx;
- width: 80rpx;
- top: 28rpx;
- text-align: right;
- font-size: 24rpx;
- color: #999;
- line-height: 36rpx;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- font-family: arial;
- }
- .more {
- position: absolute;
- right: 20rpx;
- width: 60rpx;
- top: 10rpx;
- text-align: right;
- font-size: 40rpx;
- color: #999;
- letter-spacing: 1px;
- }
- /* 已选 */
- .sku {
- padding: 20rpx;
- background: #fff;
- margin-top: 20rpx;
- position: relative;
- line-height: 48rpx;
- }
- .sku-tit {
- position: absolute;
- display: inline-block;
- width: 60rpx;
- left: 20rpx;
- font-size: 24rpx;
- top: 20rpx;
- color: #999;
- }
- .sku-con {
- margin: 0 80rpx;
- white-space: nowrap;
- text-overflow: ellipsis;
- overflow: hidden;
- font-size: 28rpx;
- font-weight: bold;
- }
- /** 评价*/
- .cmt-wrap {
- background: #fff;
- margin-top: 20rpx;
- position: relative;
- line-height: 48rpx;
- }
- .cmt-tit {
- font-size: 32rpx;
- position: relative;
- border-bottom: 1px solid #ddd;
- padding: 20rpx;
- display: flex;
- justify-content: space-between;
- }
- .cmt-t {
- width: 300rpx;
- font-size: 32rpx;
- color: #222222;
- font-weight: bold;
- }
- .cmt-good {
- color: #FF4D3A;
- font-size: 24rpx;
- }
- .cmt-count {
- position: absolute;
- right: 20rpx;
- top: 20rpx;
- font-size: 24rpx;
- color: #666;
- }
- .cmt-more {
- width: 10rpx;
- height: 10rpx;
- border-top: 2rpx solid #FF4D3A;
- border-right: 2rpx solid #FF4D3A;
- transform: rotate(45deg);
- margin-left: 10rpx;
- display: inline-block;
- }
- .cmt-cont {
- padding: 0 20rpx;
- }
- .cmt-tag {
- position: relative;
- padding: 14px 3px 0 0;
- margin: 0;
- border-radius: 8rpx;
- }
- .cmt-tag text {
- margin: 0 6px 10px 0;
- background: #F0F0F0;
- display: inline-block;
- padding: 0 10px;
- height: 25px;
- border-radius: 3px;
- line-height: 25px;
- font-size: 12px;
- font-family: -apple-system, Helvetica, sans-serif;
- color: #666;
- }
- .cmt-tag text.selected {
- color: #fff;
- background: #04358D;
- }
- .cmt-item {
- position: relative;
- padding: 10px 0;
- }
- .cmt-item::after {
- content: "";
- height: 0;
- display: block;
- border-bottom: 1px solid #ddd;
- position: absolute;
- left: 0;
- right: 0;
- bottom: 0;
- border-bottom-color: #e5e5e5;
- }
- .cmt-user {
- line-height: 25px;
- margin-bottom: 8px;
- font-size: 12px;
- }
- .cmt-user-info {
- display: flex;
- align-items: center;
- width: 400rpx;
- }
- .cmt-user .user-img {
- width: 25px;
- height: 25px;
- border-radius: 50%;
- vertical-align: middle;
- }
- .cmt-user .nickname {
- margin-left: 10px;
- display: inline-block;
- color: #333;
- max-width: 8.2em;
- height: 25px;
- line-height: 27px;
- }
- .cmt-user .stars {
- display: flex;
- margin-left: 3px;
- }
- .cmt-user .stars image {
- width: 35rpx;
- height: 35rpx;
- }
- .cmt-user .date {
- float: right;
- color: #999;
- margin-left: -60px;
- }
- .cmt-cnt {
- overflow: hidden;
- text-overflow: ellipsis;
- display: -webkit-box;
- -webkit-line-clamp: 3;
- -webkit-box-orient: vertical;
- position: relative;
- line-height: 1.5;
- font-size: 14px;
- margin: 5px 0;
- word-break: break-all;
- max-height: 126px;
- }
- .cmt-attr {
- height: 85px;
- width: 100%;
- white-space: nowrap;
- }
- .cmt-attr .img-wrap {
- width: 85px;
- height: 85px;
- display: inline-block;
- }
- .cmt-attr image {
- display: inline-block;
- width: 80px;
- height: 80px;
- margin-right: 5px;
- margin-bottom: 5px;
- border-radius: 2px;
- background: #f3f3f3;
- }
- .cmt-more-v {
- text-align: center;
- background-color: #fff;
- font-size: 12px;
- }
- .cmt-more-v text {
- height: 25px;
- line-height: 25px;
- font-size: 12px;
- text-align: center;
- color: #333;
- padding: 0px 10px;
- margin: 10px 0;
- border: 1px solid #ccc;
- border-radius: 40px;
- display: inline-block;
- }
- /** 评价弹窗 */
- .cmt-popup {
- position: fixed;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
- z-index: 5;
- background-color: #fff;
- padding-bottom: 98rpx;
- }
- .cmt-popup .cmt-cont {
- height: calc(100% - 80rpx);
- overflow: auto;
- }
- .cmt-popup .cmt-cnt {
- -webkit-line-clamp: 20;
- max-height: 500px;
- }
- .cmt-reply {
- font-size: 14px;
- border-top: 1px dashed #ddd;
- padding: 5px 0;
- }
- .cmt-reply .reply-tit {
- color: #e43130;
- }
- .cmt-reply .reply-content {
- word-wrap: break-word;
- }
- .cmt-popup .load-more {
- font-size: 14px;
- padding: 20px;
- text-align: center;
- margin-bottom: 10px;
- }
- .cmt-popup .load-more text {
- border: 1px solid #ddd;
- padding: 5px 10px;
- border-radius: 10px;
- color: #666;
- }
- /** 店铺 */
- .shop-box {
- margin: 20rpx 0;
- background: #fff;
- padding: 20rpx;
- }
- /* .shopbox-head {
- padding-bottom: 24rpx;
- } */
- .shop-logo {
- display: inline-block;
- width: 80rpx;
- height: 80rpx;
- background: #fff;
- margin-right: 20rpx;
- vertical-align: middle;
- }
- .shop-logo image{
- border-radius: 16rpx;
- }
- .shop-name,
- .self-operate {
- display: inline-block;
- vertical-align: middle;
- }
- .shop-name {
- font-size: 30rpx;
- font-weight: bold;
- }
- .self-operate {
- width: 112rpx;
- height: 36rpx;
- background: #FF4D3A;
- border-radius: 8rpx 8rpx 8rpx 8rpx;
- font-size: 24rpx;
- color: #FFFFFF;
- text-align: center;
- /* padding: 5rpx 15rpx; */
- margin-left: 15rpx;
- }
- /* 粉丝&商品 */
- .shop-situation {
- margin: 25rpx 0;
- }
- .situation-item {
- display: inline-block;
- width: 49%;
- border-right: 1rpx solid #e4e4e4;
- text-align: center;
- }
- .situation-item:last-child {
- border: none;
- }
- .situation-item-num {
- font-size: 32rpx;
- line-height: 2em;
- }
- .situation-item-txt {
- font-size: 23rpx;
- color: #999;
- }
- /* 收藏店铺&进入店铺 */
- .handle-shop-item {
- display: inline-block;
- width: 48%;
- margin-right: 20rpx;
- border: 1rpx solid #e4e4e4;
- border-radius: 8rpx;
- padding: 10rpx 0;
- text-align: center;
- }
- .handle-shop-item:last-child {
- margin: 0;
- }
- .handle-shop-icon {
- display: inline-block;
- width: 40rpx;
- height: 40rpx;
- margin-right: 10rpx;
- }
- .handle-shop-icon>image {
- width: 100%;
- height: 100%;
- vertical-align: middle;
- }
- .handle-txt {
- font-size: 28rpx;
- vertical-align: middle;
- }
- /** 商品详情 */
- .prod-detail {
- background: #fff;
- margin-top: 20rpx;
- position: relative;
- line-height: 48rpx;
- overflow: hidden;
- padding: 20rpx 0;
- }
- rich-text {
- width: 100% !important;
- }
- .det-tit {
- width: 300rpx;
- }
- .detail-tit {
- font-size: 32rpx;
- position: relative;
- border-bottom: 1px solid #ddd;
- padding: 20rpx;
- }
- .prod-detail image {
- width: 750rpx !important;
- display: block;
- }
- rich-text image {
- width: 100% !important;
- }
- img {
- width: 100% !important;
- display: block;
- }
- /** end 商品详情 */
- /** 底部按钮 */
- .cart-footer {
- position: fixed;
- bottom: 0;
- left: 0;
- width: 100%;
- display: flex;
- align-items: center;
- flex-direction: row nowrap;
- height: 110rpx;
- z-index: 3;
- box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.05);
- background: #fff;
- }
- .cart-footer .btn {
- position: relative;
- display: flex;
- flex-grow: 1;
- justify-content: center;
- align-items: center;
- width: 0;
- background-color: #fff;
- font-size: 28rpx;
- flex-flow: column;
- }
- .cart-footer .btn.icon {
- flex-grow: 0;
- flex-shrink: 0;
- width: 90rpx;
- font-size: 23rpx;
- color: #666;
- }
- .cart-footer .btn.icon image {
- width: 54rpx;
- height: 54rpx;
- }
- .cart-footer .btn.cart {
- border: 2rpx solid #ddd;
- font-weight: bold;
- font-size: 28rpx;
- color: #04358D;
- margin: 0 12rpx;
- text-align: center;
- }
- .cart-footer .btn.buy {
- background: #04358D;
- color: #fff;
- margin-right: 12rpx;
- font-size: 28rpx;
- text-align: center;
- }
- .cart-radius {
- border-radius: 60rpx;
- height: 2.8em;
- line-height: 2.8em;
- }
- .cart-footer.gray .btn.cart,
- .cart-footer.gray .btn.buy {
- display: block;
- background: #ddd;
- }
- .cart-footer .btn .badge {
- position: absolute;
- top: 3rpx;
- left: 55rpx;
- display: inline-block;
- width: 28rpx;
- height: 28rpx;
- border-radius: 14rpx;
- background-color: #e43130;
- text-align: center;
- line-height: 28rpx;
- font-size: 18rpx;
- color: #fff;
- }
- /* .cart-footer .btn .badge-1 {
- width: 36rpx;
- } */
- .cart-footer .btn .badge-2 {
- width: 48rpx;
- left: 52rpx;
- }
- /** end 底部按钮 */
- .contact-btn-box{
- position: relative;
- }
- .contact-btn{
- position: absolute;
- top: 0;
- left: 6rpx;
- height: 90rpx;
- width: 80rpx;
- text-align: center;
- background-color: transparent;
- }
- .contact-btn::after{
- border: none;
- }
- /* 积分 底部按钮 */
- .ex-integral-foot {
- position: fixed;
- bottom: 0;
- left: 0;
- width: 100%;
- display: flex;
- flex-direction: row nowrap;
- color: #fff;
- z-index: 4;
- box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.05);
- }
- .ex-integral-btn {
- box-sizing: border-box;
- width: 100%;
- margin: 20rpx;
- padding: 1em 0;
- background: #e43130;
- color: #fff;
- text-align: center;
- font-size: 30rpx;
- line-height: 1em;
- border-radius: 8rpx;
- }
- /** 【拼团】底部按钮 */
- .foot-box {
- margin-top: 100rpx;
- }
- .footer {
- position: fixed;
- bottom: 0;
- width: 100%;
- box-sizing: border-box;
- height: 100rpx;
- background: #fff;
- /* box-shadow: 10rpx 0 10rpx 0 #f0f0f0; */
- display: flex;
- align-items: center;
- }
- .foot-btn {
- position: relative;
- display: inline-block;
- width: 100rpx;
- font-size: 23rpx;
- color: #666;
- text-align: center;
- padding-top: 6rpx;
- background: #fff;
- }
- .foot-btn>image {
- display: block;
- width: 54rpx;
- height: 54rpx;
- margin: 0 auto;
- }
- .buy-btn {
- display: inline-block;
- font-size: 30rpx;
- /* height: 100rpx;
- line-height: 105rpx; */
- vertical-align: top;
- width: 34.3%;
- color: #fff;
- text-align: center;
- }
- .alone-buy {
- background: #fd7d46;
- margin: 0 12rpx;
- }
- .group-buy {
- background: #e43130;
- margin-right: 12rpx;
- }
- /* 购物车数量显示 */
- .badge {
- position: absolute;
- top: 10rpx;
- left: 50rpx;
- display: inline-block;
- width: 28rpx;
- height: 28rpx;
- border-radius: 14rpx;
- background-color: #e43130;
- text-align: center;
- line-height: 28rpx;
- font-size: 18rpx;
- color: #fff;
- }
- /* .badge-1 {
- width: 36rpx;
- } */
- .badge-2 {
- width: 48rpx;
- left: 52rpx;
- }
- /** end 底部按钮 */
- /** 优惠券弹窗 **/
- .popup-hide {
- position: fixed;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
- z-index: 5;
- background-color: rgba(0, 0, 0, 0.3);
- }
- .popup-box {
- position: absolute;
- bottom: 0;
- width: 100%;
- min-height: 375px;
- max-height: 475px;
- overflow: hidden;
- background-color: #fff;
- }
- .popup-tit {
- position: relative;
- height: 46px;
- line-height: 46px;
- padding-left: 10px;
- font-size: 16px;
- color: #333;
- background-color: #f7f7f7;
- }
- .close {
- color: #aaa;
- border-radius: 12px;
- line-height: 20px;
- text-align: center;
- height: 20px;
- width: 20px;
- font-size: 18px;
- padding: 1px;
- top: 16rpx;
- right: 10px;
- position: absolute;
- }
- .close::before {
- content: "\2716";
- }
- .popup-cnt {
- max-height: 429px;
- overflow: auto;
- padding: 0 10px;
- }
- /** 规格弹窗**/
- .pup-sku {
- position: fixed;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
- z-index: 6;
- background-color: rgba(0, 0, 0, 0.3);
- }
- .pup-sku-main {
- position: absolute;
- bottom: 0;
- width: 100%;
- min-height: 375px;
- max-height: 475px;
- background-color: #fff;
- }
- .pup-sku-header {
- position: relative;
- font-size: 16px;
- color: #333;
- padding: 20rpx 20rpx;
- background-color: #fff;
- border-bottom: 1rpx solid #f2f2f2;
- padding-top: 35rpx;
- }
- .pup-sku-img {
- display: inline-block;
- width: 27%;
- height: 180rpx;
- vertical-align: middle;
- border-radius: 10rpx;
- }
- .pup-sku-img image {
- display: block;
- width: 180rpx;
- height: 100%;
- }
- .pup-sku-prod {
- display: inline-block;
- width: 70%;
- vertical-align: middle;
- padding-left: 10rpx;
- }
- .prod-title {
- font-size: 28rpx;
- display: -webkit-box;
- -webkit-line-clamp: 1;
- /*设定显示行数*/
- -webkit-box-orient: vertical;
- word-break: break-all;
- overflow: hidden;
- text-overflow: ellipsis;
- max-width: 100%;
- margin: 15rpx 0;
- }
- .pup-sku-price {
- display: inline-block;
- height: 1.5em;
- line-height: 1.5em;
- color: #e43130;
- font-size: 26rpx;
- }
- .group-sku-pri {
- display: flex;
- align-items: center;
- }
- .pup-sku-price-int {
- font-size: 38rpx;
- }
- .pup-sku-prop {
- display: block;
- font-size: 26rpx;
- color: #333;
- line-height: 1.4em;
- padding-right: 10px;
- margin-top: 16rpx;
- display: -webkit-box;
- -webkit-line-clamp: 1;
- /*设定显示行数*/
- -webkit-box-orient: vertical;
- word-break: break-all;
- overflow: hidden;
- text-overflow: ellipsis;
- }
- .pup-sku-prop text:first-child {
- color: #999;
- }
- .pup-sku-body {
- box-sizing: border-box;
- padding-bottom: 100px;
- overflow: auto;
- }
- .pup-sku-area {
- max-height: 480rpx;
- overflow-y: scroll;
- }
- .pup-sku-area .sku-kind {
- font-size: 12px;
- margin: 0 10px;
- height: 40px;
- line-height: 40px;
- color: #000;
- font-weight: bold;
- }
- .pup-sku-area .sku-choose {
- overflow: hidden;
- margin-bottom: 3px;
- }
- .sku-choose-item {
- display: inline-block;
- min-width: 100rpx;
- max-width: 540rpx;
- padding: 0 16rpx;
- overflow: hidden;
- height: 50rpx;
- line-height: 50rpx;
- text-align: center;
- margin-left: 10px;
- margin-bottom: 10px;
- border-radius: 30rpx;
- color: #333;
- background-color: #f7f7f7;
- font-size: 14px;
- border: 1px solid #aaa;
- }
- .sku-choose-item.active {
- background-color: #04358D;
- color: #fff;
- border: 1px solid #04358D !important;
- }
- .sku-choose-item.gray {
- background-color: #f9f9f9;
- color: #ddd;
- }
- .sku-choose-item.dashed {
- border: 1px dashed #ccc;
- }
- .pup-sku-count {
- padding: 0 20rpx;
- font-size: 24rpx;
- margin: 10rpx 0;
- }
- .pup-sku-count .count-name {
- height: 31px;
- line-height: 31px;
- width: 100rpx;
- color: #000;
- font-weight: bold;
- }
- .pup-sku-count .num-wrap {
- position: relative;
- z-index: 0;
- width: 110px;
- float: right;
- vertical-align: middle;
- display: flex;
- }
- .num-wrap .minus,
- .num-wrap .plus {
- position: relative;
- max-width: 30px;
- min-width: 30px;
- height: 30px;
- line-height: 30px;
- background: #f7f7f7;
- text-align: center;
- }
- .num-wrap .minus {
- border-top-left-radius: 3px;
- border-bottom-left-radius: 3px;
- }
- .num-wrap .plus {
- border-top-right-radius: 3px;
- border-bottom-right-radius: 3px;
- }
- .num-wrap .row {
- border-radius: 20px;
- position: absolute;
- top: 50%;
- left: 50%;
- margin-left: -7px;
- margin-top: -1px;
- width: 14px;
- height: 2px;
- background-color: #ccc;
- }
- .num-wrap .col {
- border-radius: 20px;
- position: absolute;
- top: 50%;
- left: 50%;
- margin-left: -1px;
- margin-top: -7px;
- width: 2px;
- height: 14px;
- background-color: #999;
- }
- .pup-sku-count .text-wrap {
- position: relative;
- width: 45px;
- z-index: 0;
- margin: 0 1px;
- }
- .pup-sku-count .text-wrap input {
- height: 30px;
- width: 100%;
- color: #333;
- background: #fff;
- font-size: 12px;
- text-align: center;
- border: none;
- background: #f7f7f7;
- }
- .pup-sku-footer {
- position: fixed;
- bottom: 0;
- left: 0;
- width: 100%;
- display: flex;
- flex-direction: row nowrap;
- height: 110rpx;
- z-index: 6;
- justify-content: center;
- /* box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.05); */
- }
- .pup-sku-footer.gray .btn,
- .pup-sku-footer.gray .btn,
- .pup-sku-footer .btn {
- position: relative;
- display: flex;
- flex-grow: 1;
- justify-content: center;
- align-items: center;
- background-color: #fff;
- font-size: 30rpx;
- flex-flow: column;
- border-radius: 60rpx;
- height: 2.8em;
- width: 45%;
- margin: 0 15rpx;
- }
- .pup-sku-footer .btn.cart {
- border: 2rpx solid #ddd;
- color: #04358D;
- }
- .pup-sku-footer .btn.buy {
- background: #04358D;
- color: #fff;
- }
- .pup-sku-footer.gray .btn.cart {
- background: #ddd;
- }
- .pup-sku-footer.gray .btn.buy {
- background: #ddd;
- }
- /* 悬浮按钮 */
- .suspension-box {
- position: fixed;
- top: 920rpx;
- right: 40rpx;
- z-index: 2;
- }
- .scroll-top {
- top: 780rpx;
- }
- .suspension-btn {
- display: flex;
- justify-content: center;
- align-items: center;
- text-align: center;
- width: 80rpx;
- height: 80rpx;
- border-radius: 50%;
- background: #fff;
- border: 1rpx solid #ccc;
- margin-top: 30rpx;
- }
- button.btn-type {
- background: #fff;
- padding: 0;
- margin: 0;
- margin-top: 30rpx;
- }
- button.btn-type::after {
- border: 0;
- }
- .suspension-btn image {
- display: block;
- width: 40rpx;
- height: 40rpx;
- }
- /* 赚字浮层 */
- .promo-con .earn {
- background: rgba(230, 55, 58, 0.9);
- box-shadow: 1px 2px 6px rgba(78, 78, 78, 0.4);
- color: #fff;
- border-radius: 50%;
- width: 80rpx;
- height: 80rpx;
- font-size: 32rpx;
- margin: auto;
- text-align: center;
- line-height: 80rpx;
- }
- /* /悬浮按钮 */
- /*分享弹窗 */
- .promo-share {
- position: fixed;
- top: 0;
- left: 0;
- background: rgba(0, 0, 0, 0.7);
- width: 100%;
- height: 100%;
- z-index: 99;
- }
- .promo-tit {
- padding-top: 40rpx;
- font-size: 24rpx;
- text-align: center;
- margin-left: 80rpx;
- }
- .promo-main {
- background: #fff;
- position: absolute;
- bottom: 0rpx;
- width: 100%;
- height: 500rpx;
- z-index: 99;
- }
- .promo-icons-close image {
- width: 45rpx;
- height: 45rpx;
- /* border-radius: 55%; */
- float: right;
- padding-right: 20rpx;
- padding-top: 20rpx;
- }
- .promo-desc {
- margin-left: 73rpx;
- width: 600rpx;
- text-align: center;
- }
- .promo-desc text {
- padding: 20rpx;
- font-size: 20rpx;
- color: #999;
- line-height: 34rpx;
- display: inline-block;
- }
- .promo-icons {
- font-size: 20rpx;
- color: #666;
- display: flex;
- justify-content: space-around;
- padding: 10rpx 150rpx;
- }
- .promo-icons image {
- width: 75rpx;
- height: 75rpx;
- border-radius: 50%;
- }
- .promo-img1 {
- display: flex;
- flex-flow: column;
- align-items: center;
- line-height: 75rpx;
- font-size: 22rpx;
- background: none;
- border: 0;
- margin: 0;
- padding: 0;
- }
- .promo-img1::after {
- border: 0;
- }
- .promo-btn {
- font-size: 28rpx;
- width: 90%;
- height: 80rpx;
- border: 1px #e5e5e5 solid;
- text-align: center;
- line-height: 80rpx;
- margin-left: 40rpx;
- }
- /** 二维码弹窗 */
- .code-popup {
- position: fixed;
- top: 0;
- left: 0;
- background: rgba(0, 0, 0, 0.7);
- width: 100%;
- height: 100%;
- z-index: 9;
- }
- .code-main {
- margin: auto;
- left: 0;
- right: 0;
- top: 0;
- bottom: 0;
- position: fixed;
- width: 500rpx;
- height: 700rpx;
- }
- .close-png {
- width: 50rpx;
- height: 50rpx;
- margin-top: -10rpx;
- }
- .code-v {
- padding: 20rpx;
- border-radius: 6rpx;
- background: #fff;
- }
- .wx-code {
- width: 460rpx;
- height: 460rpx;
- }
- .close-v {
- text-align: right;
- height: 60rpx;
- }
- .code-txt {
- margin-top: 20rpx;
- text-align: center;
- color: #fff;
- font-size: 28rpx;
- background: #3a86b9;
- border-radius: 6rpx;
- height: 80rpx;
- line-height: 80rpx;
- }
- /** 二维码弹窗 end */
- /* 倒计时栏 */
- .countdown-box {
- width: 100%;
- height: 85rpx;
- line-height: 85rpx;
- /* background: #e92121; */
- background: #e43130;
- color: #fff;
- padding: 0 30rpx;
- box-sizing: border-box;
- }
- .second-kill {
- font-size: 33rpx;
- }
- .countdown-content {
- float: right;
- font-size: 28rpx;
- height: 85rpx;
- line-height: 85rpx;
- text-align: left;
- display: flex;
- justify-content: space-between;
- align-items: center;
- }
- .countdown-tips {
- font-size: 24rpx;
- opacity: 0.8;
- margin-right: 10rpx;
- }
- .countdown-time {
- font-size: 24rpx;
- padding-top: 5rpx;
- }
- /* 价格 */
- .goods-price {
- padding: 15rpx 0;
- border-bottom: 1px solid #f3f3f3;
- }
- .current-price {
- display: flex;
- align-items: center;
- color: #e43130;
- font-size: 34rpx;
- /* margin-right: 15rpx; */
- vertical-align: middle;
- }
- .original {
- font-size: 26rpx;
- color: #888888;
- margin-top: 15rpx;
- }
- .original-price {
- font-size: 26rpx;
- text-decoration: line-through;
- color: #999999;
- margin-left: 10rpx;
- }
- /* 拼团价格 */
- .condition {
- font-size: 24rpx;
- border: 1rpx solid red;
- padding: 2rpx 10rpx;
- vertical-align: middle;
- }
- /* 拼团详情 */
- .spell-infor {
- border-top: 20rpx solid #f7f7f7;
- font-size: 28rpx;
- padding: 20rpx;
- background: #fff;
- }
- .spell-infor-title {
- font-size: 26rxp;
- }
- .spell-infor-content {
- position: relative;
- padding-top: 20rpx;
- padding-bottom: 20rpx;
- border-bottom: 1rpx solid #f2f2f2;
- }
- .head-img {
- display: inline-block;
- width: 70rpx;
- height: 70rpx;
- margin-right: 15rpx;
- vertical-align: bottom;
- border-radius: 50%;
- }
- .head-img>image {
- border-radius: 50%;
- }
- .spell-msg {
- display: inline-block;
- vertical-align: top;
- font-size: 24rpx;
- }
- .spell-text {
- padding-top: 10rpx;
- color: #aaa;
- }
- .red-font {
- color: #e43130;
- }
- .join-group {
- position: absolute;
- right: 10rpx;
- bottom: 30rpx;
- color: #e43130;
- border: 1rpx solid #e43130;
- padding: 10rpx 15rpx;
- font-size: 24rpx;
- }
- .rules {
- position: relative;
- font-size: 24rpx;
- padding-top: 20rpx;
- }
- .rules-text02 {
- float: right;
- font-size: 23rpx;
- color: #aaa;
- padding-right: 30rpx;
- }
- .right-arrow {
- position: absolute;
- right: 5rpx;
- top: 20rpx;
- display: inline-block;
- width: 20rpx;
- height: 20rpx;
- }
- .act-price-con {
- border: 1px solid #e4393c;
- margin-left: 20rpx;
- padding: 2rpx 5rpx;
- border-radius: 3rpx;
- }
- /* 列表为空 */
- .empty {
- margin-top: 100rpx;
- text-align: cneter;
- }
- .empty-icon {
- display: block;
- width: 80rpx;
- height: 80rpx;
- margin: 0 auto;
- margin-bottom: 20rpx;
- }
- .empty-icon>image {
- width: 100%;
- height: 100%;
- }
- .empty-text {
- font-size: 28rpx;
- text-align: center;
- color: #999;
- line-height: 2em;
- }
|