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

82
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,22 +97,27 @@ 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 宽
overflow: hidden; // 防列内容撑出横向滚动
padding-top: 30px;
padding-left: clamp(
@spacing-base,
calc((100% - 1609px) / 2),
155px
); // 设计内容 x155→1764 = 1609 宽
overflow: hidden; // 防列内容撑出横向滚动
}
&__about {
flex: 0 1 625px; // x155 → 780
flex: 0 1 625px; // x155 → 780
min-width: 0;
}
&__brand {
.flex(row, flex-start);
margin-bottom: 20px; // 品牌名盒底 2037 → 描述 2057
margin-left: 45px; // 设计：品牌名 @x200，列起点 x155
margin-bottom: 20px; // 品牌名盒底 2037 → 描述 2057
margin-left: 45px; // 设计：品牌名 @x200，列起点 x155
}
&__name {
@@ -122,23 +131,32 @@ const coreBusiness = [
margin-top: 0;
font-size: 16px;
font-weight: 500;
line-height: 23px; // 设计 625×115 五行
line-height: 23px; // 设计 625×115 五行
}
&__col {
.flex(column, flex-start, flex-start); // 第三参必须显式：mixin 默认 center 会把列项水平居中
.flex(column, flex-start, flex-start); // 第三参必须显式：mixin 默认 center 会把列项水平居中
gap: 0;
min-width: 0;
// 设计列位：核心业务 @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 {
margin-bottom: 20px; // 标题盒底 2037 → 列表 2057
margin-bottom: 20px; // 标题盒底 2037 → 列表 2057
font-size: 28px;
font-weight: 500;
line-height: 41px;
@@ -149,7 +167,7 @@ const coreBusiness = [
&__link {
font-size: 16px;
font-weight: 500;
line-height: 23px; // 设计 5 项 115 高
line-height: 23px; // 设计 5 项 115 高
white-space: nowrap;
cursor: pointer;
transition: color 0.2s;
@@ -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;
}
@@ -179,11 +197,11 @@ const coreBusiness = [
font-size: 14px;
font-weight: 500;
line-height: 23px;
white-space: nowrap; // 设计稿单行（867×23），回退字体偏宽防折行
white-space: nowrap; // 设计稿单行（867×23），回退字体偏宽防折行
color: @white;
&--icp {
margin-top: 16px; // © 盒底 2297 → ICP 2313
margin-top: 16px; // © 盒底 2297 → ICP 2313
margin-left: 315px;
}
}