feat(首页): 优化使用说明样式并改进错误提示

- 添加并集.png作为使用说明标题背景图
- 调整使用说明区域样式和布局
- 为错误提示增加服务器返回的错误信息显示

src/pages/home/index.vue

@@ -128,27 +128,35 @@
 
       </div>
     </div>
-    
+
     <!-- 使用说明 -->
-    <div class="p-4 mt-6">
+    <div class="p-4 mt-6" v-if="![2, 3].includes(activityInfo.status)">
-      <div class="mx-auto bg-white rounded-xl shadow-sm p-5">
+      <div class="w-full relative">
-        <h3 class="text-lg text-[#E8424D] font-bold mb-4 flex items-center">
+        <div class="h-full">
-          <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <h3 class="h-9 text-lg text-[#E8424D] font-bold flex items-center justify-center"
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+            style="background: url('/并集.png') no-repeat center center / cover; background-size: 100% 100%;">
-          </svg>
+            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          使用说明
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-        </h3>
+                d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
-        <div class="text-sm text-gray-600 leading-relaxed">
+            </svg>
-          <ol class="list-decimal list-inside space-y-3 pl-2">
+            使用说明
-            <li class="pl-2">参与活动人员：2026年1月1日至2026年12月3日，在宁夏全区民政婚姻登记机构（含涉外机构）办理结婚登记的新人；</li>
+          </h3>
-            <li class="pl-2">凭结婚证可至全区指定福利彩票销售点兑换即开型福利彩票，赠票总额100万元，赠完即止；</li>
+          <div class="p-4 h-full bg-gradient-to-br from-[#FFFFFF]  to-[#FFF2F2] rounded-xl">
-            <li class="pl-2">每对新人限使用一次线上二维码兑换券；</li>
+            <div
-            <li class="pl-2">本活动最终解释权归宁夏福利彩票发行中心所有。</li>
+              class="h-full p-4 text-sm text-gray-600 leading-relaxed bg-gradient-to-br from-[#FFDEEB] to-[#FCC2D7] rounded-xl">
-          </ol>
+              <ol class="list-decimal list-inside pl-2 text-sm text-[#AB8291]">
+                <li>参与活动人员：{{ activityInfo.activityStartTime }}至{{
+                  activityInfo.activityEndTime }}，在宁夏全区民政婚姻登记机构（含涉外机构）办理结婚登记的新人；</li>
+                <li>凭结婚证可至全区指定福利彩票销售点兑换即开型福利彩票，赠票总额100万元，赠完即止；</li>
+                <li>每对新人限使用一次线上二维码兑换券；</li>
+                <li>本活动最终解释权归宁夏福利彩票发行中心所有。</li>
+              </ol>
+            </div>
+          </div>
         </div>
       </div>
     </div>
-    
+
     <input type="file" ref="ocrUploadId" class="hidden" accept="image/*" @change="handleImageChange" />
   </div>
 </template>
@@ -207,7 +215,7 @@ onMounted(() => {
     }
   }).catch((error) => {
     showDialog({
-      message: '获取活动信息失败，请稍后重试',
+      message: error.msg || '获取活动信息失败，请稍后重试',
     });
     activityInfo.value.status = 3;
   }).finally(() => {
@@ -278,7 +286,7 @@ const sendVerificationCode = () => {
   }).catch((error) => {
     console.error('发送验证码失败:', error)
     showDialog({
-      message: '验证码发送失败，请稍后重试',
+      message: error.msg || '验证码发送失败，请稍后重试',
     });
   }).finally(() => {
     hideLoading();
@@ -334,7 +342,7 @@ const verifyCode = (flag: any) => {
     localStorage.removeItem('userAs');
 
     flag && showDialog({
-      message: '验证码验证失败，请重试',
+      message: error.msg || '验证码验证失败，请重试',
     });
     formData.value = {
       ...formData.value,
@@ -401,7 +409,7 @@ const handleImageChange = () => {
       }
     }).catch((error) => {
       showDialog({
-        message: '解析OCR信息失败，请稍后重试',
+        message: error?.msg || '解析OCR信息失败，请稍后重试',
       });
       ocrUploadId.value && (ocrUploadId.value.value = '');
     }).finally(() => {
@@ -409,7 +417,7 @@ const handleImageChange = () => {
     })
   }).catch((error) => {
     showDialog({
-      message: '图片上传失败，请稍后重试',
+      message: error?.msg || '图片上传失败，请稍后重试',
     });
     ocrUploadId.value && (ocrUploadId.value.value = '');
     hideLoading();