- 技术博客
- 电商系统前后端开发（Vue+SSM）(7) - vue 结合 bootstrap搭建首页
1 搭建首页
https://www.bootcss.com/
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template
</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
.product {
width: 300px;
height: 400px;
border: 1px solid black;
display: inline-block;
margin-left: 60px;
margin-top: 20px;
overflow: hidden;
}
</style>
</head>
<body>
<div id="app" class="container">
<div>
<ul class="nav nav-pills">
<li v-for="nav in navigateData" role="presentation"><a href="#">{{nav}}
</a></li>
</ul>
</div>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div v-for="(myimg,i) in banner_imgs" :key="i" :class="i==0? 'active':''" class="item">
<img style="height: 300px;width: 100%" :src="myimg" alt="...">
<div class="carousel-caption">
...
</div>
</div>
</div>
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous
</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next
</span>
</a>
</div>
<div>
<div>
<div v-for="product in products" class="product">
<img :src="product.pimg" width="100%"/><br/>
<p>{{product.pname}}
<br/>
{{product.price}}
</p>
</div>
</div>
<div></div>
<div></div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
navigateData: ['首页', '最新商品', '搜索', '购物车', '我的订单'],
banner_imgs: [
"../../static/img/1.jpg",
"../../static/img/2.jpg",
"../../static/img/3.jpg",
"../../static/img/4.jpg",
"../../static/img/5.jpg",
],
products: [
{
pname: "iphone 11",
pimg: "../../static/img/iphone11.jpg",
price: 5899,
},
{
pname: "huawei P40",
pimg: "../../static/img/p40.jpg",
price: 6498,
},
{
pname: "xiaomi 10",
pimg: "../../static/img/mi10.jpg",
price: 5999,
},
]
}
})
</script>
</body>
</html>
