<script setup>
  import { useAuthUser } from '@/composables/useAuthUser'

  const { userInfo } = useAuthUser()
</script>

<template>
  <view class="team-index">
    <!-- 顶部卡片 -->
    <view class="top-card">
      <view class="num-box">
        <text>我的团队(人)</text>
        <text>{{ userInfo.teamCount }}</text>
      </view>
      <image
        src="/static/images/my-index/team-bg.png"
        mode="heightFix"
        class="img"
      ></image>
    </view>
  </view>
</template>

<style lang="scss" scoped>
  @import './styles/index.scss';

  .team-index {
    padding: 32rpx 24rpx;

    .top-card {
      padding: 26rpx 36rpx;
      background: linear-gradient(0deg, #00d993 0%, #00d9c5 100%);
      border-radius: 32rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .num-box {
        display: flex;
        flex-direction: column;
        font-family: PingFang SC, PingFang SC;
        font-style: normal;
        text-transform: none;
        text {
          font-weight: 500;
          font-size: 28rpx;
          color: #ffffff;
          &:last-child {
            margin-top: 8rpx;
            font-weight: bold;
            font-size: 64rpx;
            color: #ffffff;
          }
        }
      }
      .img {
        height: 144rpx;
      }
    }
  }
</style>
