page{ background-color: #f6f6f6; } .mian{ background: url('https://zhkj1.oss-cn-shanghai.aliyuncs.com/zhscMerchant/user_bcg.png'); background-repeat: no-repeat; /* 防止重复 */ background-size:100%; .head{ .head_user_message{ display: flex; align-items: center; justify-content: space-between; padding: 0 35rpx 0 35rpx; .head_user_message_l{ display: flex; align-items: center; .head_user_message_photo{ width: 119rpx; height: 112rpx; border-radius: 100rpx; background-color: #f6f6f6; overflow: hidden; .head_user_message_photo_img{ width: 112rpx; height: 112rpx; display: block; } } .head_user_message_text{ margin-left: 20rpx; .head_user_message_name{ color: #333333; font-size: 32rpx; } .head_user_message_desc{ color: #666666; font-size: 26rpx; display: flex; align-items: center; margin-top: 10rpx; .head_user_message_desc_img{ width: 33rpx; height: 33rpx; display: block; } } } } .head_user_message_set{ width: 45rpx; height: 45rpx; display: block; } } } .user_account{ margin: 50rpx 20rpx 0 20rpx; display: flex; align-items: center; justify-content: space-between; background-color: #FFFFFF; border-radius: 20rpx; padding: 40rpx; box-shadow: 0 4rpx 8rpx rgba(0,0,0,.05); position: relative; .user_account_li{ display: flex; align-items: center; .user_account_message{ width: 180rpx; .user_account_amount{ color: #E60703; font-size: 40rpx; text-align: center; font-weight: 500; } .user_account_name{ color: #000000; font-size: 28rpx; text-align: center; } } .user_account_img{ width: 80rpx; height: 80rpx; } } .user_account_border{ background-color: #D9D9D9; height: 76rpx; width: 1rpx; } .user_account_tag{ width: 100rpx; position: absolute; top: 15rpx; left: 120rpx; .user_account_tag_num{ width: 100%; height: 29rpx; background: linear-gradient( 90deg, #FF745F 0%, #FF485C 100%); border-radius: 15rpx 15rpx 15rpx 15rpx; font-size: 18rpx; color: #FFFFFF; display: flex; align-items: center; justify-content: center; } .user_account_tag_j{ width: 0; height: 0; border-left: 0rpx solid transparent; border-right: 20rpx solid transparent; border-top: 11rpx solid #FF745F; margin-left: 18px; margin-top: -1rpx; } } } .user_cont_list{ margin: 20rpx 20rpx 0 20rpx; display: flex; overflow: hidden; flex-wrap: wrap; background-color: #FFFFFF; border-radius: 20rpx; box-shadow: 0 4rpx 8rpx rgba(0,0,0,.05); .user_cont_li{ width: 20%; box-sizing: border-box; padding: 30rpx 0rpx 30rpx 0rpx; .user_cont_li_img{ margin: 0 auto; display: block; width: 58rpx; height: 58rpx; } .user_cont_li_name{ margin-top: 10rpx; font-size: 26rpx; color: #666666; text-align: center; } } .user_cont_li_left_boder{ box-shadow: -10rpx 0 10rpx -5rpx rgba(244, 244, 244, 0.8); /* 左边框阴影 */ } } .user_title{ display: flex; align-items: center; justify-content: center; margin-top: 80rpx; .user_img{ width: 28rpx; height: 28rpx; display: block; } .user_name{ color: #FF0000; font-size: 36rpx; font-weight: 500; margin: 0 10rpx 0 10rpx; } } // 商品区域样式 .shop_view{ margin-top: 48rpx; 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: 34rpx; 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; } } } .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: 24rpx; text-decoration: line-through; margin-left: 5rpx; font-weight: 400; } }