主页、关于我们完成

src/App.vue

@@ -6,7 +6,7 @@ import navbar from './components/navbar.vue'
 <template>
   <div class="pageroot">
     <navbar></navbar>
-    <router-view></router-view>
+    <router-view/>
   </div>
 </template>
 

src/components/ExampleItem.vue

@@ -7,7 +7,14 @@ export default defineComponent({
 </script>
 
 <template>
-
+  <div class="container-lg bg-light pageroot">
+    <nav class="container-lg" aria-label="breadcrumb">
+      <ol class="breadcrumb">
+        <li class="breadcrumb-item"><a href="/">卡多雷科技</a></li>
+        <li class="breadcrumb-item"><a href="/Examples">行业案例</a></li>
+      </ol>
+    </nav>
+  </div>
 </template>
 
 <style scoped lang="scss">

src/components/ExampleList.vue

@@ -7,7 +7,14 @@ export default defineComponent({
 </script>
 
 <template>
-
+  <div class="container-lg bg-light pageroot">
+    <nav class="container-lg" aria-label="breadcrumb">
+      <ol class="breadcrumb">
+        <li class="breadcrumb-item"><a href="/">卡多雷科技</a></li>
+        <li class="breadcrumb-item"><a href="/Examples">行业案例</a></li>
+      </ol>
+    </nav>
+  </div>
 </template>
 
 <style scoped lang="scss">

src/components/Homepage.vue

@@ -1,13 +1,20 @@
 <script lang="ts">
 import {defineComponent} from 'vue'
 
+import brief from "@/components/brief.vue";
+import ContactUs from "@/components/ContactUs.vue";
 export default defineComponent({
-name: "Homepage"
+  name: "Homepage",
+  components: {
+    brief,
+    ContactUs
+  },
 })
 </script>
 
 <template>
-
+  <brief></brief>
+  <ContactUs></ContactUs>
 </template>
 
 <style scoped lang="scss">

src/components/brief.vue

@@ -7,9 +7,52 @@ export default defineComponent({
 </script>
 
 <template>
-
+  <div class="container-lg bg-light pageroot" id="brief">
+    <div class="normalcontentdiv" id="imgdiv">
+      <img :src="`${this.$axios.defaults.baseURL}${this.$Global.favicon.url}`" />
+    </div>
+    <div class="normalcontentdiv" id="brieftext">
+      <span class="normalcontenttitle">
+        企业愿景
+      </span>
+      <span class="normalcontenttext" style="width: 100%;">
+        {{this.$Global.siteDescription}}
+      </span>
+    </div>
+  </div>
 </template>
 
-<style scoped>
+<style scoped lang="scss">
+@import "../publicstyle.scss";
+#brief{
+  display: flex;
+  @include media-breakpoint-between(xs, md){
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+  @include media-breakpoint-up(md) {
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: flex-start; // 添加此行
+  }
+}
 
+#imgdiv{
+  max-width: 240.67px;
+  @include media-breakpoint-between(xs, md){
+    margin-bottom: 32px;
+  }
+  @include media-breakpoint-up(md) {
+    width: 20%;
+  }
+}
+
+#brieftext{
+  @include media-breakpoint-between(xs, md){
+    margin-top: 32px;
+  }
+  @include media-breakpoint-up(md) {
+  }
+}
 </style>

src/components/navbar.vue

@@ -7,11 +7,12 @@ export default defineComponent({
 </script>
 
 <template>
-  <nav class="navbar navbar-expand-lg navbar-light"
+  <nav class="navbar navbar-expand-lg navbar-light sticky-top"
     style="background-color:mediumpurple;">
     <div class="container-lg">
-      <a href="/" class="navbar-brand">
+      <a href="/" class="navbar-brand" id="curnavbrand" style="color: white; margin-right: 0px;">
         <img src="/favicon.ico" height="28" alt="">
+        {{ this.$Global.siteName}}
       </a>
       <button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbarCollapse">
         <span class="navbar-toggler-icon"></span>
@@ -36,4 +37,17 @@ export default defineComponent({
 .navbar-nav .nav-link.active {
   color: white !important; /* Added !important for specificity */
 }
+
+.navbar-brand{
+  @include media-breakpoint-between(xs, md) {
+    font-size: 17px;
+  }
+}
+
+#curnavbrand:focus,
+#curnavbrand:hover {
+  outline: none !important; /* 移除轮廓 */
+  box-shadow: none !important; /* 移除阴影，以防是阴影模拟的边框 */
+  background-color: transparent !important;
+}
 </style>

src/main.js

@@ -28,8 +28,8 @@ if (typeof navigator !== 'undefined') {
 app.config.globalProperties.$isMobile = mobileDetectResult;
 //请求Global
 try {
-    const response = await axios.get('/api/Global');
+    const response = await axios.get('/api/Global?populate=*');
-    app.config.globalProperties.$Global = response.data; // 示例：但不推荐
+    app.config.globalProperties.$Global = response.data.data; // 示例：但不推荐
     console.log('Data fetched:', response.data);
 } catch (error) {
     console.error('Failed to fetch initial data:', error);
@@ -37,14 +37,14 @@ try {
     app.config.globalProperties.$Global = { error: 'Failed to load' };
 }
 //请求About
-try {
+// try {
-    const response = await axios.get('/api/About');
+//     const response = await axios.get('/api/About');
-    app.config.globalProperties.$About = response.data; // 示例：但不推荐
+//     app.config.globalProperties.$About = response.data.data; // 示例：但不推荐
-    console.log('Data fetched:', response.data);
+//     console.log('Data fetched:', response.data);
-} catch (error) {
+// } catch (error) {
-    console.error('Failed to fetch About data:', error);
+//     console.error('Failed to fetch About data:', error);
-    // 可以设置一个默认值或错误状态
+//     // 可以设置一个默认值或错误状态
-    app.config.globalProperties.$About = { error: 'Failed to load' };
+//     app.config.globalProperties.$About = { error: 'Failed to load' };
-}
+// }
 
 app.use(router).mount('#app')

src/publicstyle.scss

@@ -101,3 +101,19 @@
     line-height: 42px;
   }
 }
+
+.breadcrumb{
+  margin-top: 8px;
+  margin-bottom: 8px;
+  .breadcrumb-item a{
+    text-decoration: none;
+    color: #181818;
+    //font-weight: bold;
+    transition: color 0.3s, font-weight 0.3s;
+  }
+  .breadcrumb-item a:hover{
+    color: cornflowerblue;
+    font-weight: bold;
+    background-color: transparent !important;
+  }
+}

src/router.js

@@ -47,4 +47,14 @@ const router = createRouter({
     routes
 })
 
+// 路由守卫，切换页面时修改标题
+router.beforeEach((to, from, next) => {
+    if (to.meta && to.meta.title) {
+        document.title = to.meta.title
+    } else {
+        document.title = '苏州卡多雷科技有限公司'
+    }
+    next()
+})
+
 export default router