粉丝管理 (一)-基础布局-avatar头像组件-基本用法模式 & 路由组件模块使用方法

01-粉丝管理-基础布局

第一步：创建组件 src/views/fans/index.vue

第二步：路由内导入组件 src/router/index.js

import Fans from '@/views/fans'
...
//指定路由规则，实现功能
children:[
     {path:'/fans',name:'fans',components:fans}
]

tabs标签页组件-选项卡模式：https://element.eleme.cn/#/zh-CN/component/tabs

breadcrumb面包屑组件-基础用法模式：https://element.eleme.cn/#/zh-CN/component/breadcrumb

avatar头像组件-基本用法模式：https://element.eleme.cn/#/zh-CN/component/avatar

button按钮组件-朴素/主要模式：https://element.eleme.cn/#/zh-CN/component/button

<template>
  <div class="container">
      //面包屑导航
    <el-card>
      <div slot="header">
        <my-bread>粉丝管理</my-bread>
      </div>
      <!-- 标签页 tabs -->
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="粉丝列表" name="list">
          <div class="fans_list">
            <div class="fans_item">
              <el-avatar :size="80" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"></el-avatar>
              <p>吃货哈哈</p>
              <el-button type="primary" plain size="small">+关注</el-button>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="粉丝画像" name="photo">粉丝画像123</el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
export default {
  data () {
    return {
        //导航栏默认选中设置
      activeName: 'list'
    }
  }
}
</script>

<style scoped lang='less'>
.fans_item{
  width: 120px;
  height: 170px;
  border: 1px dashed #ddd;
  text-align: center;
  padding-top: 10px;
  p{
    font-size: 12px;
  }
}
</style>