lcoco/pages/index/model/attachment-list.vue

<template>
  <view class="attachment-box">
    <view class="attachment-title sys-color-black">附近精选</view>
    <view class="attachment-text sys-color-gray-9">每日推送附近优质用户来场高质量社交</view>
    <view class="attachment-list">
      <view class="attachment-item" :style="{'background-image':'url('+item.img+')'}" v-for="item in list">
        <view class="attachment-data">
          <view class="data-name sys-color-white sys-weight-600 sys-webkit-box sys-height-44">{{item.name}}</view>
          <view class="data-text sys-height-44">
            <text class="sys-height-44 sys-color-white text-item">{{item.age}}</text>
            <text class="sys-height-44 sys-color-white text-item">/</text>
            <text class="sys-height-44 sys-color-white text-item">{{item.sex}}</text>
            <text class="sys-height-44 sys-color-white text-item">/</text>
            <text class="sys-height-44 sys-color-white text-item">{{item.constellation}}</text>
          </view>
        </view>

      </view>
    </view>
    <view class="attachment-open">
      <view class="open-data sys-background-yellow sys-radius-200">
        <image class="open-img" src="/static/img/common/lock.png" mode="aspectFill"></image>
        <view class="open-text sys-color-black sys-weight-500" >立即解锁</view>
      </view>
    </view>

  </view>
</template>

<script>
export default {
  name: "attachment-list",
  components: {},
  props: {},
  data() {
    return {
      list:[]
    }
  },
  watch: {},
  mounted() {
    this.getAttachmentList()
  },
  methods: {
    getAttachmentList(){
      let list=[
        {'name':'仰看辉煌仰看辉煌仰看辉煌仰看辉煌','age':18,'sex':'女','constellation':'处女座','img':'/static/img/temporary/1.png'},
        {'name':'Maple','age':18,'sex':'女','constellation':'处女座','img':'/static/img/temporary/2.png'},
        {'name':'仰看辉煌','age':18,'sex':'女','constellation':'处女座','img':'/static/img/temporary/3.png'},
        {'name':'Maple','age':18,'sex':'女','constellation':'处女座','img':'/static/img/temporary/1.png'},
        {'name':'仰看辉煌','age':18,'sex':'女','constellation':'处女座','img':'/static/img/temporary/2.png'},
        {'name':'Maple','age':18,'sex':'女','constellation':'处女座','img':'/static/img/temporary/3.png'},
      ];
      this.list.push(...list)
    }

  }
}
</script>

<style scoped lang="scss">
.attachment-box{
  .attachment-title{
    margin-top: 40rpx;
    text-align: center;
    font-size: 44rpx;
    height: 44rpx;
    line-height: 44rpx;
    -webkit-background-clip: text;
  }
  .attachment-text{
    text-align: center;
    margin-top: 16rpx;
    font-size: 32rpx;
    height: 44rpx;
    line-height: 44rpx;
  }
  .attachment-list{
    padding: 32rpx;
    display: flex;
    flex-wrap: wrap;
  }
  .attachment-item{
    border-radius: 20rpx;
    display: inline-block;
    margin-right:18rpx;
    width: calc((100vw - 82rpx)/2);
    height: 504rpx;
    background-repeat: no-repeat;//不平铺
    background-position: center center;//居中
    background-size: cover;//随容器大小
    position: relative;
    .attachment-data{
      position: absolute;
      left: 24rpx;
      bottom: 24rpx;
      width: calc((100vw - 82rpx)/2 - 48rpx);
      .data-name{
        font-size: 36rpx;

      }
      .data-text{
        .text-item{
          margin-right: 6rpx;
          font-size: 24rpx;
        }
      }
    }
  }
  .attachment-item:nth-of-type(2n+0){
    margin-right:0;
  }
  .attachment-item:nth-of-type(n+3){
    margin-top:18rpx;
  }
  .attachment-open{
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100vw;
    height: 190rpx;
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #FFFFFF 100%);
    padding: 70rpx 80rpx 30rpx 80rpx;
    box-sizing: border-box;
    .open-data{
        display: flex;
      justify-content: center;
      height: 88rpx;
      padding: 22rpx 0;
      box-sizing: border-box;
      .open-img{
        width: 32rpx;
        height: 32rpx;
        margin-right: 8rpx;
        margin-top: 6rpx;
      }
      .open-text{
        font-size: 32rpx;
        //height: 44rpx;
        //line-height: 44rpx;
      }
    }
  }

}

</style>