prototype_design/src/views/HomeView.vue

<template>
  <div class="container home">
    <header>
      <nav>
        <ul>
          <li><router-link to="/">首页</router-link></li>
          <li><router-link to="/products">全部商品</router-link></li>
          <li><router-link to="/cart">购物车</router-link></li>
          <li><router-link to="/orders">我的订单</router-link></li>
          <li><router-link to="/profile">个人中心</router-link></li>
        </ul>
      </nav>
    </header>
    <main>
      <section class="carousel">
        <h2>热门商品轮播</h2>
        <div class="carousel-images">
          <img src="@/assets/img/project_view.png" alt="Product 1" />
          <img src="@/assets/img/prompt_view.png" alt="Product 2" />
          <img src="@/assets/img/upload_view.png" alt="Product 3" />
        </div>
      </section>
      <section class="featured-products">
        <h2>推荐商品</h2>
        <div class="product-list">
          <div class="product-item">
            <img src="@/assets/img/project_view.png" alt="Product 1" />
            <p>产品1 - 描述</p>
            <button @click="addToCart({ id: 1, name: '产品1', description: '这是产品1的描述', price: '100元' })">加入购物车</button>
          </div>
          <div class="product-item">
            <img src="@/assets/img/prompt_view.png" alt="Product 2" />
            <p>产品2 - 描述</p>
            <button @click="addToCart({ id: 2, name: '产品2', description: '这是产品2的描述', price: '200元' })">加入购物车</button>
          </div>
          <div class="product-item">
            <img src="@/assets/img/upload_view.png" alt="Product 3" />
            <p>产品3 - 描述</p>
            <button @click="addToCart({ id: 3, name: '产品3', description: '这是产品3的描述', price: '300元' })">加入购物车</button>
          </div>
        </div>
      </section>
      <section class="categories">
        <h2>商品分类</h2>
        <!-- 商品分类导航 -->
      </section>
    </main>
    <footer>
      <p>&copy; 2025 Prototype Design. All rights reserved.</p>
    </footer>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const addToCart = (product) => {
  // 在这里实现添加到购物车的逻辑
}
</script>

<style scoped>
.home {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

header nav ul {
  list-style-type: none;
  padding: 0;
  display: flex;
  justify-content: space-around;
  background-color: #f8f8f8;
}

header nav ul li a {
  text-decoration: none;
  color: #333;
  padding: 10px 20px;
  display: block;
}

header nav ul li a:hover {
  background-color: #ddd;
}

main {
  flex: 1;
  padding: 20px;
}

.carousel,
.featured-products,
.categories {
  margin-bottom: 20px;
}

.carousel-images {
  display: flex;
  overflow-x: scroll;
  white-space: nowrap;
}

.carousel-images img {
  width: 300px;
  height: auto;
  margin-right: 10px;
}

.product-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.product-item {
  border: 1px solid #ddd;
  padding: 10px;
  width: 200px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.product-item img {
  width: 100%;
  height: auto;
}

.product-item p {
  margin-top: 5px;
}

footer {
  text-align: center;
  padding: 10px;
  background-color: #f8f8f8;
}
</style>