.card_select{ padding-top: 20rpx; font-size: 24rpx; display: flex; flex-direction: row; background-image: linear-gradient(rgba(241,77,84,.5),rgba(255,255,255,0)),url('http://img.bbztx.com/image_test/upload/thumbs/20210324/logo/1616578769742047965.png'); align-items: center; background-size: 100%; } .card_select .middleCard{ border-radius: 20rpx; color: #fff; flex: 1; margin:0 40rpx; } .card_select .middleCard .scroll{ width: auto; white-space: nowrap; } .card_select .leftIcon{ left: 0; } .card_select .rightIcon{ right: 0; transform: rotate(180deg); } .card_select .icon{ position: absolute; width: 40rpx; height: 100rpx; } .card_select .iconUrl{ background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAA3CAYAAADjcwGrAAACa0lEQVRYhZWYPWsUURSGn11DVFC0SEinhQhqa/zoRNDO2EWtVPzEr1/jGhU0xiixUSvTpNJCsRNEK0UrsVAkhRAQycqJd5fdeefce+Yp3zk8zM6euefeaf2Yu0sDdgBbC+WrIxL5jAKvgQm34j+LbYl8TgSERqeJ9JokymdgKSrdCxyUVJmxZxqVXpdE+Q08sDQiHQNOSqo8AZaj0nPARkmVTi8pSe36VUmVV8D7qHQK2C6pMlO9kxyRu/wOPI9KdwFHJVVuA3+jUrvLlqTD/AHuVUNPugk4LanyLP38kNSEWyRVOpI40lbwPX8HvJHUkR4C9kiq3JIkI70hifILWJDUkW4DjkuVMgusSOpILwGlabCaetNlUDqapCUWgS+5mkHpKWBcKhT3D6qTXpGrytq4kNSRTgbHhTV7V1JHGmkjGxcPJa2hncbFtF4SFnrjIiK9EBwXNyVxMOnl+ktD2Dv+QVKHdrB4Z+rjsLR2+aowHhzTfelS6r8SkXnVl3Yjb0nq40lJa+j16VzqwxKRfu5Ll3Pr4wDTqa+zDL77kT60fj4vqXOnpNZ6KRWK/WHrJHWklBbfhE2HY5JmpLZ9+SZVSnbaVqW2fbkjVcoRYLekjtS4n7YzOVq5Rb1OatuYp5IqZ9P2SKiTEmyvzcAZSTPSt2lbU6J2Z+hJCa5etj063ERqp42fkipyHMpJV9JCU2IqvRAhKb0TnKTDjFRHUkn6FXghqWLbpfVRKdXjjMPQqTAitXHzSVKlP24i0m6wvQ4A+6NSYz44btZWr6jUxs3jQJ19vRhr8mUi8gg2ABebfJj5CDwqnlxg3z/37mA2QhXBLgAAAABJRU5ErkJggg==') no-repeat center; background-size: 20rpx 60rpx; } .card{ border-radius: 20rpx; position: relative; box-shadow: 0 6rpx 15rpx rgba(51,51,51,.7); margin:0 20rpx; background:#ea464d url('http://img.bbztx.com/image_test/upload/thumbs/20210324/logo/1616573912900003653.png') no-repeat; background-size: 100% 100%; } .card .logo_title{ width: 70rpx; position: absolute; top: -35rpx; left: 0; } .card .right_level{ position: absolute; top: 0; right: 0; background: #ed9296; border-bottom-left-radius: 20rpx; border-top-right-radius: 20rpx; padding: 0 10rpx; } .card .right_level .level{ transform: scale(.7,.7); color: #ea464d; font-weight: 800; } .card .childInfo{ padding: 20rpx 40rpx; display: flex; flex-direction: row; } .card .childInfo .headImg{ width: 110rpx; height: 110rpx; margin: 0 20rpx 0 40rpx; } .card .childInfo .headImg image{ width: 100%; height: 100%; border-radius: 10rpx; } .card .childInfo .info{ display: flex; flex-direction: column; } .card .childInfo .info .left_info{ display: flex; flex-direction: row; align-items: flex-end; margin-bottom: 10rpx; } .card .childInfo .info .medal{ margin-bottom: 25rpx; } .card .childInfo .left_info .info_name{ font-size: 42rpx; font-weight: 700; font-style: oblique; margin-right: 30rpx; padding-right: 20rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .card .childInfo .left_info .days{ white-space: nowrap; } .card .childInfo .moreActive{ margin-top: 10rpx; } .card .childInfo .info_buttom{ display: flex; flex-direction: row; align-items: flex-end; } .card .childInfo .info_buttom .level{ margin-right: 20rpx; } .card .childInfo .info_buttom .btn{ background: #fff; border-radius: 30rpx; color: #ea464d; padding: 4rpx 10rpx; line-height: 1; box-shadow: 0 -5rpx 4rpx #ed9296 inset; }