Browse Source

fix bug

master
梁欣 6 months ago
parent
commit
9a2f06fa55
  1. 2
      .nuxt/manifest/latest.json
  2. 2
      .nuxt/nuxt.d.ts
  3. 102
      components/AppHeader.vue
  4. 3
      pages/components/AboutUs.vue
  5. 2
      pages/components/CompanyStyle.vue
  6. 2
      pages/components/Djzt.vue
  7. 8
      pages/components/NewsCenter.vue

2
.nuxt/manifest/latest.json

@ -1 +1 @@
{"id":"dev","timestamp":1732706138674}
{"id":"dev","timestamp":1732707471655}

2
.nuxt/nuxt.d.ts

@ -1,8 +1,8 @@
// Generated by nuxi // Generated by nuxi
/// <reference types="@element-plus/nuxt" />
/// <reference types="@unocss/nuxt" /> /// <reference types="@unocss/nuxt" />
/// <reference types="@nuxt/telemetry" /> /// <reference types="@nuxt/telemetry" />
/// <reference types="@nuxt/image" /> /// <reference types="@nuxt/image" />
/// <reference types="@element-plus/nuxt" />
/// <reference types="nuxt" /> /// <reference types="nuxt" />
/// <reference path="types/app-defaults.d.ts" /> /// <reference path="types/app-defaults.d.ts" />
/// <reference path="types/plugins.d.ts" /> /// <reference path="types/plugins.d.ts" />

102
components/AppHeader.vue

