Vue + Element-UI —— 项目实战（三）

  <el-card shadow="hover" style="margin-left: 20px">
      <div class="user">
        <img :src="userImg" />
        <div class="userinfo">
          <p class="name">Admin</p>
          <p class="access">超级管理员</p>
        </div>
      </div>
      <!-- 第一个卡片下部分显示的信息 -->
      <div class="login-info"> 
        <p>上次登录时间：<span>2022-6-2</span></p>
        <p>上次登录地点：<span>青岛</span></p>
      </div>
    </el-card>

  data() {
      return {
    userImg: require("@/assets/images/user.png")
    }
  }

    <el-card
      shadow="hover"
      style="margin-top: 20px; margin-left: 20px; height: 455px"
    >
      <el-table :data="tableData">
        <!-- prop：读取对应列内容的字段名，用来显示具体数据
              label：显示的标题，用来显示第一行的标题-->
        <el-table-column
          v-for="(val, key) in tableLabel"
          :key="key"
          :prop="key"
          :label="val"
        >
        </el-table-column>
      </el-table>
    </el-card>

  tableData: [
        {
          name: 'oppo',
          todayBuy: 100,
          monthBuy: 300,
          totalBuy: 800
        },
        {
          name: 'vivo',
          todayBuy: 100,
          monthBuy: 300,
          totalBuy: 800
        },
        {
          name: '苹果',
          todayBuy: 100,
          monthBuy: 300,
          totalBuy: 800
        },
        {
          name: '小米',
          todayBuy: 100,
          monthBuy: 300,
          totalBuy: 800
        },
        {
          name: '三星',
          todayBuy: 100,
          monthBuy: 300,
          totalBuy: 800
        },
        {
          name: '魅族',
          todayBuy: 100,
          monthBuy: 300,
          totalBuy: 800
        }
    ]

    <!-- body-style 设置body的样式，注意为对象类型 {display: 'flex'} -->
    <el-card
      v-for="item in countData"
      :key="item.name"
      :body-style="{ display: 'flex', padding: 0 }"
    >
      <!-- 动态渲染图标 -->
      <i
        class="icon"
        :class="`el-icon-${item.icon}`"
        :style="{ background: item.color }"
      ></i>
      <div class="detail">
        <p class="num">￥{{ item.value }}</p>
        <p class="txt">{{ item.name }}</p>
      </div>
    </el-card>

  countData: [
      {
        name: "今日支付订单",
        value: 1234,
        icon: "success",
        color: "#2ec7c9",
      },
      {
        name: "今日收藏订单",
        value: 520,
        icon: "star-on",
        color: "#ffb980",
      },
      {
        name: "今日未支付订单",
        value: 678,
        icon: "s-goods",
        color: "#5ab1ef",
      },
      {
        name: "本月支付订单",
        value: 5050,
        icon: "success",
        color: "#2ec7c9",
      },
      {
        name: "本月收藏订单",
        value: 1024,
        icon: "star-on",
        color: "#ffb980",
      },
      {
        name: "本月未支付订单",
        value: 6888,
        icon: "s-goods",
        color: "#5ab1ef",
      },
    ]