@charset "UTF-8"; /** * 这里是uni-app内置的常用样式变量 * * uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量 * 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App * */ /** * 如果你是App开发者(插件使用者),你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能 * * 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件 */ /* 颜色变量 */ /* 行为相关颜色 */ /* 文字基本颜色 */ /* 背景颜色 */ /* 边框颜色 */ /* 尺寸变量 */ /* 文字尺寸 */ /* 图片尺寸 */ /* Border Radius */ /* 水平间距 */ /* 垂直间距 */ /* 透明度 */ /* 文章场景相关 */ .dropItem image { vertical-align: top; } .ms { text-align: center; position: relative; overflow: hidden; word-wrap: break-word; font-size: 24rpx; line-height: 40rpx; display: block; vertical-align: middle; box-sizing: border-box; cursor: pointer; } .ms image { height: 100%; width: 100%; vertical-align: middle; display: inline; } .s1 { width: 100%; height: 750rpx; } .s2h { width: 100%; height: 375rpx; } .s2v { width: 50%; height: 749rpx; } .s4h { width: 100%; height: 188rpx; } .s4v { width: 50%; height: 375rpx; } .s8v { width: 25%; height: 375rpx; } .s8h { width: 50%; height: 188rpx; } .s16 { width: 25%; height: 188rpx; } .s250h { width: 100%; height: 500rpx; } .fl { float: left; } .fr { float: right; } .borderStyle { border: 1rpx solid #f8f8f8; } .m-blank { position: relative; clear: both; } .m_plist { padding: 0 10rpx; box-sizing: border-box; position: relative; } .pinfo { padding: 16rpx; box-sizing: border-box; } .pprice { display: flex; justify-content: space-between; align-items: center; } .pname label { font-size: 28rpx; box-sizing: border-box; line-height: 18px; color: #333; height: 18px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; } .pSelling { font-size: 24rpx; line-height: 40rpx; color: #aaa; box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; } .pprice { margin-top: 4rpx; } .pprice .pc { color: #db384c; font-size: 28rpx; font-weight: bold; } .pprice .pc label { font-size: 24rpx; } .p2 { display: flex; flex-wrap: wrap; } .p2 .m_pitem { box-sizing: border-box; padding: 10rpx; width: 50%; flex-shrink: 0; } .p2 .m_pinfo { background-color: #fff; border-radius: 4rpx; /*box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);*/ position: relative; } .p2 .pimg { height: 345rpx; overflow: hidden; line-height: 345rpx; position: relative; border-radius: 4rpx 4rpx 0 0; } .p2 .pimg image { max-width: 100%; max-height: 100%; vertical-align: top; } .p1 .m_pitem { box-sizing: border-box; padding: 20rpx; width: 100%; } .p1 .m_pinfo { background-color: #fff; border-radius: 4rpx; /*box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);*/ position: relative; } .p1 .pimg { height: 690rpx; overflow: hidden; line-height: 690rpx; position: relative; border-radius: 4rpx 4rpx 0 0; } .p1 .pimg image { width: 100%; height: 100%; } .p3 .m_pitem { box-sizing: border-box; padding: 10rpx; width: 100%; } .p3 .m_pinfo { background-color: #fff; border-radius: 4rpx; /*box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);*/ position: relative; } .p3 .pimg { height: 332rpx; overflow: hidden; line-height: 690rpx; position: relative; border-radius: 4rpx 4rpx 0 0; } .p3 .pimg image { width: 100%; height: 100%; } .p4 .m_pitem { box-sizing: border-box; padding: 10rpx; width: 100%; } .p4 .m_pinfo { background-color: #fff; height: 260rpx; border-radius: 4rpx; /*box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);*/ display: flex; margin-bottom: 15rpx; position: relative; } .p4 .m_pinfo:after { content: ' '; position: absolute; left: 0; bottom: 0; right: 0; height: 1px; border-bottom: 1px solid #e5e5e7; color: #e5e5e7; /*transform-origin: 0 100%;*/ -webkit-transform: scaleY(0.5); transform: scaleY(0.5); top: -18rpx; } .p4 .pinfo { display: flex; flex-direction: column; justify-content: space-between; width: 100%; } .p4 .pimg { width: 260rpx; height: 260rpx; overflow: hidden; line-height: 260rpx; position: relative; border-radius: 2px 0 2px 0; flex-shrink: 0; } .p4 .pimg image { width: 260rpx; height: 260rpx; } .c1 { position: relative; width: 40rpx; height: 40rpx; background: url(https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/pc1.png) center no-repeat; background-size: cover; } .c2 { position: relative; width: 56rpx; height: 56rpx; background: url(https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/pc2.png) center no-repeat; background-size: cover; } .c3 { position: relative; text-align: center; width: 100rpx; height: 60rpx; margin-right: -30rpx; margin-top: 6rpx; color: #fff; font-size: 24rpx; line-height: 50rpx; background: url(https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/pc3.png) center no-repeat; background-size: cover; } .c4 { position: relative; text-align: center; padding: 4rpx 20rpx; border-radius: 4rpx; color: #fff; font-size: 24rpx; background-color: #db384c; } .p5 { display: flex; justify-content: flex-start; flex-wrap: nowrap; padding: 10rpx 0; width: 100%; } .p5 .m_pitem { width: 270rpx; flex-shrink: 0; background-color: #fff; margin-left: 16rpx; } .p5 .m_pitem image { width: 270rpx; height: 270rpx; } .p5 .m_pinfo { background-color: #fff; border-radius: 4rpx; /*box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);*/ position: relative; } .p5 .pimg { width: 270rpx; height: 270rpx; overflow: hidden; line-height: 270rpx; position: relative; border-radius: 4rpx 4rpx 0 0; } .p5 .pname label { font-size: 24rpx; } .p5 .pprice { margin-top: 10rpx; } .p5 .pprice .pc { font-size: 28rpx; } .m-RichText { box-sizing: border-box; clear: both; width: 100%; overflow: hidden; } .m-scrollBox { box-sizing: border-box; clear: both; text-align: center; } .m-scrollBox-img { max-height: 100% !important; max-width: 100% !important; vertical-align: middle; display: inline; } /*flex 布局*/ .boxFlex { position: relative; display: -webkit-flex; box-sizing: border-box; display: flex; } .boxFlexItem1 { flex: 1; } .boxFlexItem2 { flex: 2; } .boxFlexItem3 { flex: 3; } .boxFlexItem4 { flex: 4; } .boxFlexItem5 { flex: 5; } /*排序方向 start*/ .fdRow { flex-direction: row; } .fdRowReverse { flex-direction: row-reverse; } .fdColumn { flex-direction: column; } .fdColumnReverse { flex-direction: column-reverse; } /*排序方向 end*/ /*是否换行 start*/ .fwNowrap { flex-wrap: nowrap; } .fwWrap { flex-wrap: wrap; } .fwWrapReverse { flex-wrap: wrap-reverse; } /*是否换行 end*/ /*水平对齐方式 start*/ .jcFlexStart { text-align: left; } .jcFlexEnd { text-align: right; } .jcCenter { text-align: center; } /*水平对齐方式 end*/ /*垂直对齐方式 start*/ .aiFlexStart { align-items: flex-start; clear: both; } .aiFlexEnd { align-items: flex-end; } .aiCenter { align-items: center; } .aiBaseline { align-items: baseline; } .aiStretch { align-items: stretch; } /*垂直对齐方式 end*/ /*flex 布局*/ /*Grid*/ .boxGrids { position: relative; overflow: hidden; background-color: #fff; clear: both; } .boxGridsBorder { border-top: 1rpx solid #d9d9d9; border-left: 1rpx solid #d9d9d9; } .boxGrid { position: relative; float: left; padding: 40rpx 20rpx; width: 33.33333333%; box-sizing: border-box; } .boxGridBorder { border-right: 1rpx solid #d9d9d9; border-bottom: 1rpx solid #d9d9d9; } .boxGrid:active { background-color: #ececec; } .boxGridIcon { /* width: 76rpx; height: 76rpx;*/ width: 84rpx; height: 84rpx; margin: 0 auto; } .boxGridIcon image { display: block; width: 100%; height: 100%; } .boxGridLabel { margin-top: 10rpx; } .boxGridLabel { display: block; text-align: center; color: #000; font-size: 24rpx; line-height: 40rpx; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } /*Grid*/ .mTel { width: 88rpx; height: 88rpx; position: fixed; background-color: #fff; right: 8px; top: 56%; z-index: 999; border-radius: 100%; box-shadow: 4rpx 4rpx 4rpx rgba(0, 0, 0, 0.2); text-align: center; line-height: 88rpx; } .u-search-box { background-color: #efeff4; padding: 20rpx; clear: both; } .u-search-cont { width: 100%; background-color: #fff; border-radius: 4rpx; text-align: center; padding: 10rpx 0; border-radius: 60rpx; } .u-search-box icon { display: inline-block; vertical-align: middle; margin-right: 10rpx; font-size: 28rpx; } .u-search-box text { font-size: 28rpx; color: #d5d5d5; } .mCS { width: 88rpx; height: 88rpx; position: fixed; background-color: #fff; right: 20rpx; top: 65%; border-radius: 100%; box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2); text-align: center; line-height: 88rpx; z-index: 999; } .mCS .iconfont { font-size: 30px; } .mCS contact-button { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; } .formBox { padding: 50rpx; background-color: white; position: relative; display: block; clear: both; width: 650rpx; } .formBox .fromInput { margin-bottom: 10rpx; } .formBox label { font-size: 24rpx; display: block; line-height: 50rpx; color: #888; margin-top: 10rpx; } .formBox .fromInput input { font-size: 24rpx; box-sizing: border-box; height: 70rpx; border: none; padding: 10rpx; background-color: transparent; width: 100%; border: 2rpx solid #d5d5d5; border-radius: 8rpx; line-height: 50rpx; } .picker { font-size: 24rpx; box-sizing: border-box; height: 70rpx; border: none; padding: 10rpx; background-color: transparent; width: 100%; border: 2rpx solid #d5d5d5; border-radius: 8rpx; line-height: 50rpx; } .formSubmit { text-align: center; } .fromInput textarea { box-sizing: border-box; height: 200rpx; padding: 10rpx; background-color: transparent; width: 100%; border: 2rpx solid #d5d5d5; border-radius: 8rpx; font-size: 24rpx; } .fromCK_item { vertical-align: middle; line-height: 30px; position: relative; } .fromCK_item text { font-size: 24rpx; } .formButtom { box-sizing: border-box; display: inline-block; width: 100%; background-color: #db384c; color: white; font-size: 28rpx; border-radius: 8rpx; margin-top: 20rpx; } /*通知栏*/ .notice { height: 64rpx; background-color: #f8f8f8; display: flex; align-items: center; clear: both; position: relative; } .notice-icon { height: 40rpx; padding: 0 10rpx 0 24rpx; } .notice-icon image { height: 40rpx; width: 40rpx; } .notice-content { height: 40rpx; font-size: 24rpx; flex: 1; overflow: hidden; } .notice-content swiper-item { height: 40rpx; line-height: 40rpx; margin-right: 20rpx; color: #20273c; width: 50rpx; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .notice-arrow { height: 40rpx; padding: 0 24rpx 0 24rpx; } /*通知栏*/ /*标题*/ .head-title { clear: both; box-sizing: border-box; height: 80rpx; background-color: #fff; padding: 20rpx 16rpx; display: flex; line-height: 40rpx; align-items: center; position: relative; } .head-title image { height: 48rpx; max-width: 48rpx; } .title-label { font-size: 32rpx; font-weight: bold; color: #282F40; margin-left: 8rpx; max-width: 180rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .title-linke { color: #9b9b9b; font-size: 24rpx; display: flex; align-items: center; position: absolute; right: 24rpx; } .title-linke .icon-right { font-size: 16rpx; margin-left: 8rpx; } .countdown-box { margin-left: 12px; display: flex; font-size: 12px; align-items: center; } .time1 text { width: 50rpx; height: 40rpx; line-height: 40rpx; display: inline-block; background-color: #f1f1f1; color: #db384c; text-align: center; border-radius: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .time2 text { width: 40rpx; height: 40rpx; display: inline-block; background-color: #db384c; color: #fff; text-align: center; border-radius: 4rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .countdown-box label { display: inline-block; padding: 0 4rpx; color: #9b9b9b; } .time-box { margin-left: 10rpx; display: flex; align-items: center; } .cttitle { font-size: 24rpx; color: #9b9b9b; } /*标题*/ /*营销活动1*/ .mark { width: 80rpx; height: 80rpx; position: absolute; left: 0; top: 0; } .activity-warp { width: 100%; overflow: hidden; position: relative; } .activity-box1 { display: flex; box-sizing: border-box; flex-direction: row; } .activity-box1 button { margin: 0; padding: 0; border-radius: 0; } .activity-box1 .activity-item { width: 280rpx; box-sizing: border-box; padding: 20rpx 30rpx 10rpx 30rpx; margin-right: 10rpx; background-color: #fff; overflow: visible; text-align: left; } .activity-box1 .activity-img { width: 220rpx; height: 220rpx; position: relative; display: flex; justify-content: center; align-items: center; } .activity-img image { max-width: 100%; max-height: 100%; } .activity-countdown { position: absolute; bottom: 0; left: 0; background-color: rgba(0, 0, 0, 0.5); height: 44rpx; width: 100%; font-size: 22rpx; color: #fff; text-align: center; line-height: 44rpx; } .activity-countdown view { display: inline-block; } .activity-countdown view:first-child { width: 80rpx; } .activity-countdown view:last-child { width: 108rpx; } .activity-name { font-size: 24rpx; color: #000; line-height: 36rpx; padding: 10rpx 0; height: 68rpx; overflow: hidden; white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; text-align: left; } .activity-price { display: flex; height: 40rpx; align-items: center; position: relative; color: #db384c; } .activity-price .price { font-size: 28rpx; } .activity-price .tip { font-size: 24rpx; position: absolute; right: 0; } .del-price { color: #9b9b9b; font-size: 24rpx; text-decoration: line-through; margin-left: 5px; } .activity-desc { font-size: 24rpx; color: #9b9b9b; line-height: 60rpx; text-align: left; } /*营销活动*/ /*营销活动2*/ .activity-box2 { display: flex; flex-wrap: wrap; justify-content: space-between; } .activity-box2 button { margin: 0; padding: 0; } .activity-box2 .activity-item { width: 49.3%; box-sizing: border-box; padding: 20rpx 30rpx 10rpx 30rpx; background-color: #fff; box-sizing: border-box; margin-bottom: 10rpx; } .activity-box2 .activity-img { width: 306rpx; height: 306rpx; position: relative; display: flex; justify-content: center; align-items: center; margin: 0 auto; } .activity-box2 .tip { color: #ff8b96; padding: 8rpx 16rpx; background-color: #fff4f5; border-radius: 20rpx; height: 40rpx; line-height: 24rpx; box-sizing: border-box; } /*营销活动*/ /*营销活动3*/ .activity-box3 { display: flex; flex-wrap: wrap; } .activity-box3 .activity-item { display: flex; height: 270rpx; box-sizing: border-box; padding: 20rpx 30rpx; background-color: #fff; border-bottom: 1px solid #f8f8f8; width: 100%; } .activity-box3 .activity-img { width: 228rpx; height: 228rpx; position: relative; display: flex; justify-content: center; align-items: center; margin: 0 auto; flex-shrink: 0; margin-right: 20rpx; } .activity-box3 .activity-info { display: flex; flex-direction: column; justify-content: space-between; flex-grow: 1; } .activity-box3 .tip { color: #ff8b96; padding: 8rpx 16rpx; height: 40rpx; line-height: 24rpx; background-color: #fff4f5; border-radius: 20rpx; box-sizing: border-box; margin-right: 10rpx; } .activity-box3 .activity-desc { display: flex; align-items: center; } .activity-box3 .activity-btn { font-size: 24rpx; height: 50rpx; line-height: 50rpx; padding: 0 20rpx; background-color: #db384c; color: #fff; border-radius: 8rpx; position: absolute; right: 0; } .activity-box3 .disable { height: 50rpx; line-height: 50rpx; padding: 0 20rpx; background-color: #9b9b9b; color: #fff; border-radius: 8rpx; } /*营销活动*/ /*优惠券*/ .coupon_box { display: flex; justify-content: flex-start; flex-wrap: nowrap; box-sizing: border-box; } .coupon_item { width: 110px; height: 81px; background: url(https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/coupon/coupon_bg.png) no-repeat center; background-size: cover; color: #fff; display: flex; flex-direction: column; justify-content: center; align-items: center; line-height: 20px; text-align: center; flex-shrink: 0; } .coupon_price { width: 90px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 18px; } .coupon_desc { width: 90px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; } .coupon_img { width: 110px; height: 81px; flex-shrink: 0; } .coupon_img image { display: block; width: 110px; height: 81px; } /*优惠券*/ .official-account { position: relative; clear: both; } .upload-view { display: flex; flex-wrap: wrap; } .upload-img { width: 208rpx; height: 208rpx; margin: 8rpx 8rpx 0 0; flex-shrink: 0; background: url(https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/img/uploadimage.png) center no-repeat #bfbfbf; background-size: 150rpx; } .upload-img-item { width: 208rpx; height: 208rpx; margin: 8rpx 8rpx 0 0; flex-shrink: 0; border: 1rpx solid rgba(0, 0, 0, 0.3); position: relative; box-sizing: border-box; background-color: #e6e6e6; } .del-upload-img { width: 100%; position: absolute; left: 0; bottom: 0; height: 40rpx; background-color: rgba(0, 0, 0, 0.3); display: flex; justify-content: center; align-items: center; } .del-upload-img .iconfont { color: #fff; } .upload-img-item image { max-width: 100%; max-height: 100%; } .bg-ellipse { border-radius: 0 0 30% 30%; height: 100rpx; position: absolute; top: 0rem; left: 0; right: 0; z-index: 0; background-color: red; } .banner { height: 362rpx; background-color: #fff; position: relative; } .banner-bar { position: absolute; top: 0; left: 0; height: 90rpx; width: 100%; background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); z-index: 2; } .bar { float: left; height: 100%; box-sizing: border-box; overflow: hidden; } .bl { width: 15%; text-align: center; line-height: 90rpx; color: #fff; } .bl .icon-saoma { font-size: 44rpx; } .bc { width: 70%; text-align: center; } .br { width: 15%; text-align: center; line-height: 90rpx; color: #fff; position: relative; } .br contact-button { position: absolute; opacity: 0; width: 100%; height: 100%; left: 0; top: 0; } .br .icon-more { font-size: 44rpx; } .search-box { width: 100%; height: 60rpx; background-color: #fff; border-radius: 60rpx; display: inline-block; margin-top: 15rpx; text-align: left; font-size: 28rpx; line-height: 60rpx; color: #888; } .search-box label { line-height: 50rpx; padding: 0 10rpx 0 20rpx; } .search-box .iconfont { font-size: 40rpx; } .banner swiper, .slide-image { width: 100%; height: 100%; } .ct-list { background-color: #fff; } .ct-list .g-grids { padding: 10rpx 0; } .ct-list .g-grids::after, .ct-list .g-grids::before { content: ""; border: none; } .ct-list .g-grid { width: 20%; padding: 15rpx; } .ct-list .g-grid::after, .ct-list .g-grid::before { content: ""; border: none; } .ct-list .g-grid-label { font-size: 24rpx; line-height: 40rpx; color: #333; } .ct-list .g-grid-icon { width: 68rpx; height: 68rpx; } .ad-p-list { background-color: #fff; position: relative; margin: 20rpx 0; } .ad-p-list::after { content: " "; position: absolute; left: 0; top: -1rpx; right: 0; height: 1rpx; border-bottom: 1rpx solid #e5e5e7; color: #CCCCCC; -webkit-transform-origin: 0 100%; transform-origin: 0 100%; -webkit-transform: scaleY(0.5); transform: scaleY(0.5); z-index: 3; } .ad-p-item { width: 50%; height: 600rpx; position: relative; display: inline-block; vertical-align: top; box-sizing: border-box; } .ad-p-item:nth-child(2n-1):before { content: " "; position: absolute; top: 1repx; right: 0; height: 100%; width: 1rpx; border-right: 1rpx solid #e5e5e7; color: #CCCCCC; -webkit-transform-origin: 0 100%; transform-origin: 0 100%; -webkit-transform: scaleX(0.5); transform: scaleX(0.5); z-index: 3; } .ad-p-item::after { content: " "; position: absolute; left: 0; bottom: 0; right: 0; height: 1rpx; border-bottom: 1rpx solid #e5e5e7; color: #CCCCCC; -webkit-transform-origin: 0 100%; transform-origin: 0 100%; -webkit-transform: scaleY(0.5); transform: scaleY(0.5); z-index: 3; } .ad-p-item image { width: 375rpx; height: 375rpx; } .ad-p-info { padding: 15rpx; box-sizing: border-box; } .ad-p-info .ad-p-price { font-size: 32rpx; color: #f30213; } .m-ShopProfile .m-cell-bd { font-size: 28rpx; } .ad-p-name { font-size: 24rpx; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; box-sizing: border-box; padding: 15rpx; line-height: 40rpx; color: #333; } .u-btn-default { width: 160rpx; height: 50rpx; font-size: 24rpx; line-height: 50rpx; float: right; margin: 0; } .m-banner { height: 200rpx; position: relative; } .m-banner image { height: 200rpx; width: 100%; } .m-content-box { position: absolute; width: 100%; height: 100%; left: 0; top: 0; background-color: rgba(0, 0, 0, 0.4); z-index: 2; } .m-logo { width: 140.4rpx; height: 140.4rpx; background-color: #fff; border-radius: 8rpx; box-shadow: 0px 0rpx 10rpx rgba(0, 0, 0, 0.35); color: #888; position: absolute; left: 20rpx; bottom: 25rpx; z-index: 2; text-align: center; padding: 5rpx; box-sizing: border-box; display: inline-block; } .m-logo image { width: 100%; height: 100%; } .m-shopinfo { position: absolute; top: 50rpx; left: 170rpx; width: 70%; z-index: 2; } .m-shopinfo label { color: #fff; font-size: 28rpx; line-height: 20rpx; display: inline-block; } .m-shopinfo .iconfont { color: #f30213; font-size: 50rpx; margin-left: 10rpx; position: relative; top: 8rpx; } .m-shopinfo text { display: block; font-size: 24rpx; color: #fff; margin-top: 20rpx; } .m-ba-tab { font-size: 24rpx; text-align: center; background-color: #fff; height: 105.3rpx; position: relative; box-sizing: border-box; padding-top: 14rpx; box-shadow: 0px 0rpx 10rpx rgba(0, 0, 0, 0.35); overflow: hidden; z-index: 3; } .m-ba-icon { width: 100%; height: 45rpx; line-height: 45rpx; } .m-ba-item-select { color: #f30213; position: relative; } .m-ba-item-select::before { content: " "; position: absolute; left: 0; bottom: 0rpx; right: 0; height: 6rpx; border-bottom: 6rpx solid #f30213; color: #CCCCCC; -webkit-transform-origin: 0 100%; transform-origin: 0 100%; -webkit-transform: scaleY(0.5); transform: scaleY(0.5); z-index: 3; } .m-ShopProfile .m-cell-bd { font-size: 28rpx; } .m-sort { padding: 0 40rpx 0 0; box-sizing: border-box; width: 100%; text-align: center; position: relative; } .m-sort image { width: 18rpx; height: 20rpx; margin-left: 10rpx; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); margin-top: 0; } .m-sort .uni-icons { margin-left: 10rpx; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); color: #f30213 !important; font-weight: 700; } .u-pabtn { top: 305rpx !important; } .u-patop { top: 0 !important; } .u-pabtn .m-tab { position: absolute; } .no-tap { padding-top: 4rpx !important; } /*全部商品 start*/ .m-navbar::before { content: " "; position: absolute; left: 0; top: -2px; right: 0; height: 1px; border-bottom: 1px solid #CCCCCC; color: #CCCCCC; -webkit-transform-origin: 0 100%; transform-origin: 0 100%; -webkit-transform: scaleY(0.5); transform: scaleY(0.5); z-index: 3; } .m-navbar:after { bottom: 2rpx; } .m-navbar-item { padding: 20rpx 0; font-size: 28rpx; } .m-navbar-item:after { border: none; } .m-navbar-item.m-navbar-item-on { background-color: #fff; color: #f30213; } .m-navbar-item.m-navbar-item-on::before { content: " "; position: absolute; left: 0; bottom: 0; right: 0; height: 6rpx; border-bottom: 6rpx solid #f30213; color: #CCCCCC; -webkit-transform-origin: 0 100%; transform-origin: 0 100%; -webkit-transform: scaleY(0.5); transform: scaleY(0.5); z-index: 3; } /*全部商品 end*/ /*商超模块 start*/ .m-supermarket-ad { margin: 20rpx 0; } .m-supermarket-tip-item { display: inline-block; width: 25%; text-align: center; height: 88rpx; padding: 10rpx; box-sizing: border-box; } .m-supermarket-tip-item label { display: inline-block; width: 100%; height: 100%; background-color: #fff; border-radius: 8rpx; line-height: 68rpx; font-size: 28rpx; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /*商超模块 end*/ /*母婴之家广告模块 start*/ .m-muyin-ad-content { margin: 20rpx 0; } .m-muyin-ba-item { width: 718rpx; height: 412rpx; background-color: #fff; margin: 20rpx auto; border-radius: 8rpx; overflow: hidden; } .m-muyin-ba-item image { width: 718rpx; height: 336rpx; vertical-align: top; } .m-muyin-ba-info { height: 75rpx; line-height: 75rpx; padding: 0 20rpx; font-size: 28rpx; } .m-muyin-ba-info text { color: #f30213; float: right; font-size: 32rpx; } .m-muyin-ba-name { width: 500rpx; overflow: hidden; display: inline-block; white-space: nowrap; text-overflow: ellipsis; } /*母婴之家广告模版 end*/ /*生鲜食品广告模块 start*/ .m-food-adlist { margin: 20rpx 0; } .m-food-aditem { width: 680rpx; height: 788rpx; background-color: #fff; margin: 0 auto; margin-bottom: 20rpx; box-sizing: border-box; padding: 20rpx; position: relative; } .m-food-ad-img { width: 640rpx; height: 640rpx; box-sizing: border-box; vertical-align: top; } .m-food-info { height: 108rpx; width: 80%; } .m-food-info-price { font-size: 28rpx; color: #f30213; padding-top: 10rpx; } .m-food-info-price label { font-size: 36rpx; } .m-food-info-price text { font-size: 28rpx; color: #888; text-decoration: line-through; padding-left: 20rpx; line-height: 20px; } .m-food-info-name { font-size: 32rpx; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; } .m-food-ad-icon image { width: 60rpx; height: 60rpx; position: absolute; bottom: 40rpx; right: 20rpx; } /*生鲜食品广告模块 end*/ /*第六套模块 end*/ .content { display: flex; background: white; position: absolute; height: 100%; width: 100%; } .category { flex: 1; font-size: 26rpx; } .category-item { height: 100rpx; line-height: 100rpx; text-align: center; border-bottom: 1rpx solid #eee; border-left: 8rpx solid transparent; background: #F8F8F8; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; } .category-item-select { border-left: 8rpx solid #f30213; box-sizing: border-box; background: white; } .body { flex: 4; } .body-title { font-size: 24rpx; background: #F8F8F8; height: 50rpx; line-height: 50rpx; padding-left: 20rpx; } .body-item { padding: 10rpx 20rpx; display: flex; position: relative; border-bottom: 1rpx solid #eee; background: white; } .body-item image { border-radius: 10rpx; height: 120rpx; width: 120rpx; display: inline-block; padding: 15rpx 0; } .body-item-info { margin-left: 20rpx; flex: 1; font-size: 28rpx; } .item-info-title { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 40rpx; max-height: 80rpx; } .item-info-salenum { font-size: 22rpx; color: gray; margin-top: 15rpx; } .item-info-price { color: #f30213; font-weight: bold; font-size: 32rpx; margin-top: 20rpx; position: relative; } .item-info-price label { font-size: 22rpx; font-weight: normal; } .item-num-box { position: absolute; bottom: 0rpx; right: 20rpx; display: flex; align-items: center; font-size: 30rpx; height: 120rpx; color: #f30213; } .item-num-add { width: 50rpx; text-align: center; overflow: hidden; } .item-num-choose { background: #f30213; padding: 8rpx 20rpx; border-radius: 20rpx; color: white; font-size: 26rpx; display: inline-block; } .item-num-over { padding: 5rpx 15rpx; border-radius: 20rpx; color: #f30213; font-size: 26rpx; display: inline-block; border: 1px solid #f30213; box-sizing: border-box; } .bottom-bar { height: 100rpx; width: 100%; background: white; position: fixed; bottom: 0; left: 0; display: flex; z-index: 15; } .bar-left { flex: 3; border-top: 1px solid #ddd; box-sizing: border-box; position: relative; font-size: 28rpx; } .car { width: 110rpx; height: 110rpx; position: fixed; left: 30rpx; bottom: 30rpx; z-index: 20; } .car-img { font-size: 110rpx; position: absolute; top: 0; left: 0; } .red { color: #f30213; } .gray { color: #ccc; } .delAll { display: block; padding-left: 10rpx; } .car-num { position: absolute; width: 30rpx; height: 30rpx; background: #f30213; color: white; right: 0; top: 40rpx; border-radius: 50%; font-size: 18rpx; border: 4rpx solid white; line-height: 30rpx; text-align: center; overflow: hidden; } .price-box { margin-left: 150rpx; line-height: 45rpx; padding: 5rpx; } .price-money { font-size: 36rpx; color: #f30213; font-weight: bold; } .price-money label { font-size: 28rpx; color: #f30213; } .price-delivery { font-size: 24rpx; color: gray; } .text-null { line-height: 100rpx; margin-left: 150rpx; color: gray; } .bar-right { flex: 1; text-align: center; color: white; font-size: 32rpx; line-height: 100rpx; } .bar-right-red { background: #f30213; } .bar-right-gray { background: #ccc; } /*底部弹框*/ .window { width: 100%; height: 100%; position: fixed; top: 0; left: 0; display: flex; flex-direction: column; z-index: 10; background-color: rgba(0, 0, 0, 0.5); } .window-top { flex: 1; } .top-content { background: #F8F8F8; bottom: 100rpx; left: 0; width: 100%; position: fixed; z-index: 10; } .window-clear { height: 60rpx; line-height: 60rpx; font-size: 24rpx; margin-right: 20rpx; color: gray; } .window-clear label { float: right; } .top-scrollbox { max-height: 480rpx; overflow: scroll; } .window-scroll-item { height: 120rpx; line-height: 120rpx; background: white; border-bottom: 1rpx solid #eee; box-sizing: border-box; position: relative; font-size: 32rpx; } .window-item-title { width: 400rpx; display: inline-block; margin-left: 20rpx; height: 120rpx; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; } .window-item-title-sp { width: 400rpx; margin-left: 20rpx; height: 120rpx; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; line-height: 60rpx; padding: 10rpx 0; box-sizing: border-box; } .sp-name { width: 400rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sp-content { font-size: 26rpx; width: 400rpx; overflow: hidden; color: gray; } .window-item-price { height: 102rpx; display: inline-block; line-height: 120rpx; position: absolute; top: 0; left: 420rpx; color: #f30213; } .window-bottom { height: 100rpx; } /*第六套模块 end*/ .m-sp-box { width: 80%; background: white; border-radius: 10rpx; box-sizing: border-box; } .m-sp-top { padding: 0 30rpx; position: relative; } .u-close-sp { font-size: 46rpx; color: #f30213; position: absolute; right: 30rpx; top: 10rpx; } .m-sp-title { height: 100rpx; text-align: center; line-height: 100rpx; overflow: hidden; font-size: 30rpx; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; margin: 0 auto; width: 300rpx; margin: 0; } .m-sp-body { font-size: 24rpx; color: gray; margin-bottom: 30rpx; } .m-bodyname { height: 100rpx; } .m-sp-choose { display: inline-block; padding: 8rpx 25rpx; border: 1px solid gray; border-radius: 50rpx; margin: 10rpx; border-color: lightgray; } .m-sp-unit { margin-top: 30rpx; } .sp-choose-item-checked { background-color: rgba(219, 56, 76, 0.2); border-color: #f30213; color: black; } .m-sp-bottom { background: #F8F8F8; height: 100rpx; border-top: 1px solid lightgray; margin-top: 50rpx; border-bottom-left-radius: 10rpx; border-bottom-right-radius: 10rpx; line-height: 100rpx; position: relative; padding: 0 30rpx; } .sp-bottom-price { font-size: 40rpx; font-style: bold; color: #f30213; } .sp-bottom-des { font-size: 24rpx; color: gray; margin-left: 10rpx; } uni-page-body { background-color: #f5f5f5 !important; min-height: 100% !important; height: 100% !important; } .mCS { position: initial; border-radius: 100% !important; } .diyPage { clear: both; overflow: hidden; } .activity-info { position: relative; } .btn_addcard { position: absolute; right: 0; bottom: 14rpx; width: 40rpx; height: 40rpx; background: url(https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/pc1.png) center no-repeat; background-size: cover; } .disable { -webkit-filter: grayscale(1); filter: grayscale(1); } .boxGrid { padding-left: 10rpx !important; padding-right: 10rpx !important; } .boxGridIcon { width: 122rpx; height: 122rpx; } .boxGridIcon image { border-radius: 100%; }