page{ background-color: #F6F6F6; } .main{ // 头部样式 .head{ position: fixed; z-index: 100; 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 2px 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: 3px; margin-top: 1.5px; } .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: 30rpx; 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; } } } } // 购物车区域 .cart{ background: linear-gradient(180deg, #FCEEEF 0%, #f6f6f6 100%); background-repeat: no-repeat; .cart_item{ margin: 0rpx 20rpx 20rpx 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; 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_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: 410rpx; .cart_title{ font-size: 28rpx; color: #333333; font-weight: 500; min-height: 85rpx; } .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; margin-bottom: 20rpx; .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_scroll{ width: 620rpx; 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; } } } } } .user_title{ display: flex; align-items: center; justify-content: center; margin-top: 60rpx; .user_name{ color: #FF0000; font-size: 36rpx; font-weight: 500; margin: 0 10rpx 0 10rpx; vertical-align: middle; display: inline-block; } } .user_title::before{ content: ""; vertical-align: middle; display: inline-block; width: 30rpx; height: 30rpx; background-image: url('../../static/user/leftimg.png'); background-size: cover; margin-right: 10rpx; } .user_title::after{ vertical-align: middle; content: ""; display: inline-block; width: 30rpx; height: 30rpx; background-image: url('../../static/user/rightimg.png'); background-size: cover; margin-left: 10rpx; } // 商品区域样式 .shop_view{ margin-top: 10rpx; padding: 13rpx 20rpx 0rpx 20rpx; display: flex; justify-content: space-between; .shop_view_ul{ width: 346rpx; .shop_view_li{ background-color: #FFFFFF; border-radius: 20rpx; width: 100%; box-shadow: 0 4rpx 8rpx rgba(0,0,0,.05); margin-bottom: 20rpx; .shop_view_li_swiper{ width: 100%; height: 504rpx; .shop_view_li_swiper_item{ width: 100%; .shop_view_li_swiper_img_url{ width: 100%; height: 504rpx; display: block; border-radius: 20rpx; } } } .shop_view_img{ width: 100%; position: relative; height: 320rpx; .shop_view_tag{ width: 66rpx; height: 42rpx; position: absolute; z-index: 2; right: -15rpx; top: 20rpx; background: url(../../static/tag_img.png); background-repeat: no-repeat; background-size: 100% 100%; .shop_view_tag_text{ font-size: 20rpx; color: #FFFFFF; height: 30rpx; display: flex; align-items: center; justify-content: center; } } .shop_view_img_u{ width: 300rpx; position: absolute; z-index: 1; left: 20rpx; top: 20rpx; .shop_view_img_url{ width: 100%; height: 300rpx; display: block; } } } .shop_view_cont{ padding: 20rpx; .shop_view_cont_title{ font-size: 28rpx; font-weight: 500; color: #000000; min-height: 80rpx; } .shop_view_cont_desc{ color: #666666; font-size: 24rpx; } .shop_view_cont_tag{ display: flex; flex-wrap: wrap; .shop_view_cont_tag_text{ border-radius: 6rpx; border: 1rpx solid #FF6868; padding: 0rpx 10rpx; border-radius: 10rpx; color: #ff6868; font-size: 18rpx; margin-top: 10rpx; margin-right: 10rpx; } } } .shop_view_cont_bottom{ display: flex; align-items: center; justify-content: space-between; .shop_view_cont_price{ font-size: 32rpx; color: red; font-weight: 500; } .shop_view_cont_cart{ width: 65rpx; height: 65rpx; display: flex; align-items: center; justify-content: flex-end; .shop_view_cont_cart_img{ width: 40rpx; height: 40rpx; display: block; } } } } .shop_view_bcg{ background-color: inherit; } } } .footer{ position: fixed; z-index: 888; 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_text{ color: #333333; font-size: 28rpx; margin-left: 10rpx; } } } .footer_r{ margin-right: 20rpx; display: flex; align-items: center; .footer_v{ .footer_text{ font-size: 28rpx; color: #666666; display: inline-block; margin-right: 15rpx; } .footer_price{ font-size: 38rpx; 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: 30rpx; 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 39rpx 39rpx 39rpx; } } } .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{ margin-top: 10rpx; 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; margin-right: 20rpx; .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; } } } }