/* 独立服务器产品配置:基础规格、可选资源、协议与镜像费用提示。 */ /* 导入方:app/components/config/MfDcimConfig.vue、app/pages/products/[id].vue、app/pages/products/dedicated-server/customize.vue。 */ .storage-grid[data-v-b5ff32bb] { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 16px; display: grid; } .disk-quantity[data-v-b5ff32bb] { flex-direction: column; gap: 12px; min-width: 0; display: flex; } .disk-quantity > label[data-v-b5ff32bb] { color: var(--p-text-muted-color); font-size: 0.9375rem; } .disk-quantity[data-v-b5ff32bb] .p-inputnumber { width: 100%; min-width: 0; } .disk-quantity[data-v-b5ff32bb] .p-inputnumber-input { flex: 1; width: 0; min-width: 0; } /* 视口条件 (width<640px) 下的响应式覆盖;保留相对基础规则的层叠顺序。 */ @media (width<640px) { .storage-grid[data-v-b5ff32bb] { grid-template-columns: 1fr; } } .dcim-base[data-v-b5ff32bb] { border: 1px solid var(--p-content-border-color); background: var(--p-content-background); border-radius: var(--radius-md); margin-bottom: 21px; padding: 21px; box-shadow: 0 1px 3px #0000001a; } .dcim-base h3[data-v-b5ff32bb] { margin: 0 0 21px; font-size: 1.125rem; font-weight: 600; } .base-specs[data-v-b5ff32bb] { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 21px; display: grid; } .base-specs > div[data-v-b5ff32bb] { align-items: center; gap: 14px; min-width: 0; display: flex; } .base-specs i[data-v-b5ff32bb] { color: var(--p-primary-color); flex-shrink: 0; } .base-specs span[data-v-b5ff32bb] { color: var(--p-text-muted-color); min-width: 0; font-size: 0.875rem; } /* 允许连续长文本换行,防止IP、密钥或用户输入撑破当前容器;不会修改原始数据。 */ .base-specs strong[data-v-b5ff32bb] { color: var(--p-text-color); overflow-wrap: anywhere; font-size: 1rem; font-weight: 500; display: block; } /* 允许连续长文本换行,防止IP、密钥或用户输入撑破当前容器;不会修改原始数据。 */ .base-specs small[data-v-b5ff32bb] { overflow-wrap: anywhere; font-size: 0.8125rem; display: block; } .network-slider[data-v-b5ff32bb] { max-width: 465px; margin: 14px 7px 0; } .optional-group h3[data-v-b5ff32bb] { margin: 21px 0 12px; font-size: 1rem; font-weight: 400; } .optional-row[data-v-b5ff32bb] { justify-content: space-between; align-items: center; gap: 21px; margin: 10px 0; display: flex; } .optional-row[data-v-b5ff32bb] .p-inputnumber { flex-shrink: 0; width: 150px; } .optional-row label[data-v-b5ff32bb] { overflow-wrap: anywhere; } .agreement[data-v-b5ff32bb] { align-items: flex-start; gap: 8px; line-height: 1.5; display: flex; } .agreement a[data-v-b5ff32bb] { color: var(--p-primary-color); text-decoration: none; } .image-charge[data-v-b5ff32bb], .stock-hint[data-v-b5ff32bb] { color: var(--p-text-muted-color); font-size: 0.875rem; } .config-change[data-v-b5ff32bb] { border-top: 1px solid var(--p-content-border-color); margin-top: 21px; } .config-change summary[data-v-b5ff32bb] { color: var(--p-primary-color); cursor: pointer; justify-content: space-between; align-items: center; gap: 14px; padding-top: 14px; font-size: 0.875rem; list-style: none; display: flex; } .config-change summary[data-v-b5ff32bb]::-webkit-details-marker { display: none; } .config-change summary > i[data-v-b5ff32bb] { font-size: 0.875rem; } .config-change[open] summary > i[data-v-b5ff32bb] { transform: rotate(180deg); } .config-change summary[data-v-b5ff32bb]:focus-visible { outline: 2px solid var(--p-primary-color); outline-offset: 4px; } .config-change-fields[data-v-b5ff32bb] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 21px; padding-top: 21px; display: grid; } .config-change-fields .form-row[data-v-b5ff32bb] { margin-bottom: 0; } /* 视口条件 (width<768px) 下的响应式覆盖;保留相对基础规则的层叠顺序。 */ @media (width<768px) { .config-change-fields[data-v-b5ff32bb] { grid-template-columns: 1fr; gap: 14px; } .base-specs[data-v-b5ff32bb] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 21px 14px; } .dcim-base[data-v-b5ff32bb] { padding: 14px; } .base-specs > div[data-v-b5ff32bb] { gap: 10px; } .base-specs strong[data-v-b5ff32bb] { font-size: 0.875rem; } .optional-row[data-v-b5ff32bb] { gap: 14px; } .optional-row[data-v-b5ff32bb] .p-inputnumber { width: 125px; } }