页面优化

hdApp/src/pagesPurchase/contact.vue

@@ -1,34 +1,57 @@
 <template>
   <view class="app-content">
-
-    <view>
-      <view style="font-size:40upx;font-weight:bold;margin-top:10upx;margin-bottom:10upx;">花材质量问题、价格问题，请通过下图位置找商家：</view>
-      <view style="border:1upx solid #CCCCCC;"><image class="logo" :src="`${constant.imgUrl}/shop/contact_shop.png`" alt mode="widthFix" ></image></view>
+    <!-- 图片说明区域 -->
+    <view class="section-card">
+      <view class="section-title">📍 找不到商家</view>
+      <view class="section-desc">花材质量问题、价格问题，请通过下图位置找商家：</view>
+      <view class="image-box">
+        <image class="logo" :src="`${constant.imgUrl}/shop/contact_shop.png`" mode="widthFix"></image>
+      </view>
     </view>
-    <view style="font-size:40upx;margin-top:40upx;font-weight:bold;color:black;">零售花店，常见问题：</view>
 
-    <view style="margin-top:20upx;color:#3385ff;font-size:30upx;font-weight:bold;">我注册之后，怎么看不到批发店，不能买花？</view>
-    <view style="font-size:30upx;">答：直接搜索【花掌柜】注册，上面是不会显示批发店的，你只能找批发店拿二维码，通过扫二维码进去注册之后，才会有批发店</view>
+    <!-- 常见问题区域 -->
+    <view class="section-card">
+      <view class="section-title">❓ 零售花店-常见问题</view>
+      
+      <view class="faq-item">
+        <view class="faq-question">Q：我注册之后，怎么看不到批发店，不能买花？</view>
+        <view class="faq-answer">A：直接搜索【花掌柜】注册，上面是不会显示批发店的，你只能找批发店拿二维码，通过扫二维码进去注册之后，才会有批发店</view>
+      </view>
 
-    <view style="margin-top:20upx;color:#3385ff;font-size:30upx;font-weight:bold;">我注册之后，能不能注销？</view>
-    <view style="font-size:30upx;">答：注册之后暂时不能注销，不需要理会它就行。我们没有时间处理这块需求，请勿联系，否则基本挨骂，如确实有问题先找你的批发店反应，批发店再反应到我们这边。</view>
+      <view class="faq-item">
+        <view class="faq-question">Q：我注册之后，能不能注销？</view>
+        <view class="faq-answer">A：注册之后暂时不能注销，不需要理会它就行。我们没有时间处理这块需求，请勿联系，否则基本挨骂，如确实有问题先找你的批发店反应，批发店再反应到我们这边。</view>
+      </view>
 
-    <view style="margin-top:20upx;color:#3385ff;font-size:30upx;font-weight:bold;">我注册之后，显示的价格异常，怎么办？</view>
-    <view style="font-size:30upx;">答：价格异常，请联系你的批发店，跟批发店设置有关。跟你注册时怎么填写是没有关系的，不需要注销或重新注册。如不联系批发店，注销和重新注册后，显示结果也是一样的。</view>
+      <view class="faq-item">
+        <view class="faq-question">Q：我注册之后，显示的价格异常，怎么办？</view>
+        <view class="faq-answer">A：价格异常，请联系你的批发店，跟批发店设置有关。跟你注册时怎么填写是没有关系的，不需要注销或重新注册。如不联系批发店，注销和重新注册后，显示结果也是一样的。</view>
+      </view>
 
-    <view style="margin-top:20upx;color:#3385ff;font-size:30upx;font-weight:bold;">零售花店是否可以申请商城系统</view>
-    <view style="font-size:34upx;">
-    现在没有可用的零售系统，后面有了我们会在系统里面公告。现在我们服务批发店就已经太多，公司客服人员不足，服务不过来，暂时没办法给你提供服务，请谅解。请勿联系！请勿联系！请勿联系！我们已经强调三遍了，联系我们就挨骂！！！
+      <view class="faq-item">
+        <view class="faq-question">Q：零售花店是否可以申请商城系统？</view>
+        <view class="faq-answer">A：现在没有可用的零售系统，后面有了我们会在系统里面公告。现在我们服务批发店就已经太多，公司客服人员不足，服务不过来，暂时没办法给你提供服务，请谅解。请勿联系！请勿联系！请勿联系！我们已经强调三遍了，联系我们就挨骂！！！</view>
+      </view>
     </view>
 
