<template>
  <view class="network-item-wrap">
    <view class="network-item">
      <view class="network-item-img">
        <image
          :src="networkItem.addressDescImg"
        />
      </view>
      <view class="network-item-content">
        <view class="network-info-wrap">
          <view class="network-info">
            <view class="info-title">{{networkItem.address}}</view>
            <view class="info-meta">{{networkItem.distance.toFixed(2)}}KM</view>
          </view>
          <!-- <view class="select-icon"> <image src="/page-home/static/image/select-icon.png" /> </view> -->
		</view>
      </view>
    </view>
  </view>
</template>
<script >
	export default{
		props:['networkItem']
	}
</script>
<style lang="scss" scoped>
.network-item-wrap {
  background-color: #fff;
  height: 168rpx;
  padding: 8rpx 16rpx;
  .network-item {
    display: flex;
    border-bottom: 1rpx solid #e8e8e8;
    &-img {
      margin-right: 16rpx;
      image {
        width: 156rpx;
        height: 156rpx;
      }
    }
    &-content {
      flex: 1;
      .network-info-wrap {
        display: flex;
        align-items: center;
        .network-info {
          flex: 1;
          .info-title {
            font-size: 28rpx;
            color: #1a1a1a;
            line-height: 40rpx;
            margin-bottom: 12rpx;
            word-break: break-all;
          }
          .info-meta {
            font-size: 24rpx;
            color: #b3b3b3;
            line-height: 34rpx;
            word-break: break-all;
          }
        }
        .select-icon {
          margin: 0 54rpx 0 24rpx;
          image {
            width: 28rpx;
            height: 24rpx;
            vertical-align: bottom;
          }
        }
      }
    }
  }
}
</style>
