feat 首页页脚
This commit is contained in:
@@ -34,20 +34,17 @@ const coreBusiness = [
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="app-footer__col app-footer__col--core">
|
<div class="app-footer__col app-footer__col--core">
|
||||||
<h4 class="app-footer__title">
|
<h4 class="app-footer__title">核心业务</h4>
|
||||||
核心业务
|
|
||||||
</h4>
|
|
||||||
<span
|
<span
|
||||||
v-for="item in coreBusiness"
|
v-for="item in coreBusiness"
|
||||||
:key="item"
|
:key="item"
|
||||||
class="app-footer__link"
|
class="app-footer__link"
|
||||||
>{{ item }}</span>
|
>{{ item }}</span
|
||||||
|
>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="app-footer__col app-footer__col--nav">
|
<div class="app-footer__col app-footer__col--nav">
|
||||||
<h4 class="app-footer__title">
|
<h4 class="app-footer__title">快速导航</h4>
|
||||||
快速导航
|
|
||||||
</h4>
|
|
||||||
<RouterLink
|
<RouterLink
|
||||||
v-for="link in quickLinks"
|
v-for="link in quickLinks"
|
||||||
:key="link.label"
|
:key="link.label"
|
||||||
@@ -59,19 +56,26 @@ const coreBusiness = [
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="app-footer__col app-footer__col--contact">
|
<div class="app-footer__col app-footer__col--contact">
|
||||||
<h4 class="app-footer__title">
|
<h4 class="app-footer__title">联系我们</h4>
|
||||||
联系我们
|
<span class="app-footer__contact"
|
||||||
</h4>
|
>商务合作:{{ siteStore.siteInfo.businessEmail }}</span
|
||||||
<span class="app-footer__contact">商务合作:{{ siteStore.siteInfo.businessEmail }}</span>
|
>
|
||||||
<span class="app-footer__contact">技术支持:{{ siteStore.siteInfo.supportEmail }}</span>
|
<span class="app-footer__contact"
|
||||||
<span class="app-footer__contact">客服热线:{{ siteStore.siteInfo.hotline }}</span>
|
>技术支持:{{ siteStore.siteInfo.supportEmail }}</span
|
||||||
<span class="app-footer__contact">工作时间:{{ siteStore.siteInfo.workTime }}</span>
|
>
|
||||||
|
<span class="app-footer__contact"
|
||||||
|
>客服热线:{{ siteStore.siteInfo.hotline }}</span
|
||||||
|
>
|
||||||
|
<span class="app-footer__contact"
|
||||||
|
>工作时间:{{ siteStore.siteInfo.workTime }}</span
|
||||||
|
>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="app-footer__bottom">
|
<div class="app-footer__bottom">
|
||||||
<p class="app-footer__legal">
|
<p class="app-footer__legal">
|
||||||
©2026 虫子智造 研发智造一体化平台 版权所有|自营研发生产平台,所有项目源码、图纸受平台知识产权保护,禁止盗用、复制、二次分发
|
©2026 虫子智造 研发智造一体化平台
|
||||||
|
版权所有|自营研发生产平台,所有项目源码、图纸受平台知识产权保护,禁止盗用、复制、二次分发
|
||||||
</p>
|
</p>
|
||||||
<p class="app-footer__legal app-footer__legal--icp">
|
<p class="app-footer__legal app-footer__legal--icp">
|
||||||
{{ siteStore.siteInfo.icp }} | {{ siteStore.siteInfo.police }}
|
{{ siteStore.siteInfo.icp }} | {{ siteStore.siteInfo.police }}
|
||||||
@@ -93,22 +97,27 @@ const coreBusiness = [
|
|||||||
.flex(row, flex-start, flex-start);
|
.flex(row, flex-start, flex-start);
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 1920px;
|
max-width: 1920px;
|
||||||
height: 332px; // 页脚顶 → © 行(y1942→2274)
|
margin: 0 auto; // 视口宽于 1920 时整块居中;缺这行内容会贴左、右侧留白远大于左侧
|
||||||
|
height: 250px; // 页脚顶 → © 行(y1942→2274)
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
padding-top: 54px;
|
padding-top: 30px;
|
||||||
padding-left: clamp(@spacing-base, calc((100% - 1609px) / 2), 155px); // 设计内容 x155→1764 = 1609 宽
|
padding-left: clamp(
|
||||||
overflow: hidden; // 防列内容撑出横向滚动
|
@spacing-base,
|
||||||
|
calc((100% - 1609px) / 2),
|
||||||
|
155px
|
||||||
|
); // 设计内容 x155→1764 = 1609 宽
|
||||||
|
overflow: hidden; // 防列内容撑出横向滚动
|
||||||
}
|
}
|
||||||
|
|
||||||
&__about {
|
&__about {
|
||||||
flex: 0 1 625px; // x155 → 780
|
flex: 0 1 625px; // x155 → 780
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__brand {
|
&__brand {
|
||||||
.flex(row, flex-start);
|
.flex(row, flex-start);
|
||||||
margin-bottom: 20px; // 品牌名盒底 2037 → 描述 2057
|
margin-bottom: 20px; // 品牌名盒底 2037 → 描述 2057
|
||||||
margin-left: 45px; // 设计:品牌名 @x200,列起点 x155
|
margin-left: 45px; // 设计:品牌名 @x200,列起点 x155
|
||||||
}
|
}
|
||||||
|
|
||||||
&__name {
|
&__name {
|
||||||
@@ -122,23 +131,32 @@ const coreBusiness = [
|
|||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
line-height: 23px; // 设计 625×115 五行
|
line-height: 23px; // 设计 625×115 五行
|
||||||
}
|
}
|
||||||
|
|
||||||
&__col {
|
&__col {
|
||||||
.flex(column, flex-start, flex-start); // 第三参必须显式:mixin 默认 center 会把列项水平居中
|
.flex(column, flex-start, flex-start); // 第三参必须显式:mixin 默认 center 会把列项水平居中
|
||||||
gap: 0;
|
gap: 0;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
|
|
||||||
// 设计列位:核心业务 @922(列宽 193)、快速导航 @1257(80)、联系我们 @1511(253)
|
// 设计列位:核心业务 @922(列宽 193)、快速导航 @1257(80)、联系我们 @1511(253)
|
||||||
// 用 modifier 类定位;:nth-of-type 按标签序号计数(about 也算 div),会整体错位一档
|
// 用 modifier 类定位;:nth-of-type 按标签序号计数(about 也算 div),会整体错位一档
|
||||||
&--core { flex: 0 0 193px; margin-left: 142px; }
|
&--core {
|
||||||
&--nav { flex: 0 0 80px; margin-left: 142px; }
|
flex: 0 0 193px;
|
||||||
&--contact { flex: 0 0 253px; margin-left: 174px; }
|
margin-left: 142px;
|
||||||
|
}
|
||||||
|
&--nav {
|
||||||
|
flex: 0 0 80px;
|
||||||
|
margin-left: 142px;
|
||||||
|
}
|
||||||
|
&--contact {
|
||||||
|
flex: 0 0 253px;
|
||||||
|
margin-left: 174px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&__title {
|
&__title {
|
||||||
margin-bottom: 20px; // 标题盒底 2037 → 列表 2057
|
margin-bottom: 20px; // 标题盒底 2037 → 列表 2057
|
||||||
font-size: 28px;
|
font-size: 28px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
line-height: 41px;
|
line-height: 41px;
|
||||||
@@ -149,7 +167,7 @@ const coreBusiness = [
|
|||||||
&__link {
|
&__link {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
line-height: 23px; // 设计 5 项 115 高
|
line-height: 23px; // 设计 5 项 115 高
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: color 0.2s;
|
transition: color 0.2s;
|
||||||
@@ -170,7 +188,7 @@ const coreBusiness = [
|
|||||||
width: 867px;
|
width: 867px;
|
||||||
max-width: calc(100% - 32px);
|
max-width: calc(100% - 32px);
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
padding-bottom: 87px; // ICP 盒底 2336 → 页脚底 2423
|
padding-bottom: 20px; // ICP 盒底 2336 → 页脚底 2423
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -179,11 +197,11 @@ const coreBusiness = [
|
|||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
line-height: 23px;
|
line-height: 23px;
|
||||||
white-space: nowrap; // 设计稿单行(867×23),回退字体偏宽防折行
|
white-space: nowrap; // 设计稿单行(867×23),回退字体偏宽防折行
|
||||||
color: @white;
|
color: @white;
|
||||||
|
|
||||||
&--icp {
|
&--icp {
|
||||||
margin-top: 16px; // © 盒底 2297 → ICP 2313
|
margin-top: 16px; // © 盒底 2297 → ICP 2313
|
||||||
margin-left: 315px;
|
margin-left: 315px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -24,9 +24,7 @@ const FALLBACK_ILL: Record<BusinessType, string> = {
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<section class="home-business">
|
<section class="home-business">
|
||||||
<h3 class="home-business__title">
|
<h3 class="home-business__title">业务服务</h3>
|
||||||
业务服务
|
|
||||||
</h3>
|
|
||||||
|
|
||||||
<div class="home-business__grid">
|
<div class="home-business__grid">
|
||||||
<RouterLink
|
<RouterLink
|
||||||
@@ -41,7 +39,7 @@ const FALLBACK_ILL: Record<BusinessType, string> = {
|
|||||||
class="home-business__ill"
|
class="home-business__ill"
|
||||||
:src="line.icon || FALLBACK_ILL[line.id]"
|
:src="line.icon || FALLBACK_ILL[line.id]"
|
||||||
:alt="line.name"
|
:alt="line.name"
|
||||||
>
|
/>
|
||||||
<!-- 设计稿卡片右上角选择圆环(31×31) -->
|
<!-- 设计稿卡片右上角选择圆环(31×31) -->
|
||||||
<span class="home-business__check" aria-hidden="true" />
|
<span class="home-business__check" aria-hidden="true" />
|
||||||
<h4 class="home-business__name">
|
<h4 class="home-business__name">
|
||||||
@@ -64,7 +62,7 @@ const FALLBACK_ILL: Record<BusinessType, string> = {
|
|||||||
background: @white;
|
background: @white;
|
||||||
|
|
||||||
&__title {
|
&__title {
|
||||||
margin: 0 0 47px; // 标题盒底 1114 → 卡顶 1161
|
margin: 0 0 47px; // 标题盒底 1114 → 卡顶 1161
|
||||||
// 设计稿栏目标题 36px / 700 / #121212
|
// 设计稿栏目标题 36px / 700 / #121212
|
||||||
font-size: @font-size-xxl;
|
font-size: @font-size-xxl;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
@@ -89,7 +87,9 @@ const FALLBACK_ILL: Record<BusinessType, string> = {
|
|||||||
border: 1px solid @home-business-border;
|
border: 1px solid @home-business-border;
|
||||||
border-radius: @radius-base;
|
border-radius: @radius-base;
|
||||||
background: @white;
|
background: @white;
|
||||||
transition: transform 0.2s, box-shadow 0.2s;
|
transition:
|
||||||
|
transform 0.2s,
|
||||||
|
box-shadow 0.2s;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
box-shadow: @shadow-base;
|
box-shadow: @shadow-base;
|
||||||
|
|||||||
@@ -27,15 +27,61 @@ const router = useRouter()
|
|||||||
const dialogVisible = ref(false)
|
const dialogVisible = ref(false)
|
||||||
|
|
||||||
/** 设计稿固定入口名目(设计稿没有的接口入口不展示) */
|
/** 设计稿固定入口名目(设计稿没有的接口入口不展示) */
|
||||||
const DESIGN_NAMES = ['工单需求池', '案例库管理', '客服工作台', '合同台账', '财务台账']
|
const DESIGN_NAMES = [
|
||||||
|
'工单需求池',
|
||||||
|
'案例库管理',
|
||||||
|
'客服工作台',
|
||||||
|
'合同台账',
|
||||||
|
'财务台账',
|
||||||
|
]
|
||||||
|
|
||||||
/** 接口不可用时的默认入口(与设计稿五项一致,tone 对应设计稿五色) */
|
/** 接口不可用时的默认入口(与设计稿五项一致,tone 对应设计稿五色) */
|
||||||
const FALLBACK_QUICK: PortalEntryCard[] = [
|
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,
|
||||||
{ id: 0, label: '客服工作台', route: '/service', groupType: '1', icon: '', isImage: false, tone: 'green' },
|
label: '工单需求池',
|
||||||
{ id: 0, label: '合同台账', route: '/contract', groupType: '1', icon: '', isImage: false, tone: 'blue' },
|
route: '/demand',
|
||||||
{ id: 0, label: '财务台账', route: '/finance/bills', groupType: '1', icon: '', isImage: false, tone: 'amber' },
|
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 方块(含底色与白色图案),按入口名映射 */
|
/** 设计稿切图:蓝湖整稿 97×97 方块(含底色与白色图案),按入口名映射 */
|
||||||
@@ -52,14 +98,17 @@ const knownPaths = new Set(router.getRoutes().map((item) => item.path))
|
|||||||
|
|
||||||
/** 卡片展示的入口:接口数据按设计稿名目过滤,最多 5 个 */
|
/** 卡片展示的入口:接口数据按设计稿名目过滤,最多 5 个 */
|
||||||
const entries = computed<PortalEntryCard[]>(() => {
|
const entries = computed<PortalEntryCard[]>(() => {
|
||||||
const list = toPortalEntryCards(quickEntries.value)
|
const list = toPortalEntryCards(quickEntries.value).filter((card) =>
|
||||||
.filter((card) => DESIGN_NAMES.includes(card.label))
|
DESIGN_NAMES.includes(card.label),
|
||||||
|
)
|
||||||
return (list.length > 0 ? list : FALLBACK_QUICK).slice(0, 5)
|
return (list.length > 0 ? list : FALLBACK_QUICK).slice(0, 5)
|
||||||
})
|
})
|
||||||
|
|
||||||
/** 入口图:接口 iconUrl 图案优先,否则设计稿切图 */
|
/** 入口图:接口 iconUrl 图案优先,否则设计稿切图 */
|
||||||
function tileSrc(card: PortalEntryCard): string {
|
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,其次同名默认入口,最后回首页 */
|
/** 解析可跳转路径:优先后端 route,其次同名默认入口,最后回首页 */
|
||||||
@@ -80,9 +129,7 @@ function onMore(): void {
|
|||||||
<template>
|
<template>
|
||||||
<section class="home-quick">
|
<section class="home-quick">
|
||||||
<div class="home-quick__head">
|
<div class="home-quick__head">
|
||||||
<h3 class="home-quick__title">
|
<h3 class="home-quick__title">快捷入口</h3>
|
||||||
业务服务
|
|
||||||
</h3>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="home-quick__list">
|
<div class="home-quick__list">
|
||||||
@@ -93,15 +140,44 @@ function onMore(): void {
|
|||||||
class="home-quick__item"
|
class="home-quick__item"
|
||||||
>
|
>
|
||||||
<!-- 设计稿:97×97 彩色方块 + 白色图案(蓝湖整稿切图),接口 iconUrl 图案优先 -->
|
<!-- 设计稿: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>
|
<span class="home-quick__label">{{ entry.label }}</span>
|
||||||
</RouterLink>
|
</RouterLink>
|
||||||
|
|
||||||
<!-- 设计稿:双箭头图标与入口方块行垂直居中(@y875, 32×32,距末位方块 20) -->
|
<!-- 设计稿:双箭头图标与入口方块行垂直居中(@y875, 32×32,距末位方块 20) -->
|
||||||
<button class="home-quick__more" type="button" aria-label="更多应用" @click="onMore">
|
<button
|
||||||
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
class="home-quick__more"
|
||||||
<path d="M8 6 L18 16 L8 26" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
|
type="button"
|
||||||
<path d="M17 6 L27 16 L17 26" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
|
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>
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
@@ -143,7 +219,7 @@ function onMore(): void {
|
|||||||
// 设计稿入口图标间距(图标 97 + 间隙 30);方块行顶 y841 = 卡顶 +87
|
// 设计稿入口图标间距(图标 97 + 间隙 30);方块行顶 y841 = 卡顶 +87
|
||||||
gap: 30px;
|
gap: 30px;
|
||||||
margin-top: 17px;
|
margin-top: 17px;
|
||||||
flex-wrap: wrap; // 卡片被收缩时换行,避免卡内溢出
|
flex-wrap: wrap; // 卡片被收缩时换行,避免卡内溢出
|
||||||
}
|
}
|
||||||
|
|
||||||
&__item {
|
&__item {
|
||||||
|
|||||||
Reference in New Issue
Block a user