/* 独立服务器目录:筛选面板、硬件规格、线路选择与购买入口。 */ /* 导入方:app/pages/products/dedicated-server/customize.vue、app/pages/products/dedicated-server/index.vue。 */ .dedicated-catalog[data-v-e16eb167] { width: 100%; max-width: 1280px; margin: 0 auto; padding-bottom: 28px; } .catalog-head[data-v-e16eb167] { justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 35px; display: flex; } .catalog-head h1[data-v-e16eb167] { margin: 0; font-size: 1.375rem; font-weight: 400; } .catalog-head a[data-v-e16eb167] { color: var(--p-text-muted-color); font-size: 0.875rem; text-decoration: none; } .catalog-layout[data-v-e16eb167] { grid-template-columns: 304px minmax(0, 1fr); align-items: start; gap: 21px; display: grid; } .catalog-layout.has-selection[data-v-e16eb167] { grid-template-columns: 240px minmax(0, 1fr) minmax(0, 1fr); } h2[data-v-e16eb167] { border-bottom: 1px solid var(--p-content-border-color); margin: 0 0 14px; padding: 0 0 14px; font-size: 1rem; font-weight: 400; line-height: 1.5rem; } .filter-panel[data-v-e16eb167], .hardware-card[data-v-e16eb167] { border: 1px solid var(--p-content-border-color); background: var(--p-content-background); border-radius: var(--radius-md); box-shadow: 0 1px 3px #0000001a; } .filter-panel[data-v-e16eb167] { padding: 0 16px 7px; } details[data-v-e16eb167] { border-bottom: 1px solid var(--p-content-border-color); } summary[data-v-e16eb167] { cursor: pointer; justify-content: space-between; padding: 16px 0; font-weight: 500; list-style: none; display: flex; } summary[data-v-e16eb167]::-webkit-details-marker { display: none; } summary > i[data-v-e16eb167] { align-self: center; font-size: 0.875rem; } details[open] > summary > i[data-v-e16eb167] { transform: rotate(180deg); } .price-range[data-v-e16eb167] { align-items: center; gap: 7px; margin: 7px 0 12px; display: flex; } .price-range[data-v-e16eb167] .p-inputnumber { flex: 1; width: 0; } .price-range[data-v-e16eb167] input { width: 100%; min-width: 0; } .filter-panel small[data-v-e16eb167] { color: var(--p-text-muted-color); padding-bottom: 14px; font-size: 0.8125rem; line-height: 1.6; display: block; } .filter-options[data-v-e16eb167] { flex-wrap: wrap; gap: 7px; padding-bottom: 14px; display: flex; } .filter-options button[data-v-e16eb167] { border: 1px solid var(--p-content-border-color); color: var(--p-text-color); cursor: pointer; background: 0 0; border-radius: var(--radius-sm); padding: 4px 7px; font-size: 0.875rem; } .filter-options button.active[data-v-e16eb167] { border-color: var(--p-primary-color); background: var(--p-highlight-background); color: var(--p-highlight-color); } .filter-empty[data-v-e16eb167] { color: var(--p-text-muted-color); font-size: 0.875rem; } .catalog-lines[data-v-e16eb167], .catalog-products[data-v-e16eb167] { min-width: 0; } .hardware-card[data-v-e16eb167] { margin-bottom: 14px; padding: 17px 15px; } .hardware-card.selected[data-v-e16eb167] { outline: 2px solid var(--p-primary-color); background: var(--p-highlight-background); } .hardware-card h3[data-v-e16eb167] { margin: 0 0 24px; font-size: 1.125rem; font-weight: 600; } .hardware-body[data-v-e16eb167] { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; align-items: center; gap: 21px; display: grid; } .hardware-spec[data-v-e16eb167] { align-items: center; gap: 14px; min-width: 0; display: flex; } .hardware-spec i[data-v-e16eb167], .line-specs i[data-v-e16eb167] { color: var(--p-primary-color); } .hardware-spec > div[data-v-e16eb167] { flex-direction: column; min-width: 0; display: flex; } .hardware-spec span[data-v-e16eb167] { color: var(--p-text-muted-color); font-size: 0.875rem; } /* 允许连续长文本换行,防止IP、密钥或用户输入撑破当前容器;不会修改原始数据。 */ .hardware-spec strong[data-v-e16eb167] { overflow-wrap: anywhere; font-size: 1rem; font-weight: 500; } .hardware-spec small[data-v-e16eb167] { color: var(--p-text-muted-color); font-size: 0.8125rem; } .hardware-buy[data-v-e16eb167] { background: var(--p-content-hover-background); border-radius: var(--radius-md); align-items: center; gap: 10px; padding: 4px; display: flex; } .hardware-buy > span[data-v-e16eb167] { text-align: right; flex-direction: column; display: flex; } .hardware-buy strong[data-v-e16eb167] { white-space: nowrap; font-size: 1.25rem; } .hardware-buy small[data-v-e16eb167] { color: var(--p-text-muted-color); font-size: max(11px, 0.625rem); } .hardware-buy[data-v-e16eb167] button { min-width: 112px; } .hardware-card footer[data-v-e16eb167] { color: var(--p-text-muted-color); justify-content: space-between; gap: 14px; margin-top: 24px; font-size: 0.875rem; display: flex; } .has-selection .hardware-body[data-v-e16eb167] { grid-template-columns: repeat(2, minmax(0, 1fr)); } .has-selection .hardware-buy[data-v-e16eb167] { grid-column: 1/-1; justify-self: end; margin-top: 7px; } .has-selection .hardware-card h3[data-v-e16eb167] { margin-bottom: 21px; } .catalog-state[data-v-e16eb167] { text-align: center; border: 1px solid var(--p-content-border-color); background: var(--p-content-background); border-radius: var(--radius-md); flex-direction: column; align-items: center; gap: 14px; min-height: 260px; padding: 70px 21px; display: flex; } .catalog-state > i[data-v-e16eb167] { color: var(--p-text-muted-color); font-size: 2rem; } .catalog-state h3[data-v-e16eb167] { margin: 0; font-size: 1.125rem; } .catalog-state p[data-v-e16eb167] { color: var(--p-text-muted-color); margin: 0; font-size: 0.9375rem; } .line-heading[data-v-e16eb167] { border-bottom: 1px solid var(--p-content-border-color); justify-content: space-between; align-items: center; min-height: 36px; margin-bottom: 14px; display: flex; } .line-heading h2[data-v-e16eb167] { border: 0; margin: 0; padding: 0; } .line-panel[data-v-e16eb167] { border: 1px solid var(--p-content-border-color); background: var(--p-highlight-background); border-radius: var(--radius-md); padding: 0 17px; } .line-card[data-v-e16eb167] { border-bottom: 1px solid var(--p-content-border-color); padding: 17px 0; } .line-card[data-v-e16eb167]:last-child { border: 0; } .line-tags[data-v-e16eb167] { flex-wrap: wrap; gap: 8px; margin-bottom: 21px; display: flex; } .line-specs[data-v-e16eb167] { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; display: grid; } .line-specs > div[data-v-e16eb167] { align-items: center; gap: 10px; min-width: 0; display: flex; } .line-specs span[data-v-e16eb167] { color: var(--p-text-muted-color); font-size: 0.875rem; } .line-specs strong[data-v-e16eb167] { color: var(--p-text-color); font-size: 1rem; font-weight: 500; display: block; } .line-action[data-v-e16eb167] { justify-content: flex-end; align-items: center; gap: 10px; margin-top: 21px; display: flex; } .line-action .line-order-link[data-v-e16eb167] { white-space: nowrap; flex-shrink: 0; justify-content: center; align-items: center; gap: 7px; min-width: 112px; text-decoration: none; display: inline-flex; } /* 允许连续长文本换行,防止IP、密钥或用户输入撑破当前容器;不会修改原始数据。 */ .line-action > span[data-v-e16eb167] { overflow-wrap: anywhere; min-width: 0; color: var(--p-text-muted-color); font-size: 0.8125rem; } .line-empty[data-v-e16eb167] { padding: 21px; font-size: 0.9375rem; } .filter-options button[data-v-e16eb167]:focus-visible, summary[data-v-e16eb167]:focus-visible { outline: 2px solid var(--p-primary-color); outline-offset: 3px; } /* 视口条件 (width>=1024px) 下的响应式覆盖;保留相对基础规则的层叠顺序。 */ @media (width>=1024px) { .catalog-lines[data-v-e16eb167] { position: sticky; top: calc(var(--console-top-offset, 56px) + 20px); } } /* 视口条件 (width<1200px) 下的响应式覆盖;保留相对基础规则的层叠顺序。 */ @media (width<1200px) { .catalog-layout[data-v-e16eb167] { grid-template-columns: 240px minmax(0, 1fr); } .hardware-body[data-v-e16eb167] { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hardware-buy[data-v-e16eb167] { grid-column: 1/-1; justify-self: end; } .catalog-layout.has-selection[data-v-e16eb167] { grid-template-columns: 200px minmax(0, 1fr); } .catalog-lines[data-v-e16eb167] { grid-area: 1/2; position: static; } .has-selection .catalog-products[data-v-e16eb167] { grid-column: 2; } .has-selection .catalog-filters[data-v-e16eb167] { grid-row: 1 / span 2; } } /* 视口条件 (width<768px) 下的响应式覆盖;保留相对基础规则的层叠顺序。 */ @media (width<768px) { .catalog-head[data-v-e16eb167] { margin-bottom: 28px; } .catalog-layout[data-v-e16eb167], .catalog-layout.has-selection[data-v-e16eb167] { flex-direction: column; gap: 28px; display: flex; } .catalog-filters[data-v-e16eb167], .catalog-lines[data-v-e16eb167], .catalog-products[data-v-e16eb167] { width: 100%; } .catalog-lines[data-v-e16eb167] { order: -1; } .catalog-head h1[data-v-e16eb167] { font-size: 1.375rem; } .hardware-body[data-v-e16eb167] { gap: 14px; } .line-action[data-v-e16eb167] { flex-wrap: wrap; } .line-specs[data-v-e16eb167] { gap: 8px; } .line-specs > div[data-v-e16eb167] { gap: 6px; } .line-specs strong[data-v-e16eb167] { font-size: 0.875rem; } .catalog-state[data-v-e16eb167] { padding: 42px 14px; } }