update

src/components/HowToUse.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="how-to-use-container">
     <div class="steps-card">
-      <div class="step-item">
+      <div class="step-item" style="margin-top: 20px;">
         <div class="step-number">第一步</div>
         <div class="step-content">
           <div class="step-title">选择开通小区</div>
@@ -92,23 +92,21 @@ export default {
   flex-direction: column;
   align-items: center;
   justify-content: flex-start;
-  padding: 20px 15px 30px;
-  background: linear-gradient(to bottom, #FFCC00, #FFFFFF);
+  background: linear-gradient(0deg, #ffffff 60%, #FFCC00);
   position: relative;
   overflow: hidden;
 }
 
 .steps-card {
   width: 100%;
-  max-width: 85%;
-  background-color: #FFFFFF;
-  border-radius: 20px;
-  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
-  padding: 20px 15px;
-  margin-top: 30px;
+  background-image: url('../assets/images/howtouse_background@3x.png');
+  background-position: center;
+  background-size: contain;
+  background-repeat: no-repeat;
+  margin-top: 15px;
+  height: 580px;
   position: relative;
   z-index: 1;
-  clip-path: none;
 }
 
 .card-bottom-cutout {
@@ -146,11 +144,11 @@ export default {
 .step-arrow {
   margin: 0 12px;
   font-size: 18px;
-  color: #FFCC00;
+  color: #333333;
 }
 
 .step-description {
-  font-size: 14px;
+  font-size: 16px;
   color: #999999;
 }
 
@@ -164,7 +162,7 @@ export default {
   display: flex;
   flex-direction: column;
   align-items: center;
-  margin-top: 35px;
+  margin-top: 15px;
   width: 85%;
   max-width: 85%;
 }
@@ -189,7 +187,6 @@ export default {
 @media (max-width: 480px) {
   .steps-card {
     clip-path: none;
-    max-width: 90%;
   }
   
   .logo-container {
@@ -201,23 +198,14 @@ export default {
   }
   
   .step-number {
-    font-size: 18px;
     margin-bottom: 10px;
   }
   
-  .step-title {
-    font-size: 15px;
-  }
-  
   .step-arrow {
     margin: 0 8px;
     font-size: 16px;
   }
   
-  .step-description {
-    font-size: 13px;
-  }
-  
   .logo-bee {
     width: 30px;
     height: 30px;