17pdf_front_end/pages/members/me/points.vue

<!--
 * @Description: 
 * @Author: 欧阳承珺
 * @LastEditors: 欧阳承珺
 * @Date: 2022-11-02 10:18:11
 * @LastEditTime: 2022-11-02 13:49:41
-->
<template>
  <div>
    <div>
      <p class="py-15px text-20px leading-28px">转换券购买记录</p>
    </div>
    <el-table :data="tableData">
      <el-table-column label="类目" ></el-table-column>
      <el-table-column label="金额" ></el-table-column>
      <el-table-column label="订单编号" ></el-table-column>
      <el-table-column label="时间" ></el-table-column>
      <!-- 表格无数据显示 -->
      <div slot="empty">
        <div class="table-empty"></div>
        <p class="text-14px" style="color:rgba(0,0,0,0.54)">没有任何消费记录</p>
        <p class="leading-20px mt-8px mb-100px text-14px" style="color:rgba(0,0,0,0.38)">每一分钱都花在了刀刃上</p>
      </div>
    </el-table>   
  </div>

</template>

<script>
export default {
  layout: 'userCenter',
  data() {
    return {
      tableData:[]
    }
  }
}
</script>

<style lang="scss">
.el-table {
  th {
    background-color: #f4f4f4 !important;
    font-size: 16px;
    color: #666666;
    font-weight: normal;
  }
}
.table-empty {
  margin-top: 50px;
  height: 200px;
  background: url(http://cn-file.17pdf.com/website/members/pic_noconsumption.png) no-repeat center center;
}
</style>