商品排行组件 Rank
在 Home 文件夹下创建 Rank 文件夹 并在里创建 images 文件夹和 index.vue 文件
index.vue
<template>
<!-- 商品排行 -->
<div class="rank">
<div class="tab">
<div class="tab-tit clearfix">
<a href="javascript:;" class="on">
<p class="img">
<i></i>
</p>
<p class="text">热卖排行</p>
</a>
<a href="javascript:;">
<p class="img">
<i></i>
</p>
<p class="text">特价排行</p>
</a>
<a href="javascript:;">
<p class="img">
<i></i>
</p>
<p class="text">新品排行</p>
</a>
</div>
</div>
<div class="content">
<ul>
<li>
<div class="img-item">
<p class="tab-pic">
<a href="#">
<img src="./images/1.jpg" />
</a>
</p>
<div class="tab-info">
<div class="info-title">
<a href="#">【官网价直降1100】Apple iPhone 8 Plus 256GB 银色 移动联通电信4G手机</a>
</div>
<p class="info-price">定金:¥100.00</p>
</div>
</div>
<div class="img-item">
<p class="tab-pic">
<a href="#">
<img src="./images/1.jpg" />
</a>
</p>
<div class="tab-info">
<div class="info-title">
<a href="#">【官网价直降1100】Apple iPhone 8 Plus 256GB 银色 移动联通电信4G手机</a>
</div>
<p class="info-price">定金:¥100.00</p>
</div>
</div>
<div class="img-item">
<p class="tab-pic">
<a href="#">
<img src="./images/1.jpg" />
</a>
</p>
<div class="tab-info">
<div class="info-title">
<a href="#">【官网价直降1100】Apple iPhone 8 Plus 256GB 银色 移动联通电信4G手机</a>
</div>
<p class="info-price">定金:¥100.00</p>
</div>
</div>
<div class="img-item">
<p class="tab-pic">
<a href="#">
<img src="./images/1.jpg" />
</a>
</p>
<div class="tab-info">
<div class="info-title">
<a href="#">【官网价直降1100】Apple iPhone 8 Plus 256GB 银色 移动联通电信4G手机</a>
</div>
<p class="info-price">定金:¥100.00</p>
</div>
</div>
</li>
</ul>
</div>
</div>
</template>
<script>
export default {
name:'',
}
</script>
<style scoped lang="less">
.rank {
width: 1200px;
margin: 0 auto;
.tab {
margin: 0 auto;
overflow: hidden;
width: 312px;
.tab-tit {
text-align: center;
a {
display: block;
padding: 0 18px;
float: left;
text-decoration: none;
font-size: 16px;
color: #999;
p {
margin: 5px 0;
}
.img {
i {
width: 35px;
height: 35px;
display: block;
background: url(./images/bg0.png);
margin-left: 10px;
}
}
.text {
line-height: 28px;
}
}
.on {
color: #e60012;
.img {
i {
background-position: -35px 0;
}
}
}
}
}
.content {
overflow: hidden;
padding: 10px;
ul {
li {
overflow: hidden;
list-style: none;
line-height: 18px;
.img-item {
border: 1px solid #e1251b;
width: 269px;
float: left;
overflow: hidden;
margin: 0 12px 10px;
background: #fff;
.tab-pic {
width: 230px;
height: 210px;
overflow: hidden;
text-align: center;
margin: 5px auto 18px;
a {
img {
width: 200px;
height: 200px;
}
}
}
.tab-info {
background: #fafafa;
.info-title {
height: 50px;
line-height: 28px;
overflow: hidden;
margin: 0 auto;
padding-left: 10px;
a {
color: #333;
text-decoration: none;
}
}
.info-price {
font-size: 20px;
color: #e1251b;
height: 35px;
padding-left: 10px;
display: block;
line-height: 24px;
margin: 10px auto 0;
}
}
}
}
}
}
}
</style>
猜你喜欢组件 Like
在 Home 文件夹下创建 Like文件夹 并在里创建 images 文件夹和 index.vue 文件
index.vue
<template>
<!-- 猜你喜欢 -->
<div class="like">
<div class="py-container">
<div class="title">
<h3 class="fl">猜你喜欢</h3>
<a href="javascript:;" class="fr tip changeBnt">换一换</a>
</div>
<div class="bd">
<ul class="favourate">
<li>
<img src="./images/like_02.png" alt="" />
<div class="like-text">
<p>阳光美包新款单肩包女包时尚子母包四件套女</p>
<h3>¥116.00</h3>
</div>
</li>
<li>
<img src="./images/like_03.png" alt="" />
<div class="like-text">
<p>阳光美包新款单肩包女包时尚子母包四件套女</p>
<h3>¥116.00</h3>
</div>
</li>
<li>
<img src="./images/like_01.png" alt="" />
<div class="like-text">
<p>阳光美包新款单肩包女包时尚子母包四件套女</p>
<h3>¥116.00</h3>
</div>
</li>
<li>
<img src="./images/like_02.png" alt="" />
<div class="like-text">
<p>阳光美包新款单肩包女包时尚子母包四件套女</p>
<h3>¥116.00</h3>
</div>
</li>
<li>
<img src="./images/like_03.png" alt="" />
<div class="like-text">
<p>阳光美包新款单肩包女包时尚子母包四件套女</p>
<h3>¥116.00</h3>
</div>
</li>
<li>
<img src="./images/like_01.png" alt="" />
<div class="like-text">
<p>阳光美包新款单肩包女包时尚子母包四件套女</p>
<h3>¥116.00</h3>
</div>
</li>
</ul>
</div>
</div>
</div>
</template>
<script>
export default {
name:''
}
</script>
<style scoped lang="less">
.like {
margin-top: 15px;
.py-container {
width: 1200px;
margin: 0 auto;
.title {
overflow: hidden;
.fl {
float: left;
font-size: 20px;
line-height: 30px;
}
.fr {
float: right;
background-image: url(./images/icons.png);
width: 66px;
height: 25px;
background-position: 182px -104px;
line-height: 30px;
font-size: 12px;
font-weight: 400;
color: #666;
text-decoration: none;
}
}
.bd {
.favourate {
border: 1px solid #e4e4e4;
overflow: hidden;
padding: 0 10px;
box-sizing: border-box;
display: flex;
li {
height: 250px;
margin: 0 -1px;
overflow: hidden;
background: #fff;
position: relative;
width: 16.667%;
display: flex;
flex-direction: column;
align-items: center;
cursor: pointer;
img {
width: 142px;
height: 142px;
transition: all 400ms;
&:hover {
opacity: 0.8;
transform: scale(1.1)
}
}
.like-text {
padding: 0;
width: 142px;
border-right: 1px solid #e4e4e4;
p {
margin: 5px 0;
}
h3 {
color: #df3033;
font-size: 20px;
line-height: 30px;
margin: 9px 0;
font-weight: 700;
}
}
}
}
}
}
}
</style>
楼层组件 Floor
在 Home 文件夹下创建 Floor 文件夹 并在里创建 images 文件夹和 index.vue 文件
index.vue
<template>
<!--楼层-->
<div class="floor">
<div class="py-container">
<div class="title clearfix">
<h3 class="fl">家用电器</h3>
<div class="fr">
<ul class="nav-tabs clearfix">
<li class="active">
<a href="#tab1" data-toggle="tab">热门</a>
</li>
<li>
<a href="#tab2" data-toggle="tab">大家电</a>
</li>
<li>
<a href="#tab3" data-toggle="tab">生活电器</a>
</li>
<li>
<a href="#tab4" data-toggle="tab">厨房电器</a>
</li>
<li>
<a href="#tab5" data-toggle="tab">应季电器</a>
</li>
<li>
<a href="#tab6" data-toggle="tab">空气/净水</a>
</li>
<li>
<a href="#tab7" data-toggle="tab">高端电器</a>
</li>
</ul>
</div>
</div>
<div class="tab-content">
<div class="tab-pane">
<div class="floor-1">
<div class="blockgary">
<ul class="jd-list">
<li>节能补贴</li>
<li>4K电视</li>
<li>空气净化器</li>
<li>IH电饭煲</li>
<li>滚筒洗衣机</li>
<li>电热水器</li>
</ul>
<img src="./images/floor-1-1.png" />
</div>
<div class="floorBanner">
<div class="swiper-container" id="floor1Swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="./images/floor-1-b01.png">
</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
<div class="split">
<span class="floor-x-line"></span>
<div class="floor-conver-pit">
<img src="./images/floor-1-2.png" />
</div>
<div class="floor-conver-pit">
<img src="./images/floor-1-3.png" />
</div>
</div>
<div class="split center">
<img src="./images/floor-1-4.png" />
</div>
<div class="split">
<span class="floor-x-line"></span>
<div class="floor-conver-pit">
<img src="./images/floor-1-5.png" />
</div>
<div class="floor-conver-pit">
<img src="./images/floor-1-6.png" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name:''
}
</script>
<style scoped lang="less">
.floor {
margin-top: 15px;
.py-container {
width: 1200px;
margin: 0 auto;
.title {
.fl {
float: left;
color: #c81623;
font-size: 20px;
line-height: 30px;
margin: 9px 0;
font-weight: 700;
}
.fr {
float: right;
.nav-tabs {
margin: 10px 0 0;
display: inline-block;
li {
float: left;
line-height: 18px;
a {
padding-top: 1px;
font-weight: 400;
background-color: #fff;
&::after {
content: "|";
padding: 0 10px;
}
}
&:nth-child(7) {
a {
&::after {
content: "";
}
}
}
&.active {
a {
color: #e1251b;
}
}
}
}
}
}
.tab-content {
border-top: 2px solid #c81623;
border-bottom: 1px solid #e4e4e4;
.tab-pane {
.floor-1 {
height: 360px;
display: flex;
.blockgary {
width: 210px;
height: 100%;
background: #f7f7f7;
.jd-list {
padding: 15px 0;
overflow: hidden;
li {
list-style-type: none;
float: left;
width: 40%;
margin: 0 10px;
border-bottom: 1px solid #e4e4e4;
text-align: center;
line-height: 26px;
}
}
img {
width: 100%;
}
}
.floorBanner {
width: 330px;
height: 100%;
}
.split {
width: 220px;
height: 100%;
position: relative;
.floor-x-line {
position: absolute;
background: #e4e4e4;
width: 220px;
height: 1px;
top: 180px;
}
.floor-conver-pit {
width: 100%;
height: 50%;
img {
width: 100%;
height: 100%;
transition: all 400ms;
&:hover {
opacity: 0.8;
}
}
}
}
.center {
border: 1px solid #e4e4e4;
}
}
}
}
}
}
</style>
商标组件 Brand
在 Home 文件夹下创建 Brand文件夹 并在里创建 images 文件夹和 index.vue 文件
index.vue
<template>
<!--商标-->
<div class="brand">
<div class="py-container">
<ul class="brand-list">
<li class="brand-item">
<img src="./images/brand_21.png" />
</li>
<li class="brand-item">
<img src="./images/brand_03.png" />
</li>
<li class="brand-item">
<img src="./images/brand_05.png" />
</li>
<li class="brand-item">
<img src="./images/brand_07.png" />
</li>
<li class="brand-item">
<img src="./images/brand_09.png" />
</li>
<li class="brand-item">
<img src="./images/brand_11.png" />
</li>
<li class="brand-item">
<img src="./images/brand_13.png" />
</li>
<li class="brand-item">
<img src="./images/brand_15.png" />
</li>
<li class="brand-item">
<img src="./images/brand_17.png" />
</li>
<li class="brand-item">
<img src="./images/brand_19.png" />
</li>
</ul>
</div>
</div>
</template>
<script>
export default {
name:''
}
</script>
<style scoped lang="less">
.brand {
margin: 10px 0;
.py-container {
width: 1200px;
margin: 0 auto;
.brand-list {
overflow: hidden;
padding: 15px 0;
background: #f7f7f7;
line-height: 18px;
.brand-item {
width: 120px;
float: left;
height: 37px;
img {
border-left: 1px dotted #ccc;
padding: 0 10px;
}
&:first-child {
img {
border-left: 0;
}
}
}
}
}
}
</style>
在 Home 文件夹下的 index.vue 中注册并使用 商品排行组件 、 猜你喜欢组件、楼层组件
Home / index.vue
<template>
<div>
<!--三级联动全局组件:三级联动已注册为全局组件,所以不需要再引入-->
<TypeNav></TypeNav>
<!--轮播图组件-->
<ListContainer></ListContainer>
<!--今日推荐组件-->
<Recommend></Recommend>
<!-- 商品排行组件 -->
<Rank></Rank>
<!-- 猜你喜欢组件 -->
<Like></Like>
<!--楼层组件 * 2-->
<Floor></Floor>
<Floor></Floor>
<!--商标组件-->
<Brand></Brand>
</div>
</template>
<script>
//引入其余组件
import ListContainer from '@/pages/Home/ListContainer'
import Recommend from '@/pages/Home/Recommend'
import Rank from '@/pages/Home/Rank'
import Like from '@/pages/Home/Like'
import Floor from '@/pages/Home/Floor'
import Brand from '@/pages/Home/Brand'
export default {
name:'',
components:{
ListContainer,
Recommend,
Rank,
Like,
Floor,
Brand
}
}
</script>
<style scoped>
</style>
至此,Home 页面的组件已配置完成