引子
之前的开发，我们看到了切换类别的时候，图片加载特别慢，有没有解决方案，那就可以在图片后面拼接一个大小设置，不用把一个高清的图片加载下来。
1.加速图片加载
<div class="recommend-item-cover">
<img :src="item.pict_url + '_240x240xzq90.jpg_.webp'" alt="">
</div>
2.搭建发现页结构
首先在layouts/default.vue中创建对应链接。如下：
<div class="header-menu float-left">
<ul class="float-left">
<a href="/"><li class="menu-active">券场</li></a>
<a href="/discovery">
<li>发现</li>
</a>
<li>特惠</li>
</ul>
</div>
然后在pages中创建discovery文件夹，并在该文件夹中增加家index.vue文件，如下：
测试一下：
下面就是美化和完善这个页面了。搭好框架如下：
<template>
<div class="center-box clear-fix">
<div class="discovery-left-part float-left">
这是左边
</div>
<div class="discovery-center-part float-left">
这是中间
</div>
<div class="discovery-right-part float-left">
这是右边
</div>
</div>
</template>
<script>
export default {
name: "index"
}
</script>
<style scoped>
/** 总宽度1140 **/
.discovery-left-part{
height: 300px;
width: 120px;
background: #c9302c;
}
.discovery-center-part{
width: 730px;
background: fuchsia;
height: 1000px;
}
.discovery-right-part{
height: 500px;
width: 290px;
background: #4d555d;
}
</style>
效果
