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）接入
109 lines
2.7 KiB
SCSS
109 lines
2.7 KiB
SCSS
.app-container {
|
||
width: 92px;
|
||
height: 100px;
|
||
border-radius: 2px;
|
||
margin: 10px 15px;
|
||
cursor: pointer;
|
||
display: flex;
|
||
flex-direction: column;
|
||
text-align: center;
|
||
justify-content: center;
|
||
align-items: center;
|
||
user-select: none;
|
||
|
||
transition: background-color 0.2s ease-in-out;
|
||
&:hover,
|
||
&__focus {
|
||
background-color: rgba(255, 255, 255, 0.3);
|
||
}
|
||
|
||
a {
|
||
display: inline-block;
|
||
width: 90%;
|
||
height: 85%;
|
||
}
|
||
|
||
img {
|
||
width: 60px;
|
||
height: 60px;
|
||
object-fit: cover;
|
||
border-radius: 18%;
|
||
display: inline-block;
|
||
}
|
||
.app-name {
|
||
margin-top: 2px;
|
||
color: #fff;
|
||
font-weight: 500;
|
||
max-width: 99%;
|
||
overflow: hidden;
|
||
-o-text-overflow: ellipsis;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
&__mask {
|
||
.app-name {
|
||
color: #344449;
|
||
}
|
||
margin-right: 40px;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
&__mask:hover,
|
||
&__mask + &__focus {
|
||
background-color: rgba(255, 255, 255, 0.5);
|
||
}
|
||
// border-radius: 2px;
|
||
// background: rgba(255, 255, 255, 0.25);
|
||
}
|
||
|
||
/* ===================== AppIcon 矢量图标三档 scene（方案 §4 渲染契约） =====================
|
||
* 图标资源只管形状，容器管底色与图标色；底色为端侧派生 token（不落库）。
|
||
* 形状类（.appicon-<名> 的 mask data-uri）来自全局 appicon.mask.css；
|
||
* AppIcon.vue 组件按 scene/tint 组合类名与内联覆盖（tint=application_info.icon_color 人工配置色）。
|
||
* 尺寸对齐上方 img 位图（60px / 18% 圆角），保证矢量与位图在网格里视觉一致。
|
||
*/
|
||
.appicon {
|
||
display: inline-block;
|
||
line-height: 1;
|
||
vertical-align: middle;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.appicon-tile {
|
||
// PC 应用卡：方块底 + 白图标（对齐位图 60px/18%）
|
||
--appicon-bg: var(--brand, #366ef4); // 端侧主题 token（通道 CSS 不可达时兜底蓝）
|
||
width: 60px;
|
||
height: 60px;
|
||
border-radius: 18%;
|
||
background: var(--appicon-bg);
|
||
color: #fff;
|
||
font-size: 44px;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.appicon-circle {
|
||
// App 首页快捷：正圆底 + 白图标
|
||
--appicon-bg: var(--brand, #366ef4);
|
||
width: 50px;
|
||
height: 50px;
|
||
border-radius: 50%;
|
||
background: var(--appicon-bg);
|
||
color: #fff;
|
||
font-size: 36px;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.appicon-plain {
|
||
// 无底线性：图标色继承（分组色 / tint）
|
||
width: auto;
|
||
height: auto;
|
||
background: transparent;
|
||
color: var(--appicon-ink, currentColor);
|
||
font-size: 26px;
|
||
}
|