/* 商品分类说明:图标、富文本和纯文本内容区域。 */ /* 导入方:app/components/ProductCategoryNotice.vue、app/pages/products/index.vue。 */ .category-notice[data-v-faa6a7a3] { border: 1px solid color-mix( in srgb, var(--p-primary-color) 24%, var(--p-content-border-color) ); background: color-mix( in srgb, var(--p-primary-color) 5%, var(--p-content-background) ); min-width: 0; color: var(--p-text-color); border-radius: 8px; align-items: flex-start; gap: 12px; padding: 16px 20px; display: flex; } .category-notice-icon[data-v-faa6a7a3] { color: var(--p-primary-color); flex-shrink: 0; margin-top: 4px; font-size: 1.125rem; } /* 允许连续长文本换行,防止IP、密钥或用户输入撑破当前容器;不会修改原始数据。 */ .category-notice-content[data-v-faa6a7a3] { overflow-wrap: anywhere; flex: 1; min-width: 0; font-size: 0.9375rem; line-height: 1.8; } .category-notice-plain[data-v-faa6a7a3] { white-space: pre-line; } .category-notice-content[data-v-faa6a7a3] blockquote, .category-notice-content[data-v-faa6a7a3] ol, .category-notice-content[data-v-faa6a7a3] p, .category-notice-content[data-v-faa6a7a3] ul { margin: 8px 0; } .category-notice-content[data-v-faa6a7a3] h1, .category-notice-content[data-v-faa6a7a3] h2, .category-notice-content[data-v-faa6a7a3] h3, .category-notice-content[data-v-faa6a7a3] h4, .category-notice-content[data-v-faa6a7a3] h5, .category-notice-content[data-v-faa6a7a3] h6 { margin: 12px 0 8px; font-size: 1.0625rem; font-weight: 600; line-height: 1.6; } .category-notice-content[data-v-faa6a7a3] ol, .category-notice-content[data-v-faa6a7a3] ul { padding-left: 22px; } .category-notice-content[data-v-faa6a7a3] ul { list-style: outside; } .category-notice-content[data-v-faa6a7a3] ol { list-style: decimal; } .category-notice-content[data-v-faa6a7a3] a { color: var(--p-primary-color); text-underline-offset: 3px; text-decoration: underline; } /* 键盘操作的可见焦点:不要只保留鼠标 hover 效果而移除此反馈。 */ .category-notice-content[data-v-faa6a7a3] a:focus-visible { outline: 2px solid var(--p-primary-color); outline-offset: 3px; } .category-notice-content[data-v-faa6a7a3] img { vertical-align: middle; max-width: 100%; height: auto; } .category-notice-content[data-v-faa6a7a3] figure { margin: 8px 0; } .category-notice-content[data-v-faa6a7a3] blockquote { border-left: 3px solid var(--p-content-border-color); color: var(--p-text-muted-color); padding-left: 12px; } .category-notice-content[data-v-faa6a7a3] pre { white-space: pre-wrap; max-width: 100%; overflow-x: auto; } .category-notice-content[data-v-faa6a7a3] table { border-collapse: collapse; white-space: normal; max-width: 100%; display: block; overflow-x: auto; } .category-notice-content[data-v-faa6a7a3] td, .category-notice-content[data-v-faa6a7a3] th { border: 1px solid var(--p-content-border-color); text-align: left; padding: 6px 10px; } .category-notice-content[data-v-faa6a7a3] > :first-child { margin-top: 0; } .category-notice-content[data-v-faa6a7a3] > :last-child { margin-bottom: 0; } /* 视口条件 (width<=760px) 下的响应式覆盖;保留相对基础规则的层叠顺序。 */ @media (width<=760px) { .category-notice[data-v-faa6a7a3] { gap: 10px; padding: 14px 16px; } }