From ae7365f6c972934d5deaa595de9c7f88059bc08d Mon Sep 17 00:00:00 2001
From: guanqb <18720758508@163.com>
Date: Wed, 07 Sep 2022 11:50:20 +0800
Subject: [PATCH] 地块种养品种图标展示
---
src/views/land/cs.vue | 65 +++++++++++++++++++++++---------
1 files changed, 47 insertions(+), 18 deletions(-)
diff --git a/src/views/land/cs.vue b/src/views/land/cs.vue
index f11591c..607ce3d 100644
--- a/src/views/land/cs.vue
+++ b/src/views/land/cs.vue
@@ -78,9 +78,19 @@
<!-- <div v-for="(url,index) in item.urls" :key="index" class="strainimg">
<img v-if="url" :src="url" width="30px" height="30px" />
- </div> -->
- <div v-if="item.urls.length >0" class="strainimg">
- <img v-for="(url,index) in item.urls" :key="index" :src="url" width="30px" height="30px" />
+ </div>-->
+ <div
+ v-if="item.urls.length >0"
+ class="strainimg"
+ :class="{strainimg1:item.urls.length==1,strainimg2:item.urls.length==2,strainimg3:item.urls.length==3,strainimg4:item.urls.length==4,strainimg5:item.urls.length>=5}"
+ >
+ <img
+ v-for="(url,index) in item.urls"
+ :key="index"
+ :src="url"
+ width="30px"
+ height="30px"
+ />
</div>
<!-- <img
@@ -156,19 +166,19 @@
//地块页面
setTimeout(() => {
this.onLoad()
- }, 100);
+ }, 100)
}
}
},
created () {
- this.$EventBus.$on('getFarmObj', (farmObj)=>{
+ this.$EventBus.$on('getFarmObj', (farmObj) => {
// this.$nextTick(() => {
// this.$EventBus.$emit("setFarmId", farmObj.id);
// });
setTimeout(() => {
- this.$EventBus.$emit("setFarmId", farmObj.id);
- }, 100);
+ this.$EventBus.$emit("setFarmId", farmObj.id)
+ }, 100)
})
this.onLoad(this.page)
},
@@ -230,14 +240,14 @@
this.farmPlanList = data.records
this.farmPlanList.forEach((e) => {
e.landArea = fixed.fixedNum(e.landArea)
- if(e.strainUrl == ""){
+ if (e.strainUrl == "") {
e["urls"] = []
- }else{
+ } else {
e["urls"] = e.strainUrl.split(",")
}
})
-
+
console.log(this.farmPlanList)
})
@@ -378,20 +388,39 @@
padding-left: 13px;
}
.strainimg {
- width: 31px;
- // height: 31px;
- position: relative;
- top: -147px;
- left: 0px;
- bottom: 0px;
- right: 0px;
+ position: absolute;
// display:flex;
// align-content:center
// flex-direction: row;
// align-items: center;
}
+.strainimg1 {
+ width: 31px;
+ top: 45%;
+ left: 45%;
+}
+.strainimg2 {
+ width: 60px;
+ top: 45%;
+ left: 40%;
+}
+.strainimg3 {
+ width: 60px;
+ top: 38%;
+ left: 36%;
+}
+.strainimg4 {
+ width: 60px;
+ top: 38%;
+ left: 36%;
+}
+.strainimg5 {
+ width: 90px;
+ top: 38%;
+ left: 30%;
+}
.strainimg img {
- border-radius:50%;
+ border-radius: 50%;
}
</style>
--
Gitblit v1.9.3