图片.png

这节主要是讲解上面红框的制作
这个尺寸是按照iPhone6给的2倍图的设计稿，同样，我们制作页面的时候，也会以2倍图来制作。
事前安装：
1、在开发的时候，会用到stylus这个CSS开发的辅助工具帮助开发网站的样式
如何在项目中使用stylus?
在命令提示符中，定位到travel上，输入npm install stylus --save,回车后就安装了
2、接下来还要再安装一个内容stylus-loader
和上面一样，输入npm install stylus-loader --save,回车后就安装。
然后就重新启动项目，输入npm run start.
为了方便组件化的编写，我在home文件夹下创建了新的子文件夹components，这样home中的所有的局部组件都将放入这个子文件夹里面，然后home文件夹中的Home.vue作为一个总的去整合调用这些组件。
如何在Home.vue中调用Header.vue呢？

图片.png

就是在Home.vue中用import引入HomeHeader，然后在export default中使用HomeHeader（这里使用的是es6规范，键值对一样的话，就省略一样就可以）
这样在上面的template标签内就可以使用home-header标签了，这个大小写无所谓，vue会自动做一个关联。
这样就可以了，可以试一下，在Header.vue中的template中输入this is header，打开浏览器就可以看到出现的内容：

图片.png

图片.png

<template>
  <div class="header">
    <div class="header-left">返回</div>
    <div class="header-input">内容</div>
    <div class="header-right">城市</div>
  </div>
</template>

<script>

export default {
  name:'HomeHeader'
}
</script>

<style lang="stylus" scoped>
  .header
    display:flex
    height: .86rem
    .header-left
      width: .64rem
      float: left
    .header-input
      flex: 1
    .header-right
      width: 1.24rem
      float: right
</style>

我将template分为三部分：header-left、header-input、header-right，分别对应着返回、内容、城市，这样网页的三个部分就显示出来了
样式写在style标签中，我们要使用stylus来写这个样式，需要在style标签中加入lang="stylus"，这样就可以了
同时，我们希望我们写的这个组件的样式不要对其他的组件产生影响，但是如果我就这样写的话，就不仅会对我要渲染的这个组件产生效果，还会对其他组件产生效果，那么如何对这个style做一个限制呢？可以在style标签中加入scoped这个关键字，这样就限制其中的
内容只对这个.header有效，不会对别的组件产生渲染效果。
下面就开始编写这个样式中的内容
本来如果是用cssl来编写的话，需要在.header后面加入大括号，然后在大括号中编写，但是现在我们使用的是stylus，语法就不一样了，如上图直接写 就可以了。
但是有一个问题：我测量的都是用的是像素为单位，上图显示的是rem为单位？
因为移动端的布局一般采用的是rem的方式。
打开styles中的styles目录中的reset.css

图片.png

可以看到font-size是50px，rem是相对于50像素的尺寸，即1rem=html font-size = 50px
style标签中的高度是86px，但是这个是有问题的，因为我们用的是2倍尺寸的图片，所以我们应该写成43px，换算后即为0.86rem，这个也是font-size设置成50px的妙处，像素高度除以100即为rem为单位
页面显示出来的如下；

图片.png

<template>
  <div class="header">
    <div class="header-left">返回</div>
    <div class="header-input">输入城市/景点/游玩主题</div>
    <div class="header-right">城市</div>
  </div>
</template>

<script>
export default {
  name:'HomeHeader'
}
</script>

<style lang="stylus" scoped>
  .header
    display: flex
    line-height: .86rem
    background: #00bcd4
    color: #fff
    .header-left
      width: .64rem
      float: left
    .header-input
      flex: 1
      height: .64rem
      line-height: .64rem
      margin-top: .12rem
      margin-left: .2rem
      background: #fff
      border-radius: .1rem
      color: #ccc
    .header-right
      width: 1.24rem
      float: right
      text-align:center
</style>

备注下：这里将height全都改成了line-height，因为line-height有居中的功能。header-input中有一个height，这个是把高度给定死。
显示出的效果如下

图片.png

这里还差了效果：左边的箭头，中间的放大镜和右边的三角形，这个需要使用iconfont或者是css来实现，将在下一节来学习。