feat:添加头部切换

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

@@ -12,30 +12,64 @@
                         {{ tab }}
                     </div>
                 </div>
+                <div class="select-group">
+                    <div class="select-item">
+                        <div class="select-item-title">123</div>
+                    </div>
+                </div>
+                <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>
         </template>
-        <div class="floating-panel-content">
-            <el-affix :offset="50">
+        <div class="floating-panel-content" v-show="activeTab === 0">
                 <div class="select-group">
                     <div class="select-item">
                         <div class="select-item-title">123</div>
                     </div>
                 </div>
                 <el-anchor
+                    class="tabs-content-group"
                     :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-link class="tabs-content-item" 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>
+        <div class="floating-panel-content" v-show="activeTab === 1">
+                <!-- <div class="select-group">
+                    <div class="select-item">
+                        <div class="select-item-title">123</div>
+                    </div>
+                </div>
+                <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> -->
             <div class="card-content-group" ref="containerRef">
                 <div class="card-content-item" id="part1">
                     <div class="card-content-item-title">果园总览</div>
@@ -77,6 +111,7 @@
             </div>
         </div>
     </floating-panel>
+    <!-- <div></div> -->
 </template>
 
 <script setup>
@@ -191,6 +226,8 @@ const handleHeightChange = (data) => {
         }
         .card-content-group{
             padding: 12px 0;
+            height: 500px;
+            overflow-y: auto;
             .card-content-item{
                 margin-top: 10px;
                 border-radius: 14px;