challengeFamily/components/scroll-view/childsCard.wxss

.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;
}