feat:添加营养管理和农事

src/views/old_mini/home/components/homeFloatingPanel.vue

@@ -15,31 +15,64 @@
             </div>
         </template>
         <div class="floating-panel-content">
-            <div class="select-group">
-                <div class="select-item">
-                    <div class="select-item-title">123</div>
-                </div>
-            </div>
-            <div class="tabs-content-group">
-                <div :class="['tabs-content-item',activeTabsContent === index ? 'active' : '']" v-for="(tab,index) in tabsContent" :key="tab" @click="handleTabsContentClick(index)">
-                    {{ tab }}
+            <el-affix :offset="50">
+                <div class="select-group">
+                    <div class="select-item">
+                        <div class="select-item-title">123</div>
+                    </div>
                 </div>
-            </div>
-            <div class="card-content-group">
-                <div class="card-content-item">
+                <el-anchor
+                    :container="containerRef"
+                    direction="horizontal"
+                    type="default"
+                    :offset="0"
+                    @click="handleClick"
+                    >
+                    <el-anchor-link v-for="(tab,index) in tabsContent" :key="tab" @click="handleTabsContentClick(index)" :href="'#part' + (index + 1)" :title="tab"></el-anchor-link>
+                </el-anchor>
+                <!-- <div class="tabs-content-group">
+                    <div :class="['tabs-content-item',activeTabsContent === index ? 'active' : '']" v-for="(tab,index) in tabsContent" :key="tab" @click="handleTabsContentClick(index)">
+                        {{ tab }}
+                    </div>
+                </div> -->
+            </el-affix>
+            <div class="card-content-group" ref="containerRef">
+                <div class="card-content-item" id="part1">
                     <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 class="card-text">果园面积共XX亩，共有XX棵生产树。</div>
+                        <div class="card-text">本次飞巡拍摄了XX张照片，包括了XX棵树，目前为施用根部有机肥阶段，根据树体冠幅大小，果园预计施用有机肥XXkg。</div>
+                        <div class="card-text">目前XX%的树体暂未萌动新梢，需要进行剪枝农事，提高树体光合效率与通风效率。</div>
                     </div>
                 </div>
-                <div class="card-content-item">
+                <div class="card-content-item" id="part2">
                     <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 class="card-content-item-content">
+                        <div class="card-name">通风率</div>
+                        <div class="card-value">透光率体现树体自身郁闭程度，当前XX%的树体透光性较差，可能造成整体减产XX%，需立即执行剪枝农事；XX%的树体透光正常，建议继续保持现有管理措施并及时巡园。</div>
+                    </div>
+                </div>
+                <div class="card-content-item" id="part3">
+                    <div class="card-content-item-title">营养管理</div>
+                    <div class="card-content-item-content">
+                        营养管理
+                    </div>
+                </div>
+                <div class="card-content-item" id="part4">
+                    <div class="card-content-item-title">病虫管理</div>
+                    <div class="card-content-item-content">
+                        病虫管理
+                    </div>
+                </div>
+                <div class="card-content-item" id="part5">
+                    <div class="card-content-item-title">农事记录</div>
+                    <div class="card-content-item-content">
+                        农事记录
+                    </div>
                 </div>
             </div>
         </div>
@@ -57,7 +90,12 @@ 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[2]);
+const height = ref(anchors.value[1]);
+
+const containerRef = ref(null);
+const handleClick = (e) => {
+  e.preventDefault()
+}
 
 const activeTab = ref(0);
 const tabs = ref(["农事任务", "农场档案"]);
@@ -66,7 +104,7 @@ const handleTabClick = (index) => {
     activeTab.value = index;
 };
 
-const tabsContent = ref(["果园总览", "整体园相", "营养管理", "病虫管理"]);
+const tabsContent = ref(["果园总览", "整体园相", "营养管理", "病虫管理", "农事记录"]);
 
 const activeTabsContent = ref(0);
 const handleTabsContentClick = (index) => {
@@ -182,8 +220,15 @@ const handleHeightChange = (data) => {
                     border-radius: 8px;
                     background: rgba(238, 238, 238, 0.3);
                     padding: 10px;
-                    line-height: 23px;
-                    div + div{
+                    line-height: 21px;
+                    .card-name{
+                        font-weight: 500;
+                    }
+                    .card-value{
+                        font-size: 12px;
+                        color: rgba(23, 23, 23, 0.6);
+                    }
+                    .card-text + .card-text{
                         margin-top: 5px;
                     }
                 }