|
@@ -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;
|