携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第25天，点击查看活动详情
在 components 目录下创建 Header.vue 组件、Swiper.vue 组件、Navi.vue 组件、Hot.vue 组件、 Foot.vue 组件；
1.Foot组件
<template>
<div class="foot">
<p><img src="../../public/images/icon-home.png" alt="" /></p>
<p>
<router-link to="/list"
><img src="../../public/images/icon-catergry.png" alt=""
/></router-link>
</p>
<p><img src="../../public/images/icon-cart.png" alt="" /></p>
<p><img src="../../public/images/icon-me.png" alt="" /></p>
</div>
</template>
<script>
export default {};
</script>
<style>
.foot {
height: 2.875rem;
display: flex;
justify-content: space-around;
position: fixed;
bottom: 0;
width: 100vw;
margin-top: 3px;
background: #fff;
}
.foot img {
width: 60px;
height: 2.875rem;
}
</style>
2.Header组件
<template>
<div class="header">
<div class="top">
<div class="imgs"></div>
<div class="header_content">
<p></p>
<p><input type="text" placeholder="请输入你要搜索的内容" /></p>
</div>
<div>
<span>登录</span>
</div>
</div>
</div>
</template>
<script>
export default {
name: "Header",
};
<style scoped>
* {
margin: 0;
padding: 0;
list-style: none;
}
.top {
width: 100vw;
height: 2.5rem;
line-height: 2.5rem;
background: #b01a1e;
display: flex;
align-items: center;
justify-content: space-around;
}
.imgs {
background: url("../../public/images/sprites.png") no-repeat 0 -107px / 200px 200px;
width: 3.625rem;
height: 1.5rem;
}
.header_content {
display: flex;
position: relative;
}
.header_content p:nth-of-type(1) {
background: url("../../public/images/sprites.png") no-repeat -59px -126px /200px
230px;
height: 1.25rem;
width: 1.5625rem;
position: absolute;
top: .625rem;
margin: 0 .3125rem;
}
.header_content p:nth-of-type(2) input {
width: 12.5rem;
height: 1.625rem;
padding-left: 1.625rem;
outline: none;
}
div span {
color: white;
}
</style>
3.Hot组件
（1）、Foot.vue 组件需要在 Home.vue 中注册并使用；
2）、利用 HTML+CSS 进行 Foot.vue 组件的布局，需要的图片在提供的图片文件夹下查找；
3）、在 router/index.js 中配置 Classify.vue 组件，使用 router-link 的方式当点击 Foot.vue 组件中的“分
类”时可以跳转到 Classify.vue 组件，组件整体布局如下图所示：
<template>
<div class="hot">
<div class="hot_top">
<p></p>
<p>超值购</p>
</div>
<div class="hot_bottom">
<div class="bottom_left">
<div>
<img src="../../public/images/cp1.jpg" alt="" />
</div>
</div>
<div class="bottom_right">
<div><img src="../../public/images/cp2.jpg" alt="" /></div>
<div><img src="../../public/images/cp3.jpg" alt="" /></div>
</div>
</div>
</div>
</template>
<script>
export default {};
</script>
<style scoped>
.hot {
border-bottom: 1px solid #ccc;
}
.hot_top {
display: flex;
border: 1px solid #ccc;
height: 1.875rem;
line-height: 1.875rem;
align-items: center;
}
.hot_top p:nth-of-type(1) {
height: 0.625rem;
margin: 0 5px;
}
.hot_bottom {
width: 100vw;
display: flex;
}
.bottom_left {
height: 100%;
width: 50%;
border-right: 1px solid #ccc;
}
.bottom_left div img {
height: 100%;
width: 100%;
}
.bottom_right {
width: 50%;
height: 100%;
}
.bottom_right div:first-child img {
height: 50%;
width: 100%;
border-bottom: 1px solid #ccc;
}
.bottom_right div:last-child img {
width: 100%;
height: 50%;
}
</style>
4.Navi组件
<template>
<div class="navi">
<ul>
<li v-for="(item, index) in list" :key="item.id">
<div>
<img :src="item.imgs" alt="" />
</div>
<div>
<span>{{ item.title }}</span>
</div>
</li>
</ul>
</div>
</template>
<script>
export default {
name: "Navi",
data() {
return {
list: [
{
id: 0,
imgs: "images/nav0.png",
title: "分类查询",
},
{
id: 1,
imgs: "/images/nav1.png",
title: "物流查询",
},
{
id: 2,
imgs: "/images/nav2.png",
title: "购物车",
},
{
id: 3,
imgs: "/images/nav3.png",
title: "我的京东",
},
{
id: 4,
imgs: "/images/nav4.png",
title: "充值",
},
{
id: 5,
imgs: "/images/nav5.png",
title: "领券中心",
},
{
id: 7,
imgs: "/images/nav6.png",
title: "京东超市",
},
{
id: 8,
imgs: "/images/nav7.png",
title: "我的关注",
},
],
};
},
};
</script>
<style scoped>
.navi{
/* height: 10.625rem; */
border-bottom: 2px solid #ccc;
}
img{
width: 1.875rem;
height: 1.875rem;
}
ul{
padding-top: 1.75rem;
display: flex;
width: 100vw;
flex-wrap: wrap;
justify-content: space-around;
text-align: center;
}
li{
margin-top: .625rem;
}
li div{
width: 5.8594rem;
}
div>span{
font-size: 12px;
}
</style>
5.Swiper组件
（1）、新建 Swiper.vue 组件之后，在 Home.vue 组件中引入 Swiper.vue 组件注册并使用；
2）、使用 npm 安装 swiper 库，在 Swiper.vue 组件中引入样式 swiper.css 和 swiper；
3）、使用 HTML+CSS 先布局 swiper 结构，样式类名分别为 swiper-container、swiper-wrapper、
swiper-slide，分页器类名 swiper-pagination；
4）、在 mounted()生命周期函数中实例化使用 swiper 插件；
5）、轮播图插件要求循环自动轮播、有分页小圆点指示符
<template>
<div class="swiper">
<swiper :options="swiperOptions">
<swiper-slide v-for="(item, index) in imgs" :key="item.id">
<img :src="item.images" />
</swiper-slide>
<!-- 分页器 -->
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</div>
</template>
<script>
export default {
data() {
return {
imgs: [
{
id: 1,
images: "/images/banner1.jpg",
},
{
id: 2,
images: "/images/banner2.jpg",
},
{
id: 3,
images: "/images/banner3.jpg",
},
],
// 定义swiper的配置选项
swiperOptions: {
// 指定分页器
pagination: {
//指定分页器的容器
el: ".swiper-pagination",
//点击分页器的指示点分页器会控制Swiper切换
clickable: true,
},
// 配置衔接滑动
loop: true,
// 配置自动播放
// autoplay:true
autoplay: {
//自动播放
autoplay: true,
//设置间隔时间
delay: 3000,
// 用户操作swiper之后，是否禁止autoplay
disableOnInteraction: false,
},
},
};
},
};
</script>
<style scoped>
.swiper {
width: 100vw;
/* height: 12.625rem; */
}
img {
width: 100vw;
/* height: 202px; */
}
</style>
6.Classify组件
<template>
<div class="Classify">
<div class="top">
<p>这是分类页面</p>
<p><router-link to="/">返回首页</router-link></p>
</div>
<router-view></router-view>
</div>
</template>
<script>
export default {};
<style>
.top > p:first-child {
width: 100vw;
background: #c81425;
height: 3.125rem;
line-height: 50px;
text-align: center;
color: white;
font-size: 1.125rem;
}
.top > p:last-child {
width: 100px;
height: 2.5rem;
line-height: 2.5rem;
text-align: center;
margin-left: 0.5rem;
background: #c81425;
margin-top: 10px;
}
.top > p:last-child a {
text-decoration: none;
color: white;
}
</style>
