【vue3.0】5.0 某东到家（五）——首页收尾以及组件合理拆分
当前src/App.vue完整代码如下：
<template>
<!-- 主体内容容器 -->
<div class="wrapper">
<!-- 顶部位置信息、通知栏 -->
<div class="position">
<span>
<i class="position__icon custom-icon custom-icon-position"></i>
</span>
西安交通大学兴庆校区梧桐苑食堂北侧小院子放台阶上
<i class="position__notice custom-icon custom-icon-bell"></i>
</div>
<!-- 搜索栏 -->
<div class="search">
<span class="search__icon">
<i class="custom-icon custom-icon-search"></i>
</span>
<span class="search__text"> 黄焖鸡米饭</span>
</div>
<!-- 横幅广告推广栏 -->
<div class="banner">
<img class="banner__img" src="/i18n/9_16/img/banner.jpg" />
</div>
<!-- 分类列表栏 -->
<div class="category_list">
<!-- 10个 -->
<div class="category_list__item">
<img
class="category_list__item__img"
src="/i18n/9_16/img/category_list/超市.png"
/>
<p class="category_list__item__desc">超市便利</p>
</div>
<div class="category_list__item">
<img
class="category_list__item__img"
src="/i18n/9_16/img/category_list/菜市场.png"
/>
<p class="category_list__item__desc">菜市场</p>
</div>
<div class="category_list__item">
<img
class="category_list__item__img"
src="/i18n/9_16/img/category_list/水果店.png"
/>
<p class="category_list__item__desc">水果店</p>
</div>
<div class="category_list__item">
<img
class="category_list__item__img"
src="/i18n/9_16/img/category_list/鲜花.png"
/>
<p class="category_list__item__desc">鲜花绿植</p>
</div>
<div class="category_list__item">
<img
class="category_list__item__img"
src="/i18n/9_16/img/category_list/医药健康.png"
/>
<p class="category_list__item__desc">医药健康</p>
</div>
<div class="category_list__item">
<img
class="category_list__item__img"
src="/i18n/9_16/img/category_list/家居.png"
/>
<p class="category_list__item__desc">家居时尚</p>
</div>
<div class="category_list__item">
<img
class="category_list__item__img"
src="/i18n/9_16/img/category_list/蛋糕.png"
/>
<p class="category_list__item__desc">烘焙蛋糕</p>
</div>
<div class="category_list__item">
<img
class="category_list__item__img"
src="/i18n/9_16/img/category_list/签到.png"
/>
<p class="category_list__item__desc">签到</p>
</div>
<div class="category_list__item">
<img
class="category_list__item__img"
src="/i18n/9_16/img/category_list/大牌免运.png"
/>
<p class="category_list__item__desc">大牌免运</p>
</div>
<div class="category_list__item">
<img
class="category_list__item__img"
src="/i18n/9_16/img/category_list/红包.png"
/>
<p class="category_list__item__desc">红包套餐</p>
</div>
</div>
<!-- 灰色留白分隔栏 -->
<div class="gap"></div>
</div>
<!-- 底部主菜单容器 -->
<div class="docker">
<span class="docker__item docker__item--active">
<div class="docker__item_icon">
<i class="custom-icon custom-icon-home"></i>
</div>
<div class="docker__item__title">首页</div>
</span>
<span class="docker__item ">
<div class="docker__item_icon">
<i class="custom-icon custom-icon-shopping"></i>
</div>
<div class="docker__item__title">购物车</div>
</span>
<span class="docker__item ">
<div class="docker__item_icon">
<i class="custom-icon custom-icon-order"></i>
</div>
<div class="docker__item__title">订单</div>
</span>
<span class="docker__item ">
<div class="docker__item_icon">
<i class="custom-icon custom-icon-my"></i>
</div>
<div class="docker__item__title">我的</div>
</span>
</div>
<router-view />
</template>
<style lang="scss">
@import './style/viriables';
@import './style/mixins';
.wrapper {
position: absolute;
left: 0;
top: 0;
bottom: 0.5rem;
right: 0;
padding: 0 0.18rem;
}
.position {
//文字显示省略号配置
@include ellipsis;
// 其他一般设定
position: relative;
padding: 0.16rem 0.24rem 0.16rem 0;
line-height: 0.22rem;
font-size: 0.16rem;
color: $content-font-color;
.position__icon {
position: relative;
top: 0.01rem;
font-size: 0.2rem;
margin-right: 0.08rem;
}
.position__notice {
top: 0.17rem;
right: 0;
position: absolute;
font-size: 0.2rem;
}
}
.search {
margin-bottom: 0.12rem;
line-height: 0.32rem; //行高：将会自动撑开
background: #f5f5f5;
color: #b7b7b7;
border-radius: 0.16rem;
font-size: 0.14rem;
&__icon {
display: inline-block;
padding: 0 0.05rem 0 0.16rem;
font-size: 0.15rem;
}
&__text {
display: inline-block;
font-size: 0.14rem;
}
}
.banner {
height: 0%;
overflow: hidden;
padding-bottom: 25%; //屏幕宽度的25%
&__img {
width: 100%;
}
}
.category_list {
display: flex; //flex布局:弹性盒
flex-wrap: wrap; //让弹性盒元素在必要的时候拆行
margin-top: 0.16rem;
&__item {
width: 20%;
&__img {
display: block;
width: 0.4rem;
height: 0.4rem;
margin: 0 auto;
}
&__desc {
margin: 0.06rem 0 0.16rem 0;
text-align: center;
color: $content-font-color;
}
}
}
.gap {
height: 0.1rem;
background: $content-bg-color;
margin: 0 -0.18rem;
}
.docker {
color: $content-font-color;
display: flex; //自适应均赠,弹性盒子
position: absolute; //绝对定位
box-sizing: border-box; //这个会以body的最外层作为容器的最外层
padding: 0 0.18rem;
left: 0;
bottom: 0;
width: 100%;
height: 0.49rem;
border-top: 1px solid $content-bg-color;
&__item {
flex: 1;
text-align: center;
&--active {
color: #1fa4fc;
}
&_icon {
margin: 0.05rem 0 0.02rem 0; //图标距离上边距7px左右;
font-size: 0.18rem;
}
&__title {
//浏览器最小像素是12px，如果想表达12px以下大小得如下编写
font-size: 0.12rem;
transform: scale(0.5 0.5); //横向缩小50% 纵向搜小50%
transform-origin: center top; //缩放的中心点
}
}
}
</style>
增加主体商铺内容：
<template>
<!-- 主体内容容器 -->
<div class="wrapper">
<!-- 顶部位置信息、通知栏 -->
<div class="position">
......
</div>
<!-- 搜索栏 -->
<div class="search">
......
</div>
<!-- 横幅广告推广栏 -->
<div class="banner">
......
</div>
<!-- 分类列表栏 -->
<div class="category_list">
......
</div>
<!-- 灰色留白分隔栏 -->
<div class="gap"></div>
<!-- 主体商铺展示内容 -->
<div class="nearby">
<h3 class="nearby__title">附近店铺</h3>
<div class="nearby__item">
<img src="/i18n/9_16/img/near.png" class="nearby__item__img" />
<div class="nearby__item__content">
<div class="nearby__item__content__title">某尔玛</div>
<div class="nearby__item__content__tags">
<span class="nearby__item__content__tag">月售1万+</span>
<span class="nearby__item__content__tag">起送￥0</span>
<span class="nearby__item__content__tag">基础运费￥5</span>
</div>
<p class="nearby__item__content__highlight">
VIP尊享89元减4元运费券(每月3张)
</p>
</div>
</div>
</div>
</div>
......
效果如下：
image.png
调整样式：
......
.nearby {
&__title {
margin: 0.16rem 0 0.02rem 0;
font-size: 0.18rem;
color: $content-font-color;
font-weight: normal; //不加粗展示
}
&__item {
display: flex;
&__img {
width: 0.56rem;
height: 0.56rem;
}
}
}
.docker {
......
}
image.png
进一步调整
.nearby {
&__title {
margin: 0.16rem 0 0.02rem 0;
font-size: 0.18rem;
color: $content-font-color;
font-weight: normal; //不加粗展示
}
&__item {
display: flex;
padding-top: 0.12rem;
// 图片
&__img {
margin-right: 0.16rem;
width: 0.56rem;
height: 0.56rem;
}
//右侧文字内容
&__content {
flex: 1;
&__title {
line-height: 0.22rem;
font-size: 0.16rem;
color: $content-font-color;
}
}
}
}
image.png
进一步优化：
.nearby {
&__title {
margin: 0.16rem 0 0.02rem 0;
font-size: 0.18rem;
color: $content-font-color;
font-weight: normal; //不加粗展示
}
&__item {
display: flex;
padding-top: 0.12rem;
// 图片
&__img {
margin-right: 0.16rem;
width: 0.56rem;
height: 0.56rem;
}
//右侧文字内容
&__content {
flex: 1;
&__title {
line-height: 0.22rem;
font-size: 0.16rem;
color: $content-font-color;
}
&__tags {
margin-top: 0.08rem;
line-height: 0.18rem;
font-size: 0.13rem;
color: $content-font-color;
}
&__tag {
margin-right: 0.16rem;
}
}
}
}
image.png
进一步优化：
.nearby {
&__title {
margin: 0.16rem 0 0.02rem 0;
font-size: 0.18rem;
color: $content-font-color;
font-weight: normal; //不加粗展示
}
&__item {
display: flex;
padding-top: 0.12rem;
// 图片
&__img {
margin-right: 0.16rem;
width: 0.56rem;
height: 0.56rem;
}
//右侧文字内容
&__content {
padding-bottom: 0.12rem;
border-bottom: 1px solid $content-bg-color;
flex: 1;
&__title {
line-height: 0.22rem;
font-size: 0.16rem;
color: $content-font-color;
}
&__tags {
margin-top: 0.08rem;
line-height: 0.18rem;
font-size: 0.13rem;
color: $content-font-color;
}
&__tag {
margin-right: 0.16rem;
}
&__highlight {
color: #e93b3b;
line-height: 0.18rem;
font-size: 0.13rem;
margin: 0.08rem 0 0 0;
}
}
}
}
image.png
到此附近店铺设计完毕，复制模块组多个,到此完整代码为：
<template>
<!-- 主体内容容器 -->
<div class="wrapper">
<!-- 顶部位置信息、通知栏 -->
<div class="position">
<span>
<i class="position__icon custom-icon custom-icon-position"></i>
</span>
西安交通大学兴庆校区梧桐苑食堂北侧小院子放台阶上
<i class="position__notice custom-icon custom-icon-bell"></i>
</div>
<!-- 搜索栏 -->
<div class="search">
<span class="search__icon">
<i class="custom-icon custom-icon-search"></i>
</span>
<span class="search__text"> 黄焖鸡米饭</span>
</div>
<!-- 横幅广告推广栏 -->
<div class="banner">
<img class="banner__img" src="/i18n/9_16/img/banner.jpg" />
</div>
<!-- 分类列表栏 -->
<div class="category_list">
<!-- 10个 -->
<div class="category_list__item">
<img
class="category_list__item__img"
src="/i18n/9_16/img/category_list/超市.png"
/>
<p class="category_list__item__desc">超市便利</p>
</div>
<div class="category_list__item">
<img
class="category_list__item__img"
src="/i18n/9_16/img/category_list/菜市场.png"
/>
<p class="category_list__item__desc">菜市场</p>
</div>
<div class="category_list__item">
<img
class="category_list__item__img"
src="/i18n/9_16/img/category_list/水果店.png"
/>
<p class="category_list__item__desc">水果店</p>
</div>
<div class="category_list__item">
<img
class="category_list__item__img"
src="/i18n/9_16/img/category_list/鲜花.png"
/>
<p class="category_list__item__desc">鲜花绿植</p>
</div>
<div class="category_list__item">
<img
class="category_list__item__img"
src="/i18n/9_16/img/category_list/医药健康.png"
/>
<p class="category_list__item__desc">医药健康</p>
</div>
<div class="category_list__item">
<img
class="category_list__item__img"
src="/i18n/9_16/img/category_list/家居.png"
/>
<p class="category_list__item__desc">家居时尚</p>
</div>
<div class="category_list__item">
<img
class="category_list__item__img"
src="/i18n/9_16/img/category_list/蛋糕.png"
/>
<p class="category_list__item__desc">烘焙蛋糕</p>
</div>
<div class="category_list__item">
<img
class="category_list__item__img"
src="/i18n/9_16/img/category_list/签到.png"
/>
<p class="category_list__item__desc">签到</p>
</div>
<div class="category_list__item">
<img
class="category_list__item__img"
src="/i18n/9_16/img/category_list/大牌免运.png"
/>
<p class="category_list__item__desc">大牌免运</p>
</div>
<div class="category_list__item">
<img
class="category_list__item__img"
src="/i18n/9_16/img/category_list/红包.png"
/>
<p class="category_list__item__desc">红包套餐</p>
</div>
</div>
<!-- 灰色留白分隔栏 -->
<div class="gap"></div>
<!-- 主体商铺展示内容 -->
<div class="nearby">
<h3 class="nearby__title">附近店铺</h3>
<!-- 5个 -->
<div class="nearby__item">
<img src="/i18n/9_16/img/near.png" class="nearby__item__img" />
<div class="nearby__item__content">
<div class="nearby__item__content__title">某尔玛</div>
<div class="nearby__item__content__tags">
<span class="nearby__item__content__tag">月售1万+</span>
<span class="nearby__item__content__tag">起送￥0</span>
<span class="nearby__item__content__tag">基础运费￥5</span>
</div>
<p class="nearby__item__content__highlight">
VIP尊享89元减4元运费券(每月3张)
</p>
</div>
</div>
<div class="nearby__item">
<img src="/i18n/9_16/img/near.png" class="nearby__item__img" />
<div class="nearby__item__content">
<div class="nearby__item__content__title">某尔玛</div>
<div class="nearby__item__content__tags">
<span class="nearby__item__content__tag">月售1万+</span>
<span class="nearby__item__content__tag">起送￥0</span>
<span class="nearby__item__content__tag">基础运费￥5</span>
</div>
<p class="nearby__item__content__highlight">
VIP尊享89元减4元运费券(每月3张)
</p>
</div>
</div>
<div class="nearby__item">
<img src="/i18n/9_16/img/near.png" class="nearby__item__img" />
<div class="nearby__item__content">
<div class="nearby__item__content__title">某尔玛</div>
<div class="nearby__item__content__tags">
<span class="nearby__item__content__tag">月售1万+</span>
<span class="nearby__item__content__tag">起送￥0</span>
<span class="nearby__item__content__tag">基础运费￥5</span>
</div>
<p class="nearby__item__content__highlight">
VIP尊享89元减4元运费券(每月3张)
</p>
</div>
</div>
<div class="nearby__item">
<img src="/i18n/9_16/img/near.png" class="nearby__item__img" />
<div class="nearby__item__content">
<div class="nearby__item__content__title">某尔玛</div>
<div class="nearby__item__content__tags">
<span class="nearby__item__content__tag">月售1万+</span>
<span class="nearby__item__content__tag">起送￥0</span>
<span class="nearby__item__content__tag">基础运费￥5</span>
</div>
<p class="nearby__item__content__highlight">
VIP尊享89元减4元运费券(每月3张)
</p>
</div>
</div>
<div class="nearby__item">
<img src="/i18n/9_16/img/near.png" class="nearby__item__img" />
<div class="nearby__item__content">
<div class="nearby__item__content__title">某尔玛</div>
<div class="nearby__item__content__tags">
<span class="nearby__item__content__tag">月售1万+</span>
<span class="nearby__item__content__tag">起送￥0</span>
<span class="nearby__item__content__tag">基础运费￥5</span>
</div>
<p class="nearby__item__content__highlight">
VIP尊享89元减4元运费券(每月3张)
</p>
</div>
</div>
</div>
</div>
<!-- 底部主菜单容器 -->
<div class="docker">
<span class="docker__item docker__item--active">
<div class="docker__item_icon">
<i class="custom-icon custom-icon-home"></i>
</div>
<div class="docker__item__title">首页</div>
</span>
<span class="docker__item ">
<div class="docker__item_icon">
<i class="custom-icon custom-icon-shopping"></i>
</div>
<div class="docker__item__title">购物车</div>
</span>
<span class="docker__item ">
<div class="docker__item_icon">
<i class="custom-icon custom-icon-order"></i>
</div>
<div class="docker__item__title">订单</div>
</span>
<span class="docker__item ">
<div class="docker__item_icon">
<i class="custom-icon custom-icon-my"></i>
</div>
<div class="docker__item__title">我的</div>
</span>
</div>
<router-view />
</template>
<style lang="scss">
@import './style/viriables';
@import './style/mixins';
.wrapper {
position: absolute;
left: 0;
top: 0;
bottom: 0.5rem;
right: 0;
padding: 0 0.18rem;
}
.position {
//文字显示省略号配置
@include ellipsis;
// 其他一般设定
position: relative;
padding: 0.16rem 0.24rem 0.16rem 0;
line-height: 0.22rem;
font-size: 0.16rem;
color: $content-font-color;
.position__icon {
position: relative;
top: 0.01rem;
font-size: 0.2rem;
margin-right: 0.08rem;
}
.position__notice {
top: 0.17rem;
right: 0;
position: absolute;
font-size: 0.2rem;
}
}
.search {
margin-bottom: 0.12rem;
line-height: 0.32rem; //行高：将会自动撑开
background: #f5f5f5;
color: #b7b7b7;
border-radius: 0.16rem;
font-size: 0.14rem;
&__icon {
display: inline-block;
padding: 0 0.05rem 0 0.16rem;
font-size: 0.15rem;
}
&__text {
display: inline-block;
font-size: 0.14rem;
}
}
.banner {
height: 0%;
overflow: hidden;
padding-bottom: 25%; //屏幕宽度的25%
&__img {
width: 100%;
}
}
.category_list {
display: flex; //flex布局:弹性盒
flex-wrap: wrap; //让弹性盒元素在必要的时候拆行
margin-top: 0.16rem;
&__item {
width: 20%;
&__img {
display: block;
width: 0.4rem;
height: 0.4rem;
margin: 0 auto;
}
&__desc {
margin: 0.06rem 0 0.16rem 0;
text-align: center;
color: $content-font-color;
}
}
}
.gap {
height: 0.1rem;
background: $content-bg-color;
margin: 0 -0.18rem;
}
.nearby {
&__title {
margin: 0.16rem 0 0.02rem 0;
font-size: 0.18rem;
color: $content-font-color;
font-weight: normal; //不加粗展示
}
&__item {
display: flex;
padding-top: 0.12rem;
// 图片
&__img {
margin-right: 0.16rem;
width: 0.56rem;
height: 0.56rem;
}
//右侧文字内容
&__content {
padding-bottom: 0.12rem;
border-bottom: 1px solid $content-bg-color;
flex: 1;
&__title {
line-height: 0.22rem;
font-size: 0.16rem;
color: $content-font-color;
}
&__tags {
margin-top: 0.08rem;
line-height: 0.18rem;
font-size: 0.13rem;
color: $content-font-color;
}
&__tag {
margin-right: 0.16rem;
}
&__highlight {
color: #e93b3b;
line-height: 0.18rem;
font-size: 0.13rem;
margin: 0.08rem 0 0 0;
}
}
}
}
.docker {
color: $content-font-color;
display: flex; //自适应均赠,弹性盒子
position: absolute; //绝对定位
box-sizing: border-box; //这个会以body的最外层作为容器的最外层
padding: 0 0.18rem;
left: 0;
bottom: 0;
width: 100%;
height: 0.49rem;
border-top: 1px solid $content-bg-color;
&__item {
flex: 1;
text-align: center;
&--active {
color: #1fa4fc;
}
&_icon {
margin: 0.05rem 0 0.02rem 0; //图标距离上边距7px左右;
font-size: 0.18rem;
}
&__title {
//浏览器最小像素是12px，如果想表达12px以下大小得如下编写
font-size: 0.12rem;
transform: scale(0.5 0.5); //横向缩小50% 纵向搜小50%
transform-origin: center top; //缩放的中心点
}
}
}
</style>
image.png
这里发现数据溢出屏幕，解决方案如下：
.wrapper {
overflow-y: auto;
......
}
image.png
当然，还可以附近店铺底部留白会好看一些：
.wrapper {
padding: 0 0.18rem 0.1rem 0.18rem;
......
}
组件的合理拆分
到此为止，首页代码已经接近400行，以后维护会相当困难。
新建src\views\home\Home.vue:
将src/App.vue复制到src\views\home\Home.vue
修改src/App.vue:
<template>
<Home />
</template>
<script>
import Home from '@/views/home/Home'
export default {
name: 'App',
components: { Home }
}
</script>
src\views\home\Home.vue:
<template>
<!-- 主体内容容器 -->
<div class="wrapper">
<!-- 顶部位置信息、通知栏 -->
<div class="position">
<span>
<i class="position__icon custom-icon custom-icon-position"></i>
</span>
西安交通大学兴庆校区梧桐苑食堂北侧小院子放台阶上
<i class="position__notice custom-icon custom-icon-bell"></i>
</div>
<!-- 搜索栏 -->
<div class="search">
<span class="search__icon">
<i class="custom-icon custom-icon-search"></i>
</span>
<span class="search__text"> 黄焖鸡米饭</span>
</div>
<!-- 横幅广告推广栏 -->
<div class="banner">
<img class="banner__img" src="/i18n/9_16/img/banner.jpg" />
</div>
<!-- 分类列表栏 -->
<div class="category_list">
<!-- 10个 -->
<div class="category_list__item">
<img
class="category_list__item__img"
src="/i18n/9_16/img/category_list/超市.png"
/>
<p class="category_list__item__desc">超市便利</p>
</div>
<div class="category_list__item">
<img
class="category_list__item__img"
src="/i18n/9_16/img/category_list/菜市场.png"
/>
<p class="category_list__item__desc">菜市场</p>
</div>
<div class="category_list__item">
<img
class="category_list__item__img"
src="/i18n/9_16/img/category_list/水果店.png"
/>
<p class="category_list__item__desc">水果店</p>
</div>
<div class="category_list__item">
<img
class="category_list__item__img"
src="/i18n/9_16/img/category_list/鲜花.png"
/>
<p class="category_list__item__desc">鲜花绿植</p>
</div>
<div class="category_list__item">
<img
class="category_list__item__img"
src="/i18n/9_16/img/category_list/医药健康.png"
/>
<p class="category_list__item__desc">医药健康</p>
</div>
<div class="category_list__item">
<img
class="category_list__item__img"
src="/i18n/9_16/img/category_list/家居.png"
/>
<p class="category_list__item__desc">家居时尚</p>
</div>
<div class="category_list__item">
<img
class="category_list__item__img"
src="/i18n/9_16/img/category_list/蛋糕.png"
/>
<p class="category_list__item__desc">烘焙蛋糕</p>
</div>
<div class="category_list__item">
<img
class="category_list__item__img"
src="/i18n/9_16/img/category_list/签到.png"
/>
<p class="category_list__item__desc">签到</p>
</div>
<div class="category_list__item">
<img
class="category_list__item__img"
src="/i18n/9_16/img/category_list/大牌免运.png"
/>
<p class="category_list__item__desc">大牌免运</p>
</div>
<div class="category_list__item">
<img
class="category_list__item__img"
src="/i18n/9_16/img/category_list/红包.png"
/>
<p class="category_list__item__desc">红包套餐</p>
</div>
</div>
<!-- 灰色留白分隔栏 -->
<div class="gap"></div>
<!-- 主体商铺展示内容 -->
<div class="nearby">
<h3 class="nearby__title">附近店铺</h3>
<!-- 5个 -->
<div class="nearby__item">
<img src="/i18n/9_16/img/near.png" class="nearby__item__img" />
<div class="nearby__item__content">
<div class="nearby__item__content__title">某尔玛</div>
<div class="nearby__item__content__tags">
<span class="nearby__item__content__tag">月售1万+</span>
<span class="nearby__item__content__tag">起送￥0</span>
<span class="nearby__item__content__tag">基础运费￥5</span>
</div>
<p class="nearby__item__content__highlight">
VIP尊享89元减4元运费券(每月3张)
</p>
</div>
</div>
<div class="nearby__item">
<img src="/i18n/9_16/img/near.png" class="nearby__item__img" />
<div class="nearby__item__content">
<div class="nearby__item__content__title">某尔玛</div>
<div class="nearby__item__content__tags">
<span class="nearby__item__content__tag">月售1万+</span>
<span class="nearby__item__content__tag">起送￥0</span>
<span class="nearby__item__content__tag">基础运费￥5</span>
</div>
<p class="nearby__item__content__highlight">
VIP尊享89元减4元运费券(每月3张)
</p>
</div>
</div>
<div class="nearby__item">
<img src="/i18n/9_16/img/near.png" class="nearby__item__img" />
<div class="nearby__item__content">
<div class="nearby__item__content__title">某尔玛</div>
<div class="nearby__item__content__tags">
<span class="nearby__item__content__tag">月售1万+</span>
<span class="nearby__item__content__tag">起送￥0</span>
<span class="nearby__item__content__tag">基础运费￥5</span>
</div>
<p class="nearby__item__content__highlight">
VIP尊享89元减4元运费券(每月3张)
</p>
</div>
</div>
<div class="nearby__item">
<img src="/i18n/9_16/img/near.png" class="nearby__item__img" />
<div class="nearby__item__content">
<div class="nearby__item__content__title">某尔玛</div>
<div class="nearby__item__content__tags">
<span class="nearby__item__content__tag">月售1万+</span>
<span class="nearby__item__content__tag">起送￥0</span>
<span class="nearby__item__content__tag">基础运费￥5</span>
</div>
<p class="nearby__item__content__highlight">
VIP尊享89元减4元运费券(每月3张)
</p>
</div>
</div>
<div class="nearby__item">
<img src="/i18n/9_16/img/near.png" class="nearby__item__img" />
<div class="nearby__item__content">
<div class="nearby__item__content__title">某尔玛</div>
<div class="nearby__item__content__tags">
<span class="nearby__item__content__tag">月售1万+</span>
<span class="nearby__item__content__tag">起送￥0</span>
<span class="nearby__item__content__tag">基础运费￥5</span>
</div>
<p class="nearby__item__content__highlight">
VIP尊享89元减4元运费券(每月3张)
</p>
</div>
</div>
</div>
</div>
<!-- 底部主菜单容器 -->
<div class="docker">
<span class="docker__item docker__item--active">
<div class="docker__item_icon">
<i class="custom-icon custom-icon-home"></i>
</div>
<div class="docker__item__title">首页</div>
</span>
<span class="docker__item ">
<div class="docker__item_icon">
<i class="custom-icon custom-icon-shopping"></i>
</div>
<div class="docker__item__title">购物车</div>
</span>
<span class="docker__item ">
<div class="docker__item_icon">
<i class="custom-icon custom-icon-order"></i>
</div>
<div class="docker__item__title">订单</div>
</span>
<span class="docker__item ">
<div class="docker__item_icon">
<i class="custom-icon custom-icon-my"></i>
</div>
<div class="docker__item__title">我的</div>
</span>
</div>
<router-view />
</template>
<script>
export default {
name: 'Home'
}
</script>
<style lang="scss">
@import '@/style/viriables';
@import '@/style/mixins';
.wrapper {
overflow-y: auto;
position: absolute;
left: 0;
top: 0;
bottom: 0.5rem;
right: 0;
padding: 0 0.18rem 0.1rem 0.18rem;
}
.position {
//文字显示省略号配置
@include ellipsis;
// 其他一般设定
position: relative;
padding: 0.16rem 0.24rem 0.16rem 0;
line-height: 0.22rem;
font-size: 0.16rem;
color: $content-font-color;
.position__icon {
position: relative;
top: 0.01rem;
font-size: 0.2rem;
margin-right: 0.08rem;
}
.position__notice {
top: 0.17rem;
right: 0;
position: absolute;
font-size: 0.2rem;
}
}
.search {
margin-bottom: 0.12rem;
line-height: 0.32rem; //行高：将会自动撑开
background: #f5f5f5;
color: #b7b7b7;
border-radius: 0.16rem;
font-size: 0.14rem;
&__icon {
display: inline-block;
padding: 0 0.05rem 0 0.16rem;
font-size: 0.15rem;
}
&__text {
display: inline-block;
font-size: 0.14rem;
}
}
.banner {
height: 0%;
overflow: hidden;
padding-bottom: 25%; //屏幕宽度的25%
&__img {
width: 100%;
}
}
.category_list {
display: flex; //flex布局:弹性盒
flex-wrap: wrap; //让弹性盒元素在必要的时候拆行
margin-top: 0.16rem;
&__item {
width: 20%;
&__img {
display: block;
width: 0.4rem;
height: 0.4rem;
margin: 0 auto;
}
&__desc {
margin: 0.06rem 0 0.16rem 0;
text-align: center;
color: $content-font-color;
}
}
}
.gap {
height: 0.1rem;
background: $content-bg-color;
margin: 0 -0.18rem;
}
.nearby {
&__title {
margin: 0.16rem 0 0.02rem 0;
font-size: 0.18rem;
color: $content-font-color;
font-weight: normal; //不加粗展示
}
&__item {
display: flex;
padding-top: 0.12rem;
// 图片
&__img {
margin-right: 0.16rem;
width: 0.56rem;
height: 0.56rem;
}
//右侧文字内容
&__content {
padding-bottom: 0.12rem;
border-bottom: 1px solid $content-bg-color;
flex: 1;
&__title {
line-height: 0.22rem;
font-size: 0.16rem;
color: $content-font-color;
}
&__tags {
margin-top: 0.08rem;
line-height: 0.18rem;
font-size: 0.13rem;
color: $content-font-color;
}
&__tag {
margin-right: 0.16rem;
}
&__highlight {
color: #e93b3b;
line-height: 0.18rem;
font-size: 0.13rem;
margin: 0.08rem 0 0 0;
}
}
}
}
.docker {
color: $content-font-color;
display: flex; //自适应均赠,弹性盒子
position: absolute; //绝对定位
box-sizing: border-box; //这个会以body的最外层作为容器的最外层
padding: 0 0.18rem;
left: 0;
bottom: 0;
width: 100%;
height: 0.49rem;
border-top: 1px solid $content-bg-color;
&__item {
flex: 1;
text-align: center;
&--active {
color: #1fa4fc;
}
&_icon {
margin: 0.05rem 0 0.02rem 0; //图标距离上边距7px左右;
font-size: 0.18rem;
}
&__title {
//浏览器最小像素是12px，如果想表达12px以下大小得如下编写
font-size: 0.12rem;
transform: scale(0.5 0.5); //横向缩小50% 纵向搜小50%
transform-origin: center top; //缩放的中心点
}
}
}
</style>
修改router.js：
import {
createRouter,
createWebHistory
} from 'vue-router'
// import Home from '../views/Home.vue'
const routes = [{
path: '/',
name: ''
}
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
export default router
重新运行vue项目，仍然可以加载页面。
将页面拆成3个组件。
新建src\views\home\StaticPart.vue:
<template>
<!-- 顶部位置信息、通知栏 -->
<div class="position">
<span>
<i class="position__icon custom-icon custom-icon-position"></i>
</span>
西安交通大学兴庆校区梧桐苑食堂北侧小院子放台阶上
<i class="position__notice custom-icon custom-icon-bell"></i>
</div>
<!-- 搜索栏 -->
<div class="search">
<span class="search__icon">
<i class="custom-icon custom-icon-search"></i>
</span>
<span class="search__text"> 黄焖鸡米饭</span>
</div>
<!-- 横幅广告推广栏 -->
<div class="banner">
<img class="banner__img" src="/i18n/9_16/img/banner.jpg" />
</div>
<!-- 分类列表栏 -->
<div class="category_list">
<!-- 10个 -->
<div class="category_list__item">
<img
class="category_list__item__img"
src="/i18n/9_16/img/category_list/超市.png"
/>
<p class="category_list__item__desc">超市便利</p>
</div>
<div class="category_list__item">
<img
class="category_list__item__img"
src="/i18n/9_16/img/category_list/菜市场.png"
/>
<p class="category_list__item__desc">菜市场</p>
</div>
<div class="category_list__item">
<img
class="category_list__item__img"
src="/i18n/9_16/img/category_list/水果店.png"
/>
<p class="category_list__item__desc">水果店</p>
</div>
<div class="category_list__item">
<img
class="category_list__item__img"
src="/i18n/9_16/img/category_list/鲜花.png"
/>
<p class="category_list__item__desc">鲜花绿植</p>
</div>
<div class="category_list__item">
<img
class="category_list__item__img"
src="/i18n/9_16/img/category_list/医药健康.png"
/>
<p class="category_list__item__desc">医药健康</p>
</div>
<div class="category_list__item">
<img
class="category_list__item__img"
src="/i18n/9_16/img/category_list/家居.png"
/>
<p class="category_list__item__desc">家居时尚</p>
</div>
<div class="category_list__item">
<img
class="category_list__item__img"
src="/i18n/9_16/img/category_list/蛋糕.png"
/>
<p class="category_list__item__desc">烘焙蛋糕</p>
</div>
<div class="category_list__item">
<img
class="category_list__item__img"
src="/i18n/9_16/img/category_list/签到.png"
/>
<p class="category_list__item__desc">签到</p>
</div>
<div class="category_list__item">
<img
class="category_list__item__img"
src="/i18n/9_16/img/category_list/大牌免运.png"
/>
<p class="category_list__item__desc">大牌免运</p>
</div>
<div class="category_list__item">
<img
class="category_list__item__img"
src="/i18n/9_16/img/category_list/红包.png"
/>
<p class="category_list__item__desc">红包套餐</p>
</div>
</div>
<!-- 灰色留白分隔栏 -->
<div class="gap"></div>
</template>
<script>
export default {
name: 'StaticPart'
}
</script>
<style lang="scss" scope>
@import '@/style/viriables';
@import '@/style/mixins';
.position {
//文字显示省略号配置
@include ellipsis;
// 其他一般设定
position: relative;
padding: 0.16rem 0.24rem 0.16rem 0;
line-height: 0.22rem;
font-size: 0.16rem;
color: $content-font-color;
.position__icon {
position: relative;
top: 0.01rem;
font-size: 0.2rem;
margin-right: 0.08rem;
}
.position__notice {
top: 0.17rem;
right: 0;
position: absolute;
font-size: 0.2rem;
}
}
.search {
margin-bottom: 0.12rem;
line-height: 0.32rem; //行高：将会自动撑开
background: #f5f5f5;
color: #b7b7b7;
border-radius: 0.16rem;
font-size: 0.14rem;
&__icon {
display: inline-block;
padding: 0 0.05rem 0 0.16rem;
font-size: 0.15rem;
}
&__text {
display: inline-block;
font-size: 0.14rem;
}
}
.banner {
height: 0%;
overflow: hidden;
padding-bottom: 25%; //屏幕宽度的25%
&__img {
width: 100%;
}
}
.category_list {
display: flex; //flex布局:弹性盒
flex-wrap: wrap; //让弹性盒元素在必要的时候拆行
margin-top: 0.16rem;
&__item {
width: 20%;
&__img {
display: block;
width: 0.4rem;
height: 0.4rem;
margin: 0 auto;
}
&__desc {
margin: 0.06rem 0 0.16rem 0;
text-align: center;
color: $content-font-color;
}
}
}
.gap {
height: 0.1rem;
background: $content-bg-color;
margin: 0 -0.18rem;
}
</style>
新建src\views\home\Nearby.vue:
<template>
<!-- 主体商铺展示内容 -->
<div class="nearby">
<h3 class="nearby__title">附近店铺</h3>
<!-- 5个 -->
<div class="nearby__item">
<img src="/i18n/9_16/img/near.png" class="nearby__item__img" />
<div class="nearby__item__content">
<div class="nearby__item__content__title">某尔玛</div>
<div class="nearby__item__content__tags">
<span class="nearby__item__content__tag">月售1万+</span>
<span class="nearby__item__content__tag">起送￥0</span>
<span class="nearby__item__content__tag">基础运费￥5</span>
</div>
<p class="nearby__item__content__highlight">
VIP尊享89元减4元运费券(每月3张)
</p>
</div>
</div>
<div class="nearby__item">
<img src="/i18n/9_16/img/near.png" class="nearby__item__img" />
<div class="nearby__item__content">
<div class="nearby__item__content__title">某尔玛</div>
<div class="nearby__item__content__tags">
<span class="nearby__item__content__tag">月售1万+</span>
<span class="nearby__item__content__tag">起送￥0</span>
<span class="nearby__item__content__tag">基础运费￥5</span>
</div>
<p class="nearby__item__content__highlight">
VIP尊享89元减4元运费券(每月3张)
</p>
</div>
</div>
<div class="nearby__item">
<img src="/i18n/9_16/img/near.png" class="nearby__item__img" />
<div class="nearby__item__content">
<div class="nearby__item__content__title">某尔玛</div>
<div class="nearby__item__content__tags">
<span class="nearby__item__content__tag">月售1万+</span>
<span class="nearby__item__content__tag">起送￥0</span>
<span class="nearby__item__content__tag">基础运费￥5</span>
</div>
<p class="nearby__item__content__highlight">
VIP尊享89元减4元运费券(每月3张)
</p>
</div>
</div>
<div class="nearby__item">
<img src="/i18n/9_16/img/near.png" class="nearby__item__img" />
<div class="nearby__item__content">
<div class="nearby__item__content__title">某尔玛</div>
<div class="nearby__item__content__tags">
<span class="nearby__item__content__tag">月售1万+</span>
<span class="nearby__item__content__tag">起送￥0</span>
<span class="nearby__item__content__tag">基础运费￥5</span>
</div>
<p class="nearby__item__content__highlight">
VIP尊享89元减4元运费券(每月3张)
</p>
</div>
</div>
<div class="nearby__item">
<img src="/i18n/9_16/img/near.png" class="nearby__item__img" />
<div class="nearby__item__content">
<div class="nearby__item__content__title">某尔玛</div>
<div class="nearby__item__content__tags">
<span class="nearby__item__content__tag">月售1万+</span>
<span class="nearby__item__content__tag">起送￥0</span>
<span class="nearby__item__content__tag">基础运费￥5</span>
</div>
<p class="nearby__item__content__highlight">
VIP尊享89元减4元运费券(每月3张)
</p>
</div>
</div>
</div>
</template>
<script>
export default { name: 'Nearby' }
</script>
<style lang="scss" scope>
@import '@/style/viriables';
@import '@/style/mixins';
.nearby {
&__title {
margin: 0.16rem 0 0.02rem 0;
font-size: 0.18rem;
color: $content-font-color;
font-weight: normal; //不加粗展示
}
&__item {
display: flex;
padding-top: 0.12rem;
// 图片
&__img {
margin-right: 0.16rem;
width: 0.56rem;
height: 0.56rem;
}
//右侧文字内容
&__content {
padding-bottom: 0.12rem;
border-bottom: 1px solid $content-bg-color;
flex: 1;
&__title {
line-height: 0.22rem;
font-size: 0.16rem;
color: $content-font-color;
}
&__tags {
margin-top: 0.08rem;
line-height: 0.18rem;
font-size: 0.13rem;
color: $content-font-color;
}
&__tag {
margin-right: 0.16rem;
}
&__highlight {
color: #e93b3b;
line-height: 0.18rem;
font-size: 0.13rem;
margin: 0.08rem 0 0 0;
}
}
}
}
</style>
新建src\views\home\Docker.vue:
<template>
<!-- 底部主菜单容器 -->
<div class="docker">
<span class="docker__item docker__item--active">
<div class="docker__item_icon">
<i class="custom-icon custom-icon-home"></i>
</div>
<div class="docker__item__title">首页</div>
</span>
<span class="docker__item ">
<div class="docker__item_icon">
<i class="custom-icon custom-icon-shopping"></i>
</div>
<div class="docker__item__title">购物车</div>
</span>
<span class="docker__item ">
<div class="docker__item_icon">
<i class="custom-icon custom-icon-order"></i>
</div>
<div class="docker__item__title">订单</div>
</span>
<span class="docker__item ">
<div class="docker__item_icon">
<i class="custom-icon custom-icon-my"></i>
</div>
<div class="docker__item__title">我的</div>
</span>
</div>
</template>
<script>
export default {
name: 'Docker'
}
</script>
<style lang="scss" scope>
@import '@/style/viriables';
@import '@/style/mixins';
.docker {
color: $content-font-color;
display: flex; //自适应均赠,弹性盒子
position: absolute; //绝对定位
box-sizing: border-box; //这个会以body的最外层作为容器的最外层
padding: 0 0.18rem;
left: 0;
bottom: 0;
width: 100%;
height: 0.49rem;
border-top: 1px solid $content-bg-color;
&__item {
flex: 1;
text-align: center;
&--active {
color: #1fa4fc;
}
&_icon {
margin: 0.05rem 0 0.02rem 0; //图标距离上边距7px左右;
font-size: 0.18rem;
}
&__title {
//浏览器最小像素是12px，如果想表达12px以下大小得如下编写
font-size: 0.12rem;
transform: scale(0.5 0.5); //横向缩小50% 纵向搜小50%
transform-origin: center top; //缩放的中心点
}
}
}
</style>
调整src\views\home\Home.vue:
<template>
<!-- 主体内容容器 -->
<div class="wrapper">
<StaticPart />
<!-- 主体商铺展示内容 -->
<Nearby />
</div>
<!-- 底部主菜单容器 -->
<Docker/>
<router-view />
</template>
<script>
import StaticPart from '@/views/home/StaticPart'
import Nearby from '@/views/home/Nearby'
import Docker from '@/views/home/Docker'
export default {
name: 'Home',
components: { StaticPart, Nearby, Docker }
}
</script>
<style lang="scss">
.wrapper {
overflow-y: auto;
position: absolute;
left: 0;
top: 0;
bottom: 0.5rem;
right: 0;
padding: 0 0.18rem 0.1rem 0.18rem;
}
</style>
发表评论 (审核通过后显示评论)：