/* 带宽配置:容量单位、滑块和说明文本。 */ /* 导入方:app/components/config/ConfigBandwidth.vue、app/components/config/JyCloudConfig.vue、app/components/config/KkyEcsConfig.vue、app/components/config/MfCloudConfig.vue、app/components/instance/DcimManage.vue、app/components/instance/DcimUpgrade.vue、app/components/instance/InstanceBilling.vue、app/components/kkyecs/KkyUpgrade.vue、app/components/mfcloud/MfCloudResourceUpgrade.vue、app/pages/products/[id].vue、app/pages/products/cloud-server.vue。 */ .bandwidth-field[data-v-45a9c613] { flex-direction: column; gap: 12px; width: 100%; min-width: 0; max-width: 470px; display: flex; } .bandwidth-label[data-v-45a9c613] { color: var(--p-text-color); align-items: center; gap: 8px; font-size: 1rem; line-height: 1.429rem; display: flex; } .bandwidth-help[data-v-45a9c613] { width: 20px; height: 20px; color: var(--p-primary-color); cursor: help; background: 0 0; border: 0; border-radius: 50%; justify-content: center; align-items: center; padding: 0; display: inline-flex; } .bandwidth-help > i[data-v-45a9c613] { font-size: 1rem; } /* 键盘操作的可见焦点:不要只保留鼠标 hover 效果而移除此反馈。 */ .bandwidth-help[data-v-45a9c613]:focus-visible { outline: 2px solid var(--p-primary-color); outline-offset: 3px; } .bandwidth-capacity[data-v-45a9c613] { border: 1px solid var(--p-content-border-color); background: var(--p-content-background); border-radius: var(--radius-md); width: 100%; min-width: 0; display: flex; box-shadow: 0 1px 2px #0000000a; } .bandwidth-capacity[data-v-45a9c613]:focus-within { outline: 2px solid var(--p-primary-color); outline-offset: 2px; } .bandwidth-capacity[data-v-45a9c613] .p-inputnumber { flex: 1; width: 0; min-width: 0; max-width: none; } .bandwidth-capacity[data-v-45a9c613] .p-inputnumber-input { width: 100%; min-width: 0; min-height: 36px; box-shadow: none; color: var(--p-text-color); opacity: 1; background: 0 0; border: 0; padding: 8px 10px; font-size: 1rem; } .bandwidth-unit[data-v-45a9c613] { border-left: 1px solid var(--p-content-border-color); color: var(--p-text-muted-color); justify-content: center; align-items: center; padding: 0 8px; font-size: 1rem; display: flex; } .bandwidth-slider[data-v-45a9c613] { appearance: none; background: var(--p-content-border-color); cursor: pointer; border: 0; border-radius: var(--radius-sm); width: calc(100% - 14px); height: 3px; margin: 16px 7px 9px; display: block; } .bandwidth-slider[data-v-45a9c613]::-webkit-slider-thumb { appearance: none; border: 2px solid var(--p-content-border-color); background: var(--p-content-background); border-radius: 50%; width: 19px; height: 19px; box-shadow: 0 1px 2px #0000002e; } .bandwidth-slider[data-v-45a9c613]::-moz-range-thumb { box-sizing: border-box; border: 2px solid var(--p-content-border-color); background: var(--p-content-background); border-radius: 50%; width: 19px; height: 19px; box-shadow: 0 1px 2px #0000002e; } /* 键盘操作的可见焦点:不要只保留鼠标 hover 效果而移除此反馈。 */ .bandwidth-slider[data-v-45a9c613]:focus-visible { outline: 2px solid var(--p-primary-color); outline-offset: 9px; } .bandwidth-slider[data-v-45a9c613]:disabled { cursor: default; } .bandwidth-capacity.is-disabled[data-v-45a9c613] { opacity: 0.6; } /* 视口条件 (width<640px) 下的响应式覆盖;保留相对基础规则的层叠顺序。 */ @media (width<640px) { .bandwidth-field[data-v-45a9c613] { max-width: none; } }