D:/devInstall/Git/about

tj

2025-04-30 da19a22d2422e6cc0c60047136670703815d8976

D:/devInstall/Git/about

 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>
  
<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>

 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);


 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',