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

62
src/components/AppFooter.vue
View File

@@ -34,20 +34,17 @@ const coreBusiness = [
</div>
<div class="app-footer__col app-footer__col--core">
<h4 class="app-footer__title">
核心业务
</h4>
<h4 class="app-footer__title">核心业务</h4>
<span
v-for="item in coreBusiness"
:key="item"
class="app-footer__link"
>{{ item }}</span>
>{{ item }}</span
>
</div>
<div class="app-footer__col app-footer__col--nav">
<h4 class="app-footer__title">
快速导航
</h4>
<h4 class="app-footer__title">快速导航</h4>
<RouterLink
v-for="link in quickLinks"
:key="link.label"
@@ -59,19 +56,26 @@ const coreBusiness = [
</div>
<div class="app-footer__col app-footer__col--contact">
<h4 class="app-footer__title">
联系我们
</h4>
<span class="app-footer__contact">商务合作：{{ siteStore.siteInfo.businessEmail }}</span>
<span class="app-footer__contact">技术支持：{{ siteStore.siteInfo.supportEmail }}</span>
<span class="app-footer__contact">客服热线：{{ siteStore.siteInfo.hotline }}</span>
<span class="app-footer__contact">工作时间：{{ siteStore.siteInfo.workTime }}</span>
<h4 class="app-footer__title">联系我们</h4>
<span class="app-footer__contact"
>商务合作：{{ siteStore.siteInfo.businessEmail }}</span
>
<span class="app-footer__contact"
>技术支持：{{ siteStore.siteInfo.supportEmail }}</span
>
<span class="app-footer__contact"
>客服热线：{{ siteStore.siteInfo.hotline }}</span
>
<span class="app-footer__contact"
>工作时间：{{ siteStore.siteInfo.workTime }}</span
>
</div>
</div>
<div class="app-footer__bottom">
<p class="app-footer__legal">
©2026 虫子智造 研发智造一体化平台 版权所有｜自营研发生产平台，所有项目源码、图纸受平台知识产权保护，禁止盗用、复制、二次分发
©2026 虫子智造 研发智造一体化平台
版权所有｜自营研发生产平台，所有项目源码、图纸受平台知识产权保护，禁止盗用、复制、二次分发
</p>
<p class="app-footer__legal app-footer__legal--icp">
{{ siteStore.siteInfo.icp }} | {{ siteStore.siteInfo.police }}
@@ -93,10 +97,15 @@ const coreBusiness = [
.flex(row, flex-start, flex-start);
width: 100%;
max-width: 1920px;
height: 332px; // 页脚顶 → © 行（y1942→2274）
margin: 0 auto; // 视口宽于 1920 时整块居中；缺这行内容会贴左、右侧留白远大于左侧
height: 250px; // 页脚顶 → © 行（y1942→2274）
box-sizing: border-box;
padding-top: 54px;
padding-left: clamp(@spacing-base, calc((100% - 1609px) / 2), 155px); // 设计内容 x155→1764 = 1609 宽
padding-top: 30px;
padding-left: clamp(
@spacing-base,
calc((100% - 1609px) / 2),
155px
); // 设计内容 x155→1764 = 1609 宽
overflow: hidden; // 防列内容撑出横向滚动
}
@@ -132,9 +141,18 @@ const coreBusiness = [
// 设计列位：核心业务 @922（列宽 193）、快速导航 @1257（80）、联系我们 @1511（253）
// 用 modifier 类定位；:nth-of-type 按标签序号计数（about 也算 div），会整体错位一档
&--core { flex: 0 0 193px; margin-left: 142px; }
&--nav { flex: 0 0 80px; margin-left: 142px; }
&--contact { flex: 0 0 253px; margin-left: 174px; }
&--core {
flex: 0 0 193px;
margin-left: 142px;
}
&--nav {
flex: 0 0 80px;
margin-left: 142px;
}
&--contact {
flex: 0 0 253px;
margin-left: 174px;
}
}
&__title {
@@ -170,7 +188,7 @@ const coreBusiness = [
width: 867px;
max-width: calc(100% - 32px);
margin: 0 auto;
padding-bottom: 87px; // ICP 盒底 2336 → 页脚底 2423
padding-bottom: 20px; // ICP 盒底 2336 → 页脚底 2423
text-align: left;
}

10
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">
@@ -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;

110
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>