luoyang-uniapp-app/components/pozCard/pozCard.vue

<template>
	<view class="card">
		<view class="flex-b" @click="openMap">
			<view class="left_text">
				<view class="adr ">{{ info.address}}</view>
				<view class="distance" v-if="info.distance">距您{{ $u.utils.distanceFn(info.distance) }}</view>
			</view>
			<view class="mapEntry">
				<view class="icon">
					<image src="@/static/images/index/mapIcon.png" mode=""></image>
				</view>
				<view class="text">地图导航</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: ['info'],
		methods: {
			openMap() {
				uni.openLocation({
					latitude: this.info.lat,
					longitude: this.info.lng,
					success: function () {
						console.log('success');
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.card {
		padding: 24rpx;
	  .flex-b {
		  align-items: center;
	    .left_text {
			flex: 1;
	      .adr {
			font-size: 28rpx;
			color: #333333;
			font-weight: 500;
	      }
		
	      .distance {
			margin-top: 24rpx;
			color: #686B73;
			font-size: 24rpx;
	      }
	    }
		
	    .mapEntry {
			width: 130rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
	      .icon {
	        width: 32rpx;
			height: 32rpx;
	      }
		
	      .text {
			font-size: 24rpx;
			margin-top: 10rpx;
			color: $themC;
	      }
	    }
	  }
	}
</style>