```
html
<header>
{{l}}
</header>
js
```
new Vue({
el: 'body',
data: {
list: ['精選', '跑男', '電視劇', '電影', '綜藝', '原創(chuàng)', '原創(chuàng)', '原創(chuàng)', '原創(chuàng)', '原創(chuàng)', '原創(chuàng)', '原創(chuàng)', '原創(chuàng)']
},
computed: {
listWidth: function() {
return {
width: (this.list.length * 4) + 'rem'
}
}
}
})
css
* {
box-sizing: border-box;
}
body {
color: #666;
font-size: 16px;
}
header {
display:flex;
flex-flow:row;
width: 100%;
height: 2rem;
margin: 0 auto;
background-color: #fff;
}
list {
flex: 1;
overflow: auto;
}
list ul {
display: flex;
flex-flow: row;
list-style: none;
height: 2rem;
line-height: 2rem;
margin: 0;
padding: 0;
}
list ul li {
flex: 1;
width: 4rem;
text-align: center;
color
}
icon {
display: flex;
flex-flow: column;
justify-content: space-between;
padding: .5rem;
width: 2rem;
background-color: #2C9E40;
cursor: pointer;
z-index: 2;
}
icon > span {
height: 2px;
background-color: #fff;
}
