概述
组件化界面,三个区域。
“通讯录” +符合 - src/pages/components/Header.vue,相对布局:
<template>
<div class="header">
通讯录
</div>
</template>
<script>
export default {
name: "Header"
}
</script>
<style lang="stylus" scoped>
.header
position: relative
overflow: hidden
height: 0.86rem
</style>
搜索 -src/pages/components/Search.vue
<template>
<div class="search">
<input type="text" placeholder="搜索"/>
</div>
</template>
<script>
export default {
name: "Search"
}
</script>
<style lang="stylus" scoped>
.search
height: 0.72rem
</style>
列表 -src/pages/components/List.vue:
每个字母为一个div,里面是字母和字母下的联系人,用了绝对布局
<template>
<div class="list">
<div class="phoneBook"<