.container { padding: 30rpx 24rpx 180rpx; } view, text { font-size: 30rpx; color: #333; box-sizing: border-box; } .address-block { background: #FFFFFF; border-radius: 10rpx; padding: 30rpx 20rpx 24rpx; display: flex; align-items: center; justify-content: space-between; } .address-wrapper { width: 610rpx; height: 90rpx; } .address-block .tips { display: flex; align-items: center; height: 30rpx; } .tips image { width: 30rpx; height: 30rpx; margin-right: 10rpx; } .tips view { line-height: 30rpx; font-size: 30rpx; } .address-block .detail { padding-left: 38rpx; margin-top: 18rpx; line-height: 40rpx; font-size: 26rpx; overflow: hidden; height: 40rpx; text-overflow: ellipsis; white-space: nowrap; } .arrow-img { width: 14rpx; height: 24rpx; } .product-block { background: #FFFFFF; border-radius: 24rpx; padding: 24rpx; margin: 24rpx 0; } .product-block .title { height: 88rpx; line-height: 78rpx; } .profuct-info { height: 190rpx; display: flex; align-items: flex-start; } .product-img { width: 190rpx; height: 190rpx; border-radius: 10rpx; margin-right: 20rpx; } .info-right { /* padding-top: 10rpx; */ flex: 1; } .info-main { display: flex; height: 40rpx; align-items: center; justify-content: space-between; /* margin-bottom: 58rpx; */ } .info-right .sku-name { color: #666666; font-size: 24rpx; margin: 10rpx 0; height: 34rpx; line-height: 34rpx; display: flex; justify-content: space-between; } .product-name { line-height: 40rpx; font-size: 28rpx; /* padding-left: 20rpx; text-indent: -16rpx; */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 328rpx; font-weight: bold; color: rgba(0, 0, 0, 0.9); } .info-main .price { color: rgba(0, 0, 0, 0.9); font-size: 18rpx; font-weight: bold; } .info-right .other-info { font-size: 24rpx; color: rgba(0, 0, 0, 0.9); line-height: 34rpx; } .appoint-main-module { margin-top: 24rpx; background: #FFFFFF; border-radius: 24rpx; padding: 8rpx 24rpx 44rpx; } .appoint-block { height: 72rpx; display: flex; align-items: center; border-bottom: 2rpx solid #E0E0E0; } .appoint-block .title { width: 136rpx; border-bottom: 2rpx solid #fff; font-size: 26rpx; font-weight: bold; z-index: 9; height: 72rpx; line-height: 72rpx; } .appoint-block .title text { color: #f00; } .appoint-time { flex: 1; color: #ACADB1; padding-left: 4rpx; font-size: 24rpx; } .appoint-timed { flex: 1; padding-left: 4rpx; color: #333; font-size: 26rpx; } .appoint-block .arrow-img { width: 24rpx; height: 24rpx; margin-left: 8rpx; } .appoint-btn { position: fixed; bottom: 56rpx; left: 50rpx; right: 50rpx; height: 90rpx; width: 690rpx; border-radius: 90rpx; line-height: 90rpx; text-align: center; color: #fff; background: linear-gradient(90deg, #00BAFF 0%, #008DFF 100%); font-size: 36rpx; } .appoint-overlay-wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .7); z-index: 999; } .remark-text { font-size: 26rpx; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 486rpx; padding-left: 40rpx; margin: 0 10rpx 0 20rpx; text-align: right; } .remark-popup { position: fixed; left: 0; right: 0; bottom: 0; height: 860rpx; background: #fff; border-radius: 20rpx 20rpx 0px 0px; padding: 40rpx 30rpx 50rpx; z-index: 9999; } .remark-popup .title { height: 30rpx; line-height: 30rpx; font-size: 30rpx; color: #333333; } .remark-textarea { width: 690rpx; height: 240rpx; background: #F8F8F8; border-radius: 10rpx; padding: 20rpx 36rpx 36rpx 20rpx; font-size: 26rpx; line-height: 40rpx; margin: 30rpx 0 330rpx; box-sizing: border-box; } .remark-popup .btn { width: 690rpx; height: 100rpx; background: #00B9FF; border-radius: 50rpx; line-height: 100rpx; font-size: 30rpx; text-align: center; color: #fff; } .address-item { display: flex; min-height: 136rpx; background: #fff; padding: 30rpx 20rpx; border-radius: 10rpx; } .address-item.address-empty { line-height: 75rpx; text-align: center; } .address-item .map-icon { width: 28rpx; height: 30rpx; margin: 6rpx 10rpx 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: 32rpx; font-size: 30rpx; margin: 0 0 16rpx 0; } .address-bottom { color: #999; line-height: 28rpx; height: 28rpx; font-size: 26rpx; } .address-bottom .user-name { margin: 0 32rpx 0 0; } .address-box .r { width: 30rpx; height: 90rpx; display: flex; justify-content: flex-end; align-items: center; } .address-box .r image { width: 14rpx; height: 24rpx; } .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; font-size: 15px !important; } .popup-content { display: flex; } .time-select-left { /* flex: 2; */ border-right: 1rpx solid #ddd; padding: 0 8rpx 0 20rpx; width:370rpx; } .time-select-right { flex: 1; /* padding: 0 8rpx; */ height: 900rpx; overflow-y: hidden; } .time-select-left-item{ height: 108rpx; display: flex; flex-direction: column; padding:4rpx 0; } .date-line-wrapper{ flex:1; display: flex; /* justify-content: space-between; */ align-items:center; } .time-select-left-item .date-msg{ height:36rpx; line-height: 36rpx; color: #888; font-size: 24rpx; } .time-select-left-item .date-msg.avail-date{ color:#3FA10D; font-weight: bold; } .popup-wrapper .popup-content .current-date { color: #09afff; font-weight: bold; } view.popup-wrapper .time-select-right-item { line-height: 104rpx; height: 104rpx; border-bottom: 1rpx solid #ddd; display: flex; align-items: flex-start; /*justify-content: space-between; */ flex-direction: column; padding: 0 24rpx; justify-content: center; } .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: 76rpx; border: 2rpx solid #09afff; border-radius: 44rpx; text-align: center; font-weight: normal; font-size: 22rpx; display: inline-block; margin-left:8rpx; } 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; } .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; */ margin-top: 116rpx; } .popup-content-special .time-select-left { height: 900rpx; overflow-y: scroll; } .stock-text { font-size: 20rpx; font-weight: normal; color: #888 } .zero-stock { color: #ccc; } .appoint-overlay-wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .7); z-index: 999; } /* 选择时间 */ view.popup-wrapper { /* padding: 0 0 20rpx; */ color: #333; display: flex; flex-direction: column; justify-content: space-between; /* height: 80%; */ position: fixed; left: 0; right: 0; bottom: 0; background: #fff; padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); z-index: 9999; border-radius: 36rpx 36rpx 0rpx 0rpx; overflow: hidden; } view.popup-wrapper view.confirm-btn { background: #09AFFF; height: 88rpx; line-height: 88rpx; border-radius: 88rpx; text-align: center; color: #fff; } .go-pay-wrapper { padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); } .go-pay-wrapper view { background: #09AFFF; height: 88rpx; line-height: 88rpx; border-radius: 88rpx; text-align: center; color: #fff; } .appoint-tabs-wrapper { height: 88rpx; display: flex; align-items: center; line-height: 88rpx; justify-content: space-around; background: #fff; } .appoint-tab-item.active { color: #09AFFF; border-bottom: 4rpx solid #09afff; } .order-info { background: #FFFFFF; border-radius: 24rpx; padding: 20rpx 24rpx; } .order-info .order-top { display: flex; align-items: center; height: 36rpx; margin-bottom: 6rpx; } .order-top view { font-size: 26rpx; color: #333; } .order-top view.topic { color: #666; margin-right: 16rpx; } .order-top .copy-img { width: 24rpx; height: 24rpx; margin-left: 20rpx; } .order-bottom { border-top: 2rpx solid #E0E0E0; margin-top: 14rpx; padding-top: 16rpx; } .order-price, .coupon-price { display: flex; align-items: center; height: 36rpx; margin-bottom: 6rpx; justify-content: space-between; } .order-price view, .coupon-price view { font-size: 26rpx; color: rgba(0, 0, 0, 0.9); font-weight: bold; } .order-price view.topic, .coupon-price view.topic { color: #666; margin-right: 16rpx; font-weight: normal; } .order-bottom .real-price { display: flex; align-items: center; height: 36rpx; justify-content: flex-end; font-size: 26rpx; font-weight: bold; } .order-bottom .real-price text { color: #FF004E; font-size: 26rpx; } /* 顶部地址 */ .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; } /* 选择备注 */ .appoint-overlay-wrapper.remark-overlay { display: flex; align-items: flex-end; justify-content: center; } .remark-select { width: 750rpx; padding: 0 24rpx 56rpx; background: #FFFFFF; border-radius: 24rpx 24rpx 0 0; } .remark-select .title { font-weight: 600; color: #191919; font-size: 30rpx; height: 90rpx; line-height: 90rpx; text-align: center; border-bottom: 2rpx solid #E0E0E0; } .remark-item .remark-value { color: #191919; font-size: 26rpx; font-weight: bold; flex: 1; text-align: left; } .remark-list .remark-item { height: 84rpx; display: flex; border-bottom: 2rpx solid #E0E0E0; align-items: center; } .remark-item .radio-img { width: 26rpx; height: 26rpx; } .remark-conf-btn { width: 652rpx; height: 90rpx; line-height: 90rpx; border-radius: 90rpx; border: 4rpx solid #FF8219; text-align: center; font-size: 36rpx; color: #FF8219; margin: 0 auto; margin-top: 54rpx; } /* 地址输入 */ .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; } .noon-select{ height:64rpx; display: flex; border-bottom:1rpx solid #ddd; } .time-select-right .noon-item{ flex:1; text-align: center; line-height: 64rpx; color: #979797; font-size: 26rpx; } .time-select-right view.noon-item.active-noon{ color: #fff; background: #09afff; } view.popup-wrapper .time-select-right-item .date-tag{ width: 80rpx; height: 40rpx; line-height: 38rpx; margin-left:0; /* margin-left:120rpx; */ } .popup-title-new.popup-title{ display: flex; flex-direction: column; justify-content: center; align-items: center; height:116rpx; line-height: normal; } .popup-title-new view{ color:#333; font-size: 32rpx; } .popup-title-new view.fee-tips{ color: #FF5735; font-size: 22rpx; } .time-select-right-item text{ color:#888; } .time-select-right .time-item-wrapper{ height: 836rpx; overflow-y: scroll; } .time-line{ display: flex; align-items: center; justify-content: space-between; width:100%; } view.popup-wrapper .time-select-right-item.invalid-time text{ color: #999; } view.popup-wrapper .time-select-right-item.invalid-time{ /* background: #E1E1E1; */ background: #eee; } .time-select-right-item view.time-msg{ height: 40rpx; line-height: 38rpx; border-radius: 40rpx; padding:0 8rpx; font-size: 22rpx; border: 2rpx solid #999; color: #999; font-weight: normal; white-space: nowrap; } .time-select-right-item text.extra-tips{ color: #FF5735; font-size: 22rpx; } .notice-block{ background: #fff; border-radius:24rpx; padding:20rpx 24rpx; margin-bottom:24rpx; } .notice-title{ font-weight: bold; font-size: 26rpx; line-height: 60rpx; } .notice-item{ display: flex; align-items: flex-start; } .notice-index{ width:36rpx; } .notice-item view { font-size: 26rpx; line-height: 40rpx; color:#666; } .notice-item view:last-child{ flex:1; text-align: justify; }