tire-platform-ui/src/views/wel/index.vue

<template>
  <basic-container>
    <div class="container" :style="isHeight">
      <div class="container-items">
        <but-card iconName="el-icon-edit-outline" name="销售订单" />
        <but-card iconName="el-icon-edit-outline" name="采购订单" />
        <but-card iconName="el-icon-edit-outline" name="发货单" />
        <but-card iconName="el-icon-edit-outline" name="收货单" />
        <but-card iconName="el-icon-edit-outline" name="库存" />
        <but-card iconName="el-icon-edit-outline" name="客户管理" />
        <but-card iconName="el-icon-edit-outline" name="商品管理" />
        <but-card iconName="el-icon-edit-outline" name="用户管理" />
        <but-card iconName="el-icon-edit-outline" name="收费管理" />
        <but-card iconName="el-icon-edit-outline" name="付费管理" />
      </div>
      <index-card title="今日工作看板" iconName="el-icon-view">
        <div slot="content" style="height:25vh"></div>
      </index-card>
      <index-card title="待办事项" iconName="el-icon-s-fold">
        <div slot="content" style="height:17vh"></div>
      </index-card>
      <index-card title="今日营业" iconName="el-icon-chat-line-round">
        <div slot="content" style="height:17vh" class="operate">
          <div class="operate-item">
            <div class="item-text">
              <div class="item-point"></div>
              今日到店
              <p>0</p>
              台次
            </div>
          </div>
          <div class="operate-item">
            <div class="item-text">
              <div class="item-point"></div>
              今日到店
              <p>0</p>
              台次
            </div>
          </div>
          <div class="operate-item">
            <div class="item-text">
              <div class="item-point"></div>
              今日到店
              <p>0</p>
              台次
            </div>
          </div>
        </div>
      </index-card>
      <index-card title="客户数据" iconName="el-icon-user">
        <div slot="content" style="height:17vh"></div>
      </index-card>
      <index-card title="新闻公告" iconName="el-icon-s-fold">
        <div slot="content" style="height:17vh"></div>
      </index-card>
    </div>
  </basic-container>
</template>

<script>
import { mapGetters } from "vuex";
import indexCard from "./components/card.vue";
import butCard from "./components/butCard.vue";
export default {
  name: "wel",
  data() {
    return {
      activeNames: ["1", "2", "3", "5"],
      logActiveNames: ["24"],
      isHeight: {},
    };
  },
  created(){
    this.isHeight.height=window.innerHeight-165+'px'
  },
  components: {
    indexCard,
    butCard
  },
  computed: {
    ...mapGetters(["userInfo"])
  },
  methods: {
    handleChange(val) {
      window.console.log(val);
    }
  }
};
</script>
<style lang="scss" scoped>
.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 50%);
  grid-template-rows: 40% 30% 30%;
  .container-items {
    display: grid;
    grid-template-columns: repeat(auto-fill, 20%);
    grid-template-rows: repeat(auto-fill, 50%);
    align-items: center;
  }
}
//今日营业
.operate {
  display: grid;
  grid-template-rows: repeat(auto-fill, 33.33%);
  .operate-item {
    display: flex;
    align-items: center;
    .item-text {
      display: flex;
      align-items: end;
      font-size: 14px;
      .item-point {
        line-height: 14px;
        width: 14px;
        height: 14px;
        border-radius: 2px;
        background: #ff7d13;
        margin-right: 4px;
        margin-bottom: 1px;
      }
    }
    p {
      font-size: 24px;
      line-height: 24px;
      margin: 0 4px !important;
    }
  }
}
</style>