*,
|
*::before,
|
*::after {
|
box-sizing: border-box;
|
}
|
|
html,
|
body {
|
height: 100%;
|
margin: 0;
|
font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
|
Arial, sans-serif;
|
color: #e8eaed;
|
background: #0f1115;
|
}
|
|
a {
|
color: #8ab4ff;
|
text-decoration: none;
|
}
|
a:hover {
|
text-decoration: underline;
|
}
|
|
.muted {
|
color: #9aa0a6;
|
font-size: 0.9rem;
|
}
|
|
.error {
|
color: #f28b82;
|
margin: 0.25rem 0 0;
|
}
|
|
.btn {
|
border: 1px solid #3c4043;
|
background: #202124;
|
color: #e8eaed;
|
padding: 0.45rem 0.9rem;
|
border-radius: 6px;
|
cursor: pointer;
|
font-size: 0.95rem;
|
}
|
.btn.primary {
|
background: #1a73e8;
|
border-color: #1a73e8;
|
}
|
.btn.primary:hover {
|
background: #1967d2;
|
}
|
.btn.ghost {
|
background: transparent;
|
}
|
.btn.ghost:hover {
|
background: #303134;
|
}
|
|
.page-login {
|
display: grid;
|
place-items: center;
|
padding: 1rem;
|
}
|
|
.card {
|
width: min(400px, 100%);
|
background: #202124;
|
border: 1px solid #3c4043;
|
border-radius: 12px;
|
padding: 1.5rem 1.75rem 2rem;
|
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
|
}
|
|
.card h1 {
|
margin: 0 0 0.35rem;
|
font-size: 1.35rem;
|
}
|
|
.form {
|
display: flex;
|
flex-direction: column;
|
gap: 0.85rem;
|
margin-top: 1rem;
|
}
|
|
.form label span {
|
display: block;
|
font-size: 0.85rem;
|
margin-bottom: 0.25rem;
|
color: #bdc1c6;
|
}
|
|
.form input {
|
width: 100%;
|
padding: 0.55rem 0.65rem;
|
border-radius: 6px;
|
border: 1px solid #3c4043;
|
background: #17181b;
|
color: #e8eaed;
|
}
|
|
.shell {
|
display: flex;
|
flex-direction: column;
|
height: 100%;
|
overflow: hidden;
|
}
|
|
.topbar,
|
.viewbar {
|
display: flex;
|
align-items: center;
|
gap: 0.75rem;
|
padding: 0.55rem 1rem;
|
border-bottom: 1px solid #3c4043;
|
background: #17181b;
|
flex: 0 0 auto;
|
}
|
|
.brand {
|
font-weight: 600;
|
letter-spacing: 0.02em;
|
}
|
|
.brand-nav {
|
display: flex;
|
align-items: center;
|
gap: 0.35rem;
|
flex-wrap: wrap;
|
}
|
|
.brand-nav a {
|
color: inherit;
|
text-decoration: none;
|
}
|
.brand-nav a:hover {
|
text-decoration: underline;
|
color: #8ab4ff;
|
}
|
|
.brand-sep {
|
color: #5f6368;
|
font-weight: 400;
|
}
|
|
.brand-current {
|
color: #bdc1c6;
|
font-weight: 500;
|
}
|
|
.sr-only {
|
position: absolute;
|
width: 1px;
|
height: 1px;
|
padding: 0;
|
margin: -1px;
|
overflow: hidden;
|
clip: rect(0, 0, 0, 0);
|
white-space: nowrap;
|
border: 0;
|
}
|
|
.userbar {
|
margin-left: auto;
|
display: flex;
|
align-items: center;
|
gap: 0.45rem;
|
}
|
|
.userbar-edit {
|
color: #8ab4ff;
|
font-size: 0.92rem;
|
text-decoration: none;
|
white-space: nowrap;
|
}
|
.userbar-edit:hover {
|
text-decoration: underline;
|
}
|
|
.userbar-sep,
|
.userbar-back {
|
color: #5f6368;
|
font-size: 0.9rem;
|
}
|
|
.userbar-back {
|
text-decoration: none;
|
color: #8ab4ff;
|
white-space: nowrap;
|
}
|
.userbar-back:hover {
|
text-decoration: underline;
|
}
|
|
.username {
|
color: #bdc1c6;
|
font-size: 0.95rem;
|
}
|
|
.home-body {
|
flex: 1;
|
min-height: 0;
|
display: flex;
|
flex-direction: column;
|
padding: 0.75rem 1rem 1rem;
|
gap: 0.75rem;
|
overflow: hidden;
|
}
|
|
.panel {
|
background: #17181b;
|
border: 1px solid #2a2d31;
|
border-radius: 10px;
|
padding: 0.65rem 0.85rem;
|
}
|
|
.panel h2 {
|
margin: 0 0 0.45rem;
|
font-size: 0.95rem;
|
color: #bdc1c6;
|
font-weight: 600;
|
}
|
|
.recent-panel {
|
flex: 0 0 auto;
|
}
|
|
.recent-list {
|
align-items: start;
|
}
|
|
.recent-empty {
|
grid-column: 1 / -1;
|
}
|
|
.catalog-panel {
|
flex: 1;
|
min-height: 0;
|
display: flex;
|
flex-direction: column;
|
overflow: hidden;
|
}
|
|
.catalog {
|
flex: 1;
|
min-height: 0;
|
overflow: hidden;
|
display: flex;
|
flex-direction: column;
|
gap: 0.55rem;
|
}
|
|
/* 首页等：顶栏固定，下方主区域可滚动，避免多分类时底部被截断无滚动条 */
|
body.page-home .home-body {
|
overflow-y: auto;
|
overflow-x: hidden;
|
-webkit-overflow-scrolling: touch;
|
}
|
|
body.page-home .catalog-panel {
|
flex: 0 0 auto;
|
min-height: 0;
|
overflow: visible;
|
}
|
|
body.page-home .catalog {
|
flex: 0 0 auto;
|
min-height: 0;
|
overflow: visible;
|
}
|
|
.cat-block {
|
/*border: 1px solid #2a2d31;
|
border-radius: 8px;
|
padding: 0.45rem 0.55rem;*/
|
background: #141517;
|
}
|
|
.cat-title {
|
font-size: 0.8rem;
|
color: #9aa0a6;
|
margin-bottom: 0.35rem;
|
}
|
|
.scenario-row {
|
display: flex;
|
flex-direction: column;
|
gap: 0.5rem;
|
align-content: flex-start;
|
}
|
|
.scenario-chip {
|
border: 1px solid #3c4043;
|
border-radius: 8px;
|
padding: 0.4rem 0.5rem;
|
background: #1b1c1f;
|
width: 100%;
|
min-width: 0;
|
}
|
|
.scenario-name {
|
font-size: 0.82rem;
|
font-weight: 600;
|
margin-bottom: 0.3rem;
|
}
|
|
/* 每行最多 10 个，多出的自动换行 */
|
.page-link-grid {
|
display: grid;
|
grid-template-columns: repeat(10, minmax(0, 1fr));
|
gap: 0.5rem 0.4rem;
|
}
|
|
.page-link {
|
font-size: 0.78rem;
|
padding: 0.35rem 0.3rem;
|
border-radius: 8px;
|
border: 1px solid #30343a;
|
background: #202124;
|
min-width: 0;
|
}
|
|
.page-tile {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
text-align: center;
|
gap: 0.35rem;
|
text-decoration: none;
|
}
|
.page-tile:hover {
|
text-decoration: none;
|
border-color: #5f6368;
|
background: #252629;
|
}
|
|
.page-thumb {
|
display: block;
|
width: 100%;
|
aspect-ratio: 16 / 9;
|
object-fit: cover;
|
border-radius: 6px;
|
background: #2a2d31;
|
}
|
|
.page-thumb--placeholder {
|
min-height: 3.5rem;
|
}
|
|
.page-link-text {
|
display: block;
|
line-height: 1.25;
|
word-break: break-word;
|
}
|
|
.page-view {
|
margin: 0;
|
height: 100%;
|
overflow: hidden;
|
}
|
|
.embed {
|
flex: 1;
|
border: 0;
|
width: 100%;
|
min-height: 0;
|
background: #000;
|
}
|
|
/* 场景页：仅全屏 iframe，无顶栏 */
|
.embed-full {
|
display: block;
|
position: fixed;
|
inset: 0;
|
width: 100vw;
|
height: 100vh;
|
flex: none;
|
min-height: 100vh;
|
}
|
|
.page-view--empty {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
min-height: 100vh;
|
background: #0f1115;
|
}
|
|
.view-empty-hint {
|
color: #9aa0a6;
|
font-size: 0.95rem;
|
max-width: 24rem;
|
text-align: center;
|
margin: 0 1rem;
|
}
|
|
/* /view（默认）：多 iframe 同屏叠放，无可见 tab 条，仅 is-active 可见 */
|
.view-tabs-stack {
|
position: fixed;
|
inset: 0;
|
width: 100vw;
|
height: 100vh;
|
margin: 0;
|
padding: 0;
|
overflow: hidden;
|
}
|
|
.view-tab-iframe {
|
position: absolute;
|
inset: 0;
|
width: 100%;
|
height: 100%;
|
border: 0;
|
background: #000;
|
z-index: 0;
|
}
|
|
.view-tab-iframe.is-active {
|
z-index: 1;
|
visibility: visible;
|
}
|
|
.view-tab-iframe:not(.is-active) {
|
visibility: hidden;
|
pointer-events: none;
|
}
|
|
/* 仓库计划日历 */
|
.page-warehouse-cal .cal-body {
|
overflow: auto;
|
}
|
|
.cal-panel {
|
flex: 1;
|
min-height: 0;
|
display: flex;
|
flex-direction: column;
|
overflow: hidden;
|
}
|
|
.cal-column {
|
width: 100%;
|
max-width: min(100%, 640px);
|
margin: 0 auto;
|
display: flex;
|
flex-direction: column;
|
align-items: stretch;
|
min-height: 0;
|
}
|
|
.cal-nav-row {
|
display: flex;
|
flex-direction: row;
|
align-items: center;
|
width: 100%;
|
margin-bottom: 0.45rem;
|
gap: 0.35rem;
|
}
|
|
.cal-nav-btn {
|
display: inline-flex;
|
align-items: center;
|
justify-content: center;
|
min-width: 2rem;
|
height: 2rem;
|
padding: 0 0.45rem;
|
border-radius: 6px;
|
border: 1px solid #3c4043;
|
background: #202124;
|
color: #e8eaed;
|
font-size: 1rem;
|
line-height: 1;
|
text-decoration: none;
|
}
|
.cal-nav-btn:hover {
|
background: #303134;
|
border-color: #5f6368;
|
text-decoration: none;
|
}
|
|
.cal-title {
|
flex: 1;
|
margin: 0;
|
font-size: 0.95rem;
|
color: #e8eaed;
|
font-weight: 600;
|
text-align: center;
|
min-width: 0;
|
}
|
|
.cal-table-wrap {
|
width: 100%;
|
min-width: 0;
|
overflow: auto;
|
border: 1px solid #2a2d31;
|
border-radius: 8px;
|
}
|
|
.cal-table {
|
width: 100%;
|
border-collapse: collapse;
|
table-layout: fixed;
|
font-size: 0.68rem;
|
}
|
|
.cal-table thead th {
|
position: sticky;
|
top: 0;
|
z-index: 1;
|
background: #1b1c1f;
|
color: #9aa0a6;
|
font-weight: 600;
|
text-align: center;
|
padding: 0.28rem 0.12rem;
|
border-bottom: 1px solid #2a2d31;
|
}
|
|
.cal-cell {
|
vertical-align: top;
|
border: 1px solid #2a2d31;
|
padding: 0.2rem 0.22rem;
|
min-height: 2.6rem;
|
background: #141517;
|
}
|
|
.cal-cell--empty {
|
background: #0f1115;
|
min-height: 1.2rem;
|
}
|
|
.cal-cell--today {
|
box-shadow: inset 0 0 0 1px #1a73e8;
|
background: #161a22;
|
}
|
|
.cal-daynum {
|
font-weight: 700;
|
color: #bdc1c6;
|
margin-bottom: 0.12rem;
|
font-size: 0.72rem;
|
}
|
|
.cal-plans {
|
margin: 0;
|
padding: 0;
|
list-style: none;
|
display: flex;
|
flex-direction: column;
|
gap: 0.18rem;
|
}
|
|
.cal-plan {
|
display: block;
|
padding: 0.2rem 0.25rem;
|
border-radius: 3px;
|
background: #202124;
|
border: 1px solid #30343a;
|
min-width: 0;
|
overflow: hidden;
|
}
|
|
.cal-plan-fields {
|
display: flex;
|
flex-direction: column;
|
gap: 0.15rem;
|
min-width: 0;
|
line-height: 1.2;
|
font-size: 0.62rem;
|
}
|
|
.cal-plan-line--strong {
|
color: #e8eaed;
|
word-break: break-word;
|
}
|
|
.cal-plan-to {
|
color: #9aa0a6;
|
font-weight: 500;
|
}
|
|
.cal-plan-sep {
|
opacity: 0.55;
|
user-select: none;
|
}
|
|
.cal-plan-meta {
|
display: block;
|
font-size: 0.58rem;
|
color: #bdc1c6;
|
word-break: break-word;
|
}
|
|
.cal-plan-lbl {
|
display: inline-block;
|
min-width: 0.6rem;
|
margin-right: 0.2rem;
|
color: #9aa0a6;
|
font-weight: 600;
|
opacity: 0.85;
|
}
|
|
.cal-plan--active {
|
border-color: #1a73e8;
|
background: rgba(26, 115, 232, 0.12);
|
}
|
|
.cal-plan--over {
|
border-color: #1e8e3e;
|
background: rgba(30, 142, 62, 0.14);
|
}
|
|
.cal-error {
|
margin: 0 0 0.5rem;
|
padding: 0.45rem 0.55rem;
|
border-radius: 6px;
|
border: 1px solid #f28b82;
|
background: rgba(242, 139, 130, 0.12);
|
color: #f28b82;
|
font-size: 0.85rem;
|
}
|
|
.cal-hint {
|
margin: 0.5rem 0 0;
|
font-size: 0.75rem;
|
width: 100%;
|
}
|
|
.cal-hint code {
|
font-size: 0.85em;
|
color: #bdc1c6;
|
}
|
|
/* 场景与页面配置 */
|
.page-scenario-cfg .cfg-body {
|
overflow: auto;
|
}
|
|
.cfg-intro {
|
margin: 0 0 0.65rem;
|
font-size: 0.84rem;
|
line-height: 1.45;
|
max-width: 56rem;
|
}
|
|
.cfg-catalog {
|
display: flex;
|
flex-direction: column;
|
gap: 0.75rem;
|
}
|
|
.cfg-cat-name {
|
margin: 0 0 0.5rem;
|
font-size: 1rem;
|
color: #bdc1c6;
|
}
|
|
.cfg-scenario {
|
margin-bottom: 1rem;
|
}
|
|
.cfg-scenario:last-child {
|
margin-bottom: 0;
|
}
|
|
.cfg-scenario-name {
|
margin: 0 0 0.35rem;
|
font-size: 0.9rem;
|
font-weight: 600;
|
color: #e8eaed;
|
}
|
|
.cfg-scenario-id {
|
font-weight: 400;
|
font-size: 0.8rem;
|
}
|
|
.cfg-scenario-thumb-wrap {
|
margin: 0.35rem 0 0.6rem;
|
max-width: min(100%, 360px);
|
}
|
|
.cfg-scenario-thumb {
|
display: block;
|
width: 100%;
|
max-width: 360px;
|
height: auto;
|
aspect-ratio: 16 / 9;
|
object-fit: cover;
|
border-radius: 8px;
|
border: 1px solid #2a2d31;
|
background: #1b1c1f;
|
}
|
|
.cfg-table-wrap {
|
overflow: auto;
|
border: 1px solid #2a2d31;
|
border-radius: 8px;
|
}
|
|
.cfg-table {
|
width: 100%;
|
border-collapse: collapse;
|
font-size: 0.78rem;
|
}
|
|
.cfg-table th,
|
.cfg-table td {
|
border: 1px solid #2a2d31;
|
padding: 0.35rem 0.45rem;
|
text-align: left;
|
vertical-align: middle;
|
}
|
|
.cfg-table thead th {
|
background: #1b1c1f;
|
color: #9aa0a6;
|
font-weight: 600;
|
}
|
|
.cfg-table tbody tr:nth-child(even) {
|
background: #141517;
|
}
|
|
.cfg-cell--url code,
|
.cfg-cell--id code {
|
word-break: break-all;
|
font-size: 0.76rem;
|
}
|
|
.cfg-staytime-input {
|
width: 6.5rem;
|
padding: 0.3rem 0.4rem;
|
border-radius: 4px;
|
border: 1px solid #3c4043;
|
background: #17181b;
|
color: #e8eaed;
|
font-size: 0.82rem;
|
}
|
|
.cfg-cell--act {
|
white-space: nowrap;
|
}
|
|
.cfg-save-btn {
|
padding: 0.3rem 0.55rem;
|
font-size: 0.78rem;
|
}
|
|
.cfg-save-msg {
|
margin-left: 0.45rem;
|
font-size: 0.76rem;
|
}
|
|
.cfg-save-msg--ok {
|
color: #81c995;
|
}
|
|
.cfg-save-msg--err {
|
color: #f28b82;
|
}
|
|
/* 我的场景设置（user 场景） */
|
.page-user-scenarios .cfg-body {
|
overflow: auto;
|
}
|
|
.user-scn-grid {
|
display: grid;
|
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
|
gap: 0.6rem;
|
}
|
|
.user-scn-card {
|
border: 1px solid #3c4043;
|
border-radius: 10px;
|
background: #1b1c1f;
|
padding: 0.5rem;
|
display: flex;
|
flex-direction: column;
|
gap: 0.35rem;
|
min-width: 0;
|
}
|
|
.user-scn-thumb {
|
width: 100%;
|
aspect-ratio: 16 / 9;
|
object-fit: cover;
|
border-radius: 8px;
|
background: #2a2d31;
|
border: 1px solid #2a2d31;
|
}
|
|
.user-scn-name {
|
font-size: 0.9rem;
|
font-weight: 600;
|
color: #e8eaed;
|
word-break: break-word;
|
}
|
|
.user-scn-actions {
|
display: flex;
|
justify-content: flex-end;
|
}
|
|
.user-scn-form {
|
display: flex;
|
flex-direction: column;
|
gap: 0.65rem;
|
}
|
|
.user-scn-field span {
|
display: block;
|
font-size: 0.85rem;
|
margin-bottom: 0.25rem;
|
color: #bdc1c6;
|
}
|
|
.user-scn-field input[type="text"] {
|
width: min(420px, 100%);
|
padding: 0.55rem 0.65rem;
|
border-radius: 6px;
|
border: 1px solid #3c4043;
|
background: #17181b;
|
color: #e8eaed;
|
}
|
|
.user-scn-tip {
|
margin: 0;
|
font-size: 0.84rem;
|
}
|
|
.user-scn-table-wrap {
|
overflow: auto;
|
border: 1px solid #2a2d31;
|
border-radius: 8px;
|
}
|
|
.user-scn-table {
|
width: 100%;
|
border-collapse: collapse;
|
font-size: 0.78rem;
|
}
|
|
.user-scn-table th,
|
.user-scn-table td {
|
border: 1px solid #2a2d31;
|
padding: 0.35rem 0.45rem;
|
text-align: left;
|
vertical-align: middle;
|
}
|
|
.user-scn-table thead th {
|
background: #1b1c1f;
|
color: #9aa0a6;
|
font-weight: 600;
|
}
|
|
.user-scn-table input[type="number"] {
|
width: 6.5rem;
|
padding: 0.3rem 0.4rem;
|
border-radius: 4px;
|
border: 1px solid #3c4043;
|
background: #17181b;
|
color: #e8eaed;
|
font-size: 0.82rem;
|
}
|
|
.user-scn-submit-row {
|
display: flex;
|
align-items: center;
|
gap: 0.6rem;
|
}
|
|
.user-scn-msg {
|
font-size: 0.85rem;
|
}
|
.user-scn-msg--ok {
|
color: #81c995;
|
}
|
.user-scn-msg--err {
|
color: #f28b82;
|
}
|
