lcoco/pages/my/index.vue

<template>
  <view class="my-box">
    <my-nav @navHeight="setNavHeight"></my-nav>
    <view class="my-data" :style="{'height':'calc(100% - '+navHeight+'rpx)'}">
      <scroll-view :scroll-y="true" :style="{'height':'calc(100% - '+(navHeight+50)+'rpx)'}">
        <view class="my-content">
          <view class="content-basic">
            <view class="basic-left">
              <image class="basic-img" src="/static/img/temporary/4.png" mode="aspectFill"></image>
            </view>
            <view class="basic-right">
              <view class="basic-name">
                <view class="name-text sys-color-black-0 sys-weight-600">出江湖救急</view>
                <view class="name-vip">
                  <image class="name-img" src="/static/img/my/svip.png" mode="heightFix"></image>
                </view>
                <view class="name-ok name-no">
                  <image class="name-img" src="/static/img/my/open.png" mode="heightFix"></image>
                </view>
              </view>
              <view class="basic-signature sys-color-gray-9">
                都能拿到你
              </view>
              <view class="basic-wallet">
                <view class="wallet-item">
                  <image class="wallet-img" src="/static/img/my/wallet.png" mode="aspectFill"></image>
                  <view class="wallet-text sys-color-gray-6">钱包</view>
                </view>
                <view class="wallet-item">
                  <view class="wallet-text sys-color-gray-6">波点兑换</view>
                  <image class="exchange-img" src="/static/img/my/right.png" mode="aspectFill"></image>
                </view>
              </view>
            </view>
          </view>
          <view class="content-statistics">
            <view class="statistics-item">
              <view class="statistics-num sys-color-black sys-weight-600">431
                <view class="statistics-dot sys-color-white">1</view>
              </view>
              <view class="statistics-text sys-color-gray-9 sys-weight-400">礼物墙</view>
            </view>
            <view class="statistics-item">
              <view class="statistics-num sys-color-black sys-weight-600">431
                <view class="statistics-dot sys-color-white">1</view>
              </view>
              <view class="statistics-text sys-color-gray-9 sys-weight-400">心动足迹</view>
            </view>
            <view class="statistics-item">
              <view class="statistics-num sys-color-black sys-weight-600">431
                <view class="statistics-dot sys-color-white">1</view>
              </view>
              <view class="statistics-text sys-color-gray-9 sys-weight-400">访客</view>

            </view>
            <view class="statistics-item">
              <view class="statistics-num sys-color-black sys-weight-600">
                165
                <view class="statistics-dot sys-color-white">..</view>
              </view>
              <view class="statistics-text sys-color-gray-9 sys-weight-400">谁喜欢我</view>

            </view>

          </view>
        </view>
      </scroll-view>
    </view>

  </view>
</template>

<script>
import MyNav from "@/pages/my/model/my-nav";
export default {
  components: {MyNav},
  data() {
    return {
      navHeight:0
    }
  },
  methods: {
    setNavHeight(navHeight){
      this.navHeight=navHeight
    }
  }
}
</script>

<style scoped lang="scss">
.my-box{
  background-image: url("/static/img/my/bg.png");
  background-repeat: no-repeat;//不平铺
  background-position: top center;//居中
  background-size: contain;//随容器大小
  height: calc(100vh - 50px - env(safe-area-inset-bottom));
  .my-data{
    background-color: #fff;
    border-radius: 30rpx 30rpx 0 0;
    padding: 40rpx 32rpx 10rpx 32rpx;
    .my-content{
      .content-basic{
        display: flex;
        justify-content: space-between;
        height: 168rpx;
        .basic-left{
          .basic-img{
            border-radius: 50%;
            width: 168rpx;
            height: 168rpx;
          }
        }
        .basic-right{
          width: calc(100% - 168rpx);
          padding-left: 24rpx;
          .basic-name{
            display: flex;
            justify-content: flex-start;
            height: 56rpx;
            align-items: center;
            .name-text{
              font-size: 40rpx;
              line-height: 56rpx;
            }
            .name-img{
              height: 28rpx;
            }
            .name-vip{
              margin-left: 8rpx;
            }
            .name-ok{
              margin-left: 8rpx;
            }
            .name-no{
              filter: grayscale(100%);
            }
          }
          .basic-signature{
            width: 100%;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            overflow: hidden;
            font-size: 28rpx;
            height: 40rpx;
            line-height: 40rpx;
          }
          .basic-wallet{
            display: flex;
            justify-content: flex-start;
            margin-top: 24rpx;
            .wallet-item{
              padding: 0 16rpx;
              height: 40rpx;
              background: #F2F2F2;
              border-radius: 200rpx;
              display: flex;
              justify-content: center;
              align-items: center;
              margin-right: 20rpx;
              .wallet-text{
                height: 40rpx;
                line-height: 40rpx;
                font-size: 26rpx;
              }
              .wallet-img{
                width: 40rpx;
                height: 40rpx;
                margin-right: 4rpx;
              }
              .exchange-img{
                width: 24rpx;
                height: 24rpx;
                margin-left: 4rpx;
              }

            }
          }

        }

      }
      .content-statistics{
        margin-top: 24rpx;
        padding: 16rpx 40rpx 0 40rpx;
        display: flex;
        justify-content: space-between;
        .statistics-item{
          .statistics-num{
            position: relative;
            display: flex;
            justify-content: center;
            font-size: 40rpx;
            .statistics-dot{
              position: absolute;
              top: -16rpx;
              right: -12rpx;
              border-radius: 200rpx;
              width: 24rpx;
              height: 24rpx;
              line-height: 24rpx;
              text-align: center;
              font-size: 18rpx;
              background-color: #ED301D;
            }
          }
          .statistics-text{
            margin-top: 8rpx;
            font-size: 26rpx;
          }


        }
      }
    }

  }


}

</style>