用vue写一个类似于淘宝的商城主页
时间: 2023-07-01 19:09:37 浏览: 48
好的,下面是一个简单的Vue商城主页示例:
```
<template>
<div class="home">
<div class="banner">
<img src="./assets/banner.jpg">
</div>
<div class="products">
<div class="product" v-for="product in products" :key="product.id">
<img :src="product.img">
<h3>{{ product.name }}</h3>
<p>{{ product.description }}</p>
<div class="price">{{ product.price }}</div>
<button @click="addToCart(product)">Add to cart</button>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
products: [
{
id: 1,
name: 'Product 1',
description: 'This is a description of Product 1',
price: '$10.99',
img: './assets/product1.jpg'
},
{
id: 2,
name: 'Product 2',
description: 'This is a description of Product 2',
price: '$19.99',
img: './assets/product2.jpg'
},
{
id: 3,
name: 'Product 3',
description: 'This is a description of Product 3',
price: '$24.99',
img: './assets/product3.jpg'
}
]
}
},
methods: {
addToCart(product) {
// add product to cart
}
}
}
</script>
<style>
.home {
max-width: 1200px;
margin: 0 auto;
}
.banner img {
width: 100%;
}
.products {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.product {
width: 30%;
margin-bottom: 30px;
text-align: center;
}
.product img {
width: 100%;
}
.product h3 {
font-size: 20px;
margin-top: 10px;
}
.product p {
margin-top: 10px;
}
.price {
font-size: 24px;
margin-top: 10px;
font-weight: bold;
}
button {
margin-top: 10px;
padding: 10px 20px;
background-color: #FF4500;
color: #FFF;
border: 0;
border-radius: 5px;
cursor: pointer;
}
</style>
```
这个示例包括一个banner和一组产品。每个产品都有一个图片、名称、描述和价格,以及一个“添加到购物车”按钮。你可以根据你的需求修改样式和内容。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)