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"></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'),
这样就完成了。