From da19a22d2422e6cc0c60047136670703815d8976 Mon Sep 17 00:00:00 2001
From: tj <1378534974@qq.com>
Date: 星期三, 30 四月 2025 11:45:12 +0800
Subject: [PATCH] D:/devInstall/Git/about
---
src/pages/Home.vue | 11 +-
src/components/HeaderMenu.vue | 221 +++++++++++++++++++++++++++++++------------------------
src/router/index.ts | 2
3 files changed, 131 insertions(+), 103 deletions(-)
diff --git a/src/components/HeaderMenu.vue b/src/components/HeaderMenu.vue
index 03c9743..3342123 100644
--- a/src/components/HeaderMenu.vue
+++ b/src/components/HeaderMenu.vue
@@ -1,118 +1,145 @@
<template>
- <nav class="navbar navbar-expand-lg bg-light fixed-top">
- <div class="container-fluid">
- <a class="navbar-brand" href="#">
- <img src="@/assets/logo/logo.png" alt="云游四方" class="logo" />
- <span class="text-xl font-bold">云游四方</span>
- </a>
- <button
- class="navbar-toggler"
- type="button"
- data-bs-toggle="collapse"
- data-bs-target="#navbarNav"
- aria-controls="navbarNav"
- aria-expanded="false"
- aria-label="Toggle navigation"
- >
- <span class="navbar-toggler-icon"></span>
- </button>
- <div class="collapse navbar-collapse" id="navbarNav">
- <ul class="navbar-nav">
+ <nav class="navbar navbar-expand-lg bg-light fixed-top">
+ <div class="container-fluid">
+ <a class="navbar-brand" href="#">
+ <img src="@/assets/logo/logo.png" alt="云游四方" class="logo" />
+ <span class="text-xl font-bold">云游四方</span>
+ </a>
+ <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
+ aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+ <span class="navbar-toggler-icon"></span>
+ </button>
+ <div class="collapse navbar-collapse" id="navbarNav">
+ <!-- <ul class="navbar-nav">
<li class="nav-item">
<a
class="nav-link active"
aria-current="page"
href="#"
- @click="navigateTo('/')"
+ @click.prevent="navigateTo('/')"
>首页</a
>
</li>
<li class="nav-item">
- <a class="nav-link" href="#" @click="navigateTo('/product')"
+ <a class="nav-link" href="#" @click.prevent="navigateTo('/product')"
>产品中心</a
>
</li>
<li class="nav-item">
- <a class="nav-link" href="#" @click="navigateTo('/about')"
+ <a class="nav-link" href="#" @click.prevent="navigateTo('/about#third-other')"
>关于我们</a>
</li>
- </ul>
- </div>
- <div class="contact-phone d-none d-md-block">
- <img src="/icons/hotline.png" alt="电话" class="hot-line-img" />
- <span class="text-lg font-bold">13862676702</span>
- </div>
+ </ul> -->
+ <ul class="navbar-nav">
+ <li v-for="item in navItems" :key="item.label" class="nav-item">
+ <a class="nav-link" href="#" :class="{ active: isActive(item.path) }"
+ @click.prevent="navigateTo(item.path)">
+ {{ item.label }}
+ </a>
+ </li>
+ </ul>
</div>
- </nav>
- </template>
-
- <script setup>
- import { useRouter } from "vue-router";
-
- const router = useRouter();
-
- // Handle navigation for the menu items
- // const navigateTo = (path) => {
- // router.push(path);
- // };
+ <div class="contact-phone d-none d-md-block">
+ <img src="/icons/hotline.png" alt="电话" class="hot-line-img" />
+ <span class="text-lg font-bold">13862676702</span>
+ </div>
+ </div>
+ </nav>
+</template>
- const navigateTo = (path) => {
- // console.log('选中菜单:', index);
- if(path === '/logo'){
- router.push('/');
- }else if(path === '/about'){
- router.push({path:'/',hash:'#third-other'});
- }
- else{
- router.push(path);
- }
-
+<script setup>
+import { useRouter, useRoute } from "vue-router";
+
+const router = useRouter();
+const route = useRoute()
+
+const navItems = [
+ { label: '首页', path: '/' },
+ { label: '产品中心', path: '/product' },
+ { label: '关于我们', path: '/about#third-other' }
+];
+
+// Handle navigation for the menu items
+// const navigateTo = (path) => {
+// router.push(path);
+// };
+
+const isActive = (targetPath) => {
+ // 可根据需要改为更精确的匹配逻辑
+ return route.fullPath === targetPath || route.path === targetPath.split('#')[0];
+};
+const navigateTo = (path) => {
+ if (path.includes('#')) {
+ const [basePath, hash] = path.split('#');
+ router.push({ path: basePath, hash: `#${hash}` });
+ } else {
+ router.push(path);
+ }
};
- </script>
-
- <style scoped>
- .navbar {
- padding: 10px 20px;
- }
-
- .navbar-brand {
- display: flex;
- align-items: center;
- }
-
- .logo {
- width: 40px;
- height: 40px;
- margin-right: 10px;
- }
-
- .nav-link {
- font-size: 16px;
- }
-
- .contact-phone {
- display: flex;
- align-items: center;
- font-size: 14px;
- }
-
- .contact-phone .el-icon {
- margin-right: 5px;
- }
-
- .navbar-nav .nav-link {
- margin-right: 15px;
- }
-
- .fixed-top {
- z-index: 1000;
- }
+</script>
- .hot-line-img{
- width: 20px;
- height: 20px;
- margin-right: 5px;
- }
- </style>
-
\ No newline at end of file
+<style scoped>
+.navbar {
+ padding: 10px 20px;
+}
+
+.navbar-brand {
+ display: flex;
+ align-items: center;
+}
+
+.logo {
+ width: 40px;
+ height: 40px;
+ margin-right: 10px;
+}
+
+.nav-link {
+ font-size: 16px;
+}
+
+.contact-phone {
+ display: flex;
+ align-items: center;
+ font-size: 14px;
+}
+
+.contact-phone .el-icon {
+ margin-right: 5px;
+}
+
+.navbar-nav .nav-link {
+ margin-right: 15px;
+}
+
+.fixed-top {
+ z-index: 1000;
+}
+
+.hot-line-img {
+ width: 20px;
+ height: 20px;
+ margin-right: 5px;
+}
+</style>
+<style scoped>
+.navbar-nav .nav-link {
+ color: #000;
+ font-weight: normal;
+ padding: 10px 15px;
+ text-transform: uppercase;
+ transition: color 0.3s, background-color 0.3s;
+}
+
+.navbar-nav .nav-link:hover {
+ color: #007bff;
+}
+
+.navbar-nav .nav-link.active {
+ color: #007bff;
+ /* background-color: #007bff; */
+ font-weight: bold;
+ border-radius: 5px;
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/Home.vue b/src/pages/Home.vue
index ec7a579..cc6a1a5 100644
--- a/src/pages/Home.vue
+++ b/src/pages/Home.vue
@@ -40,7 +40,7 @@
<div class="our-products-title mt-1 mt-md-3 w-100 p-2">
<h1 class="fs-3 fs-md-2 fs-lg-1">我们的产品</h1>
</div>
- <div style="width: 60%; margin: 0 auto;" class="d-none d-md-flex">
+ <div style="width: 70%; margin: 0 auto;" class="d-none d-md-flex">
<div id="carouselExample" class="carousel slide w-100 " data-bs-ride="carousel"
data-bs-interval="3000">
<div class="carousel-inner">
@@ -120,7 +120,7 @@
</div>
<!-- 公司相关信息 -->
- <div id="third-other" class="w-100 third-other" >
+ <div class="w-100" >
<div class="row flex-md-nowrap">
<!-- 第一列：占1份 -->
<div class="col-12 col-md-3 text-center text-md-left">
@@ -148,7 +148,7 @@
</div>
<!-- 第三列：占1份 -->
- <div class="col-12 col-md-3 text-center text-md-left">
+ <div id="third-other" class="col-12 col-md-3 text-center text-md-left">
<!-- 公司信息 -->
<div class="text-center my-5 text-dark fs-4">公司信息</div>
<div class="container text-center">
@@ -216,9 +216,10 @@
<script lang="ts" setup>
import { ref, onMounted, onBeforeUnmount ,nextTick} from 'vue'
import { CarouselItem, CooperativeClient, ProductCenter, CompanyInfo, Products, ProductGroup } from '@/models/portalModels';
-import { useRoute } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router';
const route = useRoute()
+const router = useRouter();
// 创建数据列表
const items = ref<CarouselItem[]>([
@@ -287,7 +288,7 @@
// 初始化时设置高度
onMounted(() => {
-
+
updateCarouselHeight();
window.addEventListener('resize', updateCarouselHeight);
diff --git a/src/router/index.ts b/src/router/index.ts
index 25d14ca..bdf5a8b 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -9,7 +9,7 @@
{ path: '/', component: Home },
{ path: '/product', component: Product },
{ path: '/contact', component: Contact },
- { path: '/about', component: About },
+ { path: '/about',component: Home},
{
path: '/pdf-preview',
name: 'PdfPreview',
--
Gitblit v1.9.3