YXGJ/cloud/mySubscription/list.vue

<template>
    <view class="list-box">
    <view class="item-box" v-for="item in list" :key="item.shareuserid">
        <view class="item-top">
            <view class="avatar-info">
                <u--image shape="circle" :width="tovw(44)" :height="tovw(44)" :lazy-load="true" :src="item.headpic || 'https://yossys06593.obs.cn-east-3.myhuaweicloud.com:443/202406011717209838416B6150695f.webp'" mode="widthFix"></u--image>
                <view class="detail-info">
                    <text class="title">{{ item.name }}</text>
                    <view class="address">
                        <i class="iconfont icon-dizhi-hui1"></i>
                        <text class="u-line-2">{{ item.province+item.city+item.county+item.address }}</text>
                    </view>
                </view>
            </view>
            <view class="origin-info">
                <text class="origin">来自:{{ item.sharename }}</text>
                <text class="createdate">{{ item.createdate }}</text>
            </view>
        </view>
        <view class="footer-info">
            <view class="left">来源：{{ item.type }}</view>
                <navigator class="right" url="#" @click="callPhoneFun(item.phonenumber)">
                    <i class="iconfont icon-dianhua-hong" style="color:#C30D23"></i>
                    <text>{{ item.phonenumber }}</text>
                </navigator>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    props:['list'],
  data () {
    return {
    }
  },
  methods: {
    callPhoneFun (phone) {
        this.callPhone(phone)
    }
  },
}
</script>

<style  lang="scss">
.list-box {
  padding: 10px 10px 0 10px;
  .item-box {
      background: #ffffff;
      padding: 10px 0 10px 10px;
      display: flex;
      flex-direction: column;
      border-radius: 8px 8px 8px 8px;
      margin-bottom: 10px;
      .item-top {
          display: flex;
          flex-direction: column;
          padding-bottom: 10px;
          border-bottom: 1px solid #DDDDDD;
          font-family: Source Han Sans SC, Source Han Sans SC;
          border-top-left-radius: 5px;
          border-top-right-radius: 5px;
          .avatar-info {
              display: flex;
              .avatar {
                  width: 44px;
                  height: 44px;
                  margin-right: 10px;
              }
              .detail-info {
                  display: flex;
                  flex-direction: column;
                  margin-left: 10px;
                  .title {
                      font-weight: 500;
                      font-size: 16px;
                      color: #333333;
                      margin-bottom: 5px;
                  }
                  .address {
                      font-weight: 400;
                      font-size: 12px;
                      color: #666666;
                      display: flex;
                      align-items: center;
                      align-content: center;
                      text {
                          margin-left: 5px;
                      }
                  }
              }
          }
          .origin-info {
              display: flex;
              justify-content: space-between;
              font-size: 14px;
              color: #888888;
              margin-top: 6px;
              .origin {
                  margin-left: 64px;
              }
              .createdate {
                  margin-right: 10px;
              }
          }
      }
      .footer-info {
          display: flex;
          justify-content: space-between;
          margin-top: 10px;
          .left{
          font-weight: 400;
          font-size: 14px;
          color: #888888;
          } 
          .right{
          display: flex;
          align-items: center;
          align-content: center;
          border-radius: 5px;
          text {
              font-size: 14px;
              color: #333333;
              margin: 0 10px 0 10px;
          }
          }
      }
  }
}
</style>