From 07aa07bbb7e734f9ddc9c492d3992a75ded822bd Mon Sep 17 00:00:00 2001
From: aaron <>
Date: Sun, 2 Mar 2025 14:13:50 +0800
Subject: [PATCH] fix style

---
 src/components/HowToUse.vue | 24 ++++++++++++++++++++----
 1 file changed, 20 insertions(+), 4 deletions(-)

diff --git a/src/components/HowToUse.vue b/src/components/HowToUse.vue
index 8f551e6..6a2eff4 100644
--- a/src/components/HowToUse.vue
+++ b/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> 
\ No newline at end of file