当前src/App.vue完整代码如下：
西安交通大学兴庆校区梧桐苑食堂北侧小院子放台阶上
黄焖鸡米饭
超市便利
菜市场
水果店
鲜花绿植
医药健康
家居时尚
烘焙蛋糕
签到
大牌免运
红包套餐
首页
购物车
订单
我的
增加主体商铺内容：
......
......
......
附近店铺
某尔玛
VIP尊享89元减4元运费券(每月3张)
......
效果如下：
调整样式：
......
.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 {
......
}
进一步调整
.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;
}
}
}
}
进一步优化：
.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;
}
}
}
}
进一步优化：
.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;
}
}
}
}
到此附近店铺设计完毕，复制模块组多个,到此完整代码为：
西安交通大学兴庆校区梧桐苑食堂北侧小院子放台阶上
黄焖鸡米饭
超市便利
菜市场
水果店
鲜花绿植
医药健康
家居时尚
烘焙蛋糕
签到
大牌免运
红包套餐
附近店铺
某尔玛
VIP尊享89元减4元运费券(每月3张)
某尔玛
VIP尊享89元减4元运费券(每月3张)
某尔玛
VIP尊享89元减4元运费券(每月3张)
某尔玛
VIP尊享89元减4元运费券(每月3张)
某尔玛
VIP尊享89元减4元运费券(每月3张)
首页
购物车
订单
我的
这里发现数据溢出屏幕，解决方案如下：
.wrapper {
overflow-y: auto;
......
}
当然，还可以附近店铺底部留白会好看一些：
.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:
src\views\home\Home.vue:
西安交通大学兴庆校区梧桐苑食堂北侧小院子放台阶上
黄焖鸡米饭
超市便利
菜市场
水果店
鲜花绿植
医药健康
家居时尚
烘焙蛋糕
签到
大牌免运
红包套餐
附近店铺
某尔玛
VIP尊享89元减4元运费券(每月3张)
某尔玛
VIP尊享89元减4元运费券(每月3张)
某尔玛
VIP尊享89元减4元运费券(每月3张)
某尔玛
VIP尊享89元减4元运费券(每月3张)
某尔玛
VIP尊享89元减4元运费券(每月3张)
首页
购物车
订单
我的
修改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:
西安交通大学兴庆校区梧桐苑食堂北侧小院子放台阶上
黄焖鸡米饭
超市便利
菜市场
水果店
鲜花绿植
医药健康
家居时尚
烘焙蛋糕
签到
大牌免运
红包套餐
新建src\views\home\Nearby.vue:
附近店铺
某尔玛
VIP尊享89元减4元运费券(每月3张)
某尔玛
VIP尊享89元减4元运费券(每月3张)
某尔玛
VIP尊享89元减4元运费券(每月3张)
某尔玛
VIP尊享89元减4元运费券(每月3张)
某尔玛
VIP尊享89元减4元运费券(每月3张)
新建src\views\home\Docker.vue:
首页
购物车
订单
我的
调整src\views\home\Home.vue: