1

.prettierrc

@@ -5,5 +5,6 @@
   "singleQuote": true,
   "trailingComma": "es5",
   "bracketSpacing": false,
-  "htmlWhitespaceSensitivity": "ignore"
+  "htmlWhitespaceSensitivity": "ignore",
+  "printWidth": 120
 }

public/config.js

@@ -1,5 +1,2 @@
-window.GD_KEYS = [
-  '348d477ba83826e46b32d3ff10fffe82',
-  'ed2ea36f8564541569c370254845d93d',
-  'c1da03827f956a215311c0f5229bddc3',
-]
+window.GD_url =
+  'https://www.amap.com/search?query=%E7%87%83%E8%B0%B7%E7%A7%91%E6%8A%80(%E5%8D%97%E4%BA%AC)%E6%9C%89%E9%99%90%E5%85%AC%E5%8F%B8'

src/home.vue

@@ -7,17 +7,35 @@ import Footer from './views/layout/pc/footer/index.vue'
   <div id="app">
     <Header id="header" />
 
-    <!-- include 对应组件的 name -->
-    <router-view id="main" v-slot="{Component}">
+    <router-view id="main" v-slot="{Component, route}">
+      <transition name="fade" mode="out-in">
+        <Suspense>
           <keep-alive include="New">
-        <component :is="Component" />
+            <component :is="Component" :key="route.fullPath" />
           </keep-alive>
+          <template #fallback>
+            <div class="loading-placeholder">页面加载中...</div>
+          </template>
+        </Suspense>
+      </transition>
     </router-view>
+
     <Footer id="footer" />
   </div>
 </template>
 
 <style lang="scss" scoped>
+/* 淡入淡出效果 */
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.5s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
 #app {
   width: 100%;
   height: 100%;

src/views/layout/pc/footer/components/navNode.vue

@@ -41,8 +41,8 @@ const onClick = (url) => emits('navClick', url)
     cursor: pointer;
     transition: all 0.3s ease;
     &:hover {
-      -webkit-transform: translateY(-8px);
-      transform: translateY(-8px);
+      -webkit-transform: translateY(-2px);
+      transform: translateY(-2px);
     }
   }
 }

src/views/layout/pc/header/index.vue

@@ -1,12 +1,26 @@
 <script setup>
+import {useRouter} from 'vue-router'
 import Nav from './nav.vue'
 import {ref, onMounted} from 'vue'
+import {useNavStore} from '@/store/nav'
+import {storeToRefs} from 'pinia'
+
+// Store 相关
+const navStore = useNavStore()
+const {navIndex} = storeToRefs(navStore)
+
 onMounted(() => {})
+
+const router = useRouter()
+const toIndex = () => {
+  navIndex.value = '/'
+  router.push('/')
+}
 </script>
 
 <template>
   <div class="page flex a-c">
-    <div class="logo"></div>
+    <div class="logo" @click="toIndex"></div>
     <Nav class="nav"></Nav>
   </div>
 </template>
@@ -22,6 +36,7 @@ onMounted(() => {})
     height: 56px;
     position: absolute;
     left: 160px;
+    cursor: pointer;
   }
 
   .nav {

src/views/link/index.vue

@@ -7,9 +7,7 @@ import Banner from '@/components/Banner/index.vue'
 const currentPage = ref(1)
 
 const toCompany = () => {
-  window.open(
-    'https://www.amap.com/search?query=%E7%87%83%E8%B0%B7%E7%A7%91%E6%8A%80(%E5%8D%97%E4%BA%AC)%E6%9C%89%E9%99%90%E5%85%AC%E5%8F%B8'
-  )
+  window.open(window.GD_url)
 }
 
 onMounted(() => {})