首页 前端知识 Vue 2 实战:手把手教你打造响应式公司官网,附带滚动视差效果」 「前端新手必看:Vue 2 实现响应式官网,完整代码 滚动视差教程」 「从零开始:用 Vue 2 构建一个炫酷的响应式公司官网」

Vue 2 实战:手把手教你打造响应式公司官网,附带滚动视差效果」 「前端新手必看:Vue 2 实现响应式官网,完整代码 滚动视差教程」 「从零开始:用 Vue 2 构建一个炫酷的响应式公司官网」

2025-03-10 12:03:39 前端知识 前端哥 409 839 我要收藏

效果图

在这里插入图片描述


🌟【定制化开发服务,让您的项目领先一步】🌟

如有需求,直接私信留下您的联系方式。谢谢。
我的邮箱:2351598671@qq.com


完整代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>响应式公司官网</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
  <style>
    body, html {
      margin: 0;
      padding: 0;
      font-family: Arial, sans-serif;
    }
    .parallax {
      height: 100vh;
      background-attachment: fixed;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    }
    .section {
      padding: 50px 20px;
      text-align: center;
    }
    .section h2 {
      margin-bottom: 20px;
    }
    .section p {
      max-width: 800px;
      margin: 0 auto;
    }
    .grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 20px;
      padding: 20px;
    }
    .grid img {
      width: 100%;
      height: auto;
    }
    .footer {
      background: #333;
      color: white;
      text-align: center;
      padding: 20px;
    }
  </style>
</head>
<body>
  <div id="app">
    <div class="parallax" :style="{ backgroundImage: 'url(' + sections[0].image + ')' }">
      <h1>{{ companyName }}</h1>
    </div>

    <div v-for="(section, index) in sections" :key="index" class="section">
      <h2>{{ section.title }}</h2>
      <p>{{ section.content }}</p>
      <div class="grid">
        <img v-for="(img, i) in section.images" :key="i" :src="img" :alt="'Image ' + (i + 1)">
      </div>
    </div>

    <div class="footer">
      <p>&copy; {{ companyName }} {{ new Date().getFullYear() }}</p>
    </div>
  </div>

  <script>
    new Vue({
      el: '#app',
      data() {
        return {
          companyName: '响应式公司官网',
          sections: [
            {
              title: '关于我们',
              content: '我们是一家致力于提供高质量服务的公司,专注于创新和技术。',
              image: 'https://via.placeholder.com/1200x800?text=关于我们',
              images: [
                'https://via.placeholder.com/200x150?text=图片1',
                'https://via.placeholder.com/200x150?text=图片2',
                'https://via.placeholder.com/200x150?text=图片3'
              ]
            },
            {
              title: '我们的服务',
              content: '我们提供广泛的服务,包括Web开发、移动应用开发和云计算解决方案。',
              image: 'https://via.placeholder.com/1200x800?text=我们的服务',
              images: [
                'https://via.placeholder.com/200x150?text=图片4',
                'https://via.placeholder.com/200x150?text=图片5',
                'https://via.placeholder.com/200x150?text=图片6'
              ]
            },
            {
              title: '我们的团队',
              content: '我们的团队由经验丰富的专业人士组成,致力于为客户提供最佳解决方案。',
              image: 'https://via.placeholder.com/1200x800?text=我们的团队',
              images: [
                'https://via.placeholder.com/200x150?text=图片7',
                'https://via.placeholder.com/200x150?text=图片8',
                'https://via.placeholder.com/200x150?text=图片9'
              ]
            }
          ]
        };
      }
    });
  </script>
</body>
</html>

转载请注明出处或者链接地址:https://www.qianduange.cn//article/23115.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!