update

src/components/HowToUse.vue

@@ -73,6 +73,14 @@ export default {
       beeLogo,
       textLogo
     }
+  },
+  mounted() {
+    // 在组件挂载时设置页面标题
+    document.title = '代取快递服务流程'
+  },
+  beforeUnmount() {
+    // 在组件卸载前恢复默认标题
+    document.title = '蜂快到家'
   }
 }
 </script>
@@ -92,7 +100,7 @@ export default {
 
 .steps-card {
   width: 100%;
-  max-width: 500px;
+  max-width: 85%;
   background-color: #FFFFFF;
   border-radius: 20px;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
@@ -112,14 +120,14 @@ export default {
 }
 
 .step-item {
-  padding: 12px 0;
+  padding: 18px 0;
 }
 
 .step-number {
   font-size: 20px;
   font-weight: bold;
   color: #FFCC00;
-  margin-bottom: 10px;
+  margin-bottom: 12px;
   text-align: center;
 }
 
@@ -136,7 +144,7 @@ export default {
 }
 
 .step-arrow {
-  margin: 0 10px;
+  margin: 0 12px;
   font-size: 18px;
   color: #FFCC00;
 }
@@ -156,7 +164,9 @@ export default {
   display: flex;
   flex-direction: column;
   align-items: center;
-  margin-top: 30px;
+  margin-top: 35px;
+  width: 85%;
+  max-width: 85%;
 }
 
 .logo-bee {
@@ -172,18 +182,27 @@ export default {
   object-fit: contain;
 }
 
+.page-title {
+  display: none;
+}
+
 @media (max-width: 480px) {
   .steps-card {
     clip-path: none;
+    max-width: 90%;
+  }
+  
+  .logo-container {
+    max-width: 90%;
   }
   
   .step-item {
-    padding: 10px 0;
+    padding: 14px 0;
   }
   
   .step-number {
     font-size: 18px;
-    margin-bottom: 8px;
+    margin-bottom: 10px;
   }
   
   .step-title {
@@ -212,15 +231,16 @@ export default {
 @media (max-height: 640px) {
   .steps-card {
     clip-path: none;
+    margin-top: 15px;
   }
   
   .step-item {
-    padding: 8px 0;
+    padding: 10px 0;
   }
   
   .step-number {
     font-size: 16px;
-    margin-bottom: 5px;
+    margin-bottom: 8px;
   }
   
   .step-title {
@@ -237,7 +257,7 @@ export default {
   }
   
   .logo-container {
-    margin-top: 20px;
+    margin-top: 25px;
   }
   
   .logo-bee {
@@ -254,6 +274,7 @@ export default {
 @media (max-height: 568px) {
   .steps-card {
     clip-path: none;
+    margin-top: 10px;
   }
   
   .logo-bee {
@@ -267,12 +288,12 @@ export default {
   }
   
   .step-item {
-    padding: 6px 0;
+    padding: 8px 0;
   }
   
   .step-number {
     font-size: 15px;
-    margin-bottom: 4px;
+    margin-bottom: 6px;
   }
   
   .step-title {
@@ -289,7 +310,7 @@ export default {
   }
   
   .logo-container {
-    margin-top: 15px;
+    margin-top: 20px;
   }
 }
 </style> 

src/router/index.js

@@ -32,7 +32,10 @@ const routes = [
   {
     path: '/how-to-use',
     name: 'HowToUse',
-    component: HowToUse
+    component: HowToUse,
+    meta: {
+      title: '代取快递服务流程'
+    }
   }
 ]
 
@@ -41,4 +44,14 @@ const router = createRouter({
   routes
 })
 
+router.beforeEach((to, from, next) => {
+  document.title = '蜂快到家'
+  
+  if (to.meta.title) {
+    document.title = to.meta.title
+  }
+  
+  next()
+})
+
 export default router