cultivationApp/components/plant/breedInfo.vue

111 lines
2.2 KiB
Vue

<template>
<view class="" style="margin-top: 10rpx;">
<view class="" style="display: flex;align-items: center;height: 60rpx;">
<u-icon name="map"></u-icon>
栏舍一号
</view>
<view class="info">
<view class="info-li" style="background-image: url('/static/main/house/dong_wu_ming_cheng.png');">
耳号
<view class="">
黑山羊
</view>
</view>
<view class="info-li" style="background-image: url('/static/main/house/dong_wu_lei_xing.png');">
品类
<view class="">
哺乳动物
</view>
</view>
<view class="info-li" style="background-image: url('/static/main/house/lan_she_rong_liang.png');">
品种
<view class="">
50
</view>
</view>
<view class="info-li" style="background-image: url('/static/main/house/lan_she_fu_ze_ren.png');">
生理阶段
<view class="">
赵桑
</view>
</view>
<view class="info-li" style="background-image: url('/static/main/house/dian_hua.png');">
体重
<view class="">
20kg
</view>
</view>
<view class="info-li" style="background-image: url('/static/main/house/dian_hua.png');">
健康状况
<view class="">
健康
</view>
</view>
</view>
</view>
</template>
<script setup>
import {
reactive,
watch
} from "vue";
const props = defineProps({
info: Object,
isDetail: Boolean
})
const perviewFn = (url) => {
uni.previewImage({
urls: [url]
})
}
</script>
<style lang="scss" scoped>
.info {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
.info-li {
width: 223rpx;
height: 129rpx;
border-radius: 10rpx;
background-size: 100% 100%;
padding: 20rpx;
margin-bottom: 20rpx;
box-shadow: 1rpx 1rpx 10rpx 1rpx rgba(0, 0, 0, 0.1);
}
.info-li-d {
width: 223rpx;
height: 129rpx;
border-radius: 10rpx;
padding: 20rpx;
margin-bottom: 20rpx;
}
}
.card {
// width: 710rpx;
margin: 0 auto;
.tit {
display: flex;
justify-content: space-between;
padding-bottom: 20rpx;
border-bottom: 1px solid #EBF1EF;
}
.card-li {
margin-top: 20rpx;
display: flex;
justify-content: space-between;
}
}
</style>