feat:初始化工程

src/components/SkillsSection.vue

@@ -0,0 +1,162 @@
+<template>
+  <section :id="sectionId" class="skills-section">
+    <div class="container">
+      <div class="section-title animate__animated animate__fadeIn">
+        <h2>专业技能</h2>
+        <p>多年的开发经验使我掌握了多种前端技术和工具，能够独立完成从设计到部署的全流程开发工作。</p>
+      </div>
+
+      <div class="skills-grid">
+        <div
+            v-for="(skill, index) in skills"
+            :key="index"
+            class="skill-card animate-item"
+            :data-delay="index * 150"
+        >
+          <div class="skill-icon">
+            <i :class="`fa ${skill.icon}`"></i>
+          </div>
+          <h3 class="skill-title">{{ skill.title }}</h3>
+          <p class="skill-description">{{ skill.description }}</p>
+          <div class="skill-tags">
+            <el-tag
+                v-for="(tag, i) in skill.tags"
+                :key="i"
+                type="info"
+                effect="light"
+            >
+              {{ tag }}
+            </el-tag>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup>
+import { defineProps, onMounted } from 'vue'
+
+// 接收技能数据和sectionId
+const props = defineProps({
+  skills: {
+    type: Array,
+    required: true
+  },
+  sectionId: {
+    type: String,
+    required: true
+  }
+})
+
+// 监听滚动，实现元素进入视口时的动画，离开时移除动画
+onMounted(() => {
+  const observer = new IntersectionObserver((entries) => {
+    entries.forEach((entry) => {
+      const delay = entry.target.getAttribute('data-delay')
+      const delayTime = delay ? parseInt(delay) : 0
+
+      if (entry.isIntersecting) {
+        // 元素进入视口，添加动画类
+        setTimeout(() => {
+          entry.target.classList.add('animate-visible', 'animate__animated', 'animate__fadeInUp')
+        }, delayTime)
+      } else {
+        // 元素离开视口，移除动画类（以便下次进入时重新触发）
+        entry.target.classList.remove('animate-visible', 'animate__animated', 'animate__fadeInUp')
+      }
+    })
+  }, { threshold: 0.1 })
+
+  // 观察所有技能卡片
+  document.querySelectorAll('.skill-card').forEach((card) => {
+    observer.observe(card)
+  })
+
+  return () => observer.disconnect()
+})
+</script>
+
+<style lang="scss" scoped>
+.skills-section {
+  padding: 8rem 0;
+  background-color: white;
+  /* 增加高度让滚动效果更明显 */
+  min-height: 100vh;
+
+  .container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 1rem;
+  }
+
+  .skills-grid {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 2rem;
+
+    @media (min-width: 768px) {
+      grid-template-columns: repeat(2, 1fr);
+    }
+
+    @media (min-width: 1024px) {
+      grid-template-columns: repeat(3, 1fr);
+    }
+  }
+
+  .skill-card {
+    background-color: #f9fafb;
+    border-radius: 10px;
+    padding: 2rem;
+    transition: all 0.3s ease;
+    /* 初始状态设置为不可见 */
+    opacity: 0;
+    transform: translateY(20px);
+
+    &.animate-visible {
+      opacity: 1;
+      transform: translateY(0);
+    }
+
+    &:hover {
+      transform: translateY(-5px);
+      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
+    }
+
+    .skill-icon {
+      width: 60px;
+      height: 60px;
+      border-radius: 10px;
+      background-color: rgba(64, 158, 255, 0.1);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-bottom: 1.5rem;
+
+      i {
+        font-size: 1.5rem;
+        color: #409EFF;
+      }
+    }
+
+    .skill-title {
+      font-size: 1.25rem;
+      font-weight: 600;
+      margin-bottom: 1rem;
+      color: #333;
+    }
+
+    .skill-description {
+      color: #666;
+      margin-bottom: 1.5rem;
+      line-height: 1.6;
+    }
+
+    .skill-tags {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 0.5rem;
+    }
+  }
+}
+</style>