朋友圈支持图片显示；手机端新增全局公告提示；更新部分页面；优化部分效果
This commit is contained in:
anian
@@ -1,5 +1,4 @@
|
||||
<style th:if="${theme.config.moments.img_style == 'one'}">
|
||||
|
||||
.img_list .list_inner {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
@@ -48,14 +47,13 @@
|
||||
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 {
|
||||
@@ -137,7 +135,8 @@
|
||||
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 {
|
||||
.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;
|
||||
}
|
||||
|
||||
@@ -165,82 +164,363 @@
|
||||
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'] {
|
||||
display: grid;
|
||||
/* 采用 6 列网格，支持 50% (span 3) 和 33.3% (span 2) 两种尺寸 */
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
|
||||
.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;
|
||||
}
|
||||
/* 间距修正 */
|
||||
gap: 6px;
|
||||
padding: 3px;
|
||||
|
||||
/* 第一行 (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;
|
||||
}
|
||||
/* 清除干扰 */
|
||||
justify-content: unset;
|
||||
align-content: unset;
|
||||
align-items: unset;
|
||||
}
|
||||
|
||||
/* 第三行 (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;
|
||||
}
|
||||
.img_list .list_inner[num='7'] span {
|
||||
/* 清除干扰，保持稳定性 */
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
width: auto;
|
||||
height: auto;
|
||||
|
||||
/* 容器设置：保持 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;
|
||||
}
|
||||
/* 默认尺寸：中等 (33.3% 宽度, span 2/6) */
|
||||
grid-column: span 2;
|
||||
}
|
||||
|
||||
/* 默认规则：应用到所有子项，用于第 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;
|
||||
}
|
||||
/* 第一行 (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;
|
||||
}
|
||||
|
||||
/* 特殊规则：仅应用于第 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;
|
||||
}
|
||||
/* 第三行 (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;
|
||||
}
|
||||
|
||||
/* 确保第 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;
|
||||
}
|
||||
/* 容器设置：保持 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 {
|
||||
|
||||
Reference in New Issue
Block a user