适配日记簿
This commit is contained in:
anian
@@ -1,213 +1,254 @@
|
||||
<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'] span:nth-child(1) {
|
||||
grid-area: 1 / 1 / 3 / 3;
|
||||
}
|
||||
|
||||
.img_list .list_inner[num='7'] span:nth-child(2) {
|
||||
grid-area: 1 / 3 / 3 / 5;
|
||||
}
|
||||
|
||||
.img_list .list_inner[num='7'] span:nth-child(3) {
|
||||
grid-area: 3 / 1 / 5 / 3;
|
||||
}
|
||||
|
||||
.img_list .list_inner[num='7'] span:nth-child(4) {
|
||||
grid-area: 3 / 3 / 4 / 4;
|
||||
}
|
||||
|
||||
.img_list .list_inner[num='7'] span:nth-child(5) {
|
||||
grid-area: 3 / 4 / 4 / 5;
|
||||
}
|
||||
|
||||
.img_list .list_inner[num='7'] span:nth-child(6) {
|
||||
grid-area: 4 / 3 / 5 / 4;
|
||||
}
|
||||
|
||||
.img_list .list_inner[num='7'] span:nth-child(7) {
|
||||
grid-area: 4 / 4 / 5 / 5;
|
||||
}
|
||||
|
||||
.img_list .list_inner[num='8'] span:nth-child(8) {
|
||||
grid-area: 3 / 2 / 4 / 4;
|
||||
}
|
||||
|
||||
.img_list .list_inner[num='8'] span:nth-child(8) img {
|
||||
aspect-ratio: 3;
|
||||
}
|
||||
|
||||
|
||||
.img_list span img {
|
||||
aspect-ratio: 1;
|
||||
display: block;
|
||||
border-radius: 5px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
<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>
|
||||
Reference in New Issue
Block a user