web-test/src/views/dynamic/parts/userTwo.vue

<template>
  <div id="userTwo">
    <el-row v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading">
      <el-col :span="24" class="userTwo">
        <el-col :psan="24" class="userTwoTop">
          统计数据
        </el-col>
        <el-col :span="24" class="left">
          <el-col class="list" :span="5" v-for="(item, index) in list" :key="index">
            <el-col :span="24" class="one">
              <p>{{ item.name }}</p>
              <p>{{ item.value }}</p>
            </el-col>
          </el-col>
          <!-- <el-col class="box" :span="5">
            <el-col :span="24" class="two one">
              <p>个人注册数量</p>
              <p>{{ detail.num2 }}</p>
            </el-col>
          </el-col>
          <el-col class="box" :span="5">
            <el-col :span="24" class="three one">
              <p>专家注册数量</p>
              <p>{{ detail.num3 }}</p>
            </el-col>
          </el-col>
          <el-col class="box" :span="5">
            <el-col :span="24" class="five one">
              <p>信息发布数量</p>
              <p>{{ detail.num4 }}</p>
            </el-col>
          </el-col>
          <el-col class="box" :span="5">
            <el-col :span="24" class="five one">
              <p>交流互动</p>
              <p>{{ detail.num5 }}</p>
            </el-col>
          </el-col>
          <el-col class="box" :span="5">
            <el-col :span="24" class="three one">
              <p>正在洽谈</p>
              <p>{{ transaction1 }}</p>
            </el-col>
          </el-col>
          <el-col class="box" :span="5">
            <el-col :span="24" class="two one">
              <p>达成意向</p>
              <p>{{ transaction2 }}</p>
            </el-col>
          </el-col>
          <el-col class="box" :span="5">
            <el-col :span="24" class="four one">
              <p>对接完成</p>
              <p>{{ transaction3 }}</p>
            </el-col>
          </el-col> -->
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapState, mapActions, createNamespacedHelpers } from 'vuex';
const { mapActions: count } = createNamespacedHelpers('count');
export default {
  name: 'userTwo',
  props: {},
  components: {},
  data: () => ({
    list: [],
    loading: true,
  }),
  created() {
    this.searchInfo();
  },
  methods: {
    ...count(['circleQuery']),
    async searchInfo({} = {}) {
      let res = await this.circleQuery();
      if (this.$checkRes(res)) {
        this.$set(this, `list`, res.data);
      }
      this.loading = false;
    },
  },
  computed: {
    ...mapState(['user']),
    pageTitle() {
      return `${this.$route.meta.title}`;
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
};
</script>

<style lang="less" scoped>
.userTwo {
  float: left;
  width: 100%;
}
.userTwo .userTwoTop {
  padding: 20px 0 10px 0;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
}
.left {
  float: left;
}
.right {
  float: right;
}
.list {
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 0 5px #ccc;
  padding: 10px;
  margin: 30px 5px 30px 14px;
  .one {
    height: 110px;
    p {
      font-size: 22px;
      color: #346da4;
      font-weight: bold;
      text-align: center;
    }
    p:first-child {
      padding: 40px 0 0 0;
      font-size: 12px;
    }
  }
}
.list:nth-child(1) .one {
  background: url('~@/assets/dynamic4.png') no-repeat;
  background-size: 100% 100%;
}
.list:nth-child(2) .one {
  background: url('~@/assets/dynamic1.png') no-repeat;
  background-size: 100% 100%;
}
.list:nth-child(3) .one {
  background: url(../../../assets/dynamic3.png) no-repeat;
  background-size: 100% 100%;
}
.list:nth-child(4) .one {
  background: url(../../../assets/dynamic2.png) no-repeat;
  background-size: 100% 100%;
}
.list:nth-child(5) .one {
  background: url(../../../assets/dynamic2.png) no-repeat;
  background-size: 100% 100%;
}
.list:nth-child(6) .one {
  background: url(../../../assets/dynamic3.png) no-repeat;
  background-size: 100% 100%;
}
.list:nth-child(7) .one {
  background: url(../../../assets/dynamic1.png) no-repeat;
  background-size: 100% 100%;
}
.list:nth-child(8) .one {
  background: url(../../../assets/dynamic4.png) no-repeat;
  background-size: 100% 100%;
}
</style>