<template>
  <div style="height: 100%; width: 100%">
    <el-row style="height: 100%">
      <el-col :span="24" style="height: 30%;margin: 20px 0 0 25px;"
        >
       <b style="margin-left: 15px;font-size: 16px;">企业信息</b>

        <dv-decoration-3 style="width:100px;height:30px;" /></el-col>
      <el-col :span="12" style="height: 50%"
        ><div class="back" @click="seeUser">
          <dv-border-box-12 class="box12"
            ><img
              src="https://www.diandiananquan.com/cqplatform/img/yg.eae9c7ae.svg"
              alt=""
          /></dv-border-box-12>
          <div class="content">
            <p>人员数量</p>
            <p>
              <span

                >{{ userNum }}</span
              >人
            </p>
          </div>
        </div></el-col
      >
      <el-col :span="12" style="height: 50%"
        ><div class="back" @click="seeArea">
          <dv-border-box-12
          class="box12"
            ><img
              src="https://www.diandiananquan.com/cqplatform/img/sczz.1ef73dfc.svg"
              alt=""
          /></dv-border-box-12>
          <div class="content">
            <p>生产区域</p>
            <p>
              <span

                >{{ areaNum }}</span
              >个
            </p>
          </div>
        </div></el-col
      >
    </el-row>
    <!-- <el-row style="height: 50%;">
  <el-col :span="12"><div>3</div></el-col>
  <el-col :span="12"><div>4</div></el-col>
</el-row> -->

  </div>
</template>

<script>
import { sysUserStatistics, sysAreaStatistics, listUser } from '@/api/home'
export default {
  name: "RuoyiUiProple",

  data() {
    return {
      userNum: 0,
      areaNum: 0,
      dialogUser: false
    };
  },

  mounted() {
    sysUserStatistics().then(res => {
      if (res.code === 200) {
        this.userNum = res.data
      }
    })
    sysAreaStatistics().then(res => {
      if (res.code === 200) {
        this.areaNum = res.data
      }
    })
  },

  methods: {
    seeUser () {
      this.$emit('seeUser')
    },
    seeArea () {
      this.$emit('seeArea')
    }
  },
};
</script>

<style lang="scss" scoped>
.back {
  background: linear-gradient(
    360deg,
    #51beff 0%,
    rgba(0, 159, 255, 0.45) 1%,
    rgba(0, 132, 211, 0.41) 4%,
    rgba(0, 126, 201, 0.4) 9%,
    rgba(0, 0, 0, 0) 100%
  );
  cursor: pointer;
  width: 160px;
  height: 70px;
  margin: 18px 18px 4px 18px;
  color: #fff;
  display: flex;
  border-radius: 5px;
}
img{
  width: 30px;
  height: 30px;
  margin-top: 20px;
}
.content {
  p{
    margin: 8px;
  }
  span{
    font-size: 20px;
                  color: red;
                  font-weight: 700;
                  margin-right: 3px;
  }
}
.back1 {
  background: linear-gradient(
    360deg,
    #51beff 0%,
    rgba(0, 159, 255, 0.45) 1%,
    rgba(0, 132, 211, 0.41) 4%,
    rgba(0, 126, 201, 0.4) 9%,
    rgba(0, 0, 0, 0) 100%
  );
  width: 160px;
  height: 70px;
  margin: 4px 18px 18px 18px;
  color: #fff;
  display: flex;
  border-radius: 5px;
}
.box12 {
  height: 70px;
  width: 70px;
  text-align: center;
  line-height: 70px;
}
</style>
