|
@@ -22,7 +22,7 @@
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
- <tabs v-model:active="active" class="tabs" scrollspy>
|
|
|
|
|
|
+ <tabs v-model:active="active" class="tabs" scrollspy sticky offset-top="40" background="#f5f7fb">
|
|
<tab title="果园总览" class="tab-item">
|
|
<tab title="果园总览" class="tab-item">
|
|
<div class="item-title">果园总览</div>
|
|
<div class="item-title">果园总览</div>
|
|
<div class="item-content">
|
|
<div class="item-content">
|
|
@@ -34,33 +34,69 @@
|
|
目前XX%的树体暂未萌动新梢,需要进行剪枝农事,提高树体光合效率与通风效率。
|
|
目前XX%的树体暂未萌动新梢,需要进行剪枝农事,提高树体光合效率与通风效率。
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
+ <div class="item-content">
|
|
|
|
+ <div class="photo-list">
|
|
|
|
+ <div class="img-item" v-for="(item, index) in 6" :key="index">
|
|
|
|
+ <img
|
|
|
|
+ class="photo-item"
|
|
|
|
+ src="https://birdseye-img-ali-cdn.sysuimars.com/16926861-1e20-4cbd-8bf2-90208db5a2d0/806080da-1a30-4b5b-b64b-b22e722c6cb6/DJI_202509010800_001_806080da-1a30-4b5b-b64b-b22e722c6cb6/DJI_20250901080536_0045_V_code-ws0fsmge97gh.jpeg"
|
|
|
|
+ alt=""
|
|
|
|
+ />
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="list-text" @click="handleSeeMore">点击查看更多</div>
|
|
|
|
+ </div>
|
|
</tab>
|
|
</tab>
|
|
<tab title="整体园相" class="tab-item">
|
|
<tab title="整体园相" class="tab-item">
|
|
<div class="item-title">整体园相</div>
|
|
<div class="item-title">整体园相</div>
|
|
<div class="item-content">
|
|
<div class="item-content">
|
|
- <div class="item-text">果园面积共XX亩,共有XX棵生产树。</div>
|
|
|
|
- <div class="item-text">
|
|
|
|
- 本次飞巡拍摄了XX张照片,包括了XX棵树,目前为施用根部有机肥阶段,根据树体冠幅大小,果园预计施用有机肥XXkg。
|
|
|
|
|
|
+ <div class="item-name">透光率</div>
|
|
|
|
+ <div class="item-value">
|
|
|
|
+ 透光率体现树体自身郁闭程度,当前XX%的树体透光性较差,可能造成整体减产XX%,需立即执行剪枝农事;XX%的树体透光正常,建议继续保持现有管理措施并及时巡园。
|
|
</div>
|
|
</div>
|
|
- <div class="item-text">
|
|
|
|
- 目前XX%的树体暂未萌动新梢,需要进行剪枝农事,提高树体光合效率与通风效率。
|
|
|
|
|
|
+ </div>
|
|
|
|
+ <div class="item-content">
|
|
|
|
+ <div class="item-name">通风率</div>
|
|
|
|
+ <div class="item-value">
|
|
|
|
+ 透光率体现树体自身郁闭程度,当前XX%的树体透光性较差,可能造成整体减产XX%,需立即执行剪枝农事;XX%的树体透光正常,建议继续保持现有管理措施并及时巡园。
|
|
|
|
+ </div>
|
|
|
|
+ <div class="map-wrap">
|
|
|
|
+ <img class="map-img" src="@/assets/img/home/map.png" alt="" />
|
|
|
|
+ <div class="map-text">剪枝农事地图</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</tab>
|
|
</tab>
|
|
<tab title="营养管理" class="tab-item">
|
|
<tab title="营养管理" class="tab-item">
|
|
<div class="item-title">营养管理</div>
|
|
<div class="item-title">营养管理</div>
|
|
<div class="item-content">
|
|
<div class="item-content">
|
|
- <div class="item-text">果园面积共XX亩,共有XX棵生产树。</div>
|
|
|
|
- <div class="item-text">
|
|
|
|
- 本次飞巡拍摄了XX张照片,包括了XX棵树,目前为施用根部有机肥阶段,根据树体冠幅大小,果园预计施用有机肥XXkg。
|
|
|
|
|
|
+ <div class="item-name">根肥</div>
|
|
|
|
+ <div class="item-value">
|
|
|
|
+ 透光率体现树体自身郁闭程度,当前XX%的树体透光性较差,可能造成整体减产XX%,需立即执行剪枝农事;XX%的树体透光正常,建议继续保持现有管理措施并及时巡园。
|
|
</div>
|
|
</div>
|
|
- <div class="item-text">
|
|
|
|
- 目前XX%的树体暂未萌动新梢,需要进行剪枝农事,提高树体光合效率与通风效率。
|
|
|
|
|
|
+ <div class="map-wrap">
|
|
|
|
+ <img class="map-img" src="@/assets/img/home/map.png" alt="" />
|
|
|
|
+ <div class="map-text">根肥农事地图</div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </tab>
|
|
|
|
+ <tab title="病虫管理" class="tab-item">
|
|
|
|
+ <div class="item-title">病虫管理</div>
|
|
|
|
+ <div class="item-content">
|
|
|
|
+ <div class="item-value">
|
|
|
|
+ 透光率体现树体自身郁闭程度,当前XX%的树体透光性较差,可能造成整体减产XX%,需立即执行剪枝农事;XX%的树体透光正常,建议继续保持现有管理措施并及时巡园。
|
|
|
|
+ </div>
|
|
|
|
+ <div class="map-wrap">
|
|
|
|
+ <img class="map-img" src="@/assets/img/home/map.png" alt="" />
|
|
|
|
+ <div class="map-text">防虫农事地图</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</tab>
|
|
</tab>
|
|
- <tab title="病虫管理">内容 3</tab>
|
|
|
|
- <tab title="农事记录">内容 3</tab>
|
|
|
|
|
|
+ <tab title="农事记录" class="tab-item">
|
|
|
|
+ <div class="item-title">农事记录</div>
|
|
|
|
+ <div class="item-content">
|
|
|
|
+ 农事记录
|
|
|
|
+ </div>
|
|
|
|
+ </tab>
|
|
</tabs>
|
|
</tabs>
|
|
</div>
|
|
</div>
|
|
<!-- 底部 -->
|
|
<!-- 底部 -->
|
|
@@ -86,8 +122,10 @@
|
|
import customHeader from "@/components/customHeader.vue";
|
|
import customHeader from "@/components/customHeader.vue";
|
|
import { Icon, Tab, Tabs } from "vant";
|
|
import { Icon, Tab, Tabs } from "vant";
|
|
import { ref } from "vue";
|
|
import { ref } from "vue";
|
|
-import reportPopup from "@/components/reportPopup.vue"
|
|
|
|
|
|
+import reportPopup from "@/components/reportPopup.vue";
|
|
|
|
+import { useRouter } from "vue-router";
|
|
|
|
|
|
|
|
+const router = useRouter();
|
|
const value = ref("");
|
|
const value = ref("");
|
|
|
|
|
|
const options = [
|
|
const options = [
|
|
@@ -115,10 +153,14 @@ const options = [
|
|
|
|
|
|
const active = ref(0);
|
|
const active = ref(0);
|
|
|
|
|
|
-const reportPopupRef = ref(null)
|
|
|
|
|
|
+const reportPopupRef = ref(null);
|
|
function sharePopup() {
|
|
function sharePopup() {
|
|
- reportPopupRef.value.handleShow()
|
|
|
|
|
|
+ reportPopupRef.value.handleShow();
|
|
}
|
|
}
|
|
|
|
+
|
|
|
|
+const handleSeeMore = () => {
|
|
|
|
+ router.push("/farm_photo");
|
|
|
|
+};
|
|
</script>
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
<style lang="scss" scoped>
|
|
@@ -187,8 +229,20 @@ function sharePopup() {
|
|
}
|
|
}
|
|
.tabs {
|
|
.tabs {
|
|
margin-top: 10px;
|
|
margin-top: 10px;
|
|
|
|
+ ::v-deep {
|
|
|
|
+ .van-tabs__nav {
|
|
|
|
+ height: 70%;
|
|
|
|
+ .van-tab--active{
|
|
|
|
+ color: #2199F8;
|
|
|
|
+ background: rgba(33, 153, 248, 0.2);
|
|
|
|
+ border-radius: 25px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .van-tabs__line{
|
|
|
|
+ display: none;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
.tab-item {
|
|
.tab-item {
|
|
- margin-top: 10px;
|
|
|
|
border-radius: 14px;
|
|
border-radius: 14px;
|
|
padding: 12px;
|
|
padding: 12px;
|
|
background: #fff;
|
|
background: #fff;
|
|
@@ -217,6 +271,27 @@ function sharePopup() {
|
|
background: rgba(238, 238, 238, 0.3);
|
|
background: rgba(238, 238, 238, 0.3);
|
|
padding: 10px;
|
|
padding: 10px;
|
|
line-height: 21px;
|
|
line-height: 21px;
|
|
|
|
+ .photo-list {
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ width: 100%;
|
|
|
|
+ overflow: auto;
|
|
|
|
+ padding-bottom: 10px;
|
|
|
|
+ .photo-item {
|
|
|
|
+ width: 92px;
|
|
|
|
+ height: 92px;
|
|
|
|
+ border-radius: 8px;
|
|
|
|
+ object-fit: cover;
|
|
|
|
+ }
|
|
|
|
+ .img-item + .img-item {
|
|
|
|
+ margin-left: 12px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .list-text {
|
|
|
|
+ text-align: center;
|
|
|
|
+ color: rgba(0, 0, 0, 0.5);
|
|
|
|
+ padding-top: 2px;
|
|
|
|
+ }
|
|
.item-name {
|
|
.item-name {
|
|
font-weight: 500;
|
|
font-weight: 500;
|
|
}
|
|
}
|