/* 实例网络信息:键值项、操作列与网络空态。 */ /* 导入方:app/components/instance/InstanceNetwork.vue。 */ .nw[data-v-aa906366] { flex-direction: column; gap: 28px; min-width: 0; display: flex; } .nw[data-v-aa906366] .network-section { gap: 14px; min-width: 0; } .nw[data-v-aa906366] .network-head { flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 16px; min-width: 0; display: flex; } .nw[data-v-aa906366] .network-heading { align-items: center; gap: 8px; display: flex; } .nw[data-v-aa906366] .network-head h4 { margin: 0; font-size: 1.125rem; font-weight: 600; } .nw[data-v-aa906366] .network-count { color: var(--p-text-muted-color); font-size: 1rem; } .nw[data-v-aa906366] .network-actions { flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; min-width: 0; max-width: 100%; margin-left: auto; display: flex; } .nw[data-v-aa906366] .network-table { border: 1px solid var(--console-panel-border); background: var(--console-panel-bg); border-radius: 6px; overflow: hidden; } .nw[data-v-aa906366] .network-table.p-datatable .p-datatable-tbody > tr > td, .nw[data-v-aa906366] .network-table.p-datatable .p-datatable-thead > tr > th { padding: 12px 14px; } .nw[data-v-aa906366] .network-table .p-datatable-tbody > tr:last-child > td { border-bottom: 0; } .nw[data-v-aa906366] .network-table.p-datatable .p-datatable-tbody > .p-datatable-empty-message > td { text-align: center; color: var(--p-text-muted-color); padding: 24px 14px; } .nw[data-v-aa906366] .network-table .empty { padding: 0; } /* 视口条件 (width<=767px) 下的响应式覆盖;保留相对基础规则的层叠顺序。 */ @media (width<=767px) { .nw[data-v-aa906366] .network-head { align-items: flex-start; } .nw[data-v-aa906366] .network-actions { justify-content: flex-start; margin-left: 0; } .nw[data-v-aa906366] .network-head > .network-actions { flex-basis: 100%; } } .block[data-v-aa906366] { flex-direction: column; gap: 14px; min-width: 0; display: flex; } .block-title[data-v-aa906366] { margin: 0; font-size: 1.125rem; font-weight: 600; } .block-desc[data-v-aa906366] { color: var(--p-text-muted-color, #94a3b8); margin: 0; font-size: 1rem; line-height: 1.7; } .kv[data-v-aa906366] { justify-content: space-between; align-items: center; gap: 12px; font-size: 1rem; display: flex; } .kv > span[data-v-aa906366] { color: var(--p-text-muted-color, #64748b); } /* 允许连续长文本换行,防止IP、密钥或用户输入撑破当前容器;不会修改原始数据。 */ .kv > b[data-v-aa906366] { overflow-wrap: anywhere; min-width: 0; font-weight: 500; } .action-cell[data-v-aa906366] { flex-wrap: wrap; gap: 8px; min-width: 0; display: flex; } .action-cell > a[data-v-aa906366], .action-cell[data-v-aa906366] .p-button { max-width: 100%; } .empty[data-v-aa906366] { text-align: center; padding: 20px 0; } .empty[data-v-aa906366], .sub[data-v-aa906366] { color: var(--p-text-muted-color, #94a3b8); font-size: 1rem; } .info-table[data-v-aa906366] { border: 1px solid var(--console-panel-border); box-shadow: var(--console-panel-shadow); background: var(--console-panel-bg); border-radius: 6px; overflow: hidden; } .info-table .kv[data-v-aa906366] { grid-template-columns: 16.6667% minmax(0, 1fr); gap: 0; min-height: 49px; display: grid; } .info-table .kv[data-v-aa906366] > * { padding: 14px; } .info-table .kv[data-v-aa906366]:nth-child(2n) { background: var(--console-page-bg); } .info-table .kv + .kv[data-v-aa906366] { border-top: 1px solid var(--console-panel-border); } .info-table .kv > span[data-v-aa906366] { font-weight: 600; } /* 视口条件 (width<=767px) 下的响应式覆盖;保留相对基础规则的层叠顺序。 */ @media (width<=767px) { .info-table .kv[data-v-aa906366] { grid-template-columns: 100px minmax(0, 1fr); } }