prototype_design/src/views/HomeView.vue

<template>
  <div class="container home">
    <main>
<section class="carousel">
  <h2>热门商品轮播</h2>
<div class="carousel-images" :style="{ transform: `translateX(-${currentIndex * 100}%)` }">
  <div v-for="(image, index) in images" :key="index" :style="{ width: '100%', height: '100%' }">
    <img :src="image.src" :alt="image.alt" style="width: 100%; height: 100%;" />
  </div>
</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, onMounted } from 'vue'

import projectView from '../assets/img/project_view.png';
import promptView from '../assets/img/prompt_view.png';
import uploadView from '../assets/img/upload_view.png';

const images = [
  { src: projectView, alt: 'Product 1' },
  { src: promptView, alt: 'Product 2' },
  { src: uploadView, alt: 'Product 3' }
]

const currentIndex = ref(0)

const nextImage = () => {
  currentIndex.value = (currentIndex.value + 1) % images.length
}

onMounted(() => {
  setInterval(nextImage, 2000)
})

const addToCart = (product) => {
  // 在这里实现添加到购物车的逻辑
}
</script>
<style scoped>
.carousel-images {
  display: flex;
  overflow: hidden;
  transition: transform 0.5s ease-in-out;
  width: 100%; /* 修改为100%以适应父容器 */
  height: 400px; /* 确保容器有足够的高度 */
  position: relative; /* 添加相对定位 */
}

.carousel-images img {
  width: 100%; /* 每张图片占据整个容器的宽度 */
  height: 100%; /* 图片高度占满容器高度 */
  object-fit: cover; /* 确保图片完全覆盖容器 */
  position: absolute; /* 添加绝对定位 */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
</style>