order-ui-pc/src/views/bigScreen/datavScr/centerLeft2.vue

<template>
  <div id="centerLeft1">
    <div class="bg-color-black">
      <div class="d-flex pt-2 pl-2">
        <div class="d-flex"  style="display:flex;">
          <span class="fs-xl text mx-2" style="margin-right:8px;">今日销冠</span>
          <dv-decoration-1 class="dv-dec-1" />
        </div>
      </div>
      <div class="cc">
        <div class="bottom-data">
          <h3 class="title">今日销冠</h3>
          <div class="item-box mt-2">
            <div class="d-flex">
              <span class="cex">{{datatodaysaleschampion.orders}}</span>
            </div>
            <p class="text" style="text-align: center">
              今日销售单数
              <span class="colorYellow">(单)</span>
            </p>
          </div>
          <div class="item-box mt-2">
            <div class="d-flex">
              <span class="cex">{{datatodaysaleschampion.money | getNum}}</span>
            </div>
            <p class="text" style="text-align: center">
              今日销售金额
              <span class="colorYellow">(元)</span>
            </p>
          </div>
        </div>


        <div class="nameImg">
          <!-- <img src="../assets/logo.png" alt=""> -->
          <p>{{datatodaysaleschampion.company}}<br>{{datatodaysaleschampion.nickname}}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import asyncRequest from "@/apis/service/bigScreen";
// import resToken from "@/mixins/resToken";
export default {
   data() {
    return {
      
      datatodaysaleschampion:{},
    }
  },
  mounted() {
   this.initHttp()
  },
  methods: {
  async initHttp(){
    
     let res = await asyncRequest.datatodaysaleschampion();
     if(res.code == 0){
       this.datatodaysaleschampion = res.data;
      //  console.log(this.datatodaysaleschampion)
     }else{
       this.$message.error(res.message)
     }
     
   }
  }
};
</script>

<style lang="scss" scoped>
#centerLeft1 {
  $box-width: 300px;
  $box-height: 410px;
  padding: 16px;
  height: $box-height;
  min-width: $box-width;
  border-radius: 5px;
  .bg-color-black {
    height: $box-height - 30px;
    border-radius: 10px;
  }
  .text {
    font-size: 12px;

    color: #c3cbde;
  }
  .dv-dec-1 {
    position: relative;
    width: 100px;
    height: 20px;
    top: -3px;
  }
  .chart-box {
    margin-top: 16px;
    width: 170px;
    height: 170px;
    .active-ring-name {
      padding-top: 10px;
    }
  }
  .bottom-data {
    .item-box {
      & > div {
        padding-right: 5px;
      }
      font-size: 14px;
      float: right;
      position: relative;
      width: 50%;
      color: #d3d6dd;
      .dv-digital-flop {
        width: 120px;
        height: 30px;
      }
      // 金币
      .coin {
        position: relative;
        top: 6px;
        font-size: 20px;
        color: #ffc107;
      }
      .colorYellow {
        color: yellowgreen;
      }
      p {
        text-align: center;
      }
    }
  }
  .cex {
    color: #28ffcd;
    width: 100%;
    font-size: 18px;
    text-align: center;
    font-weight: 800;
    display: inline-block;
    margin: 5px 10px;
  }
  .title {
    width: 100%;
    float: left;
    font-size: 16px;
    margin-top: 40px;
    margin-bottom: 15px;
    text-indent: 10px;
    color: #ffbc25;
  }
  .nameImg{
    width: 100%;
    margin: 70px 0 0 0;
    float: left;
    // img{
    //   width: 50%;
    //   height: 90px;
    //   display: block;
    //   margin: 30px auto 5px;

    // }
    p{
      width: 100%;
      text-align: center;
      font-size: 20px;
      line-height: 40px;
      font-weight: 600;
      color: #ffbc25;
    }
  }
}
</style>