page {background-color: #FFFFFF;} /* 登录页 staat */ .login-header { justify-content: center; align-items: center; flex-direction: column; margin-top: 0; position: fixed; left: 50%; top: 40%; transform: translate(-50%,-50%); } .infoImg { width: 224rpx; height: 224rpx; border-radius: 100%; border: 2rpx solid #d8d8d8; } .logo-name { font-size: 30rpx; margin-top: 30rpx; color: #333333; text-align: center; } .login-footer { width: 100%; text-align: center; position: fixed; left: 0; bottom: 120rpx; } .login-btn { width: calc(100% - 40rpx); line-height: 130rpx; margin: 0 auto; box-shadow: 0rpx 8rpx 20rpx rgba(254,191,0,.75); } .login-txt { justify-content: center; align-items: center; color: #333333; margin-top: 30rpx; } .agreement-box{ margin-top: 30rpx; } .agreement{ color: #febf00; } /* 首页 */ .index-top{ width: 100%; height: auto; position: relative; z-index: -1; } .index-top>image{ width: 100%; } /* 内容区 */ .index-content{ width: 100%; border-radius: 20rpx 20rpx 0 0; margin-top: -20rpx; } /* 搜索框 */ .pull-search-bg{ height: 140rpx; position: sticky; left: 0; top: 0; z-index: 9; } .pull-search{ align-items: center; width: calc(100% - 80rpx); height: 80rpx; background-color: #eaeaea; margin: 0 auto; } .pull-search>.img{ width: 42rpx; height: 42rpx; margin-left: 18rpx; } .pull-search>.input{ width: calc(100% - 60rpx); } /* 分类 */ .index-cate-bg{ position: sticky; left: 0; top: 140rpx; z-index: 9; } .index-cate-bg.show{ box-shadow: 0 7rpx 7rpx rgba(0,0,0,.18); padding-top: 20rpx; } .index-cate{ width: 100%; margin: 5rpx auto 0; border-bottom: 2rpx solid #eaeaea; } .index-cate.show{ border-bottom: 0; } .pull-title .txt{ line-height: 1.5; letter-spacing: 2rpx; } .pull-title .line{ width: 62rpx; height: 8rpx; border-radius: 4rpx; } /* 分类列表 */ .cate-list{ padding: 24rpx 0 42rpx; } .cate-list .cate-item{ width: 100rpx; margin: 0 29rpx; } .cate-list .cate-item:first-child{ margin-left: 0; } .cate-list .cate-item:last-child{ margin-right: 0; } .cate-list .cate-item>.img{ width: 100rpx; height: 100rpx; } .cate-list .cate-item>.img image{ width: 100%; min-height: 100%; } .cate-list .cate-item>.txt{ line-height: 1.5; text-align: center; } /* 商品列表 */ .commodity{ flex-wrap: wrap; justify-content: space-between; } .commodity .item{ width: calc(50% - 10rpx); box-shadow: 0 0 20rpx rgba(0,0,25,.12); overflow: hidden; } .commodity .item>.img{ width: 100%; height: 230rpx; overflow: hidden; } .commodity .item>.img image{ width: 100%; min-height: 230rpx; } .commodity .title{ line-height: 1.4; } .commodity .bottom{ justify-content: space-between; align-items: center; } .commodity .bottom>.btn{ justify-content: center; align-items: center; width: 150rpx; height: 52rpx; border-radius: 23rpx; } /* 到底了 */ .no-more{ color: #8c8c9b; text-align: center; line-height: 1.5; margin: 60rpx 0 25rpx; text-align: center; } /* 搜索结果 */ .search-box{ width: 100%; height: 100vh; position: fixed; left: 0; top: 0; z-index: 999; } .close-box{ width: 100%; } /* 搜索框 */ .search-bg{ height: 140rpx; border-radius: 20rpx 20rpx 0 0; } .search{ align-items: center; width: calc(100% - 80rpx); height: 80rpx; background-color: #eaeaea; margin: 0 auto; } .search>.img{ width: 42rpx; height: 42rpx; margin-left: 18rpx; } .search>.input{ width: calc(100% - 60rpx); } .keyword-txt{ line-height: 1.5; text-align: center; } .search-list{ height: calc(100% - 140rpx); } /* 商品详情 */ .scrool-top{ width: 100%; position: fixed; top: 0; left: 0; z-index: 99; } .back-btn{ align-items: center; width: 35px; height: 35px; position: fixed; left: 20rpx; z-index: 999; } .shop-top-img{ width: 100%; position: relative; z-index: -1; } .shop-top-img>image{ width: 100%; } .shop-content{ border-radius: 20rpx 20rpx 0 0; margin-top: -20rpx; } .shop-title{ line-height: 1.5; text-align: justify; padding: 10rpx 0 20rpx; border-bottom: 2rpx solid #eaeaea; } .body-txt{ line-height: 1.5; text-align: justify; padding-top: 20rpx; } /* 尾部 */ .shop-foot{ width: 100%; height: 170rpx; position: fixed; left: 0; bottom: 0; z-index: 99; } .shop-footer{ align-items: center; height: 100rpx; } .shop-footer .shop-nav{ flex-wrap: wrap; justify-content: center; align-items: center; width: 144rpx; height: 100%; border-right: 2rpx solid #FFFFFF; } .shop-footer .shop-nav>image{ width: 39rpx; height: 40rpx; } .shop-footer .shop-nav>text{ width: 100%; line-height: 1.2; text-align: center; } .shop-footer .shop-cart{ justify-content: center; align-items: center; width: 88rpx; height: 88rpx; margin: 0 50rpx 0 58rpx; position: relative; } .shop-footer .shop-cart>.shop-num{ justify-content: center; align-items: center; width: 38rpx; height: 38rpx; background-color: #e4143b; position: absolute; top: 0; right: -10rpx; z-index: 1; } .shop-footer .shop-cart image{ width: 46rpx; height: 45rpx; } .shop-btn{ justify-content: center; align-items: center; width: 340rpx; height: 86rpx; } /* 商品规格 */ .pull-bg{ width: 100%; height: 100vh; background-color: rgba(0,0,0,.47); position: fixed; left: 0; top: 0; z-index: 99; } .shop-specs{ width: 100%; padding: 20rpx 40rpx 30rpx; border-radius: 30rpx 30rpx 0 0; position: fixed; left: 0; bottom: 0; z-index: 999; } .specs-top{ justify-content: space-between; align-items: center; height: 66rpx; } .specs-top .close{ width: 66rpx; height: 66rpx; } .specs-top .close>image{ width: 100%; } .specs-list{ padding-top: 30rpx; max-height: 418rpx; } .specs-item{ justify-content: space-between; align-items: center; width: 100%; height: 106rpx; border: 2rpx solid #484848; } .specs-item.active{ background-color: #febf00; color: #ffffff; border: 0; } .specs-btns{ width: 100%; justify-content: space-between; align-items: center; margin-top: 50rpx; } .specs-btns>.btn{ justify-content: center; align-items: center; width: calc(50% - 16rpx); height: 98rpx; box-shadow: 0 0 10rpx rgba(254,191,0, .42); } .specs-btns>.btn:last-child{ box-shadow: 0 0 10rpx rgba(72,72,72, .42); } /* 公共底部 */ .pull-footer-bg{ position: fixed; width: 100%; left: 0; bottom: 0; z-index: 999; } .pull-footer{ justify-content: space-between; align-items: center; } .pull-footer .price{ line-height: 1.2; } .pull-footer .btn{ justify-content: center; align-items: center; width: 280rpx; height: 86rpx; margin: 2rpx 0; } /* 订单确认 */ .settlement-content .section{ box-shadow: 0 7rpx 20rpx rgba(0,0,0,.12); } .settlement-content .section>.title{ margin-bottom: 30rpx; } .addressee-info { align-items: center; } .addressee-info .txt{ width: calc(100% - 35rpx); } .addressee-info .txt>view>text{ margin-left: 55rpx; } .addressee-info .txt>.txt-coding{ justify-content: space-between; align-items: center; } .addressee-info .txt>.txt-coding>text{ margin-left: 0; } .addressee-info image{ width: 18rpx; height: 34rpx; margin-left: 15rpx; } .shop-slide-item .item{ align-items: center; width: 100%; padding: 30rpx 0; margin: 0 auto; border-bottom: 2rpx solid #eaeaea; } .shop-slide-item .item:first-child{ padding-top: 10rpx; } .shop-slide-item .item:last-child{ padding-bottom: 10rpx; border: 0; } .shop-slide-item .shop-img{ width: 194rpx; height: 194rpx; margin-right: 36rpx; overflow: hidden; } .shop-slide-item .shop-img image{ width: 100%; min-height: 194rpx; } .shop-slide-item .shop-txt{ width: calc(100% - 230rpx); } .shop-slide-item .shop-txt-top{ min-height: 134rpx; } .shop-slide-item .shop-txt-top .title{ line-height: 1.5; } .shop-slide-item .shop-txt-top .specs{ line-height: 1.5; } .shop-slide-item .shop-txt-bottom{ justify-content: space-between; align-items: center; width: 100%; height: 50rpx; } .shop-slide-item .shop-txt-bottom .price{ line-height: 1.5; } .shop-slide-item .shop-txt-bottom .price>text{ margin-left: 12rpx; } .settlement-content .section-list .item{ justify-content: space-between; align-items: center; margin-bottom: 40rpx; } .settlement-content .section-list .item:nth-last-of-type(1){ margin-bottom: 0; } .settlement-content .item .radio{ display: flex; align-items: center; } .settlement-content .item .radio>radio{ transform: scale(.8); margin-left: -5rpx; } .settlement-content .item .txt{ justify-content: flex-end; align-items: center; } .settlement-content .item .btn{ display: flex; align-items: center; width: 20rpx; height: 36rpx; margin-left: 15rpx; } .settlement-content .item .btn>image{ width: 14rpx; } /* 优惠券选择 */ .coupon-box{ width: 100%; border-radius: 30rpx 30rpx 0 0; position: fixed; left: 0; bottom: 0; z-index: 999; } .coupon-box .title{ text-align: center; } .coupon-box .coupon-list .coupon-item:first-child{ margin-top: 0; } .coupon-scoll{ max-height: 656rpx; } .coupon-btns{ justify-content: space-between; align-items: center; } .coupon-btns .btn{ width: calc(50% - 27rpx); line-height: 98rpx; text-align: center; } /* 支付成功 */ .finish-content .finish-img{ justify-content: center; height: 337rpx; margin: 105rpx 0 70rpx; } .finish-content .finish-img>image{ width: 337rpx; height: 337rpx; } .finish-content .finish-txt{ text-align: center; line-height: 1.5; padding-bottom: 120rpx; } .finish-content .finish-btns{ padding: 0 65rpx; } .finish-content .finish-btns .btn{ justify-content: center; align-items: center; height: 98rpx; border: 2rpx solid #eaeaea; margin-top: 50rpx; } .finish-content .finish-btns .btn:nth-of-type(1){ border: 0; } /* 我的 */ .my-top{ position: relative; } .my-bg{ width: 100%; } .my-bg>image{ width: 100%; } .my-herder{ width: 100%; position: absolute; left: 0; bottom: 0; z-index: 1; } .my-message{ align-items: center; width: 100%; } .my-portrait{ width: 142rpx; height: 142rpx; margin-right: 36rpx; overflow: hidden; } .my-portrait>image{ width: 100%; } .my-txt{ flex-wrap: wrap; width: calc(100% - 178rpx); } .my-nickname{ align-items: center; width: 100%; } .my-nickname>image{ width: 32rpx; margin-left: 26rpx; } .my-vip-txt{ width: auto; line-height: 50rpx; } .my-money{ justify-content: space-around; text-align: center; margin: 44rpx 0 40rpx; } .my-money .item{ line-height: 1.2; } .my-order{ justify-content: space-around; align-items: center; height: 130rpx; border-radius: 30rpx 30rpx 0 0 ; } .my-order .item>.img{ justify-content: center; align-items: flex-end; width: 50rpx; height: 50rpx; margin: 0 auto; position: relative; } .my-order .item>.img>.point{ width: 14rpx; height: 14rpx; background-color: #fe002a; position: absolute; top: 0; right: 0; z-index: 1; } .my-order .item>.txt{ line-height: 1.2; margin-top: 12rpx; } .my-content .item{ justify-content: space-between; align-items: center; height: 80rpx; position: relative; } .my-content .item .get-phone-btn{ opacity: 0; width: 100%; height: 100%; position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 1; } .my-content .item>.title{ align-items: center; } .my-content .item>.title .img{ width: 62rpx; } /* 会员申请 */ .vip-box-bg{ padding: 34rpx 40rpx 0; width: 100%; position: fixed; left: 0; top: 50%; z-index: 999; transform: translateY(-50%); } .vip-box{ padding: 50rpx 60rpx 60rpx; line-height: 1.5; position: relative; } .vip-box .title{ text-align: center; } .vip-box .input{ height: 80rpx; border-bottom: 2rpx solid #e6e6e6; } .vip-box .close-btn{ width: 76rpx; height: 76rpx; position: absolute; top: -34rpx; right: -30rpx; } .vip-box .close-btn>image{ width: 100%; } .vip-box .submit-btn{ justify-content: center; align-items: center; height: 98rpx; } .vip-box .submit-btn>image{ width: 56rpx; margin-right: 30rpx; } .vip-box .addr-input{ width: 100%; justify-content: space-between; align-items: center; position: relative; } .vip-box .addr-input .input-box{ justify-content: space-between; align-items: center; width: calc(33% - 20rpx); border-bottom: 2rpx solid #e6e6e6; } .vip-box .addr-input .input-box .input-flex{ width: calc(100% - 35rpx); height: 80rpx; } .vip-box .addr-input .input-box>image{ width: 15rpx; height: 28rpx; } .vip-box .shear-btn{ width: 100%; height: 100%; opacity: 0; position: absolute; left: 0; top: 0; z-index: 1; } /* 个人中心 */ .ucenter-bg{ width: 100%; background-color: #f5f5f5; padding-top: 20rpx; } .ucenter{ padding: 30rpx; background-color: #FFFFFF; } .ucenter .item{ flex-wrap: nowrap; align-items: center; height: 100rpx; position: relative; } .ucenter .item .title{ width: 170rpx; font-size: 30rpx; color: #000000; } .ucenter .item .more{ margin-left: 20rpx; } .ucenter .item .more image{ width: 14rpx; height: 26rpx; } .ucenter .item .msg{ width: calc(100% - 204rpx); height: 60rpx; font-size: 24rpx; color: #8c8c9b; text-align: right; } .ucenter .item-first{ justify-content: space-between; height: 146rpx; padding: 5rpx 0; } .ucenter .item .img{ width: 136rpx; height: 136rpx; border-radius: 100%; margin-right: 34rpx; overflow: hidden; } .ucenter .item .img image{ width: 136rpx; min-height: 136rpx; } .ucenter .get-phone-btn{ display: block; width: 100%; height: 100rpx; opacity: 0; position: absolute; left: 0; top: 0; z-index: 9; } /* 地址管理 */ .addr-info .txt>view{ margin-bottom: 12rpx; } .addr-bottom{ justify-content: space-between; align-items: center; width: 100%; } .addr-bottom .radio{ align-items: center; } .addr-bottom .radio>radio{ transform: scale(.8); margin-left: -6rpx; } .addr-bottom .btns{ justify-content: space-between; align-items: center; width: 140rpx; } /* 公共底部按钮 */ .pull-btn{ width: 100%; padding: 20rpx 20rpx 30rpx; position: fixed; left: 0; bottom: 0; z-index: 99; } .pull-btn .btn{ justify-content: center; align-items: center; height: 98rpx; } .pull-btn .btn.border-btn{ border: 2rpx solid #d3d3d3; } /* 我的余额 */ .recharge{ width: 100%; padding: 15rpx 20rpx; } .recharge-msg{ height: 256rpx; padding: 40rpx 40rpx 40rpx 64rpx; box-shadow: 0 9rpx 21rpx rgba(254,191,0,.56); background-image: url(static/img/recharge-bg.png); background-size: 100%; line-height: 1.5; overflow: hidden; } .recharge-msg .txt{ justify-content: space-between; align-items: center; text-indent: 8rpx; } .recharge-msg .price{ margin-top: 35rpx; } .recharge-title{ align-items: center; line-height: 2; } .recharge-title>.line{ width: 8rpx; height: 35rpx; border-radius: 4rpx; margin-right: 10rpx; } .amount-list{ flex-wrap: wrap; } .amount-item{ width: calc(33.33% - 17rpx); height: 144rpx; margin-right: 24rpx; text-align: center; border: 2rpx solid #e6e6e6; color: #575a66; line-height: 1.4; } .amount-list .amount-item:nth-of-type(3n){ margin-right: 0; } .amount-item.checked{ background-color: #fce8aa; color: #fe6c00; border: 2rpx solid #febf00; } .detailed-list .detailed-item{ justify-content: space-between; align-items: center; border-bottom: 2rpx solid #e6e6e6; } /* 分销管理 */ .distribution{ width: 100%; padding: 15rpx 20rpx; } .distribution-msg{ height: 422rpx; box-shadow: 0 9rpx 21rpx rgba(254,191,0,.56); background-image: url(static/img/distribution-bg.png); background-size: 100%; line-height: 1.5; overflow: hidden; } .distribution-txt{ justify-content: space-between; align-items: flex-start; border-bottom: 2rpx solid rgba(255,255,255,.43); } .distribution-txt .txt{ padding-bottom: 30rpx; } .distribution-txt .txt>.title{ text-indent: 8rpx; } .distribution-txt .code-btn{ text-align: center; } .distribution-profit{ justify-content: space-between; align-items: center; width: 100%; } .distribution-profit .item{ text-align: center; } .distribution-profit .line{ width: 2rpx; height: 80rpx; background-color: rgba(255,255,255,.6); } .record-nav{ justify-content: center; align-items: center; width: 100%; margin: 45rpx 0 40rpx; } .record-nav .item{ min-width: 210rpx; line-height: 80rpx; text-align: center; } .record-nav .item.cur{ background-color: #febf00; color: #000000; } .record-list{ background-color: #f5f5f5; padding: 10rpx 20rpx; } .record-list .record-item{ justify-content: space-between; align-items: center; border-bottom: 2rpx solid #e6e6e6; } .record-list .record-item:last-child{ border-bottom: 0; } .record-item .left{ align-items: center; } .record-item .img{ width: 100rpx; height: 100rpx; margin-right: 26rpx; overflow: hidden; } .record-item .img>image{ width: 100%; min-height: 100rpx; } .record-item .right{ text-align: right; } .vip-code{ justify-content: center; padding: 100rpx 0 40rpx; } .vip-code>image{ width: 466rpx; height: auto; } .team-nav{ justify-content: center; align-items: center; } .team-nav .item{ margin: 0 45rpx; line-height: 1.5; } .team-nav .line{ height: 10rpx; border-radius: 5rpx; } /* 优惠券 */ .coupon-list{ padding-bottom: 30rpx; } .coupon-item{ align-items: center; height: 182rpx; background-color: #fff3ec; overflow: hidden; } .coupon-item:nth-of-type(1){ margin-top: 30rpx; } .coupon-item .price{ width: 195rpx; height: 182rpx; background-image: linear-gradient(to right,#ff9547,#ff6f0c); font-size: 72rpx; line-height: 102rpx; text-indent: 20rpx; padding-top: 40rpx; margin-right: 35rpx; } .coupon-item .txt{ width: calc(100% - 390rpx); } .coupon-item .btn{ width: 120rpx; line-height: 56rpx; border-radius: 28rpx; background-color: #ff6f0c; text-align: center; } .coupon-item.grey{ background-color: #f5f5f5; } .coupon-item.grey .price{ background-image: linear-gradient(to right,#666666,#666666); } .coupon-item.grey .txt{ width: calc(100% - 250rpx); } /* 免责声明 */ .disclaimers{ padding: 20rpx 30rpx; } .disclaimers-title{ line-height: 1.5; margin-bottom: 30rpx; text-align: center; } .disclaimers-txt{ line-height: 1.8; text-align: justify; } /* 订单管理 */ .order-search input{ width: calc(100% - 80rpx); background-color: #eaeaea; margin: 20rpx auto 30rpx; height: 80rpx; } .order-nav-bg{ padding: 25rpx 20rpx; background-color: #f5f5f5; position: sticky; left: 0; z-index: 99; } .order-nav{ align-items: center; } .order-nav .item{ width: 130rpx; line-height: 80rpx; margin-right: 20rpx; text-align: center; } .order-nav .item:last-child{ margin-right: 0; } .order-nav .item.cur{ background-color: #febf00; color: #000000; } .order-list{ padding: 15rpx 30rpx 20rpx; } .order-item{ padding: 28rpx 0; background-color: #FFFFFF; border-radius: 30rpx; margin-top: 30rpx; box-shadow: 0 7rpx 20rpx rgba(0,0,0,.12); } .order-code{ justify-content: space-between; align-items: center; padding: 0rpx 30rpx 20rpx; font-size: 30rpx; line-height: 1.5; color: #000000; border-bottom: 2rpx solid #eaeaea; } .order-item .item-bg{ padding: 0 15rpx; } .order-item .item{ flex-wrap: nowrap; justify-content: space-between; align-items: center; padding: 30rpx 0; border-bottom: 2rpx solid #eaeaea; } .order-item .item:last-child{ border-bottom: 0; } .order-item .item .img{ width: 194rpx; height: 194rpx; border-radius: 10rpx; overflow: hidden; } .order-item .item .img image{ width: 100%; min-height: 194rpx; } .order-item .item .txt{ width: calc(100% - 230rpx); } .order-item .item .title{ font-size: 30rpx; line-height: 1.5; color: #000000; } .order-item .item .specs{ min-height: 60rpx; font-size: 24rpx; line-height: 1.5; margin: 20rpx 0; color: #8c8c9b; } .order-item .item .price{ justify-content: space-between; align-items: center; font-size: 24rpx; line-height: 1.5; color: #8c8c9b; } .order-item .item .price>text{ font-size: 30rpx; color: #f81c1c; } .order-item .item .price>view{ display: flex; align-items: center; } .order-item .item .price>view text{ margin-right: 4rpx; } .order-item .total-price{ flex-wrap: nowrap; justify-content: space-between; align-items: center; padding: 0 30rpx; padding-top: 25rpx; border-top: 2rpx solid #eaeaea; } .order-item .total-price>text{ font-size: 30rpx; color: #f81c1c; } .order-item .total-price .btn{ box-sizing: border-box; width: 150rpx; border: 2rpx solid #d3d3d3; border-radius: 20rpx; font-size: 30rpx; color: #8c8c9b; line-height: 64rpx; text-align: center; } .order-item .total-price .btn:nth-of-type(2){ margin-left: 20rpx; } .order-item .total-price .btn-01{ background-color: #f81c1c; color: #ffffff; border: 0; } .order-item .total-price .btn-02{ color: #000000; border: 0; } /* 订单详情 */ .order-info>view{ justify-content: space-between; align-items: center; } /* 付款详情 */ .pay-info>view{ justify-content: space-between; align-items: center; } .pay-info>.pay-actual{ justify-content: flex-end; } .pay-info>.pay-actual>text{ margin-left: 8rpx; } .distributor{ padding: 40rpx 40rpx 170rpx; } .distributor .input{ height: 80rpx; border-bottom: 2rpx solid #e6e6e6; } .distributor-btn{ padding: 20rpx 40rpx; width: 100%; position: fixed; left: 0; bottom: 0; z-index: 99; } .distributor-btn .btn{ justify-content: center; align-items: center; height: 130rpx; }