首先我們通過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) /* 模糊效果*/