PC 首页设计样

PC 首页设计样式分析

1. 整体架构

首页采用 动态组件渲染 模式，通过 appStore.pageIndex 从后台获取配置数据，按顺序渲染以下组件：

组件文件	功能
`header.vue`	顶部导航栏（粘性定位）
`title.vue`	主视觉区/Hero Banner
`entrance.vue`	功能入口卡片网格
`intro.vue`	功能介绍展示区
`guide.vue`	底部导航/二维码区

2. 布局样式

布局容器 (single-row.vue)：

最小宽度：1200px

全屏背景图：layout_bg.png

使用 Element Plus 的 el-container 布局

内容区域：

最大宽度限制：max-w-[1200px] mx-auto

水平居中布局

3. 主要组件样式详解

3.1 Header 导航栏

3.2 Title 主视觉区 (Hero)

3.3 Entrance 功能入口卡片

网格布局：grid-template-columns: repeat(N, minmax(0, 1fr))

支持配置显示列数

3.4 Intro 介绍区

3.5 Guide 底部区

4. 全局设计变量 (CSS Variables)

5. 特色设计元素

设计元素	实现方式
渐变色	`linear-gradient(90deg, #54c6ee 0%, #3c5efd 100%)`
悬停上浮	`transform: translateY(-10px)` + `transition: all 0.5s`
打字机动画	`<typing>` 组件
胶囊按钮	`border-radius: 30px` + 内嵌白色圆形图标
卡片阴影	`box-shadow: 0 5px 10px var(--el-color-primary-light-9)`
渐变文字	`-webkit-background-clip: text`

6. 响应式设计

7. 设计风格总结

风格定位：现代企业级 SaaS 风格

配色方案：蓝色渐变主色调 (#54c6ee → #3c5efd)

交互特点：平滑过渡动画、悬停反馈明显

布局特点：居中布局、最大宽度 1200px、响应式网格

PC 首页设计样

PC 首页设计样式分析#

1. 整体架构#

2. 布局样式#

3. 主要组件样式详解#

3.1 Header 导航栏#

3.2 Title 主视觉区 (Hero)#

3.3 Entrance 功能入口卡片#

3.4 Intro 介绍区#

3.5 Guide 底部区#

4. 全局设计变量 (CSS Variables)#

5. 特色设计元素#

6. 响应式设计#

7. 设计风格总结#