CommunityApp/pagesM/comps/dt_contractor.vue

<template>
  <view class="dt-contractor-wrap">
    <image class="contractor-icon" :class="{
      'no-addr':!addr
    }" :src="icon" mode="aspectFit"></image>
    <view class="rt-wrap">
      <view class="contractor-name">联系人：{{name}}</view>
      <view class="contractor-mibile">联系电话：{{mobile}}</view>
      <view v-if="addr" class="contractor-addr">收货地址：<view class="mutil-value">{{addr}}</view></view>
    </view>
  </view>
</template>
<script>
export default {
  props:{
    icon:{
      type:String,
      default:'http://139.9.103.171:1888/img/image/contractor.png'
    },
    name:{
      type:String,
      default:'大香菇'
    },
    mobile:{
      type:String,
      default:'13542849555'
    },
    addr:{
      type:String,
      default:''
    },
  },
  data(){
    return {}
  }
}
</script>

<style lang="scss">
.dt-contractor-wrap{
  display:flex;
  background-color:#fff;
  padding:24upx 30upx;
  .contractor-icon{
    margin-top:50upx;
    margin-right:30upx;
    width:30upx;
    height:30upx;
  }
  .no-addr{
    margin-top:30upx;
  }
  .rt-wrap{
    flex:1;
    display:flex;
    flex-direction: column;
    font-weight:400;

    .contractor-name{
      font-size:28upx;
    }
    .contractor-mibile,
    .contractor-addr{
      font-size:26upx;
      color:#666666;
    }
    .contractor-mibile{
      margin-top:10upx;
      margin-bottom:10upx;
    }
    .contractor-addr{
      display:flex;
      align-items: flex-start;
      .mutil-value{
        flex:1;
      }
    }
  }
 
}
</style>