仿Apple官网设计风格

苹果风格实现详解

1. 设计理念与苹果风格分析

苹果风格（Apple Style）以简洁、现代、明亮、层次分明为核心，强调：

• 清新柔和的渐变色背景
• 大量留白与圆角卡片
• 主色蓝色系点缀，icon/按钮/标题高亮
• 细腻的阴影和毛玻璃效果
• 平滑的动画和交互反馈

本页面以苹果官网为灵感，结合 Vue3 + Ant Design Vue 组件，打造极致流畅的现代感首页。

2. 主要配色与分区布局

主色与辅助色

• 主色：#0071e3（Apple 蓝）、#2997ff（亮蓝）
• 辅色：#f5f6fa（淡灰白）、#e3f0ff（淡蓝）、#fafdff（极浅蓝）

分区布局

• 主背景：淡蓝渐变，提升页面通透感
• 各 section 用不同浅色或渐变区分，增强层次

.main-view {
  background: linear-gradient(135deg, #fafdff 0%, #e3f0ff 100%);
  margin-bottom: 48px; /* 与底部留白 */
}
.features-section, .domains-section {
  background: linear-gradient(90deg, #fafdff 0%, #e3f0ff 100%);
}
.workflow-section {
  background: #fff;
}
.cta-section {
  background: linear-gradient(90deg, #e3f0ff 0%, #fafdff 100%);
}

3. 卡片与按钮设计

卡片

• 白到淡灰渐变背景，圆角大阴影，hover 时主色描边和高光

.feature-card, .domain-card {
  background: linear-gradient(135deg, #fff 60%, #f5f6fa 100%);
  border: 1.5px solid #e5eaf0;
  box-shadow: 0 12px 48px 0 rgba(0,113,227,0.10);
  border-radius: 32px;
}
.feature-card:hover, .domain-card:hover {
  box-shadow: 0 24px 56px 0 rgba(0,113,227,0.18);
  border: 1.5px solid #2997ff;
  background: linear-gradient(90deg, #fafdff 60%, #e3f0ff 100%);
}

按钮

• 主色蓝渐变，圆角高光，hover 有轻微放大和阴影

.hero-actions .ant-btn-primary,
.cta-section .ant-btn-primary {
  background: linear-gradient(90deg, #0071e3 0%, #2997ff 100%);
  border: none;
  color: #fff !important;
}

4. 标题与 icon 高亮

主标题与分区标题

• 主色蓝渐变文字，配合浅色阴影，突出品牌感

.hero-title, .section-title {
  background: linear-gradient(90deg, #0071e3 0%, #2997ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #0071e3;
  text-shadow: 0 2px 8px #fafdff, 0 1px 0 #fff;
}

icon

• 主色蓝渐变，配合阴影，视觉统一

.feature-icon, .domain-icon {
  color: #2997ff !important;
  background: linear-gradient(90deg, #0071e3 0%, #2997ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

5. 动画与交互细节

IntersectionObserver 动画

• 使用自定义指令 v-intersect，当元素进入视口时添加 is-visible 类，触发淡入上移动画

const vIntersect = {
  mounted(el, binding) {
    const observer = new window.IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          if (binding.modifiers.once) observer.disconnect();
          if (typeof binding.value === 'function') {
            binding.value(el, binding);
          } else {
            el.classList.add('is-visible');
          }
        }
      },
      { threshold: 0.15 }
    );
    observer.observe(el);
  }
}

动画样式

• 卡片、步骤等元素初始透明并下移，进入视口后平滑上移并渐显

.fade-in-up {
  opacity: 0;
  transform: translateY(40px) scale(0.98);
}
.fade-in-up.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: opacity 0.7s cubic-bezier(.4,0,.2,1), transform 0.7s cubic-bezier(.4,0,.2,1);
}

6. 代码片段示例

卡片动画指令用法

<div
  class="feature-card fade-in-up"
  v-for="(feature, index) in features"
  :key="index"
  :style="{ animationDelay: (index * 0.12) + 's' }"
  v-intersect.once="onIntersect"
>
  <!-- ... -->
</div>

主标题

<h1 class="hero-title">Interview X</h1>

7. 总结与优化建议

• 苹果风格核心是简洁、明亮、渐变、圆角、主色点缀和细腻动画。
• 通过分区渐变、卡片高光、主色渐变标题/icon、平滑动画，极大提升了页面的现代感和高级感。
• 可根据实际品牌色微调主色系，或根据内容适当调整分区背景色。
• 动画可进一步丰富，如卡片 hover 3D 效果、按钮波纹等。