src/components/memberNum/index.vue

<template>
  <div class="app-memberNumBox">
    <div class="theme-card">
      <div class="title"><span>用户数</span></div>
      <div class="content">
        <div class="topBox eleVerHorCenter-flex">
          <span class="eleText">总计</span>
          <div class="eleMarginLeft" v-html="memberNumTotal"></div>
        </div>
        <div class="bottomBox">
          <table class="memberNumTb">
            <tr>
              <td> <div class="activeUserBox"> <span class="activeUserNum">{{activeUserNum}}</span><div class="activeUserText">日活跃</div> </div> </td>
              <td><div class="memberRadarBox"><div class="memberRadar eleRotation"></div></div>  </td>
              <td> <div class="newUerBox"> <span class="newUerNum">{{newUerNum}}</span><div class="newUerNumText">新增用户</div></div> </td>
            </tr>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import { mapActions } from 'vuex'
  import common from '../../api/common';
  import { memberAddress } from '../../api/api'
    export default {
      name: "memberNum",
      data() {
        return {
          demo:'',//示例 总数
          memberNumTotal:"",//会员总数html
          activeUserNum:'',//日活跃
          newUerNum:'',//新增用户
          name: '会员数'
        }
      },
      mounted() {
        //会员总数
       this.onLoad()
      },
      methods: {
        ...mapActions([
          'transferParkingTotal'
        ]),
        onLoad() {
          memberAddress().then((response)=>{
            let  data = response.data.data
            this.registerNum = data.registerNum
            this.memberNumTotal = common.formatNumToStr(this.registerNum);
            this.activeUserNum = data.todayActiveNum
            this.newUerNum = data.todayRegisterNum
            this.$store.dispatch('transferParkingTotal', data.registerNum)
            //this.$store.dispatch('transferParkingTotal',10000);
            //this.transferParkingTotal( data.registerNum);
            console.log(this.$store.state.ParkingTotal)
          }).catch((response)=>{
            console.log(response);
          })
        }
        /*
         * 格式化会员总数
        //  * */
        // formatNumToStr:function(){
        //   return common.formatNumToStr(this.$options.data().demo);
        // },
      }
    }
</script>
<style scoped  lang="scss">
  .app-memberNumBox {
    width: 100%;
  .theme-card{
    height: 100%;
  }
  .topBox,.bottomBox{
    border:0px solid red;
  }
  .memberNumTb{
    margin: 0 auto;
    width: 100%;
    height: 100%;
  }
  .memberNumTb >tr{
    width: 100%;height: 100%;
  }
  .memberNumTb >tr>td{
   height: 100%;width:33.333%;
  }
  /*.memberNumTb >tr>td:first-child{*/
    /*width:25%;*/
  /*}*/
  /*.memberNumTb >tr>td:last-child{*/
    /*width:25%;*/
  /*}*/
  .memberNumTb >tr>td:nth-child(2){
    vertical-align: middle;
    text-align: center;
    position:relative;
  }
  .memberNumTb >tr>td:first-child{
    vertical-align: middle;
    text-align: right;
    padding-right: 5px;
  }
  .memberNumTb >tr>td:last-child{
    vertical-align: middle;
    text-align: left;
    padding-left:5px;
  }
  .memberRadar{
    background: url(../../images/com/memberRadar.png) no-repeat;
    background-size: 100% 100%;
    width:90%;
    height:0;
    padding-bottom: 90%;
    margin: auto;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
  }
  .memberRadarBox:before{
    content: " ";
    display: block;
    height: 30px;
    width: 30px;
    background: url(../../images/com/memberactiveUser.svg) no-repeat;
    background-size: 100%;
    position: absolute;
    left: 0px;
    top: 15px;
    z-index: 8;
  }
  .memberRadarBox:after{
    content: " ";
    display: block;
    height: 30px;
    width: 30px;
    background: url(../../images/com/membernewUer.svg) no-repeat;
    background-size: 100%;
    position: absolute;
    right: 0px;
    bottom: 15px;
    z-index: 8;
  }
  .activeUserNum{
    background-image: -webkit-linear-gradient(bottom, #67F967, #05C405);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    font-size: 24px;
  }
  .newUerNum{
    background-image: -webkit-linear-gradient(bottom, #FFBA00, #FF8100);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    font-size: 24px;
  }
  .activeUserText,.newUerNumText{
    font-size: 12px;
  }
  .activeUserText:after{
    content: " ";
    display: inline-block;
    height: 12px;
    width: 13px;
    background: url(../../images/com/activeUser.png) no-repeat;
    background-size: 100%;
    margin-left:5px;
  }
  .newUerNumText:before{
    content: " ";
    display: inline-block;
    height: 12px;
    width: 13px;
    background: url(../../images/com/newUser.png) no-repeat;
    background-size: 100%;
    margin-right:5px;
  }
  }
</style>