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

feat ui设计稿bug修复

Browse Source
This commit is contained in:
Ironsp
2026-10-01 10:53:13 +08:00
parent 9ab6253c81
commit 1601bdd82c
89 changed files with 4741 additions and 3652 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
src/components/AppFooter.vue
View File

@@ -3,12 +3,13 @@ import { useSiteStore } from '@/stores/modules/site'
const siteStore = useSiteStore()
// 设计稿快速导航列原文：首页 / 案例中心 / 需求提报 / 下载 APP / 帮助中心
const quickLinks = [
{ label: '首页', path: '/' },
{ label: '案例库', path: '/cases' },
{ label: '案例中心', path: '/cases' },
{ label: '需求提报', path: '/demand' },
{ label: '下载 APP', path: '/' },
{ label: '消息中心', path: '/message' },
{ label: '帮助中心', path: '/profile/help' },
]
const coreBusiness = [
@@ -22,7 +23,7 @@ const coreBusiness = [
<template>
<footer class="app-footer">
<div class="app-footer__inner container">
<div class="app-footer__inner">
<div class="app-footer__about">
<div class="app-footer__brand">
<span class="app-footer__name">虫子智造</span>
@@ -32,7 +33,7 @@ const coreBusiness = [
</p>
</div>
<div class="app-footer__col">
<div class="app-footer__col app-footer__col--core">
<h4 class="app-footer__title">
核心业务
</h4>
@@ -43,7 +44,7 @@ const coreBusiness = [
>{{ item }}</span>
</div>
<div class="app-footer__col">
<div class="app-footer__col app-footer__col--nav">
<h4 class="app-footer__title">
快速导航
</h4>
@@ -57,7 +58,7 @@ const coreBusiness = [
</RouterLink>
</div>
<div class="app-footer__col">
<div class="app-footer__col app-footer__col--contact">
<h4 class="app-footer__title">
联系我们
</h4>
@@ -72,7 +73,7 @@ const coreBusiness = [
<p class="app-footer__legal">
©2026 虫子智造 研发智造一体化平台 版权所有｜自营研发生产平台，所有项目源码、图纸受平台知识产权保护，禁止盗用、复制、二次分发
</p>
<p class="app-footer__legal">
<p class="app-footer__legal app-footer__legal--icp">
{{ siteStore.siteInfo.icp }} | {{ siteStore.siteInfo.police }}
</p>
</div>
@@ -80,54 +81,76 @@ const coreBusiness = [
</template>
<style lang="less" scoped>
// 设计稿页脚 1920×481（首页稿 y1942→2423）：
// 列区 y1996 起（页脚顶 +54），四列 x155/922/1257/1511，列宽 625/193/80/253
// 品牌名「虫子智造」@x200（相对列缩进 45），描述 @x155
// 版权区：©行 @x526（867 盒在 1920 画布居中）、ICP 行 @x841（相对 867 盒缩进 315），均左对齐
.app-footer {
background: @footer-bg;
color: @white;
&__inner {
.flex(row, space-between, flex-start);
gap: @spacing-xl;
padding-top: @spacing-xxl;
padding-left: @footer-inset;
padding-right: @footer-inset;
.flex(row, flex-start, flex-start);
width: 100%;
max-width: 1920px;
height: 332px; // 页脚顶 → © 行（y1942→2274）
box-sizing: border-box;
padding-top: 54px;
padding-left: clamp(@spacing-base, calc((100% - 1609px) / 2), 155px); // 设计内容 x155→1764 = 1609 宽
overflow: hidden; // 防列内容撑出横向滚动
}
&__about {
max-width: 480px;
flex: 0 1 625px; // x155 → 780
min-width: 0;
}
&__brand {
.flex(row, flex-start);
margin-bottom: @spacing-base;
margin-bottom: 20px; // 品牌名盒底 2037 → 描述 2057
margin-left: 45px; // 设计：品牌名 @x200，列起点 x155
}
&__name {
font-size: @font-size-title;
font-size: 28px;
font-weight: 500;
line-height: 41px;
color: @white;
}
&__desc {
margin-top: @spacing-sm;
font-size: @font-size-sm;
line-height: 1.8;
margin-top: 0;
font-size: 16px;
font-weight: 500;
line-height: 23px; // 设计 625×115 五行
}
&__col {
.flex(column, flex-start);
gap: @spacing-sm;
.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; }
}
&__title {
margin-bottom: @spacing-sm;
font-size: @font-size-title;
margin-bottom: 20px; // 标题盒底 2037 → 列表 2057
font-size: 28px;
font-weight: 500;
line-height: 41px;
white-space: nowrap;
color: @white;
}
&__link {
font-size: @font-size-sm;
line-height: 1.5;
font-size: 16px;
font-weight: 500;
line-height: 23px; // 设计 5 项 115 高
white-space: nowrap;
cursor: pointer;
transition: color 0.2s;
@@ -137,20 +160,32 @@ const coreBusiness = [
}
&__contact {
font-size: @font-size-sm;
line-height: 1.8;
font-size: 16px;
font-weight: 500;
line-height: 23px;
}
// 版权 / 备案：设计稿为页脚底部居中两行
// 版权区：867 盒在画布居中（1920 视口 → x526），盒内文字左对齐；ICP 缩进 315（→ x841）
&__bottom {
padding: @spacing-xxl @footer-inset;
text-align: center;
width: 867px;
max-width: calc(100% - 32px);
margin: 0 auto;
padding-bottom: 87px; // ICP 盒底 2336 → 页脚底 2423
text-align: left;
}
&__legal {
font-size: @font-size-sm;
line-height: 1.8;
margin: 0;
font-size: 14px;
font-weight: 500;
line-height: 23px;
white-space: nowrap; // 设计稿单行（867×23），回退字体偏宽防折行
color: @white;
&--icp {
margin-top: 16px; // © 盒底 2297 → ICP 2313
margin-left: 315px;
}
}
}
</style>