.container {
    display: flex;
    flex-direction: column;
    background: #FFFFFF;
    border-radius: 20Px;
    height: 100%;
}

.tools {
    padding: 32Px 32px 20px 32px;
    display: flex;
    align-items: center;
    flex-shrink: 0;

    :global {
        .n-input {
            margin-left: auto;
            width: 361Px;
        }
    }
}

.content {
    flex: 1;
    overflow-y: auto;
    padding: 20Px 36Px 36Px 36Px;
}

.item {
    position: relative;
    width: 214Px;
    cursor: pointer;
    transition: all .3s;

    .cover {
        position: relative;
        overflow: hidden;

        &::before {
            content: '';
            position: absolute;
            top: 107Px;
            left: 0;
            width: 214Px;
            height: 214Px;
            background: #DDF2FF;
            border-radius: 50%;
        }
    }

    &:hover {
        transform: scale(1.1);
    }

    .itemImg {
        position: relative;
        width: 158Px;
        height: 223Px;
        margin: auto;
        background-color: antiquewhite;
        box-shadow: 0 0 10px 4px rgba(27, 35, 55, .1);

        :global {
            .n-image {
                width: 100%;
                height: 100%;
            }
        }
        img {
            transition: opacity .3s;
            opacity: 0;
        }

        img[data-loaded="true"] {
            opacity: 1;
        }
    }

    .itemName{
        margin-top: 16Px;
        font-size: 16Px;
        font-weight: 500;
        color: #333;
        text-align: center;
    }
}