elementui简约大气的公司首页代码

以下是一个简约大气的公司首页代码示例，使用了 Element UI 组件库：

<template>
  <div class="company-homepage">
    <el-header>
      <!-- 头部内容 -->
      <div class="header-content">
        <!-- 公司 Logo -->
        <img src="company-logo.png" alt="Company Logo" class="company-logo">
        
        <!-- 导航菜单 -->
        <el-menu class="menu" mode="horizontal">
          <el-menu-item index="1">首页</el-menu-item>
          <el-menu-item index="2">产品</el-menu-item>
          <el-menu-item index="3">关于我们</el-menu-item>
          <el-menu-item index="4">联系我们</el-menu-item>
        </el-menu>
        
        <!-- 登录/注册按钮 -->
        <div class="login-buttons">
          <el-button type="primary">登录</el-button>
          <el-button type="text">注册</el-button>
        </div>
      </div>
    </el-header>
    
    <el-main>
      <!-- 公司简介 -->
      <div class="company-introduction">
        <h1>欢迎来到我们的公司</h1>
        <p>我们是一家专注于 XXX 的公司，致力于为客户提供优质的解决方案。</p>
        <p>通过创新和合作，我们与客户一起实现共赢，共同发展。</p>
      </div>
      
      <!-- 产品展示 -->
      <div class="product-showcase">
        <h2>我们的产品</h2>
        <div class="product-list">
          <!-- 产品卡片 -->
          <el-card class="product-card" v-for="product in products" :key="product.id">
            <img :src="product.image" alt="Product Image">
            <div class="product-info">
              <h3>{{ product.name }}</h3>
              <p>{{ product.description }}</p>
              <el-button type="primary">了解更多</el-button>
            </div>
          </el-card>
        </div>
      </div>
      
      <!-- 公司信息 -->
      <div class="company-info">
        <h2>关于我们</h2>
        <p>我们是一家致力于 XXX 的公司，专注于为客户提供优质的服务和产品。</p>
        <p>联系方式：xxx-xxxxxxx</p>
        <p>地址：xxxxxxx</p>
      </div>
    </el-main>
    
    <el-footer>
      <!-- 底部内容 -->
      <div class="footer-content">
        <p>版权所有 © 2022 公司名称</p>
        <p>备案号：xxxxx</p>
      </div>
    </el-footer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      products: [
        {
          id: 1,
          name: '产品1',
          description: '产品1的描述',
          image: 'product1.png'
        },
        {
          id: 2,
          name: '产品2',
          description: '产品2的描述',
          image: 'product2.png'
        },
        // 添加更多产品...
      ]
    }
  }
}
</script>

<style scoped>
/* 样式 */
.company-homepage .header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
}

.company-homepage .header-content .company-logo {
  width: 80px;
  height: 80px;
}

.company-homepage .header-content .menu {
  flex: 1;
}

.company-homepage .header-content .login-buttons {
  display: flex;
}

.company-homepage .company-introduction {
  text-align: center;
  padding: 40px;
  background-color: #f5f5f5;
}

.company-homepage .product-showcase {
  padding: 40px;
}

.company-homepage .product-showcase h2 {
  margin-bottom: 20px;
}

.company-homepage .product-showcase .product-list {
  display: flex;
  flex-wrap: wrap;
}

.company-homepage .product-showcase .product-card {
  width: calc(33.33% - 20px);
  margin-bottom: 20px;
}

.company-homepage .company-info {
  text-align: center;
  padding: 40px;
  background-color: #f5f5f5;
}

.company-homepage .company-info h2 {
  margin-bottom: 20px;
}

.company-homepage .footer-content {
  text-align: center;
  padding: 20px;
}
</style>

请注意，这只是一个示例代码，你可以根据自己的需求进行修改和定制。