lcoco/pages/circle/index.vue

<template>
  <view class="circle-box">
    <view class="circle-title"  :style="[{ 'margin-top': statusBarH + 'px'}]">
      <view class="title-left">
        <view class="title-text sys-height-44 sys-color-gray-9 sys-weight-400" @click="setTitleTag(0)" :class="{'title-text-default':tagNum===0}">好友</view>
        <view class="title-text sys-height-44 sys-color-gray-9 sys-weight-400" @click="setTitleTag(1)"  :class="{'title-text-default':tagNum===1}">附近</view>
        <view class="title-text sys-height-44 sys-color-gray-9 sys-weight-400" @click="setTitleTag(2)"  :class="{'title-text-default':tagNum===2}">推荐</view>
      </view>
      <view class="title-right">
        <view class="title-icon">
          <image class="title-img" src="/static/img/circle/Group-100345@2x.png"></image>
        </view>
        <view class="title-icon">
          <image class="title-img" src="/static/img/circle/Group-100344@2x.png"></image>
        </view>
      </view>

    </view>

    <view class="circle-content" >
      <scroll-view :scroll-y="true" :style="{'height':'calc(100vh - '+navHeight+'rpx - var(--window-bottom))'}">
        <my-praise></my-praise>
      </scroll-view>
    </view>
    <view class="circle-add sys-background-yellow">
      <image class="circle-add-img" src="/static/img/circle/cancel-icon-2@2x.png"></image>
    </view>
  </view>
</template>

<script>
import EnNav from "@/components/en-utils/en-nav/en-nav";
import MyPraise from "@/pages/my/model/my-praise";
export default {
  components: {MyPraise, EnNav},
  data() {
    return {
      statusBarH:0,
      tagNum:0,
      navHeight:44
    }
  },
  methods: {
    setTitleTag(num){
      if(num!==this.tagNum){
        this.tagNum=num
      }
    }
  },
  created() {
    uni.getSystemInfo({
      success: (e) =>{
        this.statusBarH = e.statusBarHeight
        this.navHeight=(50+this.statusBarH)*2
        //e.safeArea.bottom  底部安全距离
      }
    })

  }
}
</script>

<style scoped lang="scss">
.circle-box{
  .circle-title{
    display: flex;
    justify-content: space-between;
    padding:22rpx 36rpx;
    .title-left{
      display: flex;
      justify-content: flex-start;
      .title-text{
        font-size: 32rpx;
        margin-right: 56rpx;
      }
      .title-text-default{
        font-weight: 600;
        color: #141414;
      }

    }
    .title-right{
      display: flex;
      justify-content: flex-end;
      .title-img{
        width: 44rpx;
        height: 44rpx;
        margin-left: 40rpx;
      }
    }

  }
  .circle-content{
    padding: 0 32rpx;
    .circle-item{
      margin-top: 32rpx;
      margin-bottom: 8rpx;
      display: flex;
      justify-content: space-between;
      .item-left{
        width: 80rpx;
        height: 80rpx;
        position: relative;
        .item-head{
          width: 80rpx;
          height: 80rpx;
          border-radius: 50%;
        }
        .item-auth{
          width: 18rpx;
          height: 18rpx;
          position: absolute;
          bottom: 0;
          right: 8rpx;
          z-index: 10;
        }

      }
      .item-right{
        padding-left: 20rpx;
        width: calc(100vw - 144rpx);
        .circle-top-data{
          display: flex;
          justify-content: space-between;
          .circle-top-left{
            .circle-top-left-title{
              display: flex;
              justify-content: flex-start;
              align-items: center;
              .left-title-text{
                  font-size: 32rpx;
                margin-right: 8rpx;
              }
              .left-title-vip-img{
                height: 28rpx;
              }
            }
            .left-title-time{
              margin-top: 8rpx;
              line-height: 34rpx;
              font-size: 24rpx;
            }
          }
          .circle-top-right{
            height: 40rpx;
            border-radius: 200rpx;
            border: 2rpx solid #141414;
            padding: 8rpx 16rpx;
            display: flex;
            justify-content: space-between;
            .circle-top-right-img{
              width: 40rpx;
              height: 40rpx;
              margin-right: 8rpx;
            }
            .circle-top-right-text{
              font-size: 28rpx;
              line-height: 40rpx;
            }
          }
        }
      }

    }
  }
  .circle-add{
    position: absolute;
    bottom: 70rpx;
    right: 22rpx;
    border-radius: 50%;
    width: 88rpx;
    height: 88rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    .circle-add-img{
      width: 40rpx;
      height: 40rpx;
    }
  }

}

</style>