update

src/components/HowToUse.vue

@@ -0,0 +1,198 @@
+<template>
+  <div class="how-to-use-container">
+    <div class="steps-card">
+      <div class="step-item">
+        <div class="step-number">第一步</div>
+        <div class="step-content">
+          <div class="step-title">选择开通小区</div>
+          <div class="step-arrow">→</div>
+          <div class="step-description">小区未开通可申请</div>
+        </div>
+      </div>
+      
+      <div class="step-divider"></div>
+      
+      <div class="step-item">
+        <div class="step-number">第二步</div>
+        <div class="step-content">
+          <div class="step-title">选择送达地址</div>
+          <div class="step-arrow">→</div>
+          <div class="step-description">填写收货地址使用</div>
+        </div>
+      </div>
+      
+      <div class="step-divider"></div>
+      
+      <div class="step-item">
+        <div class="step-number">第三步</div>
+        <div class="step-content">
+          <div class="step-title">选择取件驿站</div>
+          <div class="step-arrow">→</div>
+          <div class="step-description">输入取件码下单</div>
+        </div>
+      </div>
+      
+      <div class="step-divider"></div>
+      
+      <div class="step-item">
+        <div class="step-number">第四步</div>
+        <div class="step-content">
+          <div class="step-title">成功下单</div>
+          <div class="step-arrow">→</div>
+          <div class="step-description">订单详情查看配送状态</div>
+        </div>
+      </div>
+      
+      <div class="step-divider"></div>
+      
+      <div class="step-item">
+        <div class="step-number">第五步</div>
+        <div class="step-content">
+          <div class="step-title">快递到家</div>
+          <div class="step-arrow">→</div>
+          <div class="step-description">领取包裹，先享后付费</div>
+        </div>
+      </div>
+    </div>
+    
+    <div class="logo-container">
+      <img :src="beeLogo" alt="蜂快到家" class="logo-bee">
+      <img :src="textLogo" alt="蜂快到家" class="logo-text">
+    </div>
+  </div>
+</template>
+
+<script>
+import beeLogo from '../assets/images/logo_bee@3x.png'
+import textLogo from '../assets/images/logo_text@3x.png'
+
+export default {
+  name: 'HowToUse',
+  data() {
+    return {
+      beeLogo,
+      textLogo
+    }
+  }
+}
+</script>
+
+<style scoped>
+.how-to-use-container {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  padding: 30px 20px 50px;
+  background: linear-gradient(to bottom, #FFCC00, #FFFFFF);
+  position: relative;
+  overflow: hidden;
+}
+
+.steps-card {
+  width: 100%;
+  max-width: 500px;
+  background-color: #FFFFFF;
+  border-radius: 20px;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+  padding: 30px 20px;
+  margin-top: 50px;
+  position: relative;
+  z-index: 1;
+}
+
+.step-item {
+  padding: 20px 0;
+}
+
+.step-number {
+  font-size: 24px;
+  font-weight: bold;
+  color: #FFCC00;
+  margin-bottom: 15px;
+  text-align: center;
+}
+
+.step-content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.step-title {
+  font-size: 18px;
+  font-weight: bold;
+  color: #333333;
+}
+
+.step-arrow {
+  margin: 0 15px;
+  font-size: 20px;
+  color: #FFCC00;
+}
+
+.step-description {
+  font-size: 16px;
+  color: #999999;
+}
+
+.step-divider {
+  height: 1px;
+  background: linear-gradient(to right, transparent, #EEEEEE, transparent);
+  margin: 0 20px;
+}
+
+.logo-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 50px;
+}
+
+.logo-bee {
+  width: 60px;
+  height: 60px;
+  margin-bottom: 10px;
+  object-fit: contain;
+}
+
+.logo-text {
+  width: 120px;
+  height: auto;
+  object-fit: contain;
+}
+
+/* 响应式调整 */
+@media (max-width: 480px) {
+  .steps-card {
+    padding: 20px 15px;
+  }
+  
+  .step-number {
+    font-size: 20px;
+  }
+  
+  .step-title {
+    font-size: 16px;
+  }
+  
+  .step-arrow {
+    margin: 0 10px;
+    font-size: 18px;
+  }
+  
+  .step-description {
+    font-size: 14px;
+  }
+  
+  .logo-bee {
+    width: 50px;
+    height: 50px;
+  }
+  
+  .logo-text {
+    width: 100px;
+  }
+}
+</style> 

src/router/index.js

@@ -3,6 +3,7 @@ import Home from '../components/Home.vue'
 import PrivacyAgreement from '../components/PrivacyAgreement.vue'
 import UserAgreement from '../components/UserAgreement.vue'
 import Dashboard from '../components/Dashboard.vue'
+import HowToUse from '../components/HowToUse.vue'
 
 const routes = [
   {
@@ -27,6 +28,11 @@ const routes = [
     meta: {
       title: '数据大屏'
     }
+  },
+  {
+    path: '/how-to-use',
+    name: 'HowToUse',
+    component: HowToUse
   }
 ]