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

    /* 10 张：完整矩形（6 列，3+2+2+3） */
    .img_list .list_inner[num='10'] {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 6px;
        padding: 3px;

        justify-content: unset;
        align-content: unset;
        align-items: unset;
    }

    .img_list .list_inner[num='10'] span {
        margin: 0 !important;
        padding: 0 !important;
        width: auto;
        height: auto;
        grid-column: span 2;
    }

    .img_list .list_inner[num='10'] span:nth-child(4),
    .img_list .list_inner[num='10'] span:nth-child(5),
    .img_list .list_inner[num='10'] span:nth-child(6),
    .img_list .list_inner[num='10'] span:nth-child(7) {
        grid-column: span 3;
    }

    /* 11 张：完整矩形（6 列，2+3+3+3） */
    .img_list .list_inner[num='11'] {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 6px;
        padding: 3px;

        justify-content: unset;
        align-content: unset;
        align-items: unset;
    }

    .img_list .list_inner[num='11'] span {
        margin: 0 !important;
        padding: 0 !important;
        width: auto;
        height: auto;
        grid-column: span 2;
    }

    .img_list .list_inner[num='11'] span:nth-child(1),
    .img_list .list_inner[num='11'] span:nth-child(2) {
        grid-column: span 3;
    }

    /* 13 张：完整矩形（6 列，3+2+3+2+3） */
    .img_list .list_inner[num='13'] {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 6px;
        padding: 3px;

        justify-content: unset;
        align-content: unset;
        align-items: unset;
    }

    .img_list .list_inner[num='13'] span {
        margin: 0 !important;
        padding: 0 !important;
        width: auto;
        height: auto;
        grid-column: span 2;
    }

    .img_list .list_inner[num='13'] span:nth-child(4),
    .img_list .list_inner[num='13'] span:nth-child(5),
    .img_list .list_inner[num='13'] span:nth-child(9),
    .img_list .list_inner[num='13'] span:nth-child(10) {
        grid-column: span 3;
    }

    /* 14 张：完整矩形（6 列，3+3+2+3+3） */
    .img_list .list_inner[num='14'] {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 6px;
        padding: 3px;

        justify-content: unset;
        align-content: unset;
        align-items: unset;
    }

    .img_list .list_inner[num='14'] span {
        margin: 0 !important;
        padding: 0 !important;
        width: auto;
        height: auto;
        grid-column: span 2;
    }

    .img_list .list_inner[num='14'] span:nth-child(7),
    .img_list .list_inner[num='14'] span:nth-child(8) {
        grid-column: span 3;
    }

    /* 16 张：完整矩形（6 列，3+2+3+3+2+3） */
    .img_list .list_inner[num='16'] {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 6px;
        padding: 3px;

        justify-content: unset;
        align-content: unset;
        align-items: unset;
    }

    .img_list .list_inner[num='16'] span {
        margin: 0 !important;
        padding: 0 !important;
        width: auto;
        height: auto;
        grid-column: span 2;
    }

    .img_list .list_inner[num='16'] span:nth-child(4),
    .img_list .list_inner[num='16'] span:nth-child(5),
    .img_list .list_inner[num='16'] span:nth-child(12),
    .img_list .list_inner[num='16'] span:nth-child(13) {
        grid-column: span 3;
    }

    /* 17 张：完整矩形（6 列，2+3+2+3+2+3+2） */
    .img_list .list_inner[num='17'] {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 6px;
        padding: 3px;

        justify-content: unset;
        align-content: unset;
        align-items: unset;
    }

    .img_list .list_inner[num='17'] span {
        margin: 0 !important;
        padding: 0 !important;
        width: auto;
        height: auto;
        grid-column: span 2;
    }

    .img_list .list_inner[num='17'] span:nth-child(1),
    .img_list .list_inner[num='17'] span:nth-child(2),
    .img_list .list_inner[num='17'] span:nth-child(6),
    .img_list .list_inner[num='17'] span:nth-child(7),
    .img_list .list_inner[num='17'] span:nth-child(11),
    .img_list .list_inner[num='17'] span:nth-child(12),
    .img_list .list_inner[num='17'] span:nth-child(16),
    .img_list .list_inner[num='17'] span:nth-child(17) {
        grid-column: span 3;
    }

    /* 19 张：完整矩形（6 列，3+3+2+3+3+2+3） */
    .img_list .list_inner[num='19'] {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 6px;
        padding: 3px;

        justify-content: unset;
        align-content: unset;
        align-items: unset;
    }

    .img_list .list_inner[num='19'] span {
        margin: 0 !important;
        padding: 0 !important;
        width: auto;
        height: auto;
        grid-column: span 2;
    }

    .img_list .list_inner[num='19'] span:nth-child(7),
    .img_list .list_inner[num='19'] span:nth-child(8),
    .img_list .list_inner[num='19'] span:nth-child(15),
    .img_list .list_inner[num='19'] span:nth-child(16) {
        grid-column: span 3;
    }

    /* 20 张：完整矩形（6 列，3+2+3+2+3+2+3+2） */
    .img_list .list_inner[num='20'] {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 6px;
        padding: 3px;

        justify-content: unset;
        align-content: unset;
        align-items: unset;
    }

    .img_list .list_inner[num='20'] span {
        margin: 0 !important;
        padding: 0 !important;
        width: auto;
        height: auto;
        grid-column: span 2;
    }

    .img_list .list_inner[num='20'] span:nth-child(4),
    .img_list .list_inner[num='20'] span:nth-child(5),
    .img_list .list_inner[num='20'] span:nth-child(9),
    .img_list .list_inner[num='20'] span:nth-child(10),
    .img_list .list_inner[num='20'] span:nth-child(14),
    .img_list .list_inner[num='20'] span:nth-child(15),
    .img_list .list_inner[num='20'] span:nth-child(19),
    .img_list .list_inner[num='20'] span:nth-child(20) {
        grid-column: span 3;
    }

    /* 22 张：完整矩形（6 列，3+3+2+3+3+2+3+3） */
    .img_list .list_inner[num='22'] {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 6px;
        padding: 3px;

        justify-content: unset;
        align-content: unset;
        align-items: unset;
    }

    .img_list .list_inner[num='22'] span {
        margin: 0 !important;
        padding: 0 !important;
        width: auto;
        height: auto;
        grid-column: span 2;
    }

    .img_list .list_inner[num='22'] span:nth-child(7),
    .img_list .list_inner[num='22'] span:nth-child(8),
    .img_list .list_inner[num='22'] span:nth-child(15),
    .img_list .list_inner[num='22'] span:nth-child(16) {
        grid-column: span 3;
    }

    /* 23 张：完整矩形（6 列，3+2+3+2+3+2+3+2+3） */
    .img_list .list_inner[num='23'] {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 6px;
        padding: 3px;

        justify-content: unset;
        align-content: unset;
        align-items: unset;
    }

    .img_list .list_inner[num='23'] span {
        margin: 0 !important;
        padding: 0 !important;
        width: auto;
        height: auto;
        grid-column: span 2;
    }

    .img_list .list_inner[num='23'] span:nth-child(4),
    .img_list .list_inner[num='23'] span:nth-child(5),
    .img_list .list_inner[num='23'] span:nth-child(9),
    .img_list .list_inner[num='23'] span:nth-child(10),
    .img_list .list_inner[num='23'] span:nth-child(14),
    .img_list .list_inner[num='23'] span:nth-child(15),
    .img_list .list_inner[num='23'] span:nth-child(19),
    .img_list .list_inner[num='23'] span:nth-child(20) {
        grid-column: span 3;
    }


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