chenxing
4d9da5e3a6
- AppIcon.vue：矢量图标渲染组件（iconKey+iconColor → mask data-uri，无键无 URL 回退关键词映射占位） - constants/appIconRules.ts：应用名关键词→图标键兜底映射（D4，两端各持一份，与 MobilePortal 关键词列一致；仅 icon_key 未配置且无 URL 时生效，有 URL 恒定位图零回归） - AppList/SearchPanel/index：应用网格与搜索结果图标位换 AppIcon - appicon.mask.css：资产库 mask 样式；yunhai-logo.svg：站点 Logo 矢量件 - main.scss/_app_container.scss：网格图标容器样式配套 依据：根目录《AppIcon资产库落地-执行报告-20261004.md》P3 UserHome（PC）接入
34 lines
2.7 KiB
CSS
34 lines
2.7 KiB
CSS
/* appicon 图标（CSS mask + currentColor，data-uri 自包含），共 2 个。
|
||
用法 <i class="appicon appicon-<名>"></i>；命名空间隔离：类名恒为 .appicon*，无 .icon-*。 */
|
||
|
||
.appicon {
|
||
font-family: inherit;
|
||
font-style: normal;
|
||
font-size: 16px;
|
||
line-height: 1;
|
||
display: inline-block;
|
||
vertical-align: middle;
|
||
}
|
||
.appicon::before {
|
||
content: "" !important;
|
||
display: block;
|
||
width: 1em;
|
||
height: 1em;
|
||
background-color: currentColor;
|
||
-webkit-mask-position: center;
|
||
mask-position: center;
|
||
-webkit-mask-repeat: no-repeat;
|
||
mask-repeat: no-repeat;
|
||
-webkit-mask-size: contain;
|
||
mask-size: contain;
|
||
}
|
||
|
||
.appicon-tongzhi::before {
|
||
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M853.33 725.33H938.67V810.67H85.33V725.33H170.67V426.67C170.67 238.15 323.49 85.33 512 85.33C700.51 85.33 853.33 238.15 853.33 426.67V725.33ZM768 725.33V426.67C768 285.28 653.38 170.67 512 170.67C370.62 170.67 256 285.28 256 426.67V725.33H768ZM384 896H640V981.33H384V896Z' %3E%3C/path%3E%3C/svg%3E");
|
||
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M853.33 725.33H938.67V810.67H85.33V725.33H170.67V426.67C170.67 238.15 323.49 85.33 512 85.33C700.51 85.33 853.33 238.15 853.33 426.67V725.33ZM768 725.33V426.67C768 285.28 653.38 170.67 512 170.67C370.62 170.67 256 285.28 256 426.67V725.33H768ZM384 896H640V981.33H384V896Z' %3E%3C/path%3E%3C/svg%3E");
|
||
}
|
||
.appicon-wenjuan::before {
|
||
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M725.33 85.33V170.67H853.61C877.02 170.67 896 189.65 896 213.05V896.28C896 919.69 877.02 938.67 853.61 938.67H170.39C146.98 938.67 128 919.68 128 896.28V213.05C128 189.64 146.98 170.67 170.39 170.67H298.67V85.33H725.33ZM298.67 256H213.33V853.33H810.67V256H725.33V341.33H298.67V256ZM384 682.67V768H298.67V682.67H384ZM384 554.67V640H298.67V554.67H384ZM384 426.67V512H298.67V426.67H384ZM640 170.67H384V256H640V170.67Z' %3E%3C/path%3E%3C/svg%3E");
|
||
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M725.33 85.33V170.67H853.61C877.02 170.67 896 189.65 896 213.05V896.28C896 919.69 877.02 938.67 853.61 938.67H170.39C146.98 938.67 128 919.68 128 896.28V213.05C128 189.64 146.98 170.67 170.39 170.67H298.67V85.33H725.33ZM298.67 256H213.33V853.33H810.67V256H725.33V341.33H298.67V256ZM384 682.67V768H298.67V682.67H384ZM384 554.67V640H298.67V554.67H384ZM384 426.67V512H298.67V426.67H384ZM640 170.67H384V256H640V170.67Z' %3E%3C/path%3E%3C/svg%3E");
|
||
}
|