6-4 完成首页除图表外的内容

目录：

• 完成的效果图
• 实现的代码

一、完成的效果图

二、实现的代码

2.1、编辑Home.vue代码

<template>
    <div>
      <el-row class="home" :gutter="20">
        <el-col :span="8">
          <!--编写左边用户信息-->
          <el-card shadow="hover" style="height: 290px">
            <div class="user">
              <img :src="userImg">
              <div class="userinfo">
                <p class="name">高高老师</p>
                <p class="access">超级管理员</p>
              </div>
            </div>
            <div class="login-info">  <!--登录信息-->
                <p>上次登录时间: <span>2019-10-20</span></p>
                <p>上次登录地点: <span>北京</span></p>
              </div>
          </el-card>
          ....
        </el-col>
        <el-col :span="16">
          <div class="num">
            <el-card shadow="hover" v-for="item in countData" :key="item.name">  <!--循环模拟数据-->
                              <!--`el-icon-${item.icon}` ES6的语法-->
              <i class="icon" :class="`el-icon-${item.icon}`" :style="{backgroundColor:item.color}"></i>
              <div class="detail">
                <p class="num">￥ {{item.value}}</p>
                <p class="txt">{{item.name}}</p>
              </div>
            </el-card>
          </div>
          ....
        </el-col>
      </el-row>
    </div>
</template>

<script>
    import '../../assets/css/home.css';
    export default {
        data(){
          return {
            ...
            countData: [ //模拟的数据
              {
                name: '今日支付订单',
                value: 1234,
                icon: 'success',
                color: '#2ec7c9'
              },
              {
                name: '今日收藏订单',
                value: 210,
                icon: 'star-on',
                color: '#ffb980'
              },
              {
                name: '今日未支付订单',
                value: 210,
                icon: 's-goods',
                color: '#ffb980'
              },
              {
                name: '本月支付订单',
                value: 1234,
                icon: 'success',
                color: '#2ec7c9'
              },
              {
                name: '本月收藏订单',
                value: 210,
                icon: 'star-on',
                color: '#ffb980'
              },
              {
                name: '本月未支付订单',
                value: 210,
                icon: 's-goods',
                color: '#ffb980'
              }
            ]
          }
        },
        ....
    }
</script>

Home.vue

2.2、home.css

/*用户信息部分的样式*/
.home .user {
  display: flex;
  align-items: center; /*垂直居中*/
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid #ccc;
}

.home .login-info p {
  line-height: 28px;
  font-size: 14px;
  color: #999999;
}

.home .login-info p span {
  color: #666666;
  margin-left: 60px;
}

.home .user img {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  margin-right: 40px;
}

.home .user .userinfo .name {
  font-size: 32px;
  margin-bottom: 10px;
}

.home .user .userinfo .access {
  color: #999999;
}

/*订单详情的样式*/
.home .num .icon{
  font-size: 30px;
  width: 80px;
  height: 127.2px;
  text-align: center;
  line-height: 127.2px;
  color: #fff;
}

.home .num .detail{
  margin-left: 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.home .num .detail .num{
  font-size: 20px;
  margin-top: 10px;

}

.home .num .detail .txt{
  font-size: 14px;
  text-align: center;
  color: #999;
}

.home .num .el-card .el-card__body {
  display: flex;
  padding: 0;
}