shengqingqixie-admin/src/pages/dashboard/base/index.vue

<template>
  <div>
    <!--    <t-back-top-->
    <!--      container=".tdesign-starter-layout"-->
    <!--      :visible-height="0"-->
    <!--      style="position: absolute"-->
    <!--      :offset="['24px', '80px']"-->
    <!--    >-->
    <!--      <t-icon name="backtop" size="20px" />-->
    <!--    </t-back-top>-->
    <!-- 顶部 card  -->
    <!--    <top-panel class="row-container" />-->
    <!--    &lt;!&ndash; 中部图表  &ndash;&gt;-->
    <!--    <middle-chart class="row-container" />-->
    <!--    &lt;!&ndash; 列表排名 &ndash;&gt;-->
    <!--    <rank-list class="row-container" />-->
    <!--    &lt;!&ndash; 出入库概览 &ndash;&gt;-->
    <!--    <output-overview class="row-container" />-->
    <div class="dashboard-detail">
      <t-card title="待办事项" class="dashboard-detail-card" :bordered="false">
        <t-row :gutter="[16, 16]">
          <t-col v-for="(item, index) in list" :key="index" :xs="6" :xl="3">
            <t-card :title="item.name" style="cursor: pointer;">
              <div style="display: flex;justify-content: space-between;align-items: center">
                <div style="font-size: 30px;color:#0052D9">{{ item.value }}</div>
                <div>
                  <icon name="chevron-right-s" style=""/>
                </div>
              </div>
            </t-card>
          </t-col>
        </t-row>
      </t-card>
    </div>
    <div class="dashboard-detail" style="margin-top: 10px;">
      <t-card title="账户信息" class="dashboard-detail-card" :bordered="false">
        <t-row :gutter="[16, 16]">
          <t-col v-for="(item, index) in user_list" :key="index" :xs="6" :xl="3">
            <t-card :title="item.name" style="cursor: pointer;">
              <div style="display: flex;justify-content: space-between;align-items: center">
                <div style="font-size: 30px;color:#0052D9">{{ item.value }}</div>
                <div>
                  <icon name="chevron-right-s" style=""/>
                </div>
              </div>
            </t-card>
          </t-col>
        </t-row>
      </t-card>
    </div>
  </div>
</template>
<script>
import {Icon} from 'tdesign-icons-vue';

export default {
  components: {
    Icon,
  },
  data() {
    return {
      list: [
        {name: '入会审核', value: '11'},
        {name: '青企圈审核', value: '5'},
        {name: '青企圈评论审核', value: '7'},
        {name: '会员发票', value: '1'},
        {name: '编辑信息审核', value: '5'},
        {name: '报名审核', value: '19'},
        {name: '生日提醒', value: '3'},
        {name: '会费逾期', value: '275'},
      ],
      user_list: [
        {name: '访问日志', value: '126'},
        {name: '操作日志', value: '595'},
        {name: '短信余量', value: '402'},
        {name: '存储空间', value: '500G'},
        {name: '剩余空间', value: '450G'},
      ]
    }
  },
  mounted() {
    // var reload=localStorage.getItem('reload');
    // if(!reload){
    //   localStorage.setItem('reload', 1);
    //   setTimeout(() => {
    //     window.location.reload();
    //   }, 50);
    // }
  },
};
</script>
<style scoped lang="less">
.row-container {
  margin-bottom: 16px;
}

/deep/ .t-card__body {
  padding-top: 0;
}
</style>