page{ background-color: #151517; } .mian{ .banner{ width: 100%; height: 455rpx; display:block; } .class_content{ background-color: #393333; border-top-left-radius: 30rpx; border-top-right-radius: 30rpx; .class_scroll{ white-space: nowrap; height: 90rpx; position: relative; background-color: #393333; border-top-left-radius: 30rpx; border-top-right-radius: 30rpx; position: sticky; top: 0; z-index: 999; .class_scroll_ul{ width: 100%; overflow: hidden; height: 90rpx; .class_item{ padding: 0rpx 20rpx; height: 60rpx; display: inline-block; line-height: 60rpx; font-size: 26rpx; color: #FFFFFF; margin-top: 15rpx; } .class_item_active{ background-color: #725D48; border-radius: 50rpx; padding: 0rpx 45rpx; margin-right: 20rpx; color: #FEF6D8; font-weight: 500; margin-left: 20rpx; } } } .content{ background-color: #725D48; min-height: 100vh; overflow: hidden; padding-bottom: 20rpx; border-top-left-radius: 30rpx; border-top-right-radius: 30rpx; .content_item{ margin: 20rpx 20rpx 0rpx 20rpx; height: 430rpx; background: linear-gradient( 180deg, #FEF2E2 0%, #FFFFFF 20%, #FFFFFF 50%, #FFFFFF 90%, #FDF2E0 100%); border-radius: 16rpx 16rpx 16rpx 16rpx; padding-bottom: 20rpx; .content_head{ display: flex; align-items: center; justify-content: space-between; padding: 20rpx; .content_head_l{ display: flex; align-items: center; .content_head_img{ width: 32rpx; height: 32rpx; display: block; margin-right: 10rpx; -webkit-animation: 3s scaleDr ease-in-out infinite; animation: 3s scaleDr ease-in-out infinite; } .content_head_title{ font-size: 28rpx; color: #333333; font-weight: 500; } } .content_head_btn{ width: 119rpx; height: 42rpx; .content_head_btnimg{ width: 119rpx; height: 42rpx; display: block; } } } .content_shop{ width: 100%; display: flex; overflow: hidden; white-space: nowrap; .content_shop_ul{ .content_shop_item{ width: 200rpx; display: inline-block; margin-left: 20rpx; .content_shop_item_img{ background: #FFFFFF; border-radius: 10rpx; width: 200rpx; height: 200rpx; overflow: hidden; position: relative; .content_shop_item_tag{ width: 50rpx; height: 50rpx; position: absolute; top: 0; left: 0; } .content_shop_item_tagImg{ width: 50rpx; height: 50rpx; position: absolute; top: 0; left: 0; background: url(../../static/sidedish/no4.png); background-repeat: no-repeat; background-size: 100% 100%; text-align: center; line-height: 44rpx; font-size: 20rpx; color: #FFFFFF; } .content_shop_item_imgUrl{ width: 200rpx; height: 200rpx; display: block; position: absolute; top: 0; left: 0; } } .content_shop_item_title{ font-size: 24rpx; color: #000000; min-height: 45rpx; 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: 10rpx; } .content_shop_item_bottom{ display: flex; align-items: center; justify-content: space-between; margin-top: 10rpx; .content_shop_item_l{ .content_shop_item_price{ font-size: 28rpx; color: #FF0000; font-weight: 500; line-height: 35rpx; } .content_shop_market{ font-size: 23rpx; color: #999999; text-decoration: line-through; } } .content_shop_item_cart{ width: 65rpx; height: 65rpx; display: flex; align-items: flex-end; justify-content: flex-end; .content_shop_item_cart_img{ width: 50rpx; height: 50rpx; display: block; } } } .price::before { content: '¥'; font-size: 24rpx; margin-right: 5rpx; font-weight: 500; } .prices::before { content: '¥'; font-size: 20rpx; margin-right: 5rpx; margin-left: 5rpx; } } } } } } } @keyframes scaleDr{ 0% { transform: scale(0.98); } 25% { transform: scale(1.05); } 50% { transform: scale(1); } 75% { transform: scale(1.05); } } // 结束 }