page{ background-color: #F6F6F6; } .main{ // 头部样式 .head{ position: fixed; z-index: 88; width: 100%; top: 0; left: 0; background:#FCEEEF; .head_location{ display: flex; align-items: center; height: 45px; position: relative; .location_title{ font-size: 28rpx; color: #FFFFFF; font-weight: 500; vertical-align: middle; display: inline-block; } } .head_location::before{ content: ""; vertical-align: middle; display: inline-block; width: 21px; height: 21px; background-image: url('../../static/location.png'); background-size: cover; margin: 0px 1px 0px 10px; } .head_location::after{ vertical-align: middle; display: inline-block; content: ""; width: 0; height: 0; border-left: 10rpx solid transparent; border-right: 10rpx solid transparent; border-top: 11rpx solid #FFFFFF; margin-left: 1.5px; margin-top: 0.8px; } .head_location_active{ .location_title{ color: #000000; } } .head_location_active::before{ background-image: url('../../static/location_active.png'); } .head_location_active::after{ border-top: 11rpx solid #000000; } .head_ul{ display: flex; align-items: center; justify-content: space-between; height: 40px; line-height: 40px; .head_l{ display: flex; align-items: center; .head_q{ color: #000000; font-weight: 500; font-size: 32rpx; height: 40px; padding-left: 10px; } .head_w{ color: #333333; font-size: 28rpx; padding-left: 15px; padding-right: 15px; } } .head_r{ display: flex; align-items: center; .head_li{ color: #333333; font-size: 28rpx; height: 40px; padding-left: 10px; padding-right: 10px; } .head_edit{ color: #E60703; } } } } // 购物车区域 .cont{ .head_fixed{ background-color: #f6f6f6; color: #999999; font-size: 26rpx; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 10px; } .cart{ background: linear-gradient(180deg, #FCEEEF 0%, #f6f6f6 100%); background-repeat: no-repeat; .cart_item{ // margin: 0rpx 20rpx 0rpx 20rpx; // border-radius: 25rpx; // background-color: #ffffff; // box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.05); display: flex; justify-content: space-between; align-items: center; padding: 20rpx 0rpx 20rpx 0rpx; .cart_selected{ width: 50rpx; display: flex; align-items: center; justify-content: center; padding-left: 20rpx; .cart_selected_false{ width: 35rpx; height: 35rpx; border-radius: 50%; border: 2rpx solid #bfbfbf; } .cart_selected_true{ width: 35rpx; height: 35rpx; border-radius: 50%; background-color: #FF0000; border: 2rpx solid #FF0000; display: flex; align-items: center; justify-content: center; } .cart_selected_true image{ width: 25rpx; height: 25rpx; display: block; } } .cart_shop{ width: 180rpx; height: 180rpx; position: relative; border-radius: 10rpx; // border: 1rpx solid #F3F3F3; overflow: hidden; .cart_shop_img{ width: 180rpx; height: 180rpx; position: absolute; top: 0; z-index: 1; } } .cart_shop_cont{ width: 390rpx; padding-right: 20rpx; .cart_title{ font-size: 27rpx; color: #333333; font-weight: 500; .cart_text{ min-height: 65rpx; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; word-break: break-all; } } .cart_desc{ font-size: 24rpx; color: #FF2D41; } } } .cart_items{ // margin: 0rpx 20rpx 20rpx 20rpx; border-radius: 25rpx; // background-color: #ffffff; // box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.05); padding: 20rpx 0rpx 20rpx 0rpx; .cart_t{ display: flex; justify-content: space-between; .cart_selected{ width: 50rpx; display: flex; align-items: center; justify-content: center; padding-left: 20rpx; .cart_selected_false{ width: 35rpx; height: 35rpx; border-radius: 50%; border: 2rpx solid #bfbfbf; } } .cart_view_scroll{ width: 620rpx; .cart_scroll{ width: 100%; display: flex; overflow: hidden; white-space: nowrap; .cart_scroll_ul{ .cart_scroll_li{ width: 180rpx; display: inline-block; margin-right: 20rpx; .cart_scroll_img{ background: #FFFFFF; border-radius: 10rpx; // border: 1rpx solid #F3F3F3; width: 180rpx; height: 180rpx; overflow: hidden; .cart_scroll_img_url{ width: 180rpx; height: 180rpx; 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; } } } } } } } .cart_lose{ margin: 0rpx 20rpx 20rpx 20rpx; border-radius: 25rpx; background-color: #fff; padding-bottom: 20rpx; box-shadow: 0 4rpx 8rpx rgba(0,0,0,.05); .cart_lose_top{ display: flex; justify-content: space-between; align-items: center; border-bottom: 1rpx solid #f6f6f6; .cart_lose_top_l{ color: #000000; font-size: 28rpx; padding:25rpx 20rpx 25rpx 20rpx; } .cart_lose_top_r{ color: #E60703; font-size: 28rpx; padding:25rpx 20rpx 25rpx 20rpx; } } .cart_lose_bottom{ display: flex; align-items: center; padding: 20rpx 20rpx 0rpx 20rpx; .cart_lose_img{ width: 180rpx; height: 180rpx; position: relative; border-radius: 4rpx; overflow: hidden; .cart_lose_bcg{ width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; position: absolute; z-index: 2; .cart_lose_text{ width: 130rpx; height: 40rpx; border-radius: 10rpx; background: rgba(0,0,0,0.6); font-size: 23rpx; color: #FFFFFF; display: flex; align-items: center; justify-content: center; } } .cart_lose_img_url{ width: 180rpx; height: 180rpx; display: block; position: absolute; top: 0; left: 0; z-index: 1; } } .cart_lose_ly{ margin-left: 20rpx; .cart_lose_title{ color: #333; font-size: 26rpx; font-weight: 500; } .cart_lose_desc{ color: #6CA1D2; font-size: 24rpx; } } } } } } .footer{ position: fixed; z-index: 88; left: 0; transform: translate3d(0,-100%,0); width: 100%; top: 100%; background: #FFFFFF; border-top: 1rpx solid #F6F6F6; border-bottom: 1rpx solid #F6F6F6; display: flex; align-items: center; justify-content: space-between; padding-top: 20rpx; padding-bottom: 20rpx; border-top-left-radius: 40rpx; border-top-right-radius: 40rpx; .footer_l{ display: flex; align-items: center; margin-left: 20rpx; .footer_selected{ display: flex; align-items: center; height: 80rpx; .footer_selected_false{ width: 35rpx; height: 35rpx; border-radius: 50%; border: 2rpx solid #bfbfbf; } .footer_selected_true{ width: 35rpx; height: 35rpx; border-radius: 50%; background-color: #FF0000; border: 2rpx solid #FF0000; display: flex; align-items: center; justify-content: center; } .footer_selected_true image{ width: 25rpx; height: 25rpx; display: block; } .footer_text{ color: #333333; font-size: 28rpx; margin-left: 10rpx; } } } .footer_r{ margin-right: 20rpx; display: flex; align-items: center; .footer_edit{ display: flex; .footer_edit_li{ width: 205rpx; height: 77rpx; background: linear-gradient( 90deg, #FD4955 0%, #FD343C 100%); border-radius: 39rpx; color: #FFFFFF; font-size: 28rpx; font-weight: 500; display: flex; align-items: center; justify-content: center; border:1px solid #FD4955; } .footer_edit_li_border{ background: #FFFFFF; border:1px solid #D9D9D9; color: #666666; margin-right: 20rpx; } } .footer_v{ .footer_text{ font-size: 28rpx; color: #666666; display: inline-block; margin-right: 15rpx; } .footer_price{ font-size: 40rpx; color: #FF0000; display: inline-block; font-weight: 500; } .footer_price::before { content: '¥'; font-size: 28rpx; margin-right: 5rpx; font-weight: 500; } } .footer_btn{ margin-left: 20rpx; font-size: 28rpx; font-weight: 500; color: #FFFFFF; display: flex; align-items: center; justify-content: center; width: 205rpx; height: 77rpx; background: linear-gradient( 90deg, #FD4955 0%, #FD343C 100%); border-radius: 39rpx; border:1px solid #FD4955; } } } .price::before { content: '¥'; font-size: 24rpx; margin-right: 5rpx; } .prices::before { content: '¥'; font-size: 20rpx; margin-right: 5rpx; margin-left: 5rpx; } .market_name{ color: #999999; font-size: 23rpx; text-decoration: line-through; margin-left: 5rpx; font-weight: 400; } .cart_bottom{ display: flex; align-items: center; justify-content: space-between; .cart_price{ font-size: 32rpx; color: #fe4301; font-weight: 500; } .cart_counter{ display: flex; align-items: center; .cart_counter_btn{ width: 55rpx; height: 50rpx; display: flex; align-items: center; justify-content: center; border-top: 1px solid #E9E9E9; border-bottom: 1px solid #E9E9E9; .cart_counter_btn_img{ width: 25rpx; height: 25rpx; display: block; } } .cart_counter_center{ width: 60rpx; height: 50rpx; font-size: 28rpx; color: #333333; display: flex; align-items: center; justify-content: center; border:1px solid #E9E9E9; } .border_l{ border-left: 1px solid #E9E9E9; border-top-left-radius: 50rpx; border-bottom-left-radius: 50rpx; } .border_r{ border-right: 1px solid #E9E9E9; border-top-right-radius: 50rpx; border-bottom-right-radius: 50rpx; } .cart_remove{ width: 130rpx; height: 50rpx; border: 1rpx solid #FD4955; background: linear-gradient( 90deg, #FD4955 0%, #FD343C 100%); border-radius: 39rpx; font-size: 22rpx; color: #FFFFFF; display: flex; align-items: center; justify-content: center; } } } .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_desc{ padding: 0 24rpx 24rpx 24rpx ; font-size: 26rpx; color: #333333; } // 优惠券 .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_item_r_r{ width: 112rpx; height: 46rpx; border-radius: 30rpx; border: 1px solid #FF0000; font-size: 26rpx; color: #FF0000; display: flex; align-items: center; justify-content: center; } } } } .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; } } .shop_open_bcg{ background-color: #F6F7FB; } } .opy{ opacity:0.3; }