page { height: 100%; background: #f4f4f4; } .container{ padding: 50rpx 28rpx 180rpx ; } .address-box { width: 100%; /* height: 166.55rpx; background-size: 62.5rpx 10.5rpx; */ /* margin-bottom: 20rpx; */ /* padding-top: 10.5rpx; */ } .address-item { display: flex; /* height: 142rpx; */ background: #fff; padding: 26rpx 16rpx 20rpx; border-radius: 10rpx; } .address-item.address-empty { line-height: 75rpx; text-align: center; align-items: center; } .address-item .map-icon{ width:28rpx; height: 28rpx; margin:0 18rpx 0 0; } .address-box .l { width: 125rpx; height: 100%; } .address-box .l .name { margin-left: 6.25rpx; margin-top: -7.25rpx; display: block; width: 125rpx; height: 43rpx; line-height: 43rpx; font-size: 30rpx; color: #333; margin-bottom: 5rpx; } .address-box .l .default { margin-left: 6.25rpx; display: block; width: 62rpx; height: 33rpx; border-radius: 5rpx; border: 1px solid #b4282d; font-size: 20.5rpx; text-align: center; line-height: 29rpx; color: #b4282d; } .address-box .m { /* flex: 1; */ } .address-box .mobile { display: block; height: 29rpx; line-height: 29rpx; margin-bottom: 6.25rpx; font-size: 26rpx; } .address-box .address { display: block; height: 30rpx; line-height: 30rpx; font-size: 26rpx; margin:0 0 18rpx 0; } .address-bottom{ color: #85868A; line-height: 24rpx; height: 24rpx; font-size: 22rpx; } .address-bottom .user-name{ margin:0 32rpx 0 0; } .address-box .r { width: 77rpx; height: 77rpx; display: flex; justify-content: center; align-items: center; } .address-box .r image { width: 52.078rpx; height: 52.078rpx; } .coupon-box { width: 100%; height: 210rpx; background: #fff; border-radius:10rpx; } .coupon-box .coupon-item { margin: 0 10rpx; height: 70rpx; overflow: hidden; background: #fff; display: flex; padding:0 20rpx 0 10rpx; align-items: center; justify-content: space-between; border-bottom:2rpx solid #E4E4E4; } .coupon-box .l { flex: 1; height: 70rpx; display: flex; align-items: center; justify-content: space-between; } .coupon-box .l .name { font-size: 24rpx; } .coupon-box .l .txt { font-size: 24rpx; } .coupon-box .r { width: 30rpx; height: 40rpx; display: flex; justify-content: center; align-items: center; } .coupon-box .r image { width: 52.078rpx; height: 52.078rpx; } .message-box { margin-top: 20rpx; width: 100%; height: auto; overflow: hidden; background: #fff; } .message-box .message-item { height: 86.078rpx; overflow: hidden; background: #fff; display: flex; margin-left: 31.25rpx; padding-right: 31.25rpx; } .message-box .message-app { height: 74.078rpx; overflow: hidden; background: #fff; display: flex; margin-left: 31.25rpx; padding-right: 31.25rpx; padding-top: 18rpx;border-radius: 20rpx; } .order-box { margin-top: 20rpx; width: 100%; height: auto; overflow: hidden; background: #fff; } .order-box .order-item { border-radius: 10rpx; height: 70rpx; overflow: hidden; background: #fff; display: flex; align-items: center; justify-content: space-between; padding:0 20rpx; border-bottom: 1px solid #d9d9d9; } .order-box .order-item.tip-item{ padding-bottom:26rpx; height: auto; display: flex; flex-direction: column; } .order-box .order-item .l { width:100rpx; height: 70rpx; line-height: 70rpx; align-items: center; } .order-box .order-item .l .name{ font-size: 24rpx; } .order-box .order-item .r { line-height: 70rpx; flex:1; height: 70rpx; line-height: 70rpx; align-items: center; text-align: right; /* overflow: hidden; */ } .order-box .order-item.no-border { border-bottom: none; } .goods-items { margin-top: 20rpx; background: #fff; /* margin-bottom: 120rpx; */ border-radius: 10rpx; padding: 20rpx 12rpx; } .goods-items .item { height:210rpx; align-items: center; } .goods-items .item .name{ font-size: 28rpx; height: 28rpx; line-height: 28rpx; color: #2a2a2a; } .goods-items .item.no-border { border-bottom: none; } .goods-items .item:last-child { border-bottom: none; } .goods-items .img { height: 178rpx; width: 178rpx; /* background-color: #f4f4f4; */ margin-right: 26rpx; border-radius: 10rpx; } .goods-items .img image { height: 178rpx; width: 178rpx; border-radius:10rpx; } .goods-items .info { flex: 1; height: 210rpx; padding:14rpx 0 0; } .goods-items .t { height: 33rpx; line-height: 33rpx; margin-bottom: 10rpx; overflow: hidden; font-size: 30rpx; color: #333; } .goods-items .t .name { display: block; float: left; } .goods-items .t .number { display: block; float: right; text-align: right; } .goods-items .m { height: 28rpx; overflow: hidden; line-height: 28rpx; margin-bottom: 16rpx; font-size: 24rpx; color: #85868A; } .goods-items .b { height: 28rpx; line-height: 28rpx; font-size: 24rpx; color: #85868A; } .order-total { position: fixed; left: 0; bottom: 0; height: 100rpx; width: 100%; display: flex; } .order-total .l { flex: 1; height: 100rpx; line-height: 100rpx; color: #b4282d; background: #fff; font-size: 33rpx; padding-left: 31.25rpx; border-top: 1rpx solid rgba(0, 0, 0, 0.2); border-bottom: 1rpx solid rgba(0, 0, 0, 0.2); } .order-total .r { width: 233rpx; height: 100rpx; background: #b4282d; border: 1px solid #b4282d; line-height: 100rpx; text-align: center; color: #fff; font-size: 30rpx; } .actual-price{ color: #2a2a2a; /* font-weight: bold; */ font-size: 30rpx; text-align: right; margin:28rpx 0 0; } .actual-price text{ color:#DF1717; } .go-pay-wrapper{ position: fixed; bottom: 0; left:0; right:0; height: 130rpx; padding:20rpx 24rpx; /* background:#fff; */ } view.go-pay-wrapper button > view{ color:#fff; } .appoint-time-block{ margin-top:20rpx; background:#fff; border-radius: 10rpx; } .appoint-time-block view.appoint-time-operate{ padding:0 20rpx; height: 70rpx; display: flex; align-items: center; justify-content: space-between; font-size: 24rpx; } view.operate-left{ color:#2a2a2a; } view.operate-right{ display: flex; align-items:center; } view.operate-right{ color:#09AFFF; } view.operate-right .not-select{ color:#333; } .appoint-time-show{ border-top:2rpx solid #E4E4E4; padding:0 24rpx; font-size: 24rpx; } view.one-time{ height: 70rpx; display: flex; align-items: center; justify-content: space-between; } view.one-time text{ color:#999; font-size: 26rpx; } .multi-times{ padding:30rpx 0 } .multi-times-item{ height: 54rpx; display: flex; align-items: center; justify-content: space-between; } .multi-times-item text{ font-weight: bold; font-size: 24rpx; } view.appoint-result{ margin-top:18rpx; border:2rpx solid #09AFFF; border-radius:20rpx; line-height:46rpx; font-size: 26rpx; padding:10rpx; } .orange-font{ color:#FA6400; font-weight: bold; font-size: 26rpx; } .order-item .message-item{ color:#2a2a2a; font-size: 24rpx; font-weight: normal; height: 70rpx; } /* 选择时间 */ view.popup-wrapper{ /* padding: 0 0 20rpx; */ color:#333; display: flex; flex-direction: column; justify-content: space-between; height: 100%; z-index:999; } view.popup-wrapper view{ color:#888; font-size: 30rpx; } .popup-content{ flex:1; } .popup-title{ height: 96rpx; line-height: 96rpx; text-align: center; border-bottom: 1rpx solid #ddd; } .popup-content{ display: flex; } .time-select-left{ flex:2; border-right:1rpx solid #ddd; padding:0 20rpx; } .time-select-right{ flex:3; padding:0 8rpx; } .time-select-left-item{ height: 108rpx; display: flex; flex-direction: column; justify-content: center; } .popup-content view.current-date{ color:#09afff; font-weight: bold; } view.popup-wrapper .time-select-right-item{ height: 104rpx; border-bottom:1rpx solid #ddd; display: flex; align-items: center; justify-content: space-between; padding:0 24rpx; } .time-select-right-item view{ color:#6D7278; font-weight: bold; } view.popup-btn-wrapper{ margin:20rpx 0 0; padding:0 24rpx 20rpx; } view.popup-btn-wrapper button > view{ color:#fff; } view.popup-wrapper .date-tag{ color:#09afff; height: 44rpx; line-height: 42rpx; width:130rpx; border:2rpx solid #09afff; border-radius:44rpx; text-align: center; font-weight: normal; font-size: 28rpx; display: inline-block; } view.popup-wrapper .full-time{ color:#09AFFF; font-size: 24rpx; margin:0 0 0 20rpx; height: 44rpx; line-height: 44rpx; float: right; padding-right:40rpx; } .first-appoint-date-item{ height: 108rpx; display: flex; align-items: center; padding:0 0 0 240rpx; } .first-time-selected{ margin:0 0 0 60rpx; } .select-week-times{ border-top:1rpx solid #ddd; } .week-select-left{ flex:1.2; } .week-select-left>view.time-select-left-item{ padding:0 0 0 60rpx; display: flex; align-items: flex-start; justify-content: flex-start; flex-direction: row; padding:10rpx 0 0 60rpx; } .week-select-left>view.time-select-left-item .week-str{ padding:12rpx 0 0 0; } view.popup-wrapper view.select-num-tag{ width:32rpx; height: 32rpx; line-height: 32rpx; background:#09AFFF; border-radius: 34rpx; font-size: 20rpx; color:#fff; text-align: center; margin:0 0 0 6rpx; } /* 支付失败弹框 */ .overlay-wrapper { display: flex; align-items: center; justify-content: center; height: 100%; } .fail-wrapper { width: 588rpx; height:502rpx; border-radius:10rpx; background: #fff; padding-bottom:40rpx; padding:80rpx 0 0; font-size: 24rpx; display: flex; flex-direction: column; justify-content: space-between; } .fail-top{ display: flex; flex-direction: column; align-items: center; } .fail-top image{ width:110rpx; height: 110rpx; } .fail-text{ font-size: 34rpx; font-weight: bold; margin:66rpx 0 24rpx; height: 34rpx; } .fail-bottom{ height: 132rpx; border-top:2rpx solid #E4E4E4; display: flex; justify-content: space-around; align-items: center; } .fail-bottom .btn-devide{ width:2rpx; height: 130rpx; background: #E4E4E4; } .cancel-btn{ width:202rpx; height: 72rpx; line-height: 72rpx; border:2rpx solid #85868A; color:#282728; border-radius:72rpx; text-align: center; } .repay-btn{ width:202rpx; height: 72rpx; line-height: 72rpx; background: #09AFFF; color:#fff; border-radius:72rpx; text-align: center; } .discount-title{ height:70rpx; background: #E0F5FC; padding:0 10rpx; display: flex; align-items: center; } .discount-title image{ width:24rpx; height: 26rpx; margin:0 8rpx 0 0; } .discount-title text{ font-size: 28rpx; font-weight:bold; color: #323232; } .discount-line{ padding:0 50rpx 0 20rpx; } .discount-line .txt{ color: #DF1717; font-size: 24rpx; } .member-benefit,.buy-member{ margin:20rpx 0 0; height: 70rpx; background: #fff; border-radius: 10rpx; padding:0 20rpx; display: flex; align-items: center; justify-content: space-between; } .member-benefit .member-tip{ text-align: right; } .member-tag{ width: 142rpx; padding:0 10rpx; height: 44rpx; line-height: 44rpx; text-align: center; background: #2E3235; border-radius: 5rpx; } .member-tag text{ font-size: 24rpx; color: #2A2A2A; background: linear-gradient(177deg, #F1E3C8 0%, #E6C162 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .member-tip{ flex:1; margin:0 0 0 26rpx; color:#DF1717; font-size: 24rpx; } .popup-content-special{ position: relative; } .popup-title-special{ position: absolute; left:0; top:0; right:0; background: #fff; } .popup-content-special{ height:900rpx ; margin-top:96rpx; } .popup-content-special .time-select-left{ height: 900rpx; overflow-y: scroll; } /* 顶部地址 */ .address-select { padding: 22rpx 24rpx 22rpx 30rpx; background: #FFFFFF; border-radius: 24rpx; display: flex; align-items: center; min-height: 132rpx; } .address-select .map-img { width: 48rpx; height: 48rpx; margin-right: 24rpx; } .address-main { display: flex; flex-direction: column; flex: 1; } .address-main .main-line { display: flex; height: 44rpx; margin-bottom: 4rpx; align-items: center; } .main-line view { color: #333333; font-size: 32rpx; } .main-line view.phone { color: #999999; font-size: 24rpx; margin-left: 14rpx; } .customer-info .customer-address { color: #666666; line-height: 40rpx; } .address-select .arrow-img { width: 28rpx; height: 28rpx; margin-left: 20rpx; } /* 地址选择 */ .appoint-overlay-wrapper.address-overlay { display: flex; align-items: flex-end; } .address-popup { width: 750rpx; padding: 0 24rpx 0rpx; background: #FFFFFF; border-radius: 56rpx 56rpx 0 0; } .address-popup .title { font-weight: 600; color: #191919; font-size: 28rpx; height: 122rpx; line-height: 122rpx; text-align: center; } .address-list { height: 720rpx; overflow-y: scroll; padding-bottom: 20rpx; } .address-popup .add-address-btn { width: 654rpx; margin: 40rpx 24rpx 40rpx; height: 90rpx; background: linear-gradient(90deg, #00BAFF 0%, #008DFF 100%); border-radius: 45rpx; font-size: 36rpx; text-align: center; color: rgba(255, 255, 255, 0.9); line-height: 90rpx; } .address-item { width: 702rpx; display: flex; align-items: center; min-height: 132rpx; border-radius: 24rpx; border: 2rpx solid #E3E3E3; margin-bottom: 30rpx; } .address-item .arrow-img { width: 28rpx; height: 28rpx; margin-left: 20rpx; } .address-item .map-img { width: 48rpx; height: 48rpx; margin-right: 24rpx; } /* 地址输入 */ .add-address .add-form { background: #fff; width: 702rpx; border-radius: 25rpx; padding: 4rpx 24rpx 24rpx; } .add-address .form-item { height: 78rpx; display: flex; align-items: center; } .add-address .input { flex: 1; /* height: 78rpx; */ /* line-height: 44rpx; */ /* overflow: hidden; */ font-size: 26rpx; color: #333; padding-top: 24rpx; } .add-address .label { font-size: 26rpx; font-weight: bold; width: 160rpx; text-align: left; color: rgba(0, 0, 0, 0.9); } .add-address .label text { color: #FF0000; } .add-address .content { border-bottom: 2rpx solid #E0E0E0; /* height: 88rpx; */ /* line-height: 88rpx; */ align-content: center; flex: 1; display: flex; align-items: center; padding-bottom: 8rpx; height: 78rpx; } .gender-wrapper image { width: 26rpx; height: 26rpx; margin-right: 10rpx; } .gender-wrapper { display: flex; /* align-items: center; */ height: 78rpx; justify-content: space-between; width: 220rpx; } .male, .female { display: flex; align-items: center; height: 78rpx; padding-top: 24rpx; } .male text, .female text { color: #ACADB1; font-size: 24rpx; } /* 地址选择 */ .appoint-overlay-wrapper.address-overlay { display: flex; align-items: flex-end; } .address-popup { width: 750rpx; padding: 0 24rpx 0rpx; background: #FFFFFF; border-radius: 56rpx 56rpx 0 0; } .address-popup .title { font-weight: 600; color: #191919; font-size: 28rpx; height: 122rpx; line-height: 122rpx; text-align: center; } .address-list { height: 720rpx; overflow-y: scroll; padding-bottom: 20rpx; } .address-popup .add-address-btn { width: 654rpx; margin: 40rpx 24rpx 40rpx; height: 90rpx; background: linear-gradient(90deg, #00BAFF 0%, #008DFF 100%); border-radius: 45rpx; font-size: 36rpx; text-align: center; color: rgba(255, 255, 255, 0.9); line-height: 90rpx; } .address-item { width: 702rpx; display: flex; align-items: center; min-height: 132rpx; border-radius: 24rpx; border: 2rpx solid #E3E3E3; margin-bottom: 30rpx; } .address-item .arrow-img { width: 28rpx; height: 28rpx; margin-left: 20rpx; } .address-item .map-img { width: 48rpx; height: 48rpx; margin-right: 24rpx; } .appoint-overlay-wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .7); z-index: 999; }