@ -41,15 +41,15 @@
<!-- </el-menu-item>--> <!-- </el-menu-item>-->
<!-- </el-sub-menu>--> <!-- </el-sub-menu>-->
<div v-if="item?.children && item.children.length > 0"> <div v-if="item?.children && item.children.length > 0">
<div class="px-[20px] relative h-[60px] w-[95px] flex justify-center items-center">
<h3 class="text-white cursor-pointer" @mouseenter="mouseenter(index)" @mouseleave="mouseleave(index)">
<div class="px-[20px] relative h-[60px] w-[95px] flex justify-center items-center top-menu">
<h3 class="text-white cursor-pointer">
{{ {{
item.title item.title
}}</h3> }}</h3>
<div v-if="item.showChild"
class="absolute top-[60px] bg-white p-2 shadow border-t-2 border-[#409eff] left-0 overflow-hidden"
:style="{height: `${item.childHeight}px`}">
<div v-for="(sub,subIndex) in item.children" :key="index" class="w-[200px] p-1 cursor-pointer hover:text-[#409eff]">
<div
class="absolute top-[60px] bg-white p-2 shadow border-t-2 border-[#409eff] left-0 overflow-hidden child-menu">
<div v-for="(sub,subIndex) in item.children" :key="index"
class="w-[200px] p-1 cursor-pointer hover:text-[#409eff]">
<el-space <el-space
@click="openSpmUrl(`${item.path}`,sub,sub.navigationId)"> @click="openSpmUrl(`${item.path}`,sub,sub.navigationId)">
<el-avatar v-if="sub.icon" :src="sub.icon" shape="square" <el-avatar v-if="sub.icon" :src="sub.icon" shape="square"
@ -60,9 +60,8 @@
</div> </div>
</div> </div>
</div> </div>
<el-menu-item v-else :index="`${item.path}`"><h3
@mouseenter="mouseenter(index)"
@mouseleave="mouseleave(index)"
<el-menu-item v-else :index="`${item.path}`">
<h3
@click="openSpmUrl(`${item.path}`,item,item.navigationId)" class="text-white">{{ item.title }}</h3> @click="openSpmUrl(`${item.path}`,item,item.navigationId)" class="text-white">{{ item.title }}</h3>
</el-menu-item> </el-menu-item>
</template> </template>
@ -93,7 +92,7 @@
</el-dropdown> </el-dropdown>
</template> </template>
<template v-else> <template v-else>
<!-- <el-button type="primary" v-if="!token" @click="navigateTo(`/passport/login`)">登录/注册</el-button>-->
<!-- <el-button type="primary" v-if="!token" @click="navigateTo(`/passport/login`)">登录/注册</el-button>-->
<!-- <el-button v-if="config.showLoginButton" circle :icon="ElIconUserFilled" @click="goLogin"></el-button>--> <!-- <el-button v-if="config.showLoginButton" circle :icon="ElIconUserFilled" @click="goLogin"></el-button>-->
</template> </template>
</ClientOnly> </ClientOnly>
@ -117,7 +116,7 @@
<el-dropdown-item divided @click="loginDeveloperCenterByToken">会员中心</el-dropdown-item> <el-dropdown-item divided @click="loginDeveloperCenterByToken">会员中心</el-dropdown-item>
<el-dropdown-item divided command="logOut" @click="navigateTo('/user/logout')">退出</el-dropdown-item> <el-dropdown-item divided command="logOut" @click="navigateTo('/user/logout')">退出</el-dropdown-item>
</template> </template>
<!-- <el-dropdown-item v-if="!token" divided @click="navigateTo(`/passport/login`)">登录</el-dropdown-item>-->
<!-- <el-dropdown-item v-if="!token" divided @click="navigateTo(`/passport/login`)">登录</el-dropdown-item>-->
</el-dropdown-menu> </el-dropdown-menu>
</template> </template>
</el-dropdown> </el-dropdown>
@ -160,66 +159,16 @@ const sysDomain = useSysDomain();
const setNav = () => { const setNav = () => {
navigations.value = navigations.value.map(item => { navigations.value = navigations.value.map(item => {
item.showChild = false item.showChild = false
item.childHeight = 0;
item.childHeight = item.children ? parseInt((item.children?.length * 31).toString()) : 0;
return item return item
}) })
nextTick(() => {
const childMenuList = document.getElementsByClassName('.child-menu')
console.log('childMenuList', childMenuList)
})
} }
setNav() setNav()
const time = 10
let interval: NodeJS.Timeout
const mouseenter = async (index: number) => {
let showIndex = -1;
for (let i = 0; i < navigations.value.length; i++) {
console.log(navigations.value[i].showChild)
if (navigations.value[i].showChild) {
showIndex = i
break
}
}
if (showIndex === index) return
const item = navigations.value[index];
const childHeight = item.children ? parseInt((item.children?.length * 31).toString()) : 0;
await hideAll()
item.showChild = true
if (item.childHeight === undefined) item.childHeight = 0
interval = setInterval(() => {
if (item.childHeight !== undefined && item.childHeight >= childHeight && interval) clearInterval(interval)
if (item.childHeight !== undefined && item.children !== undefined && (item.childHeight < childHeight)) {
item.childHeight += parseInt(((childHeight / item.children?.length) / 5).toString())
} else {
// item.childHeight = childHeight
if (interval) clearInterval(interval)
}
console.log(item.childHeight, childHeight)
// console.log(item.childHeight)
}, time)
}
const mouseleave = () => {
if (interval) clearInterval(interval)
}
const hideAll = () => {
return new Promise(resolve => {
navigations.value = navigations.value.map(item => {
if (item.childHeight === undefined) item.childHeight = 0
if (item.showChild) {
const childHeight = item.children ? parseInt((item.children?.length * 31).toString()) : 0;
const interval = setInterval(() => {
if (item.childHeight !== undefined && item.children !== undefined && (item.childHeight > 0)) {
item.childHeight -= parseInt(((childHeight / item.children?.length) / 5).toString())
} else {
item.showChild = false
clearInterval(interval)
}
}, time)
}
return item
})
resolve(true)
})
}
// //
const visibleNumber = ref<number>(6); const visibleNumber = ref<number>(6);
@ -299,4 +248,25 @@ body {
.is-active:hover { .is-active:hover {
border-bottom: none !important; border-bottom: none !important;
} }
.top-menu:hover .child-menu {
display: block;
animation: revealMask 0.5s forwards;
}
.child-menu {
display: none;
max-height: 0; /* 初始最大高度为0 */
overflow: hidden; /* 隐藏超出部分 */
transition: max-height 0.5s ease; /* 平滑过渡 */
}
@keyframes revealMask {
from {
max-height: 0;
}
to {
max-height: 600px; /* 设置一个足够大的值,确保内容完全显示 */
}
}
</style> </style>

3
pages/components/AboutUs.vue

@ -60,7 +60,8 @@ const showAboutUs = ref(false)
watch( watch(
() => props.scrollTop, () => props.scrollTop,
() => { () => {
if (props.scrollTop > 700) showAboutUs.value = true
console.log(props.scrollTop)
if (props.scrollTop > 100) showAboutUs.value = true
}, },
{immediate: true} {immediate: true}
); );

2
pages/components/CompanyStyle.vue

@ -82,7 +82,7 @@ watch(
() => [props.groupId, props.scrollTop], () => [props.groupId, props.scrollTop],
() => { () => {
reload(); reload();
if (props.scrollTop >= 1580) show.value = true
if (props.scrollTop >= 700) show.value = true
}, },
{immediate: true} {immediate: true}

2
pages/components/Djzt.vue

@ -82,7 +82,7 @@ watch(
() => [props.groupId, props.scrollTop], () => [props.groupId, props.scrollTop],
() => { () => {
reload(); reload();
if (props.scrollTop >= 2240) show.value = true
if (props.scrollTop >= 1300) show.value = true
}, },
{immediate: true} {immediate: true}

8
pages/components/NewsCenter.vue

@ -26,7 +26,7 @@
</div> </div>
</el-col> </el-col>
<el-col :span="13"> <el-col :span="13">
<div class="tabs px-10 w-full left-2-right">
<div class="tabs px-10 w-full">
<el-tabs class="custom-tabs" v-model="categoryId" @tab-change="handleClick"> <el-tabs class="custom-tabs" v-model="categoryId" @tab-change="handleClick">
<el-tab-pane v-for="(cate,index) in category?.data" :key="index" :label="cate.title" <el-tab-pane v-for="(cate,index) in category?.data" :key="index" :label="cate.title"
:name="cate.navigationId" class="text-xl"/> :name="cate.navigationId" class="text-xl"/>
@ -56,7 +56,7 @@
</h2> </h2>
</div> </div>
<div class="xl:w-screen-2xl m-auto text-lg"> <div class="xl:w-screen-2xl m-auto text-lg">
<div class="tabs px-3 w-full left-2-right">
<div class="tabs px-3 w-full">
<el-tabs class="custom-tabs" v-model="categoryId" @tab-change="handleClick"> <el-tabs class="custom-tabs" v-model="categoryId" @tab-change="handleClick">
<el-tab-pane v-for="(cate,index) in category?.data" :key="index" :label="cate.title" <el-tab-pane v-for="(cate,index) in category?.data" :key="index" :label="cate.title"
:name="cate.navigationId" class="text-lg"/> :name="cate.navigationId" class="text-lg"/>
@ -157,13 +157,13 @@ const reload = async () => {
} }
} }
const showNews = ref(false)
const showNews = ref(true)
watch( watch(
() => [props.parentId, props.scrollTop], () => [props.parentId, props.scrollTop],
([parentId, scrollTop]) => { ([parentId, scrollTop]) => {
getCategory(); getCategory();
if (props.scrollTop > 70) showNews.value = true
// if (props.scrollTop > 70) showNews.value = true
}, },
{immediate: true} {immediate: true}
); );

Loading…
Cancel
Save