.flex-col{flex-direction: column;} .ddflex{align-items: center;} .fflex{flex: 1;} .home{width: 160rpx;height: 72rpx;background-color: rgba(0,0,0,.7);border-radius: 36rpx;justify-content: center;position: fixed;left: 20rpx;z-index: 10;} .home text{font-size: 29rpx;color: #fff;} .home image{width: 29rpx;height: 28rpx;margin-right: 10rpx;} .top { background-color: #fff; padding: 20rpx 30rpx; } .logos { font-size: 22rpx; color: #666; } .logo-img { width: 185rpx; height: 39rpx; margin-right: 15rpx; } .logo-r { position: relative; padding-left: 10rpx; } .logo-r:before { content: ''; display: block; width: 1rpx; height: 39rpx; background-color: #D1D1D1; position: absolute; top: 50%; transform: translateY(-50%); left: 0; } .logo-r .ddflex { font-size: 20rpx; color: #999; margin-bottom: 5rpx; } .logo-r .ddflex image { width: 17rpx; height: 24rpx; margin-right: 5rpx; } .tel { width: 210rpx; height: 70rpx; border: 1rpx solid #FA9350; border-radius: 8rpx; } .tel-t { height: 32rpx; background-color: #FA9350; font-size: 20rpx; color: #fff; justify-content: center; } .tel-t image { width: 20rpx; height: 20rpx; margin-right: 7rpx; } .call { font-size: 26rpx; color: #FA9350; font-weight: bold; text-align: center; line-height: 38rpx; } /* 轮播图 */ .ban { height: 400rpx; position: relative; background: #fff; } .swiper { width: 100%; height: 400rpx; } .swiper image { width: 100%; height: 100%; } .swiper-img { width: 750rpx; height: 400rpx; } .dots { position: absolute; left: 50%; transform: translateX(-50%); bottom: 30rpx; z-index: 3; justify-content: center; } .dot { width: 12rpx; height: 12rpx; background: rgba(255, 255, 255, .4); margin: 0 3rpx; border-radius: 6rpx; } .dot.active { background: #fff; width: 28rpx; } /* 表单 */ .form { padding: 40rpx 30rpx; background: #fff; } .form-title { text-align: center; } .form-title text{font-size: 32rpx; color: #333; font-weight: bold;} .form-list { margin-top: 40rpx; } .form-list .li { background: #f9f9f9; border-radius: 15rpx; margin-bottom: 20rpx; } .label { font-size: 160rpx; font-size: 28rpx; color: #666; padding-left: 30rpx; } .ipt { font-size: 30rpx; color: #333; padding: 25rpx 30rpx; } .textarea { font-size: 30rpx; color: #333; padding: 25rpx 30rpx; height: 180rpx; } .phone-ipt { font-size: 30rpx; color: #333; text-align: left; padding: 25rpx 30rpx; } .pickers { font-size: 30rpx; color: #333; text-align: left; padding: 25rpx 30rpx; } .placeholder { color: #999; } .form-btn { margin-top: 60rpx; background-color: #2B8CFF; font-size: 30rpx; color: #fff; text-align: center; line-height: 90rpx; border-radius: 10rpx; } /* 文本 */ .richText { background-color: #fff; padding: 40rpx 30rpx; font-size: 34rpx; color: #333; line-height: 1.7; margin: 20rpx 0; } /* 商品 */ .product { margin: 20rpx 0; padding: 0 30rpx; background-color: #fff; } .product .li { border-bottom: 1rpx solid #e9e9e9; padding: 30rpx 0; align-items: flex-start; } .product .li:last-child { border-bottom: none; } .pro-img { width: 200rpx; height: 200rpx; border-radius: 15rpx; margin-right: 20rpx; } .pro-info { height: 200rpx; position: relative; } .pro-name { font-size: 30rpx; color: #333; line-height: 40rpx; height: 85rpx; overflow: hidden; } .pro-bri { font-size: 24rpx; color: #999; } .pro-opt { justify-content: space-between; position: absolute; left: 0; right: 0; bottom: 0; } .money { font-size: 36rpx; color: #C5020B; font-weight: bold; } .money text { font-size: 22rpx; color: #252A3B; margin-left: 5rpx; font-weight: normal; } .pro-btn { background-color: #2B8CFF; height: 50rpx; border-radius: 25rpx; padding: 0 20rpx; font-size: 28rpx; color: #fff; text-align: center; line-height: 50rpx; } .product2 { margin: 20rpx 0; padding: 30rpx; } .product2 .li { width: 330rpx; margin-right: 30rpx; background-color: #fff; border-radius: 15rpx; } .product2 .li:nth-child(2n) { margin-right: 0; } .product2 .pro-img { width: 330rpx; height: 330rpx; border-radius: 15rpx 15rpx 0 0; } .product2 .li .pro-info { padding: 20rpx; height: auto; } .product2 .li .pro-opt { position: inherit; margin-top: 10rpx; } .pro-cart image { width: 42rpx; height: 42rpx; } .product3 { margin: 20rpx 0; padding: 20rpx 0; background: none; height: 260rpx; overflow: hidden; } .product3 scroll-view { white-space: nowrap; padding-bottom: 20rpx; } .product3 .li { width: 600rpx; margin-right: 30rpx; border: none; display: inline-block; padding: 30rpx; background-color: #fff; border-radius: 20rpx; } .product3 .li:first-child { margin-left: 30rpx; } /* 图片 */ .images image { width: 100%; } /* 客服 */ .contact { position: fixed; bottom: 20%; right: 30rpx; z-index: 50; background-color: rgba(255, 255, 255, .9); box-shadow: 0 0 10rpx rgba(0, 0, 0, .1); justify-content: center; font-size: 24rpx; color: #333; flex-direction: column; width: 100rpx; height: 100rpx; border-radius: 50%; } .contact image { width: 40rpx; height: 34rpx; margin: 0 auto 5rpx; } /* 分享 */ .share { position: fixed; bottom: 30%; right: 30rpx; z-index: 50; background-color: rgba(255, 255, 255, .9); box-shadow: 0 0 10rpx rgba(0, 0, 0, .1); justify-content: center; font-size: 24rpx; color: #333; flex-direction: column; width: 100rpx; height: 100rpx; border-radius: 50%; } .share image { width: 34rpx; height: 34rpx; margin: 0 auto 5rpx; } /* 优惠券 */ .coupon { padding: 60rpx 30rpx 30rpx; } .tag { width: 156rpx; height: 40rpx; background-color: #FC3C31; border-radius: 20rpx 20rpx 20rpx 0; font-size: 28rpx; color: #fff; text-align: center; line-height: 40rpx; margin: 0 auto 15rpx; } .form-title view { position: relative; display: inline-block; } .form-title view text { position: relative; z-index: 5; } .form-title view::after { content: ''; display: block; height: 6rpx; background-color: #FFC72C; position: absolute; bottom: 2rpx; left: 30rpx; right: 30rpx; z-index: 2; } .coupon-list { padding: 10rpx 0 0; } .coupon-list .li { background-color: #fff; box-shadow: 0 0 32rpx rgba(0, 0, 0, 0.04); border-radius: 15rpx; padding: 0 22rpx; color: #999; margin-bottom: 24rpx; position: relative; margin-top: 30rpx; } .info { border-bottom: 1rpx dashed #E9E9E9; padding: 20rpx 22rpx 29rpx 9rpx; position: relative; } .info::before, .info::after { content: ''; display: block; width: 20rpx; height: 20rpx; background-color: #f6f6f6; border-radius: 50%; position: absolute; bottom: -10rpx; } .info::before { left: -34rpx; } .info::after { right: -34rpx; } .info .left-pic { width: 80rpx; height: 80rpx; margin-right: 15rpx; } .info .left-pic image { width: 100%; height: 100%; } .title { font-size: 32rpx; color: #222; font-weight: bold; } .time { font-size: 22rpx; margin-top: 15rpx; } .info-r { text-align: right; margin-left: 20rpx; width: 160rpx; } .money{justify-content: flex-end;} .money text { font-size: 40rpx; color: #EB0000; } .money .texts { color: #EB0000; font-size: 30rpx; } .man { font-size: 22rpx; text-align: right; } .li-bot { padding: 15rpx 15rpx 15rpx 7rpx; height: 80rpx; } .check { font-size: 24rpx; color: #666; } .check image { width: 17rpx; height: 11rpx; margin-left: 8rpx; } .infos { font-size: 20rpx; padding: 15rpx 0 30rpx; } .infos view { padding: 5rpx 0; } .yong { width: 130rpx; height: 50rpx; background: linear-gradient(90deg, #009AFF 0%, #3FBDFB 100%); border-radius: 28rpx; font-size: 24rpx; color: #fff; justify-content: center; text-align: center; } .yong-ma{width: 38rpx;height: 38rpx;margin-right: 40rpx;} /* 充值金额 */ .recharge { padding: 45rpx 0 0 0; } .rechargeMoney { font-size: 32rpx; /* font-weight: bold; */ color: #666; } .rechargeul { padding: 40rpx 0 0 0; flex-wrap: wrap; /* border-bottom: 1rpx solid #DBDBDB; */ } .rechargeId { padding: 25rpx 0; font-size: 40rpx; color: #333; font-weight: bold; border-bottom: 1rpx solid #DBDBDB; align-items: center; margin-bottom: 70rpx; } .rechargeId text { font-weight: bold; margin-right: 22rpx; } .rechargeId input { font-size: 48rpx; color: #333; height: 60rpx; font-weight: normal; } .rechargeId.on { border-color: #F32A27; } .placeholder { color: #BABABA; } .rechargeli { padding: 60rpx 0; width: 210rpx; border-radius: 20rpx; margin-right: 30rpx; background-color: #F7F4F8; margin-bottom: 50rpx; border: 1rpx solid #F7F4F8; box-sizing: border-box; text-align: center; justify-content: center; } .rechargeli:nth-child(3n) { margin-right: 0; } .rechargeli-active { border-color: #F32A27; background-color: #fef3f3; } .awealth { color: #F32A27 !important; } .wealth { font-size: 30rpx; font-weight: bold; text-align: center; } .chongzhi { padding: 25rpx 20rpx; text-align: center; background-color: #FD3A31; border-radius: 10rpx; font-size: 32rpx; color: #FFFFFF; } .subchongzhi { padding: 23rpx 18rpx; text-align: center; color: #FD3A31; border-radius: 10rpx; font-size: 32rpx; border: 1rpx solid #FD3A31; margin-top: 30rpx; } /* 手机号弹窗 */ .mask { position: fixed; z-index: 99; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, .5); } .regi { position: fixed; width: 550rpx; left: 50%; top: 50%; transform: translate(-50%,-50%); border-radius: 15rpx; padding: 0 30rpx 30rpx; background-color: #fff; z-index: 100; } .regi-tit { border-bottom: 2rpx solid #D8D8D8; font-size: 30rpx; color: #333; padding: 35rpx 0 35rpx; text-align: center; } .regi-close { width: 37rpx; height: 37rpx; position: absolute; top: 20rpx; right: 22rpx; } .phone { align-items: center; margin: 100rpx 0 100rpx; } .phone input { font-size: 30rpx; color: #333; } .regi-btn { background-color: #2B8CFF; width: 245rpx; height: 75rpx; line-height: 75rpx; font-size: 30rpx; color: #fff; margin-bottom: 20rpx; text-align: center; border-radius: 45rpx; } .regi-btn1{background-color: #e9e9e9;color: #666;} /* 导引 */ .guide{width: 420rpx;height: 523rpx;background-color: #FFFFFF;border-radius: 40rpx;position: fixed;top: 0;right: 45rpx;z-index: 100;padding: 45rpx 0 0 60rpx;box-sizing: border-box;} .guide::before{content: '';display: block;width: 0;height: 0;border: 20rpx solid transparent;border-top: none;border-bottom-color: #fff;position: absolute;right: 85rpx;top: -15rpx;} .guide-tit{font-size: 40rpx;color: #333;font-weight: bold;padding-left: 10rpx;} .guide-tip{font-size: 24rpx;color: #999;padding-left: 10rpx;margin-top: 5rpx;} .guide-s{font-size: 36rpx;color: #333;font-weight: bold;margin-top: 38rpx;} .guide-s image{width: 56rpx;height: 56rpx;margin-right: 18rpx;} .guide-btn{width: 300rpx;height: 86rpx;background: linear-gradient(90deg, #009AFF 0%, #3FBDFB 100%);border-radius: 50rpx;font-size: 32rpx;color: #fff;font-weight: bold;text-align: center;line-height: 86rpx;margin-top: 50rpx;} .popupPost{ position: fixed;left: 0;right: 0; z-index: 100;bottom: 400rpx; } .popup{background-color: #fff;border-radius: 40rpx;width: 634rpx;box-sizing: border-box;padding: 54rpx 47rpx 60rpx;text-align: center;margin: auto;} .popup-img{width: 318rpx;height: 206rpx;margin: 0 auto;} .popup-tip{font-size: 52rpx;color: #333;font-weight: bold;margin-top: 30rpx;text-align: center;} .popup-tips{text-align: center;font-size: 32rpx;color: #999;margin: 25rpx auto 0;max-width: 430rpx;} .popup-btns{margin-top: 75rpx;justify-content: space-between;} .back-home{text-align: center; font-size: 32rpx;color: #2B8CFF;width: 260rpx;height: 86rpx;border-radius: 50rpx;border: 2rpx solid #2B8CFF;justify-content: center;box-sizing: border-box;} .check-btn{text-align: center;font-size: 32rpx;color: #fff;width: 260rpx;height: 86rpx;border-radius: 50rpx;background: linear-gradient(90deg, #009AFF 0%, #3FBDFB 100%);justify-content: center;} .popup-closePost{ position: absolute; left: 0; right: 0; bottom: -154rpx; } .popup-close{width: 89rpx;height: 89rpx;position: absolute;margin: auto;} .popup-ipt{margin-top: 55rpx;border: 1rpx solid #707070;border-radius: 15rpx;padding: 20rpx 40rpx;font-size: 32rpx;color: #333;text-align: left;box-sizing: border-box;height: 90rpx;line-height: 50rpx;} .placeholder{color: #999;} .ceng{position: fixed;left: 0;top: 0;right: 0;bottom: 0;background-color: rgba(0,0,0,.5);z-index: 99;} .qrcodePost{ position: fixed; left: 0; right: 0; bottom: 400; z-index: 100; } .qrcode{background-color: #fff;width: 560rpx;border-radius: 15rpx;padding: 30rpx;box-sizing: border-box;text-align: center;margin: auto;} .code{font-size: 30rpx;color: #333;font-weight: bold;padding: 30rpx 0 50rpx;justify-content: center;border-top: 1rpx dashed #e9e9e9;} .code text{color: #2B8CFF;} .copy{font-size: 24rpx;color: #999;border: 1rpx solid #e9e9e9;border-radius: 20rpx;height: 40rpx;line-height: 40rpx;width: 100rpx;margin-left: 15rpx;font-weight: normal;text-align: center;} .qr-code{justify-content: center;padding: 50rpx 0;} .closePost{ position: absolute;left: 0;right: 0;bottom: -90rpx; } .close{width: 60rpx;height: 60rpx;margin: auto;} .code-image{ width: 400rpx; height: 400rpx; } .ruzhu{padding: 30rpx 0;justify-content: center;} .ruzhu text{font-size: 24rpx;color: #a5a5a5;} .ruzhu .rz-text{color: #2B8CFF;margin: 0 10px;} /* 按钮悬浮 */ .bot-fixed{position: fixed;left: 0;right: 0;bottom: 0;padding: 30rpx;z-index: 50;background-color: #fff;} .btn{width: 100%;height: 80rpx;background-color: #2B8CFF;font-size: 30rpx;color: #fff;border-radius: 10rpx;text-align: center;line-height: 80rpx;} .btn-red{background-color: #fe0419;} /* 商品悬浮 */ .product-fixed{position: fixed;left: 0;right: 0;bottom: 0;padding: 30rpx;background-color: #fff;z-index: 50;border-top: 1rpx solid #f1f1f1;} .product-fixed image{width: 100rpx;height: 100rpx;border-radius: 10rpx;margin-right: 20rpx;} .product-tit{font-size: 28rpx;color: #333;font-weight: bold;} .product-opt{margin-top: 10rpx;justify-content: space-between;} .product-price .product-price-m{font-size: 28rpx;color: #C5020B;font-weight: bold;} .product-price .product-price-t{font-weight: normal;font-size: 24rpx;margin-left: 10rpx;color: #252A3B;} .product-btn{background-color: #2B8CFF;height: 50rpx;border-radius: 25rpx;padding: 0 20rpx;font-size: 28rpx;color: #fff;text-align: center;line-height: 50rpx;} /* 优惠券悬浮 */ .coupon-fixed{position: fixed;left: 0;right: 0;bottom: 0;padding: 30rpx;background-color: #fff;z-index: 50;border-top: 1rpx solid #f1f1f1;} .coupon-fixed image{width: 80rpx;height: 80rpx;margin-right: 15rpx;} .coupon-fixed .title{font-size: 32rpx;} .coupon-fixed .money{justify-content: flex-start;} .coupon-fixed .money text{font-size: 30rpx;} .coupon-fixed .money .texts{font-size: 24rpx;}