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

<template>
  <basic-container>
    <div class="container">
      <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>
              今日到店
              <p>0</p>
              台次
            </div>
          </div>
          <div class="operate-item">
            <div>
              今日到店
              <p>0</p>
              台次
            </div>
          </div>
          <div class="operate-item">
            <div>
              今日到店
              <p>0</p>
              台次
            </div>
          </div>
        </div>
      </index-card>
      <index-card title="客户数据" iconName="el-icon-user">
        <div slot="content" style="height:17vh">1</div>
      </index-card>
      <index-card title="新闻公告" iconName="el-icon-s-fold">
        <div slot="content" style="height:17vh">1</div>
      </index-card>
    </div>
    <!-- <el-row>
      <el-col :span="12">
        <div class="home-brand">
          <div>
            <div class="index" style="padding:10px">
              <div class="but-card">
                <div class="content">
                  <div class="icon">
                    <i class="el-icon-folder-add "></i>
                  </div>
                  <div class="name">
                    工单新建
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <index-card title="今日工作看板" iconName="el-icon-view"></index-card>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <index-card title="待办事项" iconName="el-icon-s-fold"></index-card>
      </el-col>
      <el-col :span="12">
        <index-card
          title="今日营业"
          iconName="el-icon-chat-line-round"
        ></index-card>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <index-card title="客户数据" iconName="el-icon-user"></index-card>
      </el-col>
      <el-col :span="12">
        <index-card title="新闻公告" iconName="el-icon-s-fold"></index-card>
      </el-col>
    </el-row> -->
  </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"]
    };
  },
  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%;
  height: 80vh;
  .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;
    div {
      display: flex;
      align-items: end;
      font-size: 14px;
    }
    p {
      font-size: 24px;
      line-height: 24px;
      margin: 0 4px !important;
    }
  }
}
</style>