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+'rpx)'}">
        <view class="my-item">
          <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>
          <view class="vip-content">
            <view class="vip-data">
              <view class="vip-left">
                <view class="vip-left-one">
                  <image class="vip-left-img" src="/static/img/my/crown.png" mode="aspectFill"></image>
                  <view class="vip-left-vip sys-weight-600">VIP</view>
                  <view class="vip-left-text sys-weight-500">首季195元</view>
                </view>
                <view class="vip-left-two">
                  22.7元/月解锁9项高级特权
                </view>

              </view>
              <view class="vip-right">
                立即开通
              </view>
            </view>
            <view class="vip-discounts sys-color-white sys-weight-600">
              立减99元
            </view>
          </view>
          <view class="subscription sys-color-gray-9">
            自动订阅，随时取消;付款费用将记入itunes账户;到期前24小时会自动扣费并续订
            服务，购买后可随时前往iTunse商店设置页面取消订 阅。点击购买即表示同意《用
            户服务协议》《连续包月协议》 《用户隐私政策》
          </view>
          <view class="my-tag">
            <view class="tag-item" @click="setTagNum(0)" :class="{'tag-pitch':tagNum===0}">动态</view>
            <view class="tag-item" @click="setTagNum(1)" :class="{'tag-pitch':tagNum===1}">赞过</view>
            <view class="tag-item" @click="setTagNum(2)" :class="{'tag-pitch':tagNum===2}">活动</view>
          </view>
        </view>
        <view class="halving-line"></view>
        <view class="my-item">
          <view class="my-dynamic" v-if="tagNum===0">
            <dynamic-items text-color="#141414" operate-color="#999999" tag-color="#999999" tag-bg="#F2F2F2" division-color="#F2F2F2" :show-add="true"></dynamic-items>
          </view>
          <view class="my-praise">

          </view>
        </view>

      </scroll-view>
    </view>

  </view>
</template>

<script>
import MyNav from "@/pages/my/model/my-nav";
import DynamicItems from "@/pages/common/dynamic/dynamic-items";
export default {
  components: {DynamicItems, MyNav},
  data() {
    return {
      navHeight:0,
      tagNum:0
    }
  },
  methods: {
    setNavHeight(navHeight){
      this.navHeight=navHeight
    },
    setTagNum(tagNum){
      if(this.tagNum!==tagNum){
        this.tagNum=tagNum
      }
    }
  }
}
</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 0 10rpx 0;
    .my-item{
      padding: 0 32rpx ;
    }
    .halving-line{
      background-color: #F2F2F2;
      height: 1rpx;
    }
    .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;
          }


        }
      }
    }
    .vip-content{
      margin-top: 66rpx;
      border-radius: 20rpx;
      background: linear-gradient(137deg, #FED18E 0%, #FFDFA4 100%);
      //height: 118rpx;
      padding: 34rpx 30rpx 40rpx 28rpx;
      position: relative;
      .vip-data{
        display: flex;
        justify-content: space-between;
        align-items: center;
        .vip-left{
          .vip-left-one{
            display: flex;
            justify-content: flex-start;
            align-items: center;
            height: 64rpx;
            .vip-left-img{
              width: 64rpx;
              height: 64rpx;
              margin-right: 10rpx;
            }
            .vip-left-vip{
              font-size: 44rpx;
              background: linear-gradient(355deg, #6A4420 0%, #94673D 100%);
              -webkit-text-fill-color: transparent;
              -webkit-background-clip: text;
              margin-right: 12rpx;
              height: 64rpx;
              line-height: 64rpx;
            }
            .vip-left-text{
              font-size: 36rpx;
              height: 64rpx;
              line-height: 64rpx;
              color: #6A4420;
            }
          }
          .vip-left-two{
            margin-top: 10rpx;
            height: 44rpx;
            line-height: 44rpx;
            font-size: 28rpx;
            color: #925C29;
            font-weight: 400;
          }
        }
        .vip-right{
          border-radius: 200rpx;
          padding: 10rpx 24rpx;
          background: #6A4420;
          height: 40rpx;
          line-height: 40rpx;
          font-size: 28rpx;
          font-weight: 600;
          color: #FFDDA1;
        }
      }
      .vip-discounts{
        background: linear-gradient(270deg, #FE2315 0%, #FE6915 100%);
        border-radius: 0 20rpx 0 20rpx;
        height: 40rpx;
        line-height: 40rpx;
        padding: 0 16rpx;
        font-size: 24rpx;
        position:absolute;
        top: 0;
        right: 0;
      }


    }
    .subscription{
      margin-top: 36rpx;
      font-size: 18rpx;
    }
    .my-tag{
      margin-top: 36rpx;
      padding-bottom: 30rpx;
      display: flex;
      justify-content: space-around;
      .tag-item{
        height: 44rpx;
        line-height: 44rpx;
        font-size: 32rpx;
        color: #999;
        font-weight: 500;
        transition: .5s ease;
      }
      .tag-pitch{
        color: #141414;
        font-weight: 600;
        transition: .5s ease;
      }
    }

  }


}

</style>