TraceabilityAPP/components/imgCard.vue

65 lines
1.3 KiB
Vue
Raw Permalink Normal View History

2023-10-23 09:00:12 +08:00
<template>
<view class="">
<view class="head-img">
2023-10-25 19:55:18 +08:00
2023-10-23 09:00:12 +08:00
<view class="">
2023-10-25 19:55:18 +08:00
<u--image :src="props.imgUrl" width="693.93rpx" height=" 394.28rpx" alt=""></u--image>
2023-10-23 09:00:12 +08:00
</view>
<view class="poisition">
2023-10-26 19:02:26 +08:00
<!-- {{props.text}} -->
{{address}}
2023-10-23 09:00:12 +08:00
</view>
</view>
</view>
</template>
2023-10-25 19:55:18 +08:00
<script setup>
import {
ref,
reactive
} from 'vue'
import uplodeFn from "@/utils/uplodeImg.js"
2023-10-27 19:26:03 +08:00
// import {
// userInfoAPI
// } from "@/api/plant.js"
2023-10-26 19:02:26 +08:00
import {
2023-10-27 19:26:03 +08:00
userInfoStore
} from '@/store/userInfo'
const userInfoStores = userInfoStore()
2023-10-26 19:02:26 +08:00
const address = ref("")
2023-10-27 19:26:03 +08:00
// userInfoAPI({
// user_id: 307
// }).then(res => {
// })
let userInfo = userInfoStores.userInfo
address.value = userInfo.area_name + userInfo.street_name + userInfo.village_name + userInfo.brigade_name
2023-10-25 19:55:18 +08:00
const props = defineProps({
imgUrl: String,
text: String
})
2023-10-23 09:00:12 +08:00
</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>