/* 商品详情说明:结构化配置分区、富文本、折叠预览与空态。 */ /* 导入方:app/components/ProductDescription.vue、app/pages/products/index.vue。 */ /* 允许连续长文本换行,防止IP、密钥或用户输入撑破当前容器;不会修改原始数据。 */ .product-description[data-v-8a6cfb44] { min-width: 0; max-width: 100%; color: var(--p-text-color); overflow-wrap: anywhere; font-size: 0.9375rem; line-height: 1.8; } .description-panel[data-v-8a6cfb44] { /* 面板与文字使用同一主题协议,紧凑预览和完整说明都不能固定为浅色配色。 */ background: var(--p-content-background); border-top: 1px solid var(--p-content-border-color); border-bottom: 1px solid var(--p-content-border-color); padding: 0; } .description-header[data-v-8a6cfb44] { background: var(--p-content-hover-background); border-bottom: 1px solid var(--p-content-border-color); padding: 8px clamp(20px, 8.6%, 110px); } .description-header h2[data-v-8a6cfb44] { color: var(--p-text-muted-color); margin: 0; font-size: 21px; font-weight: 500; line-height: 1.35; } .description-content[data-v-8a6cfb44] { min-width: 0; } .description-panel .description-content[data-v-8a6cfb44] { padding: 40px clamp(20px, 8.6%, 110px) 52px; } .description-field[data-v-8a6cfb44] { grid-template-columns: 160px minmax(0, 1fr); align-items: center; gap: 20px; margin: 0; padding: 16px 0; display: grid; } .description-field dt[data-v-8a6cfb44] { color: var(--p-text-muted-color); align-items: center; gap: 16px; min-width: 0; font-size: 20px; font-weight: 400; display: flex; } .description-field dt i[data-v-8a6cfb44] { color: #768aa7; flex: none; font-size: 18px; } .description-field dd[data-v-8a6cfb44] { color: var(--p-text-color); white-space: pre-line; min-width: 0; margin: 0; font-size: 22px; line-height: 1.5; } .description-field--network dt i[data-v-8a6cfb44] { color: #5084a6; } .description-field--notes dt i[data-v-8a6cfb44] { color: #8792a2; } .description-field--security dt i[data-v-8a6cfb44] { color: #4e9276; } .description-field--hardware dt i[data-v-8a6cfb44] { color: #756fb1; } .description-field--resources dt i[data-v-8a6cfb44] { color: #52818a; } .description-field--billing dt i[data-v-8a6cfb44] { color: #a17a3f; } .description-paragraph[data-v-8a6cfb44] { white-space: pre-line; margin: 12px 0; } .description-content > .description-paragraph[data-v-8a6cfb44]:first-child { margin-top: 0; } .description-content > .description-paragraph[data-v-8a6cfb44]:last-child { margin-bottom: 0; } .description-header + .description-content > .description-paragraph[data-v-8a6cfb44]:first-child { margin-top: 16px; } .description-compact .description-field[data-v-8a6cfb44] { border: 0; grid-template-columns: 76px minmax(0, 1fr); gap: 14px; padding: 5px 0; } .description-compact .description-field[data-v-8a6cfb44]:first-child { padding-top: 0; } .description-compact .description-field dt[data-v-8a6cfb44] { gap: 7px; font-size: 0.875rem; } .description-compact .description-field dt i[data-v-8a6cfb44] { font-size: 0.875rem; } .description-compact .description-field dd[data-v-8a6cfb44] { font-size: 0.9375rem; } .description-compact .description-paragraph[data-v-8a6cfb44] { color: var(--p-text-muted-color); } /* 折叠预览与展开操作的展示边界,正文内容清理由业务组件负责。 */ .description-preview[data-v-8a6cfb44] { -webkit-line-clamp: 3; -webkit-box-orient: vertical; display: -webkit-box; overflow: hidden; } .description-empty[data-v-8a6cfb44] { color: var(--p-text-muted-color); margin: 0; } .description-toggle[data-v-8a6cfb44] { min-height: 32px; font: inherit; color: var(--p-primary-color); cursor: pointer; background: 0 0; border: 0; align-items: center; gap: 6px; margin-top: 8px; padding: 3px 0; font-size: 0.875rem; display: inline-flex; } .description-toggle[data-v-8a6cfb44]:hover { text-underline-offset: 3px; text-decoration: underline; } /* 键盘操作的可见焦点:不要只保留鼠标 hover 效果而移除此反馈。 */ .description-toggle[data-v-8a6cfb44]:focus-visible { outline: 2px solid var(--p-primary-color); outline-offset: 3px; border-radius: 2px; } .description-toggle i[data-v-8a6cfb44] { font-size: 0.875rem; } /* 后端富文本的排版规则;这些选择器不提供HTML消毒或授权功能。 */ .description-rich[data-v-8a6cfb44] { min-width: 0; padding-top: 8px; } .description-rich[data-v-8a6cfb44] dl, .description-rich[data-v-8a6cfb44] ol, .description-rich[data-v-8a6cfb44] p, .description-rich[data-v-8a6cfb44] ul { margin: 10px 0; } .description-rich[data-v-8a6cfb44] h1, .description-rich[data-v-8a6cfb44] h2, .description-rich[data-v-8a6cfb44] h3, .description-rich[data-v-8a6cfb44] h4, .description-rich[data-v-8a6cfb44] h5, .description-rich[data-v-8a6cfb44] h6 { color: var(--p-text-color); margin: 20px 0 8px; font-size: 1rem; font-weight: 600; line-height: 1.7; } .description-rich[data-v-8a6cfb44] ol, .description-rich[data-v-8a6cfb44] ul { padding-left: 22px; } .description-rich[data-v-8a6cfb44] ul { list-style: outside; } .description-rich[data-v-8a6cfb44] ol { list-style: decimal; } .description-rich[data-v-8a6cfb44] li { margin-block: 4px; } .description-rich[data-v-8a6cfb44] a { color: var(--p-primary-color); text-underline-offset: 3px; text-decoration: underline; } .description-rich[data-v-8a6cfb44] img { border-radius: var(--radius-sm); max-width: 100%; height: auto; display: block; } .description-rich[data-v-8a6cfb44] figure { margin: 14px 0; } .description-rich[data-v-8a6cfb44] figcaption { color: var(--p-text-muted-color); margin-top: 6px; font-size: 0.875rem; } .description-rich[data-v-8a6cfb44] table { border-collapse: collapse; max-width: 100%; display: block; overflow-x: auto; } .description-rich[data-v-8a6cfb44] td, .description-rich[data-v-8a6cfb44] th { border: 1px solid var(--p-content-border-color); text-align: left; padding: 8px 12px; } .description-rich[data-v-8a6cfb44] th { background: var(--p-content-hover-background); font-weight: 500; } .description-rich[data-v-8a6cfb44] pre { white-space: pre-wrap; background: var(--p-content-hover-background); border-radius: var(--radius-sm); max-width: 100%; padding: 12px; overflow-x: auto; } .description-rich[data-v-8a6cfb44] blockquote { border-left: 3px solid var(--p-primary-color); color: var(--p-text-muted-color); margin: 14px 0; padding: 4px 14px; } .description-rich[data-v-8a6cfb44] hr { border: 0; border-top: 1px solid var(--p-content-border-color); margin: 16px 0; } .description-rich[data-v-8a6cfb44] > :first-child { margin-top: 0; } .description-rich[data-v-8a6cfb44] > :last-child { margin-bottom: 0; } /* 视口条件 (width<=768px) 下的响应式覆盖;保留相对基础规则的层叠顺序。 */ @media (width<=768px) { .description-header[data-v-8a6cfb44] { padding: 10px 20px; } .description-header h2[data-v-8a6cfb44] { font-size: 17px; } .description-panel .description-content[data-v-8a6cfb44] { padding: 20px 20px 28px; } .description-field[data-v-8a6cfb44] { grid-template-columns: 94px minmax(0, 1fr); gap: 12px; padding: 12px 0; } .description-field dt[data-v-8a6cfb44] { gap: 8px; font-size: 1.0625rem; } .description-field dt i[data-v-8a6cfb44] { font-size: 1.0625rem; } .description-field dd[data-v-8a6cfb44] { font-size: 15px; } }