Ver Fonte

feat:添加果园总览

wangsisi há 2 semanas atrás
pai
commit
a0858df05c
1 ficheiros alterados com 59 adições e 2 exclusões
  1. 59 2
      src/views/old_mini/home/components/homeFloatingPanel.vue

+ 59 - 2
src/views/old_mini/home/components/homeFloatingPanel.vue

@@ -25,7 +25,23 @@
                     {{ tab }}
                 </div>
             </div>
-            <div></div>
+            <div class="card-content-group">
+                <div class="card-content-item">
+                    <div class="card-content-item-title">果园总览</div>
+                    <div class="card-content-item-content">
+                        <div>果园面积共XX亩,共有XX棵生产树。</div>
+                        <div>本次飞巡拍摄了XX张照片,包括了XX棵树,目前为施用根部有机肥阶段,根据树体冠幅大小,果园预计施用有机肥XXkg。</div>
+                        <div>目前XX%的树体暂未萌动新梢,需要进行剪枝农事,提高树体光合效率与通风效率。</div>
+                    </div>
+                </div>
+                <div class="card-content-item">
+                    <div class="card-content-item-title">整体园相</div>
+                    <div class="card-content-item-content">
+                        <div class="card-name">透光率</div>
+                        <div class="card-value">透光率体现树体自身郁闭程度,当前XX%的树体透光性较差,可能造成整体减产XX%,需立即执行剪枝农事;XX%的树体透光正常,建议继续保持现有管理措施并及时巡园。</div>
+                    </div>
+                </div>
+            </div>
         </div>
     </floating-panel>
 </template>
@@ -41,7 +57,7 @@ const tabBarHeight = ref(localStorage.getItem("tabBarHeight") * 1 || 50);
 
 const defalutHeight = ref(tabBarHeight.value + 32);
 const anchors = ref([defalutHeight.value, 310 + tabBarHeight.value, Math.round(1 * window.innerHeight)]);
-const height = ref(anchors.value[1]);
+const height = ref(anchors.value[2]);
 
 const activeTab = ref(0);
 const tabs = ref(["农事任务", "农场档案"]);
@@ -70,6 +86,9 @@ const handleHeightChange = (data) => {
 </script>
 
 <style lang="scss" scoped>
+.van-floating-panel{
+    border-radius: 0;
+}
 .floating-panel {
     width: 100%;
     background: linear-gradient(180deg, transparent 0%, #F5F7FB 14%);
@@ -132,6 +151,44 @@ const handleHeightChange = (data) => {
                 }
             }
         }
+        .card-content-group{
+            padding: 12px 0;
+            .card-content-item{
+                margin-top: 10px;
+                border-radius: 14px;
+                padding: 12px;
+                background: #fff;
+                color: #171717;
+
+                .card-content-item-title{
+                    font-size: 16px;
+                    font-weight: 500;
+                    text-align: center;
+                    position: relative;
+                    &::before{
+                        content: '';
+                        position: absolute;
+                        left: 50%;
+                        transform: translateX(-50%);
+                        bottom: -1px;
+                        width: 66px;
+                        height: 8px;
+                        background: rgba(33, 153, 248, 0.3);
+                        border-radius: 4px;
+                    }
+                }
+                .card-content-item-content{
+                    margin-top: 12px;
+                    border-radius: 8px;
+                    background: rgba(238, 238, 238, 0.3);
+                    padding: 10px;
+                    line-height: 23px;
+                    div + div{
+                        margin-top: 5px;
+                    }
+                }
+            }
+        }   
     }
     &.background-panel{
         background: #F5F7FB;