Colorful-childhood/pages/childMatch/childMatch.wxss

/* pages/childMatch/childMatch.wxss */
.child-container {
    height: 100%;
    padding: 0 26rpx;
    box-sizing: border-box;
    background:#eaeaea;
}

.search-child {
    width: 100%;
    height: 95rpx;
    background: #fff;
    border-radius: 95rpx;
    display: flex;
    align-items: center;
    padding-left: 10rpx;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.2), 0 3px 6px 0 rgba(0, 0, 0, .2);
}

.search-child image {
    width: 85rpx;
    height: 85rpx;
    margin-right: 20rpx;
}

.search-child input {
    padding-left: 20rpx;
    width:70%;
}

.no-find {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position:absolute;
    width:100%;
    top:30%;
    color: #6a6a6a;
    
}

.photo {
    display: flex;
    flex-wrap: wrap;
    margin-top: 22rpx;
}

.img {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 332rpx;
    border-radius: 20rpx; 
    margin-top: 30rpx;
}

.img image{
    width: 100%;
    height: 241rpx;
    border-radius: 20rpx;
}

.img .crown {
    position: absolute;
    top: -10rpx;
    right: -10rpx;
    width: 90rpx;
    height: 90rpx;
}

.img .ticket {
    position: absolute;
    bottom: 90rpx;
    right: 85rpx;
    width: 162rpx;
    height: 50rpx;  
    text-align: center;
    background: #fff;
    border-radius: 50rpx;
    line-height: 50rpx; 
    font-size: 32rpx;
    color: #fe5601;
    font-weight: 600; 
}

.child-name {
    width:332rpx;
    display: inline-block;
    text-align: center;
    overflow: hidden;
    margin-top: 26rpx;
    font-size: 40rpx;
    white-space: nowrap;  
    text-overflow:ellipsis;
}

.img:nth-child(even) {
    margin-left: 26rpx;
}