/* 流量包面板:剩余包列表、可购卡片与不可用状态。 */ /* 导入方:app/components/instance/DcimManage.vue、app/components/instance/FlowPacketPanel.vue、app/components/instance/InstanceManage.vue、app/components/instance/InstanceNetwork.vue、app/components/instance/InstanceOverview.vue、app/components/instance/InstanceServiceInfo.vue、app/pages/servers/server.vue。 */ .block[data-v-ca0029df] { flex-direction: column; gap: 14px; min-width: 0; display: flex; } .block-title[data-v-ca0029df] { margin: 0; font-size: 1.125rem; font-weight: 600; } .block-desc[data-v-ca0029df] { color: var(--p-text-muted-color, #94a3b8); margin: 0; font-size: 1rem; line-height: 1.7; } .info-table[data-v-ca0029df] { border: 1px solid var(--console-panel-border); box-shadow: var(--console-panel-shadow); background: var(--console-panel-bg); border-radius: var(--radius-md); overflow: hidden; } .kv[data-v-ca0029df] { grid-template-columns: 16.6667% minmax(0, 1fr); align-items: center; min-height: 49px; font-size: 1rem; display: grid; } /* 允许连续长文本换行,防止IP、密钥或用户输入撑破当前容器;不会修改原始数据。 */ .kv[data-v-ca0029df] > * { overflow-wrap: anywhere; min-width: 0; padding: 14px; } .kv[data-v-ca0029df]:nth-child(2n) { background: var(--console-page-bg); } .kv + .kv[data-v-ca0029df] { border-top: 1px solid var(--console-panel-border); } .kv > span[data-v-ca0029df] { color: var(--p-text-muted-color, #64748b); font-weight: 600; } .kv > b[data-v-ca0029df] { font-weight: 500; } .action-cell[data-v-ca0029df] { flex-wrap: wrap; align-items: center; gap: 8px; display: flex; } .action-cell[data-v-ca0029df] .p-button { max-width: 100%; } .info-table .pk-empty[data-v-ca0029df] { text-align: left; margin: 0; padding: 0; font-size: 1rem; } /* 视口条件 (width<768px) 下的响应式覆盖;保留相对基础规则的层叠顺序。 */ @media (width<768px) { .kv[data-v-ca0029df] { grid-template-columns: 100px minmax(0, 1fr); } } .pk-list[data-v-ca0029df] { flex-direction: column; gap: 6px; display: flex; } .pk-row[data-v-ca0029df] { flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding: 6px 0; font-size: 1rem; display: flex; } .pk-row + .pk-row[data-v-ca0029df] { border-top: 1px solid var(--console-panel-border); } .pk-name[data-v-ca0029df] { flex: 160px; min-width: 0; } .pk-expire[data-v-ca0029df] { color: var(--p-text-muted-color, #64748b); font-size: 0.875rem; } .pk-grid[data-v-ca0029df] { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; display: grid; } .pk-card[data-v-ca0029df] { border: 1px solid var(--p-content-border-color, #e2e8f0); text-align: center; border-radius: var(--radius-lg); flex-direction: column; align-items: center; gap: 6px; padding: 14px 12px; display: flex; } .pk-card-disabled[data-v-ca0029df] { opacity: 0.55; } .pk-card-name[data-v-ca0029df] { color: var(--p-text-muted-color, #64748b); font-size: 0.9375rem; } .pk-card-cap[data-v-ca0029df] { font-size: 1.25rem; font-weight: 600; } .pk-card-price[data-v-ca0029df] { color: var(--p-primary-color, #10b981); font-size: 1rem; font-weight: 600; } .pk-card-tags[data-v-ca0029df] { flex-wrap: wrap; justify-content: center; gap: 4px; display: flex; } .pk-card-note[data-v-ca0029df] { font-size: 0.875rem; } .pk-card-note[data-v-ca0029df], .pk-empty[data-v-ca0029df] { color: var(--p-text-muted-color, #94a3b8); } .pk-empty[data-v-ca0029df] { text-align: center; padding: 20px 0; font-size: 0.9375rem; }