lottery-activity-portal/src/views/Home.vue

<template>
  <div>
    <el-breadcrumb separator=">">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>
        <a href="/">控制台</a>
      </el-breadcrumb-item>
    </el-breadcrumb>
    <el-divider></el-divider>
    <!-- <div class="card">
      <div class="floor-one">
        <h5 class="tit">基本情况</h5>
        <el-row :gutter="20">
           <el-col :span="6">
            <div class="grid-content bgorange">
              <i class="iconfont iconfasfa-cog1"></i>
              <h4><p>今日报案登记数</p>{{item1}}</h4>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bgpink">
              <i class="iconfont iconmd-av_timer1"></i>
              <h4><p>昨日报案登记数</p>{{item2}}</h4>
            </div>
          </el-col>
           <el-col :span="6">
            <div class="grid-content bgblue">
              <i class="iconfont iconfasfa-cog1"></i>
              <h4><p>今日咨询登记数</p>{{item3}}</h4>
            </div>
          </el-col>
           <el-col :span="6">
            <div class="grid-content bggreen">
              <i class="iconfont iconmd-av_timer1"></i>
              <h4><p>昨日咨询登记数</p>{{item4}}</h4>
            </div>
          </el-col>
        </el-row>
      </div>
      <el-card class="diagram">
        <div id="everyDayMeasuringDiv" style="width:100%;height: 280px;"></div>
      </el-card>
    </div> -->
  </div>
</template>
<script>
import Constant from "@/constant";

import "nprogress/nprogress.css"; // progress bar style
import NProgress from "nprogress"; // progress bar
// @ is an alias to /src
export default {
  name: "Home",
  data() {
    return {
      item1: "0",
      item2: "0",
      item3: "0",
      item4: "0",
      advisoryNumList: [],
      reportNumList: [],
      day: [],
    };
  },
  methods: {

  },
};
</script>
<style lang="scss" scoped>
.xtsyqk_fyy {
  height: 64px;
  margin-bottom: 40px;
}
.xtsyqk_fyy i {
  font-size: 26px;
}
.xtsyqk_fyy span b {
  font-size: 21px;
}
.xtsyqk_fyy span {
  display: block;
  text-align: center;
  font-size: 14px;
}
.xtsyqk_fyy_60 {
  width: 60%;
  float: center;
}
.xtsyqk_fyy_40 {
  width: 40%;
  float: left;
}
.el-breadcrumb {
  margin: 10px;
  line-height: 20px;
}

.el-divider {
  margin: 5px 0;
}

.header {
  text-align: left;
}

.diagram_top {
  margin: 20px 20px;
  width: 140px;
  height: 120px;
  float: left;
}
.diagram {
  margin: 20px 20px;
  width: 97%;
  height: 300px;
  float: left;
}
.diagram_extraWide {
  margin: 20px 20px;
  width: 220px;
  height: 120px;
  float: left;
}
.ax_default {
  width: 180px;
}
.ax_default2 {
  width: 320px;
}
.diagram_jkgs {
  margin: 20px 20px;
  height: 120px;
  float: left;
}
.ax_default3 {
  width: 170px;
}
.grid-content{
  display: flex;
  align-items: center;
  padding:15px 20px;
  color:white;
  border-radius: 3px;
}
.floor-one .grid-content i{
  font-size:50px
}
.floor-one .grid-content h4{
  text-align: center;
  font-size:24px;
  margin:0;
  margin-left:10px
}
.floor-one .grid-content p{
  font-size:14px;
  margin:0
}
.bgpink{
  background:#FF7970
}
.bgorange{
  background:#FF6200
}
.bgblue{
  background:#427BEE
}
.bggreen{
  background:#42b7ee
}
.bgyellow{
  background:#F4C735
}
.bgred{
  background:#F44235
}
.card{
  padding:30px;
  text-align: left;
}
.floor-two .grid-content{
  justify-content: center;
  position:relative
}
.floor-two .grid-content::after{
  content:"";
  position:absolute;
  right:0;
  top:50%;
  width:1px;
  height:50px;
  margin-top:-25px;
  background:#D3D3D3
}
.floor-two .el-col:last-child .grid-content:after{
  width:0
}
.floor-two .grid-content i{
  width:50px;
  height:50px;
  border-radius: 50%;
  text-align: center;
  line-height: 50px;
  color:white;
  font-size:25px
}
.floor-two .grid-content h5{
  text-align: center;
  font-size:16px;
  margin:0;
  margin-left:10px;
  color:black
}
.floor-two .grid-content h5 p{
  font-size:14px;
  margin:0;
  margin-top:10px;
  font-weight:initial;
}
.floor-two{
  margin:50px 0
}
.tit{
  margin:0 0 20px
}
</style>