专栏总纲：《VUE+Django：手把手教你打造自己的电商独立站》专栏写作大纲
上一篇：《VUE+Django：手把手教你打造自己的电商独立站》2.7.2 VUE实现用户注册/登录页面
根据页面设计，我们希望在首页上实现轮播广告和热销商品的展示，效果如下：
在src/page文件夹下创建HomePage.vue，在这里我们可以展示一些轮播的广告图片和热销的商品。加入以下代码。同样，如果你有其它内容需求，可以自行扩充这些代码。
<template> <div> <div> <el-carousel indicator-position="none" :height="imgHeight"> <el-carousel-item v-for="item in 4" :key="item"> <h3>{{ item }}</h3> </el-carousel-item> </el-carousel> </div> <div class="hot-products"> <div class="row"> <div class="product-card"> <img src="product1.png" alt="product 1"> <h3>Product 1</h3> <p>$10.00</p> </div> <div class="product-card"> <img src="product2.png" alt="product 2"> <h3>Product 2</h3> <p>$20.00</p> </div> <div class="product-card"> <img src="product3.png" alt="product 3"> <h3>Product 3</h3> <p>$30.00</p> </div> <div class="product-card"> <img src="product4.png" alt="product 4"> <h3>Product 4</h3> <p>$40.00</p> </div> </div> <div class="row"> <div class="product-card"> <img src="product5.png" alt="product 5"> <h3>Product 5</h3> <p>$50.00</p> </div> <div class="product-card"> <img src="product6.png" alt="product 6"> <h3>Product 6</h3> <p>$50.00</p> </div> <div class="product-card"> <img src="product7.png" alt="product 7"> <h3>Product 7</h3> <p>$50.00</p> </div> <div class="product-card"> <img src="product8.png" alt="product 8"> <h3>Product 8</h3> <p>$49.99</p> </div> </div> </div> </div> </template> <script> export default { data() { return { activeIndex2: '1', products: [ { name: "Product 1", price: 10 }, { name: "Product 2", price: 20 }, { name: "Product 3", price: 30 }, { name: "Product 4", price: 40 }, { name: "Product 5", price: 50 }, { name: "Product 6", price: 60 }, { name: "Product 7", price: 70 }, { name: "Product 8", price: 80 }, ] }; }, props:{ imgHeight:{ type:String, default:'100px' } }, }; </script> <style> /* Add your styles here */ .carousel { display: flex; justify-content: center; align-items: center; height: 300px; overflow: hidden; } .carousel img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .carousel img:hover { transform: scale(1.1); } .hot-products { display: flex; flex-direction: column; align-items: center; margin: 50px 0; } .row { display: flex; justify-content: space-evenly; margin: 20px 0; } .product-card { display: flex; flex-direction: column; align-items: center; width: 200px; padding: 20px; border: 1px solid lightgray; border-radius: 5px; box-shadow: 0px 0px 5px lightgray; margin-left: 16px; } .product-card img { width: 100%; height: 200px; object-fit: cover; margin-bottom: 10px; } .product-card h3 { margin: 0; font-size: 18px; text-align: center; } .product-card p { margin: 10px 0 0; font-size: 16px; font-weight: bold; color: #ff6b6b; } </style>
此处使用的是一些模拟数据，后续讲解服务端功能开发时，我们在对这里的代码进行调整，以便能展示从服务端动态获取的数据。
