Vue2.5学习笔记 9.1 详情页的Banner

 从这篇笔记开始进入到详情页的开发：

1. 首先建立路由，main.js关联Detail页面

// Home/Recommend.vue
<template>
  <div>
    <div class="title">热销推荐</div>
    <ul>
//这里是将li标签携程router-link标签。也可以在<li>标签外面包裹<router-link>但是会默认将<li>标签变成<a>标签 所以直接改算了。 反正都会被修改。 然后在时候tag="li" 将router-link标签解析成<li>标签
      <router-link
        tag="li"
        class="item border-bottom"
        v-for="item of list"
        :key="item.id"
// 这里 动态router路由 路径+ id
        :to="'/detail/' + item.id"
      >
        <img class="item-img" :src="item.imgUrl" />
        <div class="item-info">
          <p class="item-title">{{ item.title }}</p>
          <p class="item-desc">{{ item.desc }}</p>
          <button class="item-button">查看详情</button>
        </div>
      </router-link>
    </ul>
  </div>
</template>

 

import Detail from '@/pages/detail/Detail'

Vue.use(Router)

export default new Router({
  routes: [
    {
// 添加Detail路由 这里注意 path. 前面是正常路径 后面是带过来的变量
      path: '/detail/:id',
      name: 'Detail',
      component: Detail
    }
  ]
})

然后新建Detail组件

// Detail.vue
<template>
  <div>
    <detail-banner></detail-banner>
  </div>
</template>

<script>
import DetailBanner from './components/Banner'
export default {
  name: 'Detail',
  components: {
    DetailBanner
  }
}
</script>

<style lang="stylus" scoped>

</style>

第一步完成。接下来我们就先写详情页面的第一个子组件：顶部图片样式：

// DetailBanner.vue

<template>
  <div class="banner">
    <img class="banner-img" src="http://img1.qunarzz.com/sight/p0/1901/7c/7cb1cca588241d6ba3.img.jpg_600x330_97696da7.jpg" />
    <div class="banner-info">
      <div class="banner-title">厦门科技馆</div>
      <div class="banner-number"><span class="iconfont banner-icon">&#xe6eb;</span>17</div>
    </div>
  </div>
</template>

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

<style lang="stylus" scoped>
  .banner
    position: relative
    overflow: hidden
    height: 0
    padding-bottom: 55%
    .banner-img
      width: 100%
    .banner-info
      display: flex
      position: absolute
      left: 0
      right: 0
      bottom: 0
      line-height: .6rem
      color: #fff
// 这里要说下 这个是渐变的效果。由黑色到透明度80%的黑色
// 参考文档 http://www.runoob.com/cssref/func-linear-gradient.html
      background-image: linear-gradient(top, rgba(0,0,0, 0), rgba(0,0,0, 0.8))
      .banner-title
        flex: 1
        font-size: .32rem
        padding: 0 .2rem
      .banner-number
        margin-top: .14rem
        padding: 0 .4rem
        line-height: .32rem
        height: .32rem
        border-radius: .2rem
        background: rgba(0, 0, 0, .8)
        font-size: .24rem
        .banner-icon
          font-size: .24rem
</style>

这里要说下关于iconfont更换的方法：

首先去www.iconfont.cn中添加想要的或者需要更换的图标 然后下载下来

然后将字体全部替换掉自己项目中的原来的iconfont字体

最后需要将iconfont.css中的一段代码做替换：

url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAPgAAsAAAAACBgAAAOSAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDMgqDMIJ9ATYCJAMUCwwABCAFhG0HUBsRB8gekiSISgQSkIhQQrC84+G/uc/7MhNo/gKrIsmVBZY9VezLCkkCyi90QThAD+jWFVi4/G/d+7eQU+l5VcHJdPqQOZlM4Q8vZaxgLP+2KfsL/D+HS5u2wea3LJc1h5Vt6gUYTaBAx5xAgXYgd6J8w9gFLXEzgdZcKay2FFU0gKPM7BWIo6LQC44ZndyQHhqhqpiYxV12muJacRfAneDn4xfowpFCmZgDd+wvHICcr35/1qfZ7ooOD4E/nQVsGgmrgUwcq7QdZRPFVrPRqn9nawPQahSKr37fy77/+bO+64AmOpCitf7hkYVCIipm6gDYgOKZr34OL5GXQY2A8j+QScGv9XEJzzWRFj2cBO4zcYt9XKEU0riVbW7LmAxw9er2uPE4aF3CwL5bK9f4kwM7k/fGWjlUow4dnnZeDZsf3Xh/9d31N7Nb3fe1NrcKePWsb8Kq5f5kzbwAYe0Kv8SseIws1nT3qfPz500vXjQ/e9b49GlO4+rZVeOBpEHmFNmVnoHla6wkyQod6cyGD1pz9sG8UbeBsb5X8SPzFhUL7x1HWFYNgPVd9vq5y9dm5rY2jbUWoukwhyczXV2Xfbn7SgSMXJ6dXRa0jKwLWnf48LLgZS4nkpDCApD2f4PDlg8fshYYynfYvHxhswNrvnzBi6YXL213KJte8GXmQ4F7f15/10qb27dtAHnl61fWdOtWctmr13sPO/Rr6wu7dk1a1/2h9bXZ+t49a7ND3yhzcHpUnAfdGVLQSSBzO0BXum6T8zd/x9ldHTu6Pdb8b3oZfLlzclvg7WTozvslcir/3/E7lmRNaOrLrBQ6PMVRmr5rWaFWtfhjrjHvp1FMdk4lNCYTKNTmQNJYjMzY1VDqmYZKYz20Vime3jOOsRF5FlZaBCCMOAqFIU8hGXEPmbHvoDTlH1RGwgZaO2N8wZ6lITpvZriX4wHUN4bEfmohtpE7h+l1WFBMvSwtDChNmMliEGlVmnyyGFswm2KIPCzoOCeIMGpGRWA7bDJRJDE6hPu5apBzKU2tJlVvUvVTMzjbjMF6cdgApM8YRNSPsiBeZc658P06mEBh0os1FFVZm2CMTGwd0VLRdEAWyyydim7lGtkwgQ7HEQjBUGZIEbBgJitGIVJ1uyFYP05lcEBEkkaNypGuMtXyCvM7boKWuXQZRaTIUUalPiz2WjhV7E8oUiR1uolR3SZMuMNxqsgK1QIAAAA=') format('woff2'),

这样就完成了。