<style lang="scss" scoped> .container{ padding:30rpx; background:#F6F6F6; min-height: 100%; .card{ margin:0; .item{ border-top:2rpx solid rgba(216,216,216,0.4); height:80rpx; display:flex; align-items: center; justify-content: space-between; color:#777; font-size:28rpx; text{ &:first-child{ flex-shrink: 0; } } &.inline{ flex-direction: column; align-items: flex-start; height:auto; padding-bottom:20rpx; text:first-child{ margin:20rpx 0; } } .imgs{ margin:0 -20rpx -20rpx 0; width:100%; display:flex; flex-wrap: wrap; &>view{ width:calc((100% - 40rpx)/3); margin:0 20rpx 20rpx 0; &:nth-child(3n){ margin-right:0; } } } .detail{ background:#F7F7F7; border-radius: 24rpx; padding:20rpx; color:#999; font-size:28rpx; width:100%; } } } } </style> <template> <view class="container"> <view class="card"> <view class="title">基本信息</view> <view class="item"> <text>基地名称</text> <text>{{detail.plantBaseName}}</text> </view> <view class="item"> <text>地块编号</text> <text>{{detail.plotNumber}}</text> </view> <view class="item"> <text>地块面积</text> <text>{{detail.drawArea}}亩</text> </view> <view class="item"> <text>实际面积</text> <text>{{detail.realityArea}}亩</text> </view> <view class="item inline"> <text>地块图片</text> <view class="imgs"> <u-image mode="aspectFill" radius="8rpx" width="100%" height="160rpx" v-for="(v,k) in detail.image" :key="k" :src="`${imgUrl}/${v}`"> <text slot="error" style="font-size:60rpx" class="plant-xiaopangchetupianjiazaishibai"/> </u-image> </view> </view> <view class="item"> <text>使用日期</text> <text>{{detail.beginTime}} 至 {{detail.endTime}}</text> </view> <view class="item"> <text>经纬度</text> <text>东经97°31′,北纬21°8′</text> </view> <view class="item inline"> <text>详细地址</text> <view class="detail"> {{detail.address}} </view> </view> </view> </view> </template> <script> import request,{host} from '@/common/request' export default{ data(){ return{ detail:{}, imgUrl:host("imgUrl"), } }, onLoad(options){ this.getDetail(options.id) }, methods:{ async getDetail(id){ var res=await request('/api/plantPlot/queryById',{ params:{id} }) if(res.statu){ this.detail=res.data }else{ uni.showModal({ title:"提示", content:res.msg||"获取详情失败!", showCancel:false, }) } } } } </script>