-    <view style="font-size:40upx;margin-top:40upx;font-weight:bold;color: red;">
-    零售想做批发的 和 斗南批发商，请勿联系我们，系统做不起来，不要浪费时间浪费钱，勿扰！勿扰！勿扰！打电话过来就挨骂！！
-    </view>
-    <view style="font-size:40upx;margin-top:40upx;font-weight:bold;color:green;margin-bottom:10upx;">
-    城市批发店，如需要申请使用商城和系统，请电话联系我们：15280215347
+    <!-- 警告提示区域 -->
+    <view class="alert-section">
+      <view class="alert-warning">
+        <view class="alert-icon">⚠️</view>
+        <view class="alert-text">零售想做批发的 和 斗南批发商，请勿联系我们，系统做不起来，不要浪费时间浪费钱，勿扰！勿扰！勿扰！打电话过来就挨骂！！</view>
+      </view>
     </view>
-    <view style="display:flex;justify-content:center;margin-top:40upx;margin-bottom:60upx;">
-      <button class="admin-button-com big green" style="width:300upx;" @click="suggest">拨打电话</button>
+
+    <!-- 联系信息区域 -->
+    <view class="section-card contact-section">
+      <view class="section-title">☎️ 联系我们</view>
+      <view class="contact-info">
+        <view class="info-text">城市批发店，如需要申请使用商城和系统，请电话联系我们</view>
+        <view class="phone-number">15280215347</view>
+      </view>
+      <view class="button-wrapper">
+        <button class="admin-button-com big green" @click="suggest">拨打电话</button>
+      </view>
     </view>
   </view>
 </template>
@@ -69,15 +92,138 @@ export default {
 .app-content {
   min-height: calc(100vh - 20upx);
   padding-top: 20upx;
-  padding-left:10upx;
-  padding-right:10upx;
-  padding-bottom:50upx;
+  padding-left: 20upx;
+  padding-right: 20upx;
+  padding-bottom: 80upx;
+  background: #f5f7fa;
+}
+
+/* 卡片样式 */
+.section-card {
+  background: #ffffff;
+  border-radius: 14upx;
+  padding: 28upx 24upx;
+  margin-bottom: 20upx;
+  box-shadow: 0 2upx 8upx rgba(0, 0, 0, 0.04);
+
+  .section-title {
+    font-size: 32upx;
+    font-weight: 700;
+    color: #333;
+    margin-bottom: 16upx;
+    display: flex;
+    align-items: center;
+    gap: 8upx;
+  }
+
+  .section-desc {
+    font-size: 32upx;
+    font-weight: bold;
+    color: #666;
+    margin-bottom: 16upx;
+    line-height: 1.5;
+  }
+}
+
+/* 图片盒子 */
+.image-box {
+  width: 100%;
+  border-radius: 10upx;
+  overflow: hidden;
+  border: 1upx solid #f0f0f0;
+
+  .logo {
+    width: 100%;
+    display: block;
+  }
+}
+
+/* 常见问题区域 */
+.faq-item {
+  padding: 20upx 0;
+  border-bottom: 1upx solid #f5f5f5;
+
+  &:last-child {
+    border-bottom: none;
+  }
+
+  .faq-question {
+    font-size: 30upx;
+    color: #0066cc;
+    font-weight: 600;
+    margin-bottom: 12upx;
+    line-height: 1.4;
+  }
+
+  .faq-answer {
+    font-size: 30upx;
+    color: #666;
+    line-height: 1.6;
+  }
+}
+
+/* 警告区域 */
+.alert-section {
+  margin-bottom: 20upx;
+}
+
+.alert-warning {
+  background: linear-gradient(135deg, #fff5f5 0%, #ffe6e6 100%);
+  border: 2upx solid #ff6b6b;
+  border-radius: 14upx;
+  padding: 24upx 20upx;
+  display: flex;
+  gap: 16upx;
+
+  .alert-icon {
+    font-size: 36upx;
+    flex-shrink: 0;
+  }
+
+  .alert-text {
+    font-size:36upx;
+    color: #c41d2a;
+    font-weight: 600;
+    line-height: 1.6;
+    flex: 1;
+  }
+}
+
+/* 联系区域 */
+.contact-section {
+  .contact-info {
+    background: #f9fafb;
+    border-radius: 10upx;
+    padding: 20upx 16upx;
+    margin-bottom: 24upx;
+
+    .info-text {
+      font-size:32upx;
+      color: #666;
+      margin-bottom: 12upx;
+      line-height: 1.5;
+    }
+
+    .phone-number {
+      font-size: 36upx;
+      color: #049E2C;
+      font-weight: 700;
+      letter-spacing: 2upx;
+    }
+  }
+
+  .button-wrapper {
+    display: flex;
+    justify-content: center;
+  }
 }
+
 .prompt-text {
   color: $fontColor3;
   padding-left: 30upx;
   margin-bottom: 30upx;
 }
+
 .module-com {
   margin-bottom: 20upx;
   .member-wrap {
@@ -93,6 +239,7 @@ export default {
     }
   }
 }
+
 .confirm-btn {
   width: calc(100% - 60upx);
   margin: 60upx 30upx 20upx;