ahyd_DIB/pages/commercialBI/components/guest/customerFirst.vue

<template>
  <div class="main">
      <div class="yesterday">
          <div class="top">
              <image class="icon" src="/static/images/commercial/datePortrait.svg"></image>
              <p class="title">昨日客单量</p>
          </div>
          <div class="bottom">
              <div class="item">
                  <p class="price">583</p>
                  <p class="text">客单交易 <text class="unit">/笔</text></p>
              </div>
              <div class="item">
                  <p class="price">34.6</p>
                  <p class="text">客单均价 <text class="unit">/元</text></p>
              </div>
          </div>
      </div>
      <div class="month">
          <div class="top">
              <image class="icon" src="/static/images/commercial/change.svg"></image>
              <p class="title">月均客单量</p>
          </div>
          <div class="bottom">
              <div class="item">
                  <p class="price">583</p>
                  <p class="text">客单交易 <text class="unit">/笔</text></p>
              </div>
              <div class="item">
                  <p class="price">34.6</p>
                  <p class="text">客单均价 <text class="unit">/元</text></p>
              </div>
          </div>
          <div class="progress">
              <div class="box">
                  <div class="pro">
                      <div class="big" :style="{width:big+'%'}"></div>
                      <div class="normal" :style="{width:normal+'%',left:big+'%'}"></div>
                      <div class="small" :style="{width:small+'%',left:(Number(big) + Number(normal))+'%'}"></div>
                  </div>
                  <div class="type">
                      <text class="item big">高消费 {{big}}%</text>
                      <text class="item normal">普通消费 {{normal}}%</text>
                      <text class="item small">低消费 {{small}}%</text>
                  </div>
              </div>
          </div>
      </div>
  </div>
</template>

<script>
export default {
    name: "customerFirst",
    data() {
        return {
            big:'14.8',
            normal:'41.7',
            small:'43.5'
        }
    },
}
</script>

<style scoped lang="scss">
.main{
  width: 100%;
  .yesterday,.month{
    margin-top: 12px;
    width: 100%;
    box-sizing: border-box;
    background: #F2F1F1;
    border-radius: 4px;
    padding: 12px;
    .top{
      display: flex;
      .icon{
        width: 18px;
        height: 18px;
        margin-right: 9px;
      }
      .title{
        font-size: 14px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #160002;
        line-height: 20px;
      }
    }
    .bottom{
        margin-top: 12px;
        width: 100%;
        display: flex;
        box-sizing: border-box;
        .item{
            width:50%;
            padding-left: 22px;
            .price{
                font-size: 16px;
                font-family: DINAlternate-Bold, DINAlternate;
                font-weight: bold;
                color: #341D00;
                line-height: 20px;
                margin-bottom: 2px;
            }
            .text{
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #786B6C;
                line-height: 20px;
                .unit{
                    font-size: 14px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #A69E9F;
                    line-height: 20px;
                }
            }
        }
    }
    .progress{
        width: 100%;
        box-sizing: border-box;
        padding-left: 22px;
        margin-top: 12px;
        .box{
            width: 100%;
            .pro{
                width: 100%;
                height: 16px;
                border-radius: 2px 0 0 2px;
                position: relative;
                .big{
                    position: absolute;
                    height: 100%;
                    background: #1E80FF;
                    border-radius: 2px 0 0 2px;
                }
                .normal{
                    position: absolute;
                    height: 100%;
                    background: #ACB9CD;
                    border-radius: 2px 0 0 2px;
                }
                .small{
                    position: absolute;
                    height: 100%;
                    background: #CAD0DA;
                    border-radius: 2px 0 0 2px;
                }
            }
            .type{
                display: flex;
                margin-top: 4px;
                .item{
                    display: inline-block;
                    font-size: 12px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #786B6C;
                    line-height: 18px;
                    position: relative;
                    text-align: left;
                    padding-left: 8px;
                    margin-right: 12px;
                }
                .item:last-child{
                    margin-right: 0px;
                }
                .big:before{
                    content:'';
                    width: 4px;
                    height: 12px;
                    background: #1E80FF;
                    position: absolute;
                    left: 0;top: 50%;
                    transform: translateY(-50%);
                }
                .normal:before{
                    content:'';
                    width: 4px;
                    height: 12px;
                    background: #ACB9CD;
                    position: absolute;
                    left: 0;top: 50%;
                    transform: translateY(-50%);
                }
                .small:before{
                    content:'';
                    width: 4px;
                    height: 12px;
                    background: #CAD0DA;
                    position: absolute;
                    left: 0;top: 50%;
                    transform: translateY(-50%);
                }
            }
        }
    }
  }
}
</style>