home 组件的实现

后台管理系统

home 组件的实现

第一次主要是左侧上面部分的内容

<template>
  <!-- 使用layout方式进行页面布局 
    gutter	栅格间隔 表示每一行一共分为多少个栅格
-->

  <el-row class="home" :gutter="20">
    <!-- 左侧的整体布局 span 表示设置当前行所占用的栅格数-->
    <el-col :span="8" style="margin-top: 20px">
      <!-- 左侧内容进行布局 使用的是card组件，通过此组件进行布局 shadow	设置阴影显示时机-->
      <el-card shadow="hover">
        <!-- 此时user 里面放的是 左侧的头像 和右侧的 信息 -->
        <div class="user">
          <img :src="userImg" />
          <div class="userInfo">
            <p class="name">Admin</p>
            <p class="acess">超级管理员</p>
          </div>
        </div>
        <br />
        <!-- 然后在往下面 -->
        <div class="loginInfo">
          <p>上次登录时间：<span>2022-10-16</span></p>
          <p>上次登录地点：<span>河南</span></p>
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

增加 左侧下面的内容
需要使用组件库中的 table 组件

  <!-- 左侧内容下半部分区域进行布局 使用的是 table 组件进行 -->
      <el-card style="margin-top: 20px; height: 460px">
        <el-table :data="tableData" style="width: 100%">
          <!-- prop 用来读取数据中对应的名称 key代表键值-->
          <el-table-column
            v-for="(val, key) in tableLabel"
            :key="key"
            :prop="key"
            :label="val"
          >
          </el-table-column>
        </el-table>

对右边页面进行布局

 <el-col :span="16">
      <div class="num">
        <!-- 订单相关的统计 首先循环遍历所给的数据 
        给此组件添加样式 
          使用body-style	设置 body 的样式	接收的是object类型	—	{ padding: '20px' }
        -->
        <el-card
          v-for="item in countData"
          :key="item.name"
          :body-style="{ display: 'flex', padding: 0 }"
        >
          <!-- 对于卡片里面的内容 左侧是一个 icon 标签 ，带有颜色，右侧是收入的内容 -->
          <!-- 对于里面的class 动态和静态可以同时存在 对于后面动态绑定的 通过 es6里面的``进行拼接  -->
          <i
            class="icon"
            :class="`el-icon-${item.icon}`"
            :style="{ background: item.color }"
          ></i>
          <!-- 右边的金额和名称 -->
          <div class="detail">
            <p class="num1">￥{{ item.value }}</p>
            <p class="txt">{{ item.name }}</p>
          </div>
        </el-card>
      </div>
      <el-card style="height: 200px; margin-top: 20px"></el-card>
      <div class="graph">
        <el-card style="height: 260px"></el-card>
        <el-card style="height: 260px"></el-card>
      </div>
    </el-col>

<script>
export default {
  name: "home",
  data() {
    return {
      // 注意路径的显示
      userImg: require("@/assets/image/2.jpg"),
      //增加的数据
      tableData: [
        {
          name: "oppo",
          todayBuy: 100,
          monthBuy: 300,
          totalBuy: 800,
        },
        {
          name: "vivo",
          todayBuy: 100,
          monthBuy: 300,
          totalBuy: 800,
        }
      ],
      tableLabel: {
        name: "课程",
        todayBuy: "今日购买",
        monthBuy: "本月购买",
        totalBuy: "总购买",
      },
    };
     countData: [
        {
          name: "今日支付订单",
          value: 1234,
          icon: "success",
          color: "#2ec7c9",
        },
        {
          name: "今日收藏订单",
          value: 210,
          icon: "star-on",
          color: "#ffb980",
        },
        {
          name: "今日未支付订单",
          value: 1234,
          icon: "s-goods",
          color: "#5ab1ef",
        }
      ],
  },
};
</script>

<style lang="less" scoped>
.user {
  display: flex;
  height: 100%;
  // 两端对齐，上下居中
  // justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgb(157, 157, 157);
  padding-bottom: 15px;

  // img
  img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin-right: 30px;
  }
  .userInfo {
    .name {
      font-weight: 600;
      font-size: 20px;
      margin-bottom: 10px;
    }
    .acess {
      color: rgb(157, 157, 157);
      font-size: 14px;
    }
  }
}

.loginInfo {
  font-size: 14px;
  color: rgb(157, 157, 157);
  margin-top: 5px;
  p {
    margin-bottom: 10px;
    span {
      margin-left: 30px;
    }
  }
}


</style>