zhangchao/cz-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat 首页页脚

Browse Source
This commit is contained in:
Ironsp
2026-10-01 11:04:30 +08:00
parent 1601bdd82c
commit d856fb623a
3 changed files with 150 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/views/home/cpns/HomeBusinessCards.vue
View File

@@ -24,9 +24,7 @@ const FALLBACK_ILL: Record<BusinessType, string> = {
<template>
<section class="home-business">
<h3 class="home-business__title">
业务服务
</h3>
<h3 class="home-business__title">业务服务</h3>
<div class="home-business__grid">
<RouterLink
@@ -41,7 +39,7 @@ const FALLBACK_ILL: Record<BusinessType, string> = {
class="home-business__ill"
:src="line.icon || FALLBACK_ILL[line.id]"
:alt="line.name"
>
/>
<!-- 设计稿卡片右上角选择圆环（31×31） -->
<span class="home-business__check" aria-hidden="true" />
<h4 class="home-business__name">
@@ -64,7 +62,7 @@ const FALLBACK_ILL: Record<BusinessType, string> = {
background: @white;
&__title {
margin: 0 0 47px; // 标题盒底 1114 → 卡顶 1161
margin: 0 0 47px; // 标题盒底 1114 → 卡顶 1161
// 设计稿栏目标题 36px / 700 / #121212
font-size: @font-size-xxl;
font-weight: 700;
@@ -89,7 +87,9 @@ const FALLBACK_ILL: Record<BusinessType, string> = {
border: 1px solid @home-business-border;
border-radius: @radius-base;
background: @white;
transition: transform 0.2s, box-shadow 0.2s;
transition:
transform 0.2s,
box-shadow 0.2s;
&:hover {
box-shadow: @shadow-base;

112
src/views/home/cpns/HomeQuickEntries.vue
View File

@@ -27,15 +27,61 @@ const router = useRouter()
const dialogVisible = ref(false)
/** 设计稿固定入口名目（设计稿没有的接口入口不展示） */
const DESIGN_NAMES = ['工单需求池', '案例库管理', '客服工作台', '合同台账', '财务台账']
const DESIGN_NAMES = [
'工单需求池',
'案例库管理',
'客服工作台',
'合同台账',
'财务台账',
]
/** 接口不可用时的默认入口（与设计稿五项一致，tone 对应设计稿五色） */
const FALLBACK_QUICK: PortalEntryCard[] = [
{ id: 0, label: '工单需求池', route: '/demand', groupType: '1', icon: '', isImage: false, tone: 'cyan' },
{ id: 0, label: '案例库管理', route: '/cases', groupType: '1', icon: '', isImage: false, tone: 'purple' },
{ id: 0, label: '客服工作台', route: '/service', groupType: '1', icon: '', isImage: false, tone: 'green' },
{ id: 0, label: '合同台账', route: '/contract', groupType: '1', icon: '', isImage: false, tone: 'blue' },
{ id: 0, label: '财务台账', route: '/finance/bills', groupType: '1', icon: '', isImage: false, tone: 'amber' },
{
id: 0,
label: '工单需求池',
route: '/demand',
groupType: '1',
icon: '',
isImage: false,
tone: 'cyan',
},
{
id: 0,
label: '案例库管理',
route: '/cases',
groupType: '1',
icon: '',
isImage: false,
tone: 'purple',
},
{
id: 0,
label: '客服工作台',
route: '/service',
groupType: '1',
icon: '',
isImage: false,
tone: 'green',
},
{
id: 0,
label: '合同台账',
route: '/contract',
groupType: '1',
icon: '',
isImage: false,
tone: 'blue',
},
{
id: 0,
label: '财务台账',
route: '/finance/bills',
groupType: '1',
icon: '',
isImage: false,
tone: 'amber',
},
]
/** 设计稿切图：蓝湖整稿 97×97 方块（含底色与白色图案），按入口名映射 */
@@ -52,14 +98,17 @@ const knownPaths = new Set(router.getRoutes().map((item) => item.path))
/** 卡片展示的入口：接口数据按设计稿名目过滤，最多 5 个 */
const entries = computed<PortalEntryCard[]>(() => {
const list = toPortalEntryCards(quickEntries.value)
.filter((card) => DESIGN_NAMES.includes(card.label))
const list = toPortalEntryCards(quickEntries.value).filter((card) =>
DESIGN_NAMES.includes(card.label),
)
return (list.length > 0 ? list : FALLBACK_QUICK).slice(0, 5)
})
/** 入口图：接口 iconUrl 图案优先，否则设计稿切图 */
function tileSrc(card: PortalEntryCard): string {
return card.isImage && card.icon ? card.icon : (DESIGN_TILES[card.label] ?? '')
return card.isImage && card.icon
? card.icon
: (DESIGN_TILES[card.label] ?? '')
}
/** 解析可跳转路径：优先后端 route，其次同名默认入口，最后回首页 */
@@ -80,9 +129,7 @@ function onMore(): void {
<template>
<section class="home-quick">
<div class="home-quick__head">
<h3 class="home-quick__title">
业务服务
</h3>
<h3 class="home-quick__title">快捷入口</h3>
</div>
<div class="home-quick__list">
@@ -93,15 +140,44 @@ function onMore(): void {
class="home-quick__item"
>
<!-- 设计稿：97×97 彩色方块 + 白色图案（蓝湖整稿切图），接口 iconUrl 图案优先 -->
<img class="home-quick__tile" :src="tileSrc(entry)" :alt="entry.label">
<img
class="home-quick__tile"
:src="tileSrc(entry)"
:alt="entry.label"
/>
<span class="home-quick__label">{{ entry.label }}</span>
</RouterLink>
<!-- 设计稿：双箭头图标与入口方块行垂直居中（@y875, 32×32，距末位方块 20） -->
<button class="home-quick__more" type="button" aria-label="更多应用" @click="onMore">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8 6 L18 16 L8 26" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
<path d="M17 6 L27 16 L17 26" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
<button
class="home-quick__more"
type="button"
aria-label="更多应用"
@click="onMore"
>
<svg
width="32"
height="32"
viewBox="0 0 32 32"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8 6 L18 16 L8 26"
stroke="currentColor"
stroke-width="3.5"
stroke-linecap="round"
stroke-linejoin="round"
fill="none"
/>
<path
d="M17 6 L27 16 L17 26"
stroke="currentColor"
stroke-width="3.5"
stroke-linecap="round"
stroke-linejoin="round"
fill="none"
/>
</svg>
</button>
</div>
@@ -143,7 +219,7 @@ function onMore(): void {
// 设计稿入口图标间距（图标 97 + 间隙 30）；方块行顶 y841 = 卡顶 +87
gap: 30px;
margin-top: 17px;
flex-wrap: wrap; // 卡片被收缩时换行，避免卡内溢出
flex-wrap: wrap; // 卡片被收缩时换行，避免卡内溢出
}
&__item {