page { background: #fff; } .push { } .thing_title { height: 120rpx; font-size: 30rpx; } .thing_introduce { width: 100%; height: 250rpx !important; font-size: 30rpx; } .action_title { margin: 30rpx 0px 19rpx 20rpx; color: rgba(69,90,100,.6); font-size: 27rpx; } .type { margin-bottom: 67rpx; } .type, .category { display: flex; } .type .type_item, .category .category_item { margin-right: 15rpx; color: #151515; text-align: center; width: 160rpx; height: 65rpx; font-size: 28rpx; line-height: 65rpx; border-radius: 20px; background: #e8e8e8; } .category {} .category .category_item{} .active { background: #ffd23c !important; } .push_wrap { position: fixed; width: 100%; left: 0; bottom: 0; height: 200rpx; } .push_action { width: 120rpx; height: 120rpx; border-radius: 100%; background: #ffd23c; display: flex; align-items: center; justify-content: center; position: relative; border: 1px solid #fbcb2d; box-shadow: 3px 3px 21px #ffd23c; } .push_wrap .tips { position: absolute; right: -150rpx; top: -63rpx; width: 225rpx; background: #ffd23c; padding: 10rpx 19rpx; border-radius: 8px; transform: rotate(14deg) scale(1,1); font-size: 26rpx; animation: shak 2s ease-in-out infinite reverse; } @keyframes shak { 0% { transform: rotate(14deg) scale(1,1); } 50% { transform: rotate(30deg) scale(1.2,1.2); } 100% { transform: rotate(14deg) scale(1,1); } }