page{ background: #F6F6F6; } .main{ background: linear-gradient( 180deg, #FDEDEE 0%, #F6F6F6 35%); background-repeat: no-repeat; overflow: hidden; .cont{ margin: 20rpx 20rpx 0 20rpx; background-color: #FFFFFF; border-radius: 16rpx; padding:30rpx; .cont_title{ font-size: 32rpx; color: #333333; font-weight: 500; padding-top: 20rpx; padding-bottom: 20rpx; } .cont_ul{ display: flex; align-items: center; justify-content: space-between; .cont_l{ .cont_text{ font-size: 28rpx; font-weight: 500; color: #000000; .cont_default{ font-size: 20rpx; background-color:#FDEDEE; border-radius: 10rpx; color: #FF0000; margin-right: 10rpx; padding: 2rpx 10rpx 2rpx 10rpx; vertical-align: middle; } .cont_v{ vertical-align: middle; } } .cont_user{ font-size: 28rpx; color: #666666; margin-top: 10rpx; .cont_tel{ margin-left: 20rpx; } } } .cont_width{ width: 550rpx; } .cont_arr{ position: relative; margin-right: 20rpx; font-size: 28rpx; color: #FF0000; font-weight: 500; } .cont_arr::after{ content: ''; position: absolute; top: 50%; left: 100%; transform: translate3d(0, -50%, 0) rotate(45deg); width: 14rpx; height: 14rpx; border-top: 3rpx solid #666666; border-right: 3rpx solid #666666; } .cont_pay{ .cont_name{ color: #333333; font-size: 26rpx; display: flex; align-items: center; .cont_name_img{ width: 58rpx; height: 58rpx; margin-right: 12rpx; display: block; } } } .cont_radio{ background-color: #E60703; width: 45rpx; height: 45rpx; border-radius: 50rpx; display: flex; align-items: center; justify-content: center; margin-right: 15rpx; .cont_radioimg{ width: 25rpx; height: 25rpx; display: block; } } .cont_li{ display: flex; align-items: center; .cont_balance{ width: 58rpx; height: 58rpx; display: block; } .cont_balance_ul{ margin-left: 15rpx; .cont_tx{ font-size: 28rpx; color: #333333; display: flex; align-items: center; .cont_txx{ width: 24rpx; height: 24rpx; border-radius: 50rpx; border: 1rpx solid #D9D9D9; color: #D9D9D9; font-size: 20rpx; display: flex; align-items: center; justify-content: center; margin-left: 10rpx; } } .cont_desc{ font-size: 23rpx; color: #999999; } } } } .cont_textarea{ background: #F7F8FA; border-radius: 16rpx; padding: 20rpx; height: 110rpx; .cont_textarea_text{ width: 100%; font-size: 26rpx; height: 150rpx; } } .shop_view{ display: flex; align-items: center; justify-content: space-between; height: 138rpx; position: relative; z-index: 1; margin-bottom: 15rpx; .cart_scroll{ width: 530rpx; display: flex; overflow: hidden; white-space: nowrap; position: absolute; left: 0; top: 0; .cart_scroll_ul{ .cart_scroll_li{ width: 138rpx; display: inline-block; margin-right: 20rpx; .cart_scroll_img{ background: #FFFFFF; border-radius: 10rpx; width: 138rpx; height: 138rpx; overflow: hidden; border: 1rpx solid #F3F3F3; .cart_scroll_img_url{ width: 138rpx; height: 138rpx; display: block; } } .cart_scroll_title{ color: #333333; font-size: 26rpx; font-weight: 500; white-space: break-spaces; text-overflow: ellipsis; -webkit-box-orient: vertical; display: -webkit-box; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: break-word; margin-top: 20rpx; } .cart_scroll_price{ font-size: 32rpx; color: #FF0000; font-weight: 500; margin-top: 10rpx; } .cart_scroll_market_name{ color: #999999; font-size: 28rpx; text-decoration: line-through; font-weight: 400; } } } } .shop_numer{ width: 115rpx; position: absolute; right: 0; top: 0; z-index: 2; font-size: 28rpx; color: #666666; height: 142rpx; align-items: center; display: flex; justify-content: flex-end; margin-right: 20rpx; background: rgba(255, 255, 255, 0.5); backdrop-filter: blur(15rpx); } .shop_numer::after{ content: ''; position: absolute; top: 50%; left: 100%; transform: translate3d(0, -50%, 0) rotate(45deg); width: 14rpx; height: 14rpx; border-top: 3rpx solid #666666; border-right: 3rpx solid #666666; } } .cont_m{ display: flex; align-items: center; justify-content: space-between; padding-top: 15rpx; padding-bottom: 15rpx; .cont_m_l{ font-size: 28rpx; color: #333333; display: flex; align-items: center; .cont_m_x_img{ width: 58rpx; height: 58rpx; margin-right: 10rpx; display: block; } .cont_m_ps{ padding-left: 10rpx; padding-right: 10rpx; height: 30rpx; border-radius:9rpx; border: 1px solid #D9D9D9; font-size: 20rpx; color: #666666; margin-left: 10rpx; display: flex; align-items: center; } .cont_m_x_v{ border: 1px solid #FF0000; color: #FF0000; margin-left: 10rpx; } } .cont_m_r{ font-size: 28rpx; color: #333333; font-weight: 500; .couponprice::before{ content: '¥'; font-size: 20rpx; margin-right: 5rpx; margin-left: 5rpx; } } .cont_m_color{ color:#FF0000; } .price::before{ content: '¥'; font-size: 20rpx; margin-right: 5rpx; margin-left: 5rpx; } } .cont_bottom{ text-align: right; padding: 20rpx 0 0rpx 0; border-top: 1rpx solid #D9D9D9; margin-top: 20rpx; .cont_text{ font-size: 28rpx; color: #333333; } .cont_price{ font-size: 40rpx; color: #333333; font-weight: 500; } .cont_price::before{ content: '¥'; font-size: 28rpx; margin-right: 5rpx; margin-left: 5rpx; } } } .conttop{ padding-top: 0rpx; } .footer{ position: fixed; z-index: 88; left: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); width: 100%; top: 100%; background: #FFFFFF; padding-bottom: env(safe-area-inset-bottom); display: flex; justify-content: space-between; align-items: center; padding-top: 20rpx; border-top: 1rpx solid #f6f6f6; .footer_li{ margin-left: 30rpx; .footer_name{ font-size: 30rpx; color: #333333; } .footer_price{ font-size: 40rpx; color: #FF0000; font-weight: 500; } .footer_price::before{ content: '¥'; font-size: 28rpx; margin-right: 5rpx; margin-left: 10rpx; } .footer_coupon{ display: inline-block; color: #666666; font-size: 26rpx; margin-left: 10rpx; .footer_coupon_price::before{ content: '¥'; font-size: 20rpx; } } } .footer_btn{ margin-right: 30rpx; width: 205rpx; height: 77rpx; background: linear-gradient( 90deg, #FD4955 0%, #FD343C 100%); border-radius: 39rpx 39rpx 39rpx 39rpx; display: flex; align-items: center; justify-content: center; font-size: 28rpx; color: #FFFFFF; font-weight: 500; } } .shop_open{ width: 100%; background-color: #FFFFFF; color: #333333; border-top-left-radius: 20rpx; border-top-right-radius: 20rpx; .shop_open_title{ text-align: center; font-size: 32rpx; color: #333333; font-weight: 500; position: sticky; top: 0; height: 100rpx; line-height: 100rpx; .shop_open_close{ width: 100rpx; height: 100rpx; position: absolute; top: 0; right: 0; display: flex; align-items: center; justify-content: center; } .shop_open_close image{ width: 55rpx; height: 55rpx; } } // 订单商品 .shop_open_cont{ max-height: 800rpx; min-height: 600rpx ; overflow-x: auto; padding: 0 30rpx 0 30rpx; .shop_open_item{ display: flex; justify-content: space-between; align-items: center; margin-bottom: 30rpx; .shop_open_cont_l{ display: flex; align-items: center; .shop_border{ width: 138rpx; height: 138rpx; background: #FFFFFF; border-radius: 8rpx; border: 1rpx solid #F3F3F3; position: relative; .shop_img{ width: 138rpx; height: 138rpx; display: block; position: absolute; border-radius: 8rpx; left: 0; top: 0; } } .shop_script{ margin-left: 20rpx; width: 365rpx; .shop_title{ font-size: 28rpx; color: #333333; min-height: 45rpx; font-weight: 500; } .shop_title text{ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; word-break: break-all; } .shop_desc_price{ font-size: 24rpx; color: #999999; .shop_desc_f::before{ font-size: 20rpx; content: '¥'; margin: 0 5rpx 0 5rpx; } } .shop_desc_amount{ font-size: 24rpx; color: #999999; } } } .shop_open_cont_price{ font-size: 30rpx; color: #333333; font-weight: 500; } .shop_open_cont_price::before{ content: '¥'; font-size: 24rpx; margin-right: 5rpx; } } } // 优惠券 .coupon_cont{ min-height: 800rpx; max-height: 800rpx; overflow-x: auto; .coupon_item{ display: flex; justify-content: space-between; align-items: center; margin: 0 24rpx 24rpx 24rpx; .coupon_item_l{ width: 198rpx; height: 193rpx; background: #FFFFFF; border-radius: 20rpx; text-align: center; position: relative; .coupon_item_v{ position: absolute; width: 198rpx; height: 193rpx; top: 0; left: 0; .coupon_item_price{ color: #FF0000; font-size: 60rpx; font-weight: 500; text-align: center; margin-top: 35rpx; } .coupon_item_price::before{ content: '¥'; font-size: 34rpx; margin-right: 5rpx; } .coupon_item_desc{ color: #999999; font-size: 26rpx; } } .coupon_item_absolute{ position: absolute; top: 0; left: 0; width: 20rpx; height: 193rpx; background: #FF0000; border-top-left-radius: 20rpx; border-bottom-left-radius: 20rpx; } } .coupon_item_border{ width: 1px; height: 155rpx; border-left: 1px dashed #D9D9D9; background-color: #FFFFFF; } .coupon_item_r{ width: 438rpx; height: 193rpx; background: #FFFFFF; border-radius: 20rpx; display: flex; justify-content: space-between; align-items: center; padding: 0 25rpx 0 45rpx; .coupon_item_r_l{ width: 300rpx; .coupon_item_name{ font-size: 32rpx; color: #000000; font-weight: 500; } .coupon_item_time{ color: #FF6E6E; font-size: 26rpx; margin-top: 10rpx; } } .coupon_radio{ background-color: #E60703; width: 42rpx; height: 42rpx; border-radius: 50rpx; display: flex; align-items: center; justify-content: center; .cont_radioimg{ width: 25rpx; height: 25rpx; display: block; } } } } } .coupon_item_bottom{ position: fixed; z-index: 88; left: 0; transform: translate3d(0,-100%,0); width: 100%; top: 100%; background: #FFFFFF; padding-bottom: env(safe-area-inset-bottom); display: flex; justify-content: center; align-items: center; padding-top: 20rpx; color: #000000; font-size: 32rpx; border-top: 1rpx solid #F6F7FB; } // 送达时间 .tiem_cont{ max-height: 800rpx; min-height: 800rpx; display: flex; justify-content: space-between; .tiem_l{ background-color: #F6F7FB; width: 30%; max-height: 800rpx; min-height: 800rpx; overflow-x: auto; } .tiem_r{ width: 70%; max-height: 800rpx; min-height: 800rpx; overflow-x: auto; } } } .shop_open_bcg{ background-color: #F6F7FB; } }