<template>
	<view class="">
		<view class="head-img">

			<view class="">
				<u--image :src="props.imgUrl" width="693.93rpx" height=" 394.28rpx" alt=""></u--image>
			</view>
			<view class="poisition">
				<!-- {{props.text}} -->
				{{address}}
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue'
	import uplodeFn from "@/utils/uplodeImg.js"
	import {
		userInfoAPI
	} from "@/api/plant.js"
	const address = ref("")
	userInfoAPI({
		user_id: 307
	}).then(res => {
		let userInfo = res.data
		address.value = userInfo.area_name + userInfo.street_name + userInfo.village_name + userInfo.brigade_name
	})
	const props = defineProps({
		imgUrl: String,
		text: String
	})
</script>

<style lang="scss" scoped>
	.head-img {
		border-radius: 21.03rpx 21.03rpx 21.03rpx 21.03rpx;
		margin: 28rpx auto;
		position: relative;
		overflow: hidden;

		.poisition {
			opacity: 0.7;
			position: absolute;
			width: 292.64rpx;
			height: 45rpx;
			background-color: #FFFFFF;
			left: 21rpx;
			bottom: 21rpx;
			border-radius: 21.03rpx 21.03rpx 21.03rpx 21.03rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 22.78rpx;
		}
	}
</style>