fix style

src/components/HowToUse.vue

@@ -4,9 +4,9 @@
       <div class="step-item" style="margin-top: 20px;">
         <div class="step-number">第一步</div>
         <div class="step-content">
-          <div class="step-title">选择开通小区</div>
+          <div class="step-title">选择小区</div>
           <div class="step-arrow">→</div>
-          <div class="step-description">小区未开通可申请</div>
+          <div class="step-description">未开通小区可申请开通</div>
         </div>
       </div>
       
@@ -132,7 +132,11 @@ export default {
 .step-content {
   display: flex;
   align-items: center;
-  justify-content: center;
+  justify-content: flex-start;
+  width: 70%;
+  max-width: 300px;
+  margin: 0 auto;
+  text-align: left;
 }
 
 .step-title {
@@ -147,7 +151,7 @@ export default {
   color: #333333;
 }
 
-.step-description {
+.step-description {                                                                                                                         
   font-size: 16px;
   color: #999999;
 }
@@ -301,4 +305,16 @@ export default {
     margin-top: 20px;
   }
 }
+
+@media (min-width: 414px) {
+  .step-content {
+    width: 60%;
+  }
+}
+
+@media (min-width: 768px) {
+  .step-content {
+    width: 50%;
+  }
+}
 </style>