fix: 算法对比-锚点

front/src/views/home/algorithmCompare.vue

@@ -10,12 +10,10 @@
                 </a-breadcrumb>
             </div>
             <div class="content">
-                <div class="left">
+                <a-anchor :affix="false" class="left" :getContainer="getId" @click="handleClickTab">
-                    <div class="left-item" v-for="(data, i) in leftNav" :key="i" :data-title="data"
+                    <a-anchor-link class="left-item" :href="`#${data}`" :title="data" v-for="(data, i) in leftNav"
-                        :class="activeNameIndex == i ? 'active' : ''" @click="changeTab(i, data)">
+                        :key="i" :data-title="data" />
-                        {{ data }}
+                </a-anchor>
-                    </div>
-                </div>
                 <div class="right">
                     <div class="top no-border-right">
                         <div class="td-name">
@@ -31,9 +29,10 @@
                             </span>
                         </div>
                     </div>
-                    <div class="bottom bottomRef" ref="bottomRef" @scroll="(event) => scrollAction(event)">
+                    <div class="bottom bottomRef" id="bottomRef" ref="bottomRef">
                         <div class="bottom-item" v-for="(data, i) in tableData" :key="i">
-                            <div class="title" :title="data.title" :ref="data.title">{{ data.title }}</div>
+                            <div class="title" :id="data.title" :title="data.title" :ref="data.title">{{ data.title }}
+                            </div>
                             <!-- 算法优势 -->
                             <div class="group-data" v-if="data.groupName">
                                 <!-- <compare-group-view :dataList="data.groupList"></compare-group-view> -->
@@ -98,7 +97,7 @@ import HomeFooter from '@/views/newHome/components/Footer'
 import HomeHeader from '@/views/home/components/header'
 import CompareGroupView from '@/views/home/components/CompareGroupView'
 import { pageWithAttrs } from '@/api/abilityStatistics'
-import { defineComponent, ref, onMounted, getCurrentInstance, computed, unref, reactive, nextTick } from 'vue';
+import { defineComponent, ref, onMounted, getCurrentInstance, computed, unref, reactive, nextTick, onCreated } from 'vue';
 import { selectOne } from '@/api/home'
 import { message, Tooltip, Table, Spin } from 'ant-design-vue'
 import { useRouter } from 'vue-router';
@@ -261,13 +260,25 @@ let textObj = {
     },
 }
 
-const activeNameIndex = ref(0)
 const showAddModal = ref(false)
 const dataList = ref([])
 const selectedRowKeys = ref([]);
 let tableData = ref([])
 const loadingPage = ref(false)
 
+const getId = () => {
+    return window.document.getElementById('bottomRef')
+}
+
+const handleClickTab = (e, link) => {
+    // 阻止点击的默认事件修改路由
+    e.preventDefault();
+    if (link.href) {
+        let ele = document.getElementById(link.href);
+        ele && ele.scrollIntoView({ block: 'start', behavior: 'smooth' });
+    }
+}
+
 // 初始化
 onMounted(() => {
     selectedRowKeys.value.push(queryId)
@@ -278,64 +289,6 @@ onMounted(() => {
     })
 })
 
-// 滚动事件
-const scrollAction = (event) => {
-    isScrollFlag.value = true;
-    if (!isScrollFlag.value) {
-        rrturn
-    }
-    const _scrollTop = event.target.scrollTop
-    nextTick(() => {
-        let len = navScrollTopArray.value.length;
-        let min = navScrollTopArray.value[1].scrollTop
-        let max = navScrollTopArray.value[len - 2].scrollTop;
-        for (let index = 0; index < navScrollTopArray.value.length; index++) {
-            const item = navScrollTopArray.value[index];
-            if (index < len - 1) {
-                if (_scrollTop > item.scrollTop && _scrollTop <= navScrollTopArray.value[index + 1].scrollTop) {
-                    activeNameIndex.value = index + 1;
-                    break;
-                }
-            }
-            if (_scrollTop >= max) {
-                activeNameIndex.value = len - 1;
-                break;
-            }
-            if (_scrollTop <= min) {
-                activeNameIndex.value = 0;
-                break;
-            }
-        }
-    })
-}
-
-let navScrollTopArray = ref([])
-// 获取元素距离顶部的位置
-const getNavscrollTop = () => {
-    navScrollTopArray = ref([])
-    leftNav.value.map((title, index) => {
-        let realTop = ctx.refs[title][0].offsetTop;
-        navScrollTopArray.value.push({
-            scrollTop: realTop - 240,
-            index: index
-        })
-    })
-}
-
-let isScrollFlag = ref(false)
-// 切换左侧
-const changeTab = (n, data) => {
-    isScrollFlag.value = false;
-    activeNameIndex.value = n;
-    // 获取元素距离父元素的距离
-    let realTop = ctx.refs[data][0].offsetTop;
-    if (realTop || realTop === 0) {
-        ctx.refs.bottomRef.scrollTo({
-            'top': realTop - 240,
-            'behavior': 'smooth'
-        })
-    }
-}
 
 const initData = () => {
     loadingPage.value = true;
@@ -350,11 +303,10 @@ const initData = () => {
                 detailArray.value.push(formatterData(data[index]))
             }
         }
-        // 处理数据
-        getNewData()
 
         nextTick(() => {
-            getNavscrollTop()
+            // 处理数据
+            getNewData()
         })
 
         loadingPage.value = false
@@ -588,6 +540,8 @@ const formatterData = (obj) => {
 <style lang="less" scoped>
 .bg {
     background: #fff;
+    height: 100vh;
+    width: 100%;
 }
 
 // @font-face {
@@ -618,15 +572,18 @@ const formatterData = (obj) => {
 
 .box-container {
     width: 1592px;
-    height: 900px;
     margin: 0 auto;
     padding-top: 60px;
+    height: 100vh;
+    box-sizing: border-box;
 
     .content {
         display: flex;
         justify-content: flex-start;
         align-items: flex-start;
         padding-top: 10px;
+        height: calc(100% - 60px);
+        width: 100%;
     }
 
     .nav-box {
@@ -662,15 +619,15 @@ const formatterData = (obj) => {
 
         .active {
             background: #0058e1;
-            color: #fff;
+            color: #fff !important;
             margin: 0;
         }
     }
 
     .right {
         width: 1370px;
-        height: 780px;
         margin-left: 32px;
+        height: 100%;
 
         .top {
             width: 100%;
@@ -713,8 +670,7 @@ const formatterData = (obj) => {
         .bottom {
             width: 100%;
             overflow-y: auto;
-            // height: 7rem;
+            height: calc(100% - 130px);
-            height: calc(100vh - 300px);
             padding-bottom: 10px;
             box-sizing: border-box;
         }
@@ -798,6 +754,7 @@ const formatterData = (obj) => {
 .no-data {
     height: 100px;
     width: 100%;
+    ;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -817,4 +774,34 @@ const formatterData = (obj) => {
     height: 140px;
     width: 240px;
 }
+
+.ant-anchor-wrapper {
+    width: 200px;
+    height: 600px;
+    background: rgba(244, 245, 248, 0.8);
+    padding-left: 0;
+    position: static;
+}
+
+.ant-anchor-ink::before {
+    content: ' ';
+    width: 0 !important;
+}
+
+/deep/ .ant-anchor {
+    position: static;
+    padding-left: 0;
+}
+
+.ant-anchor-link {
+    padding: 0;
+    margin: 0 14px;
+    height: 60px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 16px;
+    color: #212121;
+    border-bottom: 1px solid #dddee1;
+}
 </style>