lcoco/pages/my/edit/making-friends.vue

<template>
  <view class="making-box">
    <en-nav title="交友目的" :title-color="'#333'" :right-show="true" :right-type="2" >
      <template v-slot:right>
        <text class="nav-right sys-weight-600 sys-color-white"  @click="setNextStep">保存</text>
      </template>
    </en-nav>
    <view class="making-data">
      <view class="making-title">
        <view class="title-wire"></view>
        <view class="title-text sys-color-black-3 sys-weight-600">交友目的</view>
      </view>
      <view class="making-text sys-height-44 sys-color-gray-9">人数不足时，将自动扬大范围</view>
      <view class="making-list">
        <view class="making-item" :class="{'no-pitch-item':i%2===0}" v-for="i in 6">
            <image class="making-item-img" src="/static/img/temporary/4.png" mode="aspectFill"></image>
          <view class="making-item-text  sys-height-44 sys-weight-400">认识朋友</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import tools from "@/service/tools";
import EnNav from "@/components/en-utils/en-nav/en-nav";

export default {
  components: {EnNav},
  data() {
    return {

    }
  },
  methods: {
    setNextStep() {
      uni.navigateBack()
    },
  }
}
</script>

<style scoped lang="scss">
.making-box{
  padding: 40rpx 36rpx;
  .making-title{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 44rpx;
    .title-text{
      font-size: 32rpx;
      line-height: 44rpx;
    }
    .title-wire{
      width: 4rpx;
      height: 32rpx;
      background-color: #FFC107;
      margin-right: 12rpx;
    }

  }
  .making-text{
    margin-top: 4rpx;
    font-size: 24rpx;
  }
  .making-list{
    display: flex;
    flex-wrap: wrap;
    .making-item{
      margin-top: 32rpx;
      margin-right: calc((100% - 480rpx)/3);
        .making-item-img{
          width: 120rpx;
          height: 120rpx;
          border-radius: 40rpx;
        }
      .making-item-text{
        margin-top: 16rpx;
        text-align: center;
        font-size: 26rpx;
        color: #141414;

      }
    }
    .no-pitch-item{
      .making-item-img{
        filter: grayscale(100%);
      }
      .making-item-text{
        color: rgba(51, 51, 51, 0.30);
      }
    }
    .making-item:nth-of-type(4n+0){
      margin-right:0;
    }
  }
}

</style>