Vue.js+Koa2移动电商实战5

首页搜索区域的布局

　解决小问题

　　但页面很大的时候，我们作的移动适配方案会呈现很大的字体，这不是我们想要的。所以加一个判断，解决页面字体过大的问题。
　　在 index.html的script里加入判断页面的语句。

 if(htmlWidth>750){htmlWidth=750}

　　当页面宽度大于750px时，我们就把页面的宽度设置成750像素。

　　搜索条的布局（search bar）

　　*** 1. icon图标的下载 ***

　　利用van-row和van-col我们快速布局一个搜索条的html骨架出来，代码如下。

 
<!--search bar layout-->
<div class="search-bar">
    <van-row>
        <van-col span="3">icon</van-col>
        <van-col span="16">serach input</van-col>
        <van-col span="5">button</van-col>
    </van-row>
</div>
 

　　*** 2. icon图标的下载 ***

　　图标的下载我们依然在iconfont(网址：http://www.iconfont.cn/)进行下载，
　　找到自己喜欢的图标后，我们新建images文件夹，目录为src/assets/images,以后会把所有的项目图片都放到这里。

　　*** 3. 正确引入图片 ***
　　有很多小伙伴都在引入图片时摘了跟头，有的是开发时引入错误，有的是开发完成后，build时路径不对了。如果用require引入图片，在不作任何配置的情况下就可以基本解决你的图片路径问题。
　　先把图片用require引进到页面中：

export default {
    data() {
        return {
            locationIcon: require('../../assets/images/location.png')
        }
    },
}
 

　　然后通过绑定属性的方法插入图片

<van-col span="3"><img :src="locationIcon" width="100%" /></van-col>

　　这时候进行预览，图片已经正常显示在浏览器中了。

　　*** 4. 写input和button ***

　　这里都是CSS样式和基本的html结构，所以直接上代码了。视频中我会作讲解说明，你可以完全拷贝下面的代码来看效果，然后进行修改学习。

<template>
    <div>
<!--search bar layout-->
<div class="search-bar">
    <van-row gutter="5">
        <van-col span="3"><img :src="locationIcon" width="80%" class="location-icon" /></van-col>
        <van-col span="16">
          <input type="text" class="search-input"/>
        </van-col>
        <van-col span="5"><van-button size="mini">查找</van-button></van-col>
       
    </van-row>
</div>
    </div>
</template>
 
<script>
 
 
export default {
    data() {
        return {
            locationIcon: require('../../assets/images/location.png')
        }
    },
}
</script>
 
<style scoped>
  .search-bar{
      height: 2.2rem;
      background-color: #e5017d;
      line-height:2.2rem;
 
  }
  .search-input{
      width:100%;
      height: 1.3rem;
      border-top:0px;
      border-left:0px;
      border-right:0px;
      border-bottom: 1px solid 1px !important ;
      background-color: #e5017d;
      color:#fff;
  }
  .location-icon{
      padding-top: .2rem;
      padding-left: .3rem;
  }
 
</style>