wooo/ewoooc
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

優化核心資料表響應式排版
All checks were successful
CD Pipeline / deploy (push) Successful in 59s
Details

Browse Source
This commit is contained in:
OoO
2026-05-13 22:54:27 +08:00
parent d2709398bf
commit a2ada92a49
3 changed files with 190 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

134
web/static/css/ewoooc-v3-page-guard.css
View File

@@ -247,6 +247,47 @@
white-space: nowrap;
}
.momo-app:not(.momo-observability-mode) .dashboard-table,
.momo-app:not(.momo-observability-mode) .edm-page .campaign-table {
width: 100% !important;
min-width: 0 !important;
table-layout: fixed;
}
.momo-app:not(.momo-observability-mode) .dashboard-table th,
.momo-app:not(.momo-observability-mode) .dashboard-table td,
.momo-app:not(.momo-observability-mode) .edm-page .campaign-table th,
.momo-app:not(.momo-observability-mode) .edm-page .campaign-table td {
min-width: 0;
overflow-wrap: anywhere;
white-space: normal;
}
.momo-app:not(.momo-observability-mode) .dashboard-table-wrap,
.momo-app:not(.momo-observability-mode) .edm-page .campaign-table-wrap {
overflow-x: visible !important;
}
.momo-app:not(.momo-observability-mode) .dashboard-table th:nth-child(1),
.momo-app:not(.momo-observability-mode) .dashboard-table td:nth-child(1) {
width: 7rem;
}
.momo-app:not(.momo-observability-mode) .dashboard-table th:nth-child(2),
.momo-app:not(.momo-observability-mode) .dashboard-table td:nth-child(2) {
width: 24%;
}
.momo-app:not(.momo-observability-mode) .edm-page .campaign-table th:nth-child(1),
.momo-app:not(.momo-observability-mode) .edm-page .campaign-table td:nth-child(1) {
width: 7rem;
}
.momo-app:not(.momo-observability-mode) .edm-page .campaign-table th:nth-child(2),
.momo-app:not(.momo-observability-mode) .edm-page .campaign-table td:nth-child(2) {
width: 36%;
}
@media (max-width: 768px) {
.momo-app:not(.momo-observability-mode) {
--momo-page-title-size: 1.55rem;
@@ -326,4 +367,97 @@
text-align: center !important;
white-space: nowrap;
}
.momo-app:not(.momo-observability-mode) .dashboard-table-wrap::before,
.momo-app:not(.momo-observability-mode) .edm-page .campaign-table-wrap::before {
display: none !important;
}
.momo-app:not(.momo-observability-mode) .dashboard-table,
.momo-app:not(.momo-observability-mode) .dashboard-table tbody,
.momo-app:not(.momo-observability-mode) .dashboard-table tr,
.momo-app:not(.momo-observability-mode) .dashboard-table td,
.momo-app:not(.momo-observability-mode) .edm-page .campaign-table,
.momo-app:not(.momo-observability-mode) .edm-page .campaign-table tbody,
.momo-app:not(.momo-observability-mode) .edm-page .campaign-table tr,
.momo-app:not(.momo-observability-mode) .edm-page .campaign-table td {
display: block;
width: 100% !important;
}
.momo-app:not(.momo-observability-mode) .dashboard-table thead,
.momo-app:not(.momo-observability-mode) .edm-page .campaign-table thead {
display: none !important;
}
.momo-app:not(.momo-observability-mode) .dashboard-table tr,
.momo-app:not(.momo-observability-mode) .edm-page .campaign-table tr {
margin: 0;
padding: 0.85rem;
background: var(--momo-bg-surface);
border-top: 1px solid var(--momo-border-light);
}
.momo-app:not(.momo-observability-mode) .dashboard-table tr:first-child,
.momo-app:not(.momo-observability-mode) .edm-page .campaign-table tr:first-child {
border-top: 0;
}
.momo-app:not(.momo-observability-mode) .dashboard-table td,
.momo-app:not(.momo-observability-mode) .edm-page .campaign-table td {
display: grid;
grid-template-columns: 6.8rem minmax(0, 1fr);
gap: 0.75rem;
align-items: start;
padding: 0.45rem 0 !important;
border: 0 !important;
text-align: left !important;
}
.momo-app:not(.momo-observability-mode) .dashboard-table td::before,
.momo-app:not(.momo-observability-mode) .edm-page .campaign-table td::before {
color: var(--momo-text-tertiary);
font-family: var(--momo-font-mono);
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.momo-app:not(.momo-observability-mode) .dashboard-table td[colspan],
.momo-app:not(.momo-observability-mode) .edm-page .campaign-table td[colspan] {
grid-template-columns: 1fr;
}
.momo-app:not(.momo-observability-mode) .dashboard-table td[colspan]::before,
.momo-app:not(.momo-observability-mode) .edm-page .campaign-table td[colspan]::before {
content: none;
display: none;
}
.momo-app:not(.momo-observability-mode) .dashboard-table td:nth-child(1)::before { content: "分類"; }
.momo-app:not(.momo-observability-mode) .dashboard-table td:nth-child(2)::before { content: "商品"; }
.momo-app:not(.momo-observability-mode) .dashboard-table td:nth-child(3)::before { content: "MOMO"; }
.momo-app:not(.momo-observability-mode) .dashboard-table td:nth-child(4)::before { content: "PChome"; }
.momo-app:not(.momo-observability-mode) .dashboard-table td:nth-child(5)::before { content: "競價"; }
.momo-app:not(.momo-observability-mode) .dashboard-table:not(.is-ai-picks) td:nth-child(6)::before { content: "昨日"; }
.momo-app:not(.momo-observability-mode) .dashboard-table:not(.is-ai-picks) td:nth-child(7)::before { content: "週"; }
.momo-app:not(.momo-observability-mode) .dashboard-table:not(.is-ai-picks) td:nth-child(8)::before { content: "更新"; }
.momo-app:not(.momo-observability-mode) .dashboard-table:not(.is-ai-picks) td:nth-child(9)::before { content: "上架"; }
.momo-app:not(.momo-observability-mode) .dashboard-table.is-ai-picks td:nth-child(6)::before { content: "AI"; }
.momo-app:not(.momo-observability-mode) .dashboard-table.is-ai-picks td:nth-child(7)::before { content: "昨日"; }
.momo-app:not(.momo-observability-mode) .dashboard-table.is-ai-picks td:nth-child(8)::before { content: "週"; }
.momo-app:not(.momo-observability-mode) .dashboard-table.is-ai-picks td:nth-child(9)::before { content: "更新"; }
.momo-app:not(.momo-observability-mode) .dashboard-table.is-ai-picks td:nth-child(10)::before { content: "上架"; }
.momo-app:not(.momo-observability-mode) .edm-page .campaign-table td:nth-child(1)::before { content: "分類"; }
.momo-app:not(.momo-observability-mode) .edm-page .campaign-table td:nth-child(2)::before { content: "商品"; }
.momo-app:not(.momo-observability-mode) .edm-page .campaign-table td:nth-child(3)::before { content: "價格"; }
.momo-app:not(.momo-observability-mode) .edm-page .campaign-table td:nth-child(4)::before { content: "銷售"; }
.momo-app:not(.momo-observability-mode) .edm-page .campaign-table td:nth-child(5)::before { content: "追蹤"; }
.momo-app:not(.momo-observability-mode) .dashboard-table .dashboard-product-cell,
.momo-app:not(.momo-observability-mode) .edm-page .campaign-table .campaign-product-cell {
align-items: flex-start;
}
}

58
web/static/css/page-monthly-summary-bem.css
View File

@@ -413,18 +413,70 @@
.ms-data-table .table-responsive {
border: 1px solid var(--ms-card-border);
border-radius: var(--momo-radius-md);
overflow: visible;
-webkit-overflow-scrolling: touch;
}
.ms-data-table__table {
min-width: 760px;
width: 100% !important;
min-width: 0;
font-size: var(--momo-text-xs);
}
.ms-data-table__table thead th {
font-size: 10px;
.ms-data-table__table thead {
display: none;
}
.ms-data-table__table,
.ms-data-table__table tbody,
.ms-data-table__table tr,
.ms-data-table__table td {
display: block;
width: 100% !important;
}
.ms-data-table__table tr {
padding: var(--momo-space-3);
background: var(--momo-bg-surface);
border-top: 1px solid var(--ms-card-border);
}
.ms-data-table__table tr:first-child {
border-top: 0;
}
.ms-data-table__table td {
display: grid;
grid-template-columns: 6.6rem minmax(0, 1fr);
gap: var(--momo-space-2);
align-items: start;
padding: 0.42rem 0 !important;
border: 0 !important;
text-align: left !important;
white-space: normal;
overflow-wrap: anywhere;
}
.ms-data-table__table td::before {
color: var(--momo-text-tertiary);
content: "";
font-family: var(--momo-font-mono);
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.ms-data-table__table td:nth-child(1)::before { content: "年/月"; }
.ms-data-table__table td:nth-child(2)::before { content: "處別"; }
.ms-data-table__table td:nth-child(3)::before { content: "區"; }
.ms-data-table__table td:nth-child(4)::before { content: "PM"; }
.ms-data-table__table td:nth-child(5)::before { content: "品牌"; }
.ms-data-table__table td:nth-child(6)::before { content: "廠商"; }
.ms-data-table__table td:nth-child(7)::before { content: "交易"; }
.ms-data-table__table td:nth-child(8)::before { content: "銷售額"; }
.ms-data-table__table td:nth-child(9)::before { content: "YoY"; }
.dataTables_wrapper .row {
gap: var(--momo-space-2);
margin-right: 0;