front/pages/group/home.vue

<template>
  <view class="h-full pos-r">
    <view>
      <view class="use-navbar w-full pos-t-full fixed bg-drak" style="padding-bottom: 6px; background: rgb(255, 106, 108); opacity: 0.97;">
        <view class="w-full" style="height: 6px;"></view>
        <view class="dflex-b border-radius-lg padding-lr w-full use-hover" style="height: 30px;">
          <view class="wpre-30 dflex">
            <view class="iconfont fwbd iconshouye- fs-xl"></view>
          </view>
          <view>
            <text class="fwbd fs"><span>用云电商</span></text>
          </view>
          <view class="wpre-30"></view>
        </view>
      </view>
      <view style="height: 42px;"></view>
    </view>

    <view class="dflex-c padding-lr bg-base">
      <view class="dflex margin-tb-xl">
        <view class="use-ring pos-r margin-right-xl">
          <view class="circle-ring pos-r">
            <view class="circle-left"></view>
            <view class="circle-right" style="transform: rotate(0deg);"></view>
            <view class="circle-bottom-left" style="background: rgb(255, 188, 73);"></view>
            <view class="circle-bottom-right" style="background: rgb(255, 188, 73);"></view>
          </view>
          <view class="pos-a pos-tl-c ft-white">
            <view class="price ft-white tac">0</view>
            <view class="fs-xxs">待提佣金</view>
          </view>
        </view>
        <view class="tac margin-left-xl">
          <text class="price ft-white fs-xxxl"><span>0</span></text>
          <view class="cashout ft-base">提现</view>
        </view>
      </view>
    </view>

    <view class="bg-main data-area padding-lr-sm padding-top">
      <view class="dflex-a w-full padding-top-xl">
        <view class="stats dflex-c dflex-flow-c">
          <text class="price fs-xl"><span>22.09</span></text>
          <view class="ft-main fs-xs">累计佣金</view>
          <view class="vertical-line"></view>
        </view>
        <view class="stats dflex-c dflex-flow-c">
          <text class="price fs-xl"><span>21.07</span></text>
          <view class="ft-main fs-xs">待审提现</view>
          <view class="vertical-line"></view>
        </view>
        <view class="stats dflex-c dflex-flow-c">
          <text class="price fs-xl"><span>0.4</span></text>
          <view class="ft-main fs-xs">已提佣金</view>
        </view>
      </view>
    </view>

    <view class="margin-tb-xl padding-top-sm padding-lr">
      <view class="tac dflex-a w-full">
        <view class="border-radius nav">
          <view class="dflex-c dflex-flow-c">
            <view class="border-radius item" style="background: rgb(255, 188, 73);">
              <text class="iconfont iconmingxi"><span></span></text>
            </view>
            <view>
              <view class="fs-30 fwbd">提现明细</view>
              <view class="ft-dark fs-xxs">佣金提现明细</view>
            </view>
          </view>
        </view>

        <view class="border-radius nav">
          <view class="dflex-c dflex-flow-c">
            <view class="border-radius item" style="background: rgb(111, 150, 241);">
              <text class="iconfont iconfenxiaodingdan-01"><span></span></text>
            </view>
            <view>
              <view class="fs-30 fwbd">分销订单</view>
              <view class="ft-dark fs-xxs">35个订单</view>
            </view>
          </view>
        </view>
      </view>

      <view class="tac margin-top dflex-a w-full">
        <view class="border-radius nav">
          <view class="dflex-c dflex-flow-c">
            <view class="border-radius item" style="background: rgb(175, 105, 227);">
              <text class="iconfont iconfenxiaohuiyuan-01"><span></span></text>
            </view>
            <view>
              <view class="fs-30 fwbd">分销成员</view>
              <view class="ft-dark fs-xxs">111个会员</view>
            </view>
          </view>
        </view>

        <view class="border-radius nav">
          <view class="dflex-c dflex-flow-c">
            <view class="border-radius item" style="background: rgb(248, 129, 91);">
              <text class="iconfont icondaishenyongjin-01"><span></span></text>
            </view>
            <view>
              <view class="fs-30 fwbd">待结佣金</view>
              <view class="ft-dark fs-xxs">共0.62元</view>
            </view>
          </view>
        </view>
      </view>

      <view class="tac margin-top dflex-a w-full padding-bottom-xl">
        <view class="border-radius nav">
          <view class="dflex-c dflex-flow-c">
            <view class="border-radius item" style="background: rgb(90, 157, 237);">
              <text class="iconfont iconhaibao"><span></span></text>
            </view>
            <view>
              <view class="fs-30 fwbd">我的海报</view>
              <view class="ft-dark fs-xxs">分享专属海报</view>
            </view>
          </view>
        </view>

        <view class="border-radius nav">
          <view class="dflex-c dflex-flow-c">
            <view class="border-radius item" style="background: rgb(255, 171, 108);">
              <text class="iconfont iconchangjianwenti-01"><span></span></text>
            </view>
            <view>
              <view class="fs-30 fwbd">常见问题</view>
              <view class="ft-dark fs-xxs">疑问小帮手</view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="qrcode tac padding-tb pos-f pos-tl-c">
      <view class="use-qrcode">
        <canvas canvas-id="use-qrcode-canvas" class="use-qrcode-canvas" style="width: 200px; height: 200px;"></canvas>
        <image style="width: 150px; height: 150px; display: none;"></image>
      </view>
    </view>
  </view>
</template>

<style>
.data-area {
    border-top-left-radius: 38px;
    border-top-right-radius: 38px;
    overflow: hidden;
    top: 144px;
    height: calc(100% - 143px);
    overflow-y: auto;
}
.data-area .stats {
    width: 33.33%;
    position: relative;
}
.data-area .nav {
    width: 44%;
    box-shadow: 0 1px 14px 2px #f5f5f5;
    padding: 24px 0 14px;
}
.data-area .item {
    width: 48px;
    height: 48px;
    line-height: 48px;
    margin-bottom: 9px;
}
.data-area .item .iconfont {
    color: #fff;
    font-size: 24px;
}
</style>