/* 云商品选择器:区域/商品选项、选中状态及空目录提示。 */ /* 导入方:app/components/config/CloudProductPicker.vue、app/pages/products/cloud-server.vue。 */ .cloud-product-picker[data-v-a438862d] { flex-direction: column; gap: 24px; min-width: 0; display: flex; } .selection-section[data-v-a438862d] { min-width: 0; } .selection-section h3[data-v-a438862d] { border-bottom: 1px solid var(--p-content-border-color); margin: 0 0 21px; padding-bottom: 15px; font-size: 1rem; font-weight: 400; } .selection-section .products-title[data-v-a438862d] { border: 0; margin-bottom: 8px; padding-bottom: 0; } .selection-label[data-v-a438862d] { margin-bottom: 8px; } .zone-options[data-v-a438862d] { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; display: grid; } .product-options[data-v-a438862d] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; display: grid; } /* 允许连续长文本换行,防止IP、密钥或用户输入撑破当前容器;不会修改原始数据。 */ .product-option[data-v-a438862d], .zone-option[data-v-a438862d] { border: 1px solid var(--p-content-border-color); background: var(--p-content-background); min-width: 0; min-height: 60px; color: var(--p-text-color); text-align: left; cursor: pointer; overflow-wrap: anywhere; border-radius: var(--radius-md); flex-direction: column; gap: 10px; padding: 17px 14px; display: flex; box-shadow: 0 1px 3px #0000001a; } .zone-option[data-v-a438862d] { justify-content: center; font-weight: 600; } .product-option[data-v-a438862d] { gap: 0; padding: 0; overflow: hidden; } .product-option strong[data-v-a438862d] { background: color-mix( in srgb, var(--p-primary-color) 8%, var(--p-content-background) ); padding: 14px; font-weight: 600; display: block; } .product-option span[data-v-a438862d] { color: var(--p-text-muted-color); padding: 14px; font-size: 0.875rem; } .active[data-v-a438862d] { outline: 2px solid var(--p-primary-color); outline-offset: -1px; background: color-mix( in srgb, var(--p-primary-color) 7%, var(--p-content-background) ); color: var(--p-primary-700); } .product-option[data-v-a438862d]:disabled, .zone-option[data-v-a438862d]:disabled { opacity: 0.55; cursor: not-allowed; } /* 键盘操作的可见焦点:不要只保留鼠标 hover 效果而移除此反馈。 */ .product-option[data-v-a438862d]:focus-visible, .zone-option[data-v-a438862d]:focus-visible { outline: 2px solid var(--p-primary-color); outline-offset: 3px; } .catalog-empty[data-v-a438862d] { text-align: center; color: var(--p-text-muted-color); border: 1px solid var(--p-content-border-color); background: var(--p-content-background); border-radius: var(--radius-md); padding: 28px; } .catalog-empty i[data-v-a438862d] { font-size: 1.75rem; } .catalog-empty a[data-v-a438862d] { color: var(--p-primary-color); text-decoration: none; } /* 视口条件 (width<768px) 下的响应式覆盖;保留相对基础规则的层叠顺序。 */ @media (width<768px) { .product-options[data-v-a438862d], .zone-options[data-v-a438862d] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } } /* 视口条件 (width<=390px) 下的响应式覆盖;保留相对基础规则的层叠顺序。 */ @media (width<=390px) { .product-options[data-v-a438862d] { grid-template-columns: minmax(0, 1fr); } }