@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; } send-message button { display: inline-block; width: 100%; height: 100%; float: left; } page { background-color: #fff; } .banner-nav { /* position: absolute; */ width: 100%; height: 88rpx; z-index: 999; display: flex; align-items: center; /* justify-content: center; */ background-color: rgba(0, 0, 0, 0); } .xx-box { /* margin-top: 20rpx; margin-left: 22rpx; */ width: 80rpx; height: 58rpx; display: flex; } .xx { /* position: fixed;*/ /* top: 20rpx; left: 22rpx; */ width: 80rpx; height: 50rpx; z-index: 999; border-radius: 100%; opacity: 0.8; display: flex; align-items: center; justify-content: center; } .xx1 { width: 50rpx; height: 50rpx; margin: 9rpx; } .input_box2 { /* position: fixed;*/ /* top: 20rpx; left: 95rpx; */ height: 54rpx; z-index: 99; border-radius: 35rpx; opacity: 0.8; display: flex; flex: 1; align-items: center; } .input_box2_input { font-size: 24rpx; } .sq_0 { width: 54rpx; height: 54rpx; /* top: 20rpx; right: 22rpx; */ z-index: 99; border-radius: 100%; overflow: hidden; } .sq_1 { width: 50rpx; height: 50rpx; border-radius: 120rpx; border: 1px solid #fff; vertical-align: middle; box-shadow: 0px 2rpx 15rpx rgba(0, 0, 0, 0.35); } .sq_0-box { display: flex; width: 80rpx; } .zhanwei { width: 200rpx; } .border { border: 1rpx solid #d9d9d9; } .border1 { border-bottom: 1rpx solid #fafafa; } .border22 { /* border: 1rpx solid #d9d9d9; */ }