<template>
|
<div class="centerContent">
|
<div id="meuBox" class="meuBox" @scroll="handleScroll($event)">
|
|
<div :id="item.name" v-for="(item, index) in menuData" :key="index">
|
<div class="menuTitle">{{ item.name }}</div>
|
<div class="menuDesc" v-if="item.desc">{{ item.desc }}</div>
|
<div class="meuCardBox" v-if="item.children">
|
<div v-for="(res, flag) in item.children" @click="setHrefUrl(res.href)" :key="flag">
|
<el-card class="menuCard">
|
<img class="menuImg" :src="res.img">
|
<div class="menudesc" v-if="res.desc">{{ res.desc }}</div>
|
<div class="menudesc" v-if="res.desc2">{{ res.desc2 }}</div>
|
</el-card>
|
</div>
|
</div>
|
</div>
|
|
</div>
|
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { ref, onMounted, watch, nextTick } from 'vue';
|
|
import useStore from '../../store/defineStore.ts';
|
const store = useStore();
|
const menuData = ref([]);
|
const setMenuDataStart = () => {
|
menuData.value = listMenu;
|
|
}
|
const setHrefUrl = (res) => {
|
if (!res) return;
|
store.$state.setHrefFlag = true;
|
store.$state.setHrefUrl =res
|
}
|
const setListMenuChange = (res) => {
|
var scrollContainer = document.getElementById("meuBox");
|
if (res == "Top") {
|
scrollContainer.scrollTop = 0;
|
} else {
|
var cont = document.getElementById(res);
|
scrollContainer.scrollTop = cont.offsetTop
|
}
|
}
|
const handleScroll = (event) => {
|
const scrollTop = event.target.scrollTop; // 滚动位置
|
var scrollBox = document.getElementById("meuBox");
|
if (scrollBox.children.length <= 0) return;
|
for (var i = 0; i < scrollBox.children.length; i++) {
|
var top = scrollBox.children[i].offsetTop;
|
var height = scrollBox.children[i].clientHeight;
|
var h1 = top + height;
|
if (scrollTop < top) {
|
var flag = (i - 1) < 0 ? 0 : (i - 1)
|
store.$state.setListIndex = { val: flag };
|
break
|
} else if (scrollTop == top) {
|
store.$state.setListIndex = { val: i };
|
break
|
} else if (top < scrollTop && scrollTop < h1) {
|
var index = parseFloat(scrollTop / h1).toFixed(2);
|
if (index < 0.5) {
|
store.$state.setListIndex = { val: i };
|
break;
|
} else {
|
store.$state.setListIndex = { val: i + 1 };
|
break;
|
}
|
}
|
|
}
|
}
|
onMounted(() => {
|
setMenuDataStart();
|
window.addEventListener("scroll", handleScroll);
|
})
|
|
|
watch(() => store.$state.setListFlag, (newValue, oldValue) => {
|
if (newValue) {
|
setListMenuChange(newValue)
|
nextTick(() => {
|
store.$state.setListFlag = null;
|
})
|
}
|
|
})
|
</script>
|
|
<style lang="scss" scoped>
|
.centerContent {
|
width: 58%;
|
height: 99%;
|
padding: 0px 1% 0% 1%;
|
|
cursor: pointer;
|
|
.meuBox {
|
height: 100%;
|
width: 100%;
|
overflow: auto;
|
|
.menuTitle {
|
font-size: 30px;
|
line-height: 48px;
|
margin-bottom: 20px;
|
}
|
|
.menuDesc {
|
font-size: 16px;
|
margin-bottom: 20px;
|
}
|
|
.meuCardBox {
|
width: 100%;
|
display: flex;
|
flex-wrap: wrap;
|
|
.menuCard {
|
width: 260px;
|
height: 310px;
|
margin-bottom: 15px;
|
margin-right: 15px;
|
border: 3px solid #dfdfdf;
|
padding: 0;
|
|
.menuImg {
|
width: 100%;
|
height: 230px;
|
margin-bottom: 10px;
|
}
|
|
.menudesc {
|
margin-left: 20px;
|
font-size: 16px;
|
}
|
}
|
|
.menuCard:hover {
|
border-color: #409eff;
|
}
|
}
|
}
|
|
::v-deep .el-card {
|
padding: 0px !important;
|
}
|
|
::v-deep .el-card__body {
|
padding: 0px !important;
|
}
|
|
|
}
|
|
::-webkit-scrollbar {
|
width: 4px;
|
}
|
|
::-webkit-scrollbar-thumb {
|
border-radius: 10px;
|
background: rgba(0, 0, 0, 0.2);
|
}
|
|
::-webkit-scrollbar-track {
|
border-radius: 0;
|
background: rgba(0, 0, 0, 0.1);
|
}
|
</style>
|
