图标、备案号问题解决

src/App.vue

@@ -1,16 +1,29 @@
 <script setup>
 // import  from './components/HelloWorld.vue'
 import navbar from './components/navbar.vue'
+import CopyrightIcp from '@/components/copyright-icp.vue';
 </script>
 
 <template>
+  <div class="app-wrapper"> <!-- 1. 添加包裹 div -->
     <div class="pageroot">
       <navbar></navbar>
+      <div id="pagebase">
         <router-view/>
       </div>
+    </div>
+    <CopyrightIcp></CopyrightIcp>
+  </div>
 </template>
 
 <style scoped>
+/* 2. 为新的包裹 div 添加样式 */
+.app-wrapper {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh; /* 确保包裹 div 至少撑满整个视口高度 */
+}
+
 header {
   line-height: 1.5;
 }
@@ -37,4 +50,19 @@ header {
     flex-wrap: wrap;
   }
 }
+
+/* 3. 修改 .pageroot 样式 */
+.pageroot {
+  display: flex; /* 使 .pageroot 成为 flex 容器 */
+  flex-direction: column; /*使其子元素垂直排列 */
+  flex-grow: 1; /* 使 .pageroot 占据 .app-wrapper 中的所有可用垂直空间 */
+}
+
+#pagebase{
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  flex:1; /* 此处 flex:1 使 #pagebase 填满 .pageroot 的剩余空间 */
+  width: 100%;
+}
 </style>

src/assets/main.css

@@ -5,6 +5,7 @@
   /* padding: 2rem; */ /* Removed to allow full width */
   font-weight: normal;
   background-color: #f2f2f2;
+  min-height: 100vh;
 }
 a,
 .green {

src/components/copyright-icp.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="icp">{{`© ${year} ${author} ` }}<a href="http://beian.miit.gov.cn/" target="_blank">{{ record }}</a></div>
+</template>
+
+<script setup>
+let year = new Date().getFullYear();        // 一般都是最新的一年
+let author = '卡多雷科技';					            // 作者名
+let record = '暂无备案';			// 备案号
+</script>
+
+<style>
+.icp {
+  bottom: 0;
+  right: 0;
+  margin-top: 0px;
+  width: 100%;
+  white-space: pre;
+  text-align: center;
+  color: gray;
+  background-color: transparent;
+  z-index: 0;
+}
+.icp > a {
+  color: gray;
+  text-decoration: none;
+}
+.icp > a:hover {
+  color: aqua;
+  text-decoration: none;
+}
+</style>

src/components/navbar.vue

@@ -11,7 +11,7 @@ export default defineComponent({
     style="background-color:mediumpurple;">
     <div class="container-lg">
       <a href="/" class="navbar-brand" id="curnavbrand" style="color: white; margin-right: 0px;">
-        <img src="/favicon.ico" height="28" alt="">
+        <img src="/kaldoreilogo2.png" height="28" alt="">
         {{ this.$Global.siteName}}
       </a>
       <button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbarCollapse">
@@ -19,9 +19,9 @@ export default defineComponent({
       </button>
       <div class="collapse navbar-collapse" id="navbarCollapse">
         <div class="navbar-nav ms-auto">
-          <a href="/" class="nav-item nav-link active">主页</a>
+          <router-link to="/" class="nav-item nav-link active">主页</router-link>
-          <a href="/Examples" class="nav-item nav-link">行业案例</a>
+          <router-link to="/Examples" class="nav-item nav-link">行业案例</router-link>
-          <a href="/ContactUs" class="nav-item nav-link">联系我们</a>
+          <router-link to="/ContactUs" class="nav-item nav-link">联系我们</router-link>
         </div>
       </div>
     </div>