fix: 算法对比-锚点
This commit is contained in:
parent
d2423b751d
commit
dff7bc51e7
|
|
@ -10,12 +10,10 @@
|
|||
</a-breadcrumb>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="left">
|
||||
<div class="left-item" v-for="(data, i) in leftNav" :key="i" :data-title="data"
|
||||
:class="activeNameIndex == i ? 'active' : ''" @click="changeTab(i, data)">
|
||||
{{ data }}
|
||||
</div>
|
||||
</div>
|
||||
<a-anchor :affix="false" class="left" :getContainer="getId" @click="handleClickTab">
|
||||
<a-anchor-link class="left-item" :href="`#${data}`" :title="data" v-for="(data, i) in leftNav"
|
||||
:key="i" :data-title="data" />
|
||||
</a-anchor>
|
||||
<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(100vh - 300px);
|
||||
height: calc(100% - 130px);
|
||||
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>
|
||||
Loading…
Reference in New Issue