halo-theme-pix/templates/modules/variables/moments-img-style.html

<style th:if="${theme.config.moments.img_style == 'one'}">

    .img_list .list_inner {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        align-content: center;
    }

    .img_list span {
        padding: 3px;
        position: relative;
        width: 25%;
        margin: 3px;
    }


    .img_list span:nth-child(1):nth-last-child(4),
    .img_list span:nth-child(3):nth-last-child(2),
    .img_list span:nth-child(4):nth-last-child(1) {
        width: 25%;
    }

    .img_list span:nth-child(2):nth-last-child(3) {
        margin-right: 30%;
    }

    .img_list span img {
        border-radius: 5px;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .img_list .list_inner span:before {
        content: "";
        display: block;
        padding-top: 100%;
    }

    @media only screen and (max-width:540px) {
        .img_list span {
            width: 30%;
            margin: 2px;
        }
        .img_list span:nth-child(1):nth-last-child(4),
        .img_list span:nth-child(3):nth-last-child(2),
        .img_list span:nth-child(4):nth-last-child(1) {
            width: 30%;
        }
    }


</style>
<style th:if="${theme.config.moments.img_style == 'two'}">
    .img_list span:nth-last-child(1):first-child {
        width: 85%;
    }

    .img_list .list_inner {
        display: grid;
        max-width: 25rem;
        flex-wrap: wrap;
        flex-direction: row;
        grid-template-columns: repeat(3, 1fr);
        align-content: center;
    }

    .img_list span {
        position: relative;
        margin: 3px;
    }

    .img_list .list_inner[num='1'] {
        grid-template-columns: repeat(1, 1fr);
    }

    .img_list .list_inner[num='1'] img {
        aspect-ratio: unset;
        max-height: 30rem;
        max-width: 25rem;
    }

    .img_list .list_inner[num='2'],
    .img_list .list_inner[num='4'] {
        grid-template-columns: repeat(2, 1fr);
    }

    .img_list .list_inner[num='3'],
    .img_list .list_inner[num='6'],
    .img_list .list_inner[num='8'] {
        grid-template-columns: repeat(3, 1fr);
    }

    .img_list .list_inner[num='5'] {
        grid-template-columns: repeat(6, 1fr);
    }

    .img_list .list_inner[num='7'] {
        grid-template-columns: repeat(4, 1fr);
    }

    .img_list .list_inner[num='3'] span:nth-child(1) {
        grid-area: 1 / 1 / 3 / 3;
    }

    .img_list .list_inner[num='3'] span:nth-child(2) {
        grid-area: 1 / 3 / 2 / 4;
    }

    .img_list .list_inner[num='3'] span:nth-child(3) {
        grid-area: 2 / 3 / 3 / 4;
    }

    .img_list .list_inner[num='5'] span:nth-child(1) {
        grid-area: 1 / 1 / 5 / 5;
    }

    .img_list .list_inner[num='5'] span:nth-child(2) {
        grid-area: 1 / 5 / 3 / 7;
    }

    .img_list .list_inner[num='5'] span:nth-child(3) {
        grid-area: 3 / 5 / 5 / 7;
    }

    .img_list .list_inner[num='5'] span:nth-child(4) {
        grid-area: 5 / 1 / 7 / 4;
    }

    .img_list .list_inner[num='5'] span:nth-child(5) {
        grid-area: 5 / 4 / 7 / 7;
    }

    .img_list .list_inner[num='5'] span:nth-child(4) img,.img_list .list_inner[num='5'] span:nth-child(5) img {
        height: 127.35px;
    }

    .img_list .list_inner[num='6'] span:nth-child(1) {
        grid-area: 1 / 1 / 3 / 3;
    }

    .img_list .list_inner[num='6'] span:nth-child(2) {
        grid-area: 1 / 3 / 2 / 4;
    }

    .img_list .list_inner[num='6'] span:nth-child(3) {
        grid-area: 2 / 3 / 3 / 4;
    }

    .img_list .list_inner[num='6'] span:nth-child(4) {
        grid-area: 3 / 1 / 4 / 2;
    }

    .img_list .list_inner[num='6'] span:nth-child(5) {
        grid-area: 3 / 2 / 4 / 3;
    }

    .img_list .list_inner[num='6'] span:nth-child(6) {
        grid-area: 3 / 3 / 4 / 4;
    }

.img_list .list_inner[num='7'] {
    display: grid;
    /* 采用 6 列网格，支持 50% (span 3) 和 33.3% (span 2) 两种尺寸 */
    grid-template-columns: repeat(6, 1fr);
    
    /* 间距修正 */
    gap: 6px;
    padding: 3px;
    
    /* 清除干扰 */
    justify-content: unset;
    align-content: unset;
    align-items: unset;
}

.img_list .list_inner[num='7'] span {
    /* 清除干扰，保持稳定性 */
    margin: 0 !important; 
    padding: 0 !important;
    width: auto;
    height: auto;
    
    /* 默认尺寸：中等 (33.3% 宽度, span 2/6) */
    grid-column: span 2; 
}

/* 第一行 (Item 1, 2)：大尺寸 (50% 宽度, span 3/6) */
.img_list .list_inner[num='7'] span:nth-child(1),
.img_list .list_inner[num='7'] span:nth-child(2) {
    grid-column: span 3;
}

/* 第三行 (Item 6, 7)：大尺寸 (50% 宽度, span 3/6) */
.img_list .list_inner[num='7'] span:nth-child(6),
.img_list .list_inner[num='7'] span:nth-child(7) {
    grid-column: span 3;
}

/* 容器设置：保持 6 列网格，用于计算 1/3 和 1/2 宽度 */
.img_list .list_inner[num='8'] {
    display: grid;
    grid-template-columns: repeat(6, 1fr); /* 6 列 */
    
    max-height: 100vw;
    
    gap: 6px;
    padding: 3px;
    
    justify-content: unset;
    align-content: unset;
    align-items: unset;
}

/* 默认规则：应用到所有子项，用于第 1 行和第 3 行 (1/3 宽度) */
.img_list .list_inner[num='8'] span {
    margin: 0 !important;
    padding: 0 !important;
    width: auto;
    height: auto;
    
    /* 跨 2 列 = 1/3 宽度 (6列/2=3张/行) */
    grid-column: span 2; 
}

/* 特殊规则：仅应用于第 2 行的 2 张图片 (1/2 宽度) */
.img_list .list_inner[num='8'] span:nth-child(4),
.img_list .list_inner[num='8'] span:nth-child(5) {
    /* 跨 3 列 = 1/2 宽度 (6列/3=2张/行) */
    grid-column: span 3;
}

/* 确保第 1 行和第 3 行的宽度不被其他 CSS 规则干扰 */
.img_list .list_inner[num='8'] span:nth-child(-n+3), /* 第 1, 2, 3 个 */
.img_list .list_inner[num='8'] span:nth-child(n+6) { /* 第 6, 7, 8 个 */
    grid-column: span 2;
}


    .img_list span img {
        aspect-ratio: 1;
        display: block;
        border-radius: 5px;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
</style>