详情弹出层

如果页面内容不够长的时候，页脚块粘贴在视窗底部；如果内容足够长时，页脚块会被内容向下推送著作权归作者所有。
，采用经典的Css Sticky footers

• 显示隐藏
  给标签添加v-show，在data中设置v-show状态，再对按钮添加点击事件
  在methods中设置v-show显示

<div v-show="detailShow" class="detail"></div>
<div class="bulletin-wrapper" @click="showDetail"></div>
data() {
  return {
      detailShow: false; //默认是隐藏的
  }
},
methods:{
  showDetail() {
    this.detailShow = true
  }
}
            

sticky footers

通常有两个层

<div class="detail-wrapper clearfix">
    <div class="detail-main"></div>
</div>

<div class="detail-close"></div>

.detail-wraper
  min-height: 100%
  .detail-main
    margin-top: 64px
     padding-bottom: 64px

.detail-close
  position: relative
  width: 32px
  height: 32px
  margin: -64px auto 0 auto
  clear: both
  font-size: 32px
  

star组件抽象

<div class="star" :class="starType">
  <span v-for="itemClass in itemClasses" :class="itemClass" class="star-item"></span>
</div>
---------------------------------css-----------------------------------------------------
     .star  
        font-size: 0
        .star-item
            display: inline-block
            background-repeat: no-repeat
        &.star-48
            .star-item
                width: 20px
                height: 20px
                margin-right: 22px
                background-size: 20px 20px
                &:last-child
                    margin-right: 0
                &.on
                    bg-image('star48_on')
                &.half
                    bg-image('str48_half')
                &.off
                    bg-image('star-48_off')
        &.star-36
            .star-item
                width: 15px
                height: 15px
                margin-right: 6px
                background-size: 15px 15px
                &:last-child
                    margin-right: 0
                &.on
                    bg-image('star36_on')
                &.half
                    bg-image('str36_half')
                &.off
                    bg-image('star-36_off')
        &.star-24
            .star-item
                width: 10px
                height: 10px
                margin-right: 3px
                background-size: 10px 10px
                &:last-child
                    margin-right: 0
                &.on
                    bg-image('star24_on')
                &.half
                    bg-image('str24_half')
                &.off
                    bg-image('star-24_off')

---------------------------------js-----------------------------------------------------
export default {
  const LENGTH = 5
  const HALF = 'half'
  const ON = 'on'
  const OFF ='off'
  props: {
    size: {
      type:Number
    }
    score: {
      type: Number
    }
  },
  computed: {
    starType() {
      return 'star-' + this.size
    },
    itemClasses() {
      let result = []
      let score = Math.floor(this.score * 2) / 2
      let hasDecimal = score % 1 !== 0//对1取模不为0，说明是有小数
      let integer =  Math.floor(score)
      for(var i = 0; i < integer; i ++) {
        result.push(ON)
      }
      if(hasDecimal){
         result.push(HALF)
      }
      while(result.length < LENGTH){
         result.push(OFF)         
      }
      return result
    }
  }
}

--------------------------在header组件中引用star组件----------------------------
传入size和score两个参数
<star :size="48" :score="4.3"></star>
import star from '@/components/star/star'
export default {
  components: {
      star
  }
}

小标题自适应经典flex布局

<div class="title">
  <div class="line"></div>
  <div class="text"></div>
  <div class="line"></div>
</div>
-------------css--------------------
.title
  display: flex
  width: 80%
  margin: 30px auto 24px auto
  .line
  flex: 1
  position: relative
  top: -6px
  border-bottom: 1px solid rgba(255,255,255,0.2)
  .text
  padding: 0 12px
  font-size: 14px;

----------------------for in li---------------------------------
<ul class="suppports">
    <li class="suppport-item" v-for="(item,index) in seller.supports">
        <span class="icon" :class="classMap[seller.supports[index].type]"></span>
         <span class="text">
            {{seller.supports[index].description}}
         </span>
    </li>
</ul>