vue2.0饿了么--header数据获取后进行header组件的编写

首先我们通过props属性接受到父组件App.vue传过来的数据

export default {
//:seller = "seller" props接收传过来的seller对象
  props: {
    seller: {
      type: Object 
    }
  }
}

之后，编写dom结构

<img width="64" height="64" :src="seller.avatar">

 <!-- data.json中显示support是一个数组,支持减免等活动,异步过程获取的support为undefined,所以用v-if判断 -->
            <div v-if="seller.supports" class="support">
              <span class="icon" :class="classMap[seller.supports[0].type]"></span>
              <span class="text">{{seller.supports[0].description}}</span>
            </div>

设置左右两栏为inlin-block时，左右两栏中间有空隙，这时，设置其fuyu父元素的font-size ： 0；即可消除缝隙，在子元素中再重新设置font-size，span不可设置宽高，在mixin中定义2x和3x图片，不要忘了在当前目录下引入图片

@import "../../common/stylus/mixin.styl";
      font-size: 0  /*  去掉图像与文字之间的缝隙，即空白字符 */
      .avatar
        display: inline-block
        vertical-align: top
        img 
          border-radius: 2px
      .content
        display: inline-block
        font-size: 14px
        margin-left: 16px
        .title
          margin: 2px 0 8px 0
          .brand
            display: inline-block /* brand为span不可指定宽高，将其设置为inline-block*/
            vertical-align : top /* 设置对其方式 */
            width: 30px
            height: 18px   
            bg-image('brand') /* 区分2x和3x图片，在mixin.styl中定义bg-image图片 */
            vertical-align : top /* 设置图片与文字对其方式 */

bg-image($url)
  background-image url($url + "@2x.png") /* 正常情况下使用@2x的图像 */
  @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio)
    background-image url($url + "@3x.png")

在support中有五种优惠种类，只需显示一种，我们现在style中定义好样式

.support
        .icon
          display : inline-block /* span设置宽高*/
          width : 12px
          height : 12px 
          margin-right : 4px
          vertical-align : top /* 设置对其方式 */
          background-size : 12px 12px
          background-repeat : no-repeat
          &.decrease
            bg-image('decrease_1')
          &.discount
            bg-image('discount_1')
          &.guarantee
            bg-image('guarantee_1')
          &.invoice
            bg-image('invoice_1')
          &.special
            bg-image('special_1')
        .text 
          line-height : 12px
          font-size : 12px  /* 父类定义了font-size：0，这里要重新定义字体才能显示*/
          vertical-align : top /* 设置对其方式 */

icon下有&.decrease等五种图片，但是我们只需要显示一种即可，我们添加一个数组做映射

 created() {
    this.classMap = ['decrease', 'discount', 'special', 'invoice', 'guarantee'];
  }
在html中

<!-- data.json中显示support是一个数组,支持减免等活动,异步过程获取的support为undefined,所以用v-if判断 -->
            <div v-if="seller.supports" class="support">
              <span class="icon" :class="classMap[seller.supports[0].type]"></span>
              <span class="text">{{seller.supports[0].description}}</span>
            </div>

其中data.json中support的格式为

"supports": [
      {
        "type": 0,
        "description": "在线支付满28减5"
      },
      {
        "type": 1,
        "description": "VC无限橙果汁全场8折"
      }
}

在seller.supports[0].type中我们可以取到下标（0,1），然后通过classMap[seller.supports[0].type]中的映射取到对应的decrease或者是discount等等，将其对应到style中相应的&.decrease中即可实现

编写support种类的标记（5>）

<div v-if="seller.supports" class="support-count" @click = "showdetail">
              <span class="count">{{seller.supports.length}}个</span>
              <span class="icon-keyboard_arrow_right"></span>
            </div>

css样式：

.support-count
        position: absolute
        right: 12px
        bottom : 14px
        padding : 0 8px
        height: 24px
        line-height: 24px
        border-radius : 12px
        background-color : rgba(0,0,0,.2)
        text-align : center 
        .count
          font-size : 10px
          vertical-align : top
        .icon-keyboard_arrow_right
          font-size : 10px
          margin-left : 2px
          line-height 24px /* line-height默认为1，这里要重写一下*/

编写header最下方的长条状的公告

    <div class="bulletin-wrapper" @click = "showdetail"  transition="fade">
      <span class="bulletin-title"></span>
      <span class="bulletin-text">{{seller.bulletin}}</span>
      <span class="icon-keyboard_arrow_right"></span>
    </div>

编写样式：

    .bulletin-wrapper 
      background-color : rgba(7, 17, 27, 0.2)  
      position relative
      height: 28px
      line-height: 28px
      padding: 0 22px 0 12px
      white-space: nowrap /* 一下三行出现...的效果*/
      overflow: hidden
      text-overflow: ellipsis
      .bulletin-title
        display: inline-block; /* span */
        width: 22px
        height: 12px
        bg-image('bulletin');
        background-size: 22px 12px
      .bulletin-text
        font-size: 10px
        vertical-align: top
      .icon-keyboard_arrow_right
        position absolute
        top: 0px
        right: 12px
        font-size : 10px
        line-height : 28px

header有一个半透明的背景

    <div class="background">
      <img :src="seller.avatar" width="100%" height="100%">
    </div>

.background   /* header部分背景图的实现，z-index设为-1即可 */
      position absolute
      top: 0
      left: 0
      width: 100%
      height: 100%
      z-index: -1
      filter: blur(10px) /* 模糊效果*/