page { background: #f6f6f6; } .address-content { padding: 22rpx 20rpx; background: #fff; } .address-content .receiver { display: flex; align-items: center; position: relative; color: #444; font-size: 28rpx; margin-bottom: 20rpx; font-weight: 500; } .address-content .receiver text { width: 160rpx; color: #666; } .address-content .receiver input, .sel-btn { border-radius: 4rpx; flex: 1; height: 52rpx; line-height: 52rpx; padding: 5rpx 10rpx; box-sizing: border-box; font-weight: bold; background-color: #f7f7f7; } .sel-btn { color: #999; } .address-content .receiver input:nth-child(3) { width: 280rpx; } .address-content p { color: #999; font-size: 22rpx; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .address-line { margin-bottom: 20rpx; height: 4rpx; background: #fff; } .address-line image { width: 750rpx; height: 4rpx; display: block; } .card-content { margin: 0 auto 20rpx; } .card-container { padding-bottom: 20rpx; } .card-header { font-size: 24rpx; color: #aaa; display: flex; justify-content: space-between; align-items: center; padding: 0 30rpx; height: 84rpx; border-bottom: 1rpx solid #efefef; } .cart-item { display: flex; flex-direction: column; } .sku-item { padding: 26rpx; border-bottom: 1rpx solid #efefef; display: flex; align-items: flex-start; } .sku-item .sku-img { width: 120rpx; height: 120rpx; margin-right: 20rpx; } .sku-item .sku-msg { width: 510rpx; } .sku-item .sku-msg .sku-title { font-size: 26rpx; color: #444; line-height: 32rpx; margin-bottom: 10rpx; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sku-item .sku-msg .sku-spec { font-size: 22rpx; line-height: 22rpx; color: #aaa; margin-bottom: 12rpx; } .sku-item .sku-msg .original-price { font-size: 22rpx; line-height: 22rpx; color: #aaa; margin-bottom: 10rpx; } .sku-item .sku-msg .sku-price { font-size: 22rpx; line-height: 26rpx; color: #444; margin-top: 10rpx; } .sku-item .sku-msg .sku-price span { font-family: DIN; color: #ff758c; font-size: 26rpx; font-weight: 500; } .sku-item-gift { width: 650rpx; height: 140rpx; background: #f9f9f9; margin: 28rpx auto 30rpx; padding: 20rpx; box-sizing: border-box; display: flex; order: 99; } .sku-item-gift .sku-img { width: 100rpx; height: 100rpx; margin-right: 20rpx; } .sku-item-gift .sku-msg { width: 510rpx; } .sku-item-gift .sku-msg .sku-title { font-size: 26rpx; color: #444; line-height: 30rpx; margin-bottom: 10rpx; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sku-item-gift .sku-msg .sku-spec { font-size: 22rpx; line-height: 22rpx; color: #aaa; margin-bottom: 14rpx; } .sku-item-gift .sku-msg .tag { border: 1rpx solid #4facfe; padding: 0 12rpx; font-size: 20rpx; border-radius: 16rpx; color: #4facfe; height: 24rpx; line-height: 24rpx; position: absolute; } .sku-item-gift .sku-msg .tag.tag-disabled { border-color: #a3a3a3; color: #a3a3a3; } .fixed-content { display: flex; padding-left: 20rpx; justify-content: space-between; align-items: center; height: 96rpx; } .fixed-content .fixed-left { display: flex; justify-content: center; flex-direction: column; } .fixed-content .fixed-left .h1 { font-size: 28rpx; line-height: 28rpx; color: #444; margin-bottom: 12rpx; } .fixed-content .fixed-left .h1 span { color: #ff758c; font-weight: bold; } .fixed-content .fixed-left .h2 { font-size: 22rpx; line-height: 22rpx; color: #666; } .fixed-content .fixed-left .h2 em { margin-right: 20rpx; } .fixed-content .fixed-bar-btn { width: 260rpx; height: 96rpx; text-align: center; line-height: 96rpx; color: #fff; font-size: 30rpx; background: linear-gradient(100deg, #ff758c 0%, #ff7eb3 100%); padding: 0; margin: 0; font-weight: bold; border-radius: 48rpx 0rpx 0rpx 48rpx; } .confirm-order-modal { border-radius: 30rpx 30rpx 0 0; background: #fff; padding: 52rpx 30rpx 0; display: flex; flex-direction: column; align-items: center; position: relative; } .confirm-order-modal .title { font-size: 32rpx; color: #444; line-height: 32rpx; margin-bottom: 40rpx; font-weight: 500; } .confirm-order-modal .sub-title { display: flex; justify-content: center; align-items: center; color: #4facfe; line-height: 26rpx; font-size: 26rpx; margin-bottom: 48rpx; font-weight: 500; } .confirm-order-modal .sub-title image { width: 28rpx; height: 28rpx; margin-right: 14rpx; } .confirm-order-modal .order-content { width: 690rpx; border-radius: 20rpx; padding-top: 30rpx; background: #f6f6f6; margin-bottom: 136rpx; box-shadow: inset 0 0 10rpx rgba(0,0,0,0.1); } .confirm-order-modal .order-content .msg-group { width: 690rpx; padding: 0 30rpx; margin-bottom: 20rpx; display: flex; font-size: 24rpx; line-height: 24rpx; color: #444; box-sizing: border-box; align-items: center; } .confirm-order-modal .order-content .msg-group span { font-weight: bold; white-space: nowrap; } .confirm-order-modal .order-content .msg-group em { font-weight: 400; flex: 1; line-height: 1.4; } .confirm-order-modal .order-content .total { line-height: 86rpx; padding: 0 30rpx; text-align: right; color: #444; font-size: 30rpx; border-top: 1rpx solid #e2e2e2; } .confirm-order-modal .order-content .total em { color: #ff758c; } .confirm-order-modal .button-group { display: flex; width: 100%; border-top: 1rpx solid rgba(0, 0, 0, 0.1); position: absolute; left: 0; bottom: 0; padding-bottom: calc(env(safe-area-inset-bottom) - 30rpx); } .confirm-order-modal .button-group .btn-content { flex: 1; } .confirm-order-modal .button-group .btn { flex: 1; margin: 0; padding: 0; font-size: 30rpx; line-height: 88rpx; text-align: center; border-radius: 0; font-weight: bold; } .confirm-order-modal .button-group .left-btn { color: #666; background: #fff; } .confirm-order-modal .button-group .right-btn { color: #fff; background: linear-gradient(100deg, #ff758c 0%, #ff7eb3 100%); border-radius: 20px 0px 0px 20px; } .tab-nav { height: 70rpx; display: flex; border-bottom: 4rpx solid #008dd3; transition: all 0.3s linear; margin-bottom: 20rpx; } .tab-nav .tab-nav-item { color: #6c6c6c; font-size: 26rpx; font-weight: bold; position: relative; z-index: 1; width: 190rpx; height: 70rpx; display: flex; align-items: center; justify-content: center; flex: 1; max-width: 190rpx; } .tab-nav-one .tab-nav-item { flex: initial; width: 30%; } .tab-nav .tab-nav-item span { position: relative; } .tab-nav .tab-nav-item.active { background-color: #008dd3; color: #fff; z-index: 2; border-radius: 8px 8px 0 0; } .receiver.align-start { align-items: flex-start; } textarea.receive-name { border-radius: 4rpx; flex: 1; line-height: 1.6; box-sizing: border-box; font-weight: bold; background-color: #f7f7f7; position: relative; z-index: 1; padding: 10rpx; height: 124rpx; } picker.receive-name { border-radius: 4rpx; flex: 1; line-height: 52rpx; box-sizing: border-box; font-weight: bold; background-color: #f7f7f7; position: relative; z-index: 1; height: 52rpx; } .receive-name .picker { padding: 5rpx 10rpx; color: #999; } .receive-icon { width: 40rpx; height: 40rpx; position: absolute; right: 10rpx; bottom: 6rpx; z-index: 20; } .act-content { width: 710rpx; margin: 0 auto 20rpx; border-radius: 20rpx; background: #fff; box-shadow: 0 0 40rpx 0 rgba(0, 0, 0, 0.05); display: flex; flex-direction: column; overflow: hidden; } .cell { position: relative; display: flex; justify-content: space-between; align-items: center; border-bottom: 1rpx solid #efefef; line-height: 78rpx; font-size: 24rpx; color: #444; padding: 0 30rpx; } .icon-right { position: absolute; right: 10rpx; top: 50%; width: 12rpx; height: 22rpx; margin-top: -10rpx; } .cell-desc { margin-left: 8rpx; color: #666; font-size: 22rpx; } .confirm-coupon-modal { background: #f6f6f6; display: flex; flex-direction: column; align-items: center; position: relative; padding-bottom: 30rpx; } .confirm-coupon-modal .title { width: 100%; border-bottom: 1rpx solid #efefef; line-height: 2.5; font-size: 32rpx; text-align: center; background: #fff; } .confirm-coupon-modal .list { width: 100%; max-height: 700rpx; overflow-y: auto; padding: 0 20rpx; box-sizing: border-box; } .confirm-coupon-modal .item { display: flex; box-sizing: border-box; padding: 20rpx 10rpx 20rpx 20rpx; justify-content: space-between; align-items: center; margin: 20rpx 0; background: #fff; border-radius: 10rpx; box-shadow: 0 0 6rpx #ccc; } .tag-img { position: absolute; width: 48rpx; height: 48rpx; right: 10rpx; top: 15rpx; } .no-tag-img { width: 48rpx; height: 48rpx; } .use-wx-address { text-align: center; margin-top: 20rpx; margin-bottom: 20rpx; color: #4facfe; } /* 订单留言 */ .cart-footer { padding: 26rpx; } .order-message { position: relative; background-color: #f7f7f7; padding: 5rpx 10rpx; border-radius: 5rpx; z-index: 0; } .tuan-pos { height: 124rpx; line-height: 1.6; } .placeOrderBox { padding-bottom: 100rpx; } .oc-payment { position: relative; box-sizing: border-box; width: 100%; padding: 0 10px; background-color: #fff; } .oc-payment-item { position: relative; width: 100%; line-height: 70rpx; font-size: 0; display: flex; align-items: center; } .oc-payment-method { position: relative; display: inline-block; margin-left: 10rpx; font-size: 13px; color: #333; } .oc-payment-recommend { position: relative; display: inline-block; width: 30px; height: 17px; margin-left: 10px; line-height: 17px; text-align: center; font-size: 11px; color: #ff758c; border-radius: 2px; border: 1px solid #ff758c; } .oc-payment-selected:after { font-family: iconfont!important; font-size: 28rpx; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #ee2e3a; content: "\e650"; position: absolute; top: 0; right: 0; line-height: 70rpx; } .oc-payment-icon { font-size: 36rpx; } /* 新优惠券20190314 */ .coupon { background-color: #fefefe; position: relative; padding: 0 20rpx; border-radius: 6rpx; margin-top: 24rpx; box-shadow: 0 0 6rpx #ccc; } .coupon:before, .coupon:after { content: ''; position: absolute; width: 20rpx; height: 40rpx; background: #f6f6f6; top: 70rpx; z-index: 1; } .coupon:before { border-radius: 0 40rpx 40rpx 0; left: 0; } .coupon:after { border-radius: 40rpx 0 0 40rpx; right: 0; } .coupon .header { display: flex; padding: 15rpx 0; border-bottom: 2rpx dashed #dbdbdb; height: 140rpx; } .coupon .footer { color: #747474; font-size: 24rpx; padding: 22rpx 0 20rpx 35rpx; } .coupon .price { color: #333; width: 175rpx; text-align: center; border-right: 2rpx dashed #dbdbdb; } .coupon .price .reduce-price { color: #000; font-size: 38rpx; font-weight: bold; padding-top: 30rpx; } .coupon .price .reduce-price text { font-size: 24rpx; } .coupon .price .reduce-desc { font-size: 20rpx; margin-top: 10rpx; } .coupon .info { padding-left: 30rpx; flex: 1; } .coupon .info .reduce-title { color: #000; font-size: 28rpx; font-weight: bold; padding-top: 20rpx; } .coupon .info .reduce-type { color: #fff; font-weight: normal; font-size: 20rpx; background: #4facfe; padding: 2rpx 8rpx; border-radius: 4rpx; margin-left: 10rpx; } .coupon .status { width: 130rpx; text-align: center; } .coupon .status image { width: 48rpx; height: 48rpx; } .coupon.used, .coupon.expired { background: #fafafa; } .coupon.used .price, .coupon.expired .price { color: #949494; } .coupon.used .reduce-price, .coupon.expired .reduce-price, .coupon.used .reduce-title, .coupon.expired .reduce-title { color: #7a7a7a; } .coupon.used .reduce-type, .coupon.expired .reduce-type { background: #00f2fe; } .coupon.used .footer, .coupon.expired .footer { color: #b6b6b6; } .distance { color: #4facfe; } /*swtich样式-start*/ /*swtich整体大小*/ .wx-switch-input { width: 82rpx!important; height: 40rpx!important; margin: 0!important; padding: 0!important; } .wx-switch-input::before { width: 80rpx!important; height: 36rpx!important; } .wx-switch-input::after { width: 38rpx!important; height: 36rpx!important; } .cart-header-left { color: #008dd3; } /* 禁止访问 */ .forbid { position: relative; height: 100vh; color: #999; z-index: 9999; background: #fff; } .forbid .iconfont { font-size: 200rpx; } .forbid .h1 { font-size: 32rpx; margin-top: 30rpx; font-weight: bold; } .forbid .h2 { font-size: 28rpx; margin-top: 10rpx; } .mp-account { position: fixed; left: 20rpx; right: 20rpx; bottom: 97rpx; z-index: 100; border: 1rpx solid #ccc; border-radius: 8rpx; /* overflow: hidden; */ } .mp-account .iconfont { position: absolute; right: -10rpx; top: -15rpx; font-size: 35rpx; z-index: 10; } /* 送达时间 */ .alertTtitle { position: relative; line-height: 100rpx; } .alertClose { position: absolute; right: 30rpx; top: 0; font-size: 36rpx; } .alertTimebox { background-color: #fbf8fb; height: 660rpx; } .alertTimebox .left_box, .alertTimebox .right_box { height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; font-size: 28rpx; } .alertTimebox .left_box { color: #919191; width: 45%; } .alertTimebox .left_box view, .alertTimebox .right_box view { text-align: center; line-height: 90rpx; position: relative; } .alertTimebox .right_box view::before { content: ' '; width: 80%; position: absolute; left: 10%; bottom: 0; border: 1rpx dashed #f4f4f4; } .alertTimebox .right_box view:last-child::before { border: none; } .alertTimebox .right_box { color: #222222; width: 55%; flex: 1; background-color: #fff; text-align: center; } .alertTimebox .right_box .active { position: relative; color: #ff5344; } .alertTimebox .left_box .active { background-color: #fff; color: #222222; } .alertTimebox .right_box .active::after { content: ' '; position: absolute; top: 50%; margin-top: -16rpx; right: 50rpx; width: 10rpx; height: 20rpx; border-color: #ff5344; border-style: solid; border-width: 0 3rpx 5rpx 0; transform: rotate(45deg); } .alertTimebtn-item { line-height: 88rpx; color: #ffffff; text-align: center; font-size: 30rpx; } .localtownfare { color: #999; text-decoration: line-through; margin-right: 10rpx; } .picktime { font-size: 22rpx; } .presale-item { padding: 15rpx 50rpx; } .presale-item-circle { position: relative; padding-left: 25rpx; } .presale-item-circle::before { position: absolute; content: ""; width: 14rpx; height: 14rpx; border-radius: 50%; background: #cccccc; top: 50%; margin-top: -7rpx; left: 0; } .presale-item.red .presale-item-circle::before { background: #ff5344; } .presale-item .presale-item-circle::after { position: absolute; content: ""; border-right: 1rpx solid #cccccc; left: 7rpx; bottom: 50%; height: 40rpx; } .presale-item.red .presale-item-circle::after { position: absolute; content: ""; border-right: 1rpx solid #ff5344; left: 7rpx; top: 50%; height: 30rpx; }