lcoco/pages/my/set/blacklist.vue

<template>
  <view class="blacklist-box">
    <en-nav title="黑名单" :title-color="'#333'"   @navHeight="setNavHeight"></en-nav>
    <scroll-view  class="blacklist-list" :scroll-y="true"  :scroll-x="true" :style="{'height':'calc(100% - '+navHeight+'rpx)'}">
      <view class="blacklist-item" v-for="i in 12">
        <view class="blacklist-left">
          <image class="blacklist-img" src="/static/img/temporary/4.png" mode="aspectFill"></image>
        </view>
        <view class="blacklist-right">
          <view class="blacklist-title">
            <view class="title-text sys-color-black sys-weight-600 sys-height-44">江小明</view>
            <view class="title-icon">
              <text class="iconfont sys-height-44 sys-color-black">&#xe74b;</text>
            </view>
          </view>
          <view class="blacklist-text">
            <view class="text-item sys-color-gray-9">女/24/天瓶座</view>
            <view class="text-item sys-color-gray-9">2023/04/24</view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

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

<style scoped lang="scss">
.blacklist-box{
  height: 100vh;
  padding: 0 32rpx;
  overflow-x: auto;
  .blacklist-list{
    width: calc(100vw - 64rpx);
  }

  .blacklist-item{
    width: calc(100vw - 64rpx);
    display: flex;
    justify-content: space-between;

    .blacklist-left{
      padding: 32rpx 0;
      margin-right: 28rpx;
      .blacklist-img{
        border-radius: 50%;
        width: 96rpx;
        height: 96rpx;
      }
    }
    .blacklist-right{

      padding: 32rpx 0;
      width: calc(100% - 124rpx);
      border-bottom: 1rpx solid #F2F2F2;
      .blacklist-title{
        display: flex;
        justify-content: space-between;
        height: 44rpx;
        .title-text{
          font-size: 32rpx;
        }
        .title-icon{
          .iconfont{
            font-size:  24rpx;
          }
        }
      }
      .blacklist-text{
        display: flex;
        justify-content: space-between;
        margin-top: 4rpx;
        .text-item{
          font-size: 28rpx;
        }
      }
    }
  }
}

</style>