style(search): 优化搜索页面样式和布局

重构搜索页面的样式结构，改进输入框和按钮的UI设计
添加背景图片并调整布局间距
将底部按钮改为固定定位以提升用户体验

 <!--
  * @Date: 2024-01-26 13:08:09
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2026-01-06 23:23:30
+ * @LastEditTime: 2026-01-08 10:33:16
  * @FilePath: /xyxBooking-weapp/src/pages/search/index.vue
  * @Description: 文件描述
 -->
@@ -9,32 +9,39 @@
   <view class="search-page">
     <view>
       <view v-if="!is_search">
-        <view class="input-item">
-          <view>证件号码</view>
-          <view>
-            <input type="text" v-model="idCode" placeholder="请输入证件号码" @blur="checkIdCode" maxlength="18" style="width: 100%;">
-          </view>
+        <view class="input-card">
+          <view class="input-label">证件号码</view>
+          <input
+            class="id-input"
+            type="text"
+            v-model="idCode"
+            placeholder="请输入证件号码"
+            @blur="checkIdCode"
+            maxlength="18"
+          >
         </view>
-        <view style="color:#A67939; font-size: 30rpx; text-align: center;">
-          <view style="display: flex; align-items: center; justify-content: center;">
-            <IconFont name="tips" />&nbsp;温馨提示
+        <view class="tip-block">
+          <view class="tip-title">
+            <IconFont name="tips" size="16" color="#A67939" />
+            <text class="tip-title-text">温馨提示</text>
           </view>
-          <view style="margin-top: 16rpx;">获取参观码，扫码或识别身份证成功进闸机</view>
+          <view class="tip-desc">获取参观码，扫码或识别身份证成功进闸机</view>
         </view>
       </view>
       <view v-else>
         <qrCodeSearch :id="id_number" />
       </view>
-      <view v-if="!is_search" class="save-wrapper">
-        <view class="save-btn" @tap="searchBtn">查询</view>
     </view>
-      <view v-else class="success-btn">
+    <view class="logo"></view>
+
+    <view v-if="!is_search" class="footer">
+      <view class="footer-btn" @tap="searchBtn">查询</view>
+    </view>
+    <view v-else class="success-footer">
       <view @tap="goToHome" class="btn-item btn-left">首页</view>
       <view @tap="goBack" class="btn-item btn-right">返回查询</view>
     </view>
   </view>
-    <view class="logo"></view>
-  </view>
 </template>
 
 <script setup>
@@ -85,52 +92,104 @@ const goToHome = () => {
 
 <style lang="less">
 .search-page {
-    padding: 32rpx;
+    position: relative;
     min-height: 100vh;
-    background-color: #F6F6F6;
+    padding: 32rpx;
+    padding-bottom: 220rpx;
+    background-image: url('https://cdn.ipadbiz.cn/xys/booking/bg.jpg');
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: cover;
 
-    .input-item {
+    .input-card {
         background-color: #FFF;
-        padding: 32rpx;
         border-radius: 16rpx;
+        border: 2rpx solid rgba(166, 121, 57, 0.45);
         margin-bottom: 32rpx;
+        height: 112rpx;
+        display: flex;
+        align-items: center;
+        padding: 0 32rpx;
 
-        view:first-child {
-            margin-bottom: 16rpx;
-            font-weight: bold;
+        .input-label {
+            width: 160rpx;
+            color: #333;
+            font-size: 30rpx;
+            font-weight: 600;
         }
-        input {
-            border-bottom: 2rpx solid #EEE;
-            padding: 16rpx 0;
+
+        .id-input {
+            flex: 1;
+            width: 100%;
+            text-align: right;
+            font-size: 30rpx;
+            color: #333;
         }
     }
 
-    .save-wrapper {
+    .tip-block {
         margin-top: 64rpx;
-        .save-btn {
+        color: #A67939;
+        text-align: center;
+        font-size: 30rpx;
+
+        .tip-title {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .tip-title-text {
+            margin-left: 10rpx;
+            font-weight: 600;
+        }
+
+        .tip-desc {
+            margin-top: 16rpx;
+            font-weight: 600;
+        }
+    }
+
+    .footer {
+        position: fixed;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        padding: 24rpx 32rpx calc(24rpx + env(safe-area-inset-bottom));
+    }
+
+    .footer-btn {
         background-color: #A67939;
         color: #FFF;
         text-align: center;
-            padding: 26rpx 0;
-            border-radius: 16rpx;
-            font-size: 35rpx;
-        }
+        height: 96rpx;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 12rpx;
+        font-size: 34rpx;
+        font-weight: 600;
     }
 
-    .success-btn {
+    .success-footer {
         position: fixed;
-      bottom: 64rpx;
-      width: 750rpx;
         left: 0;
+        right: 0;
+        bottom: 0;
+        padding: 24rpx 32rpx calc(24rpx + env(safe-area-inset-bottom));
         display: flex;
-      justify-content: space-around;
+        gap: 24rpx;
 
         .btn-item {
-          width: 40%;
+            flex: 1;
             text-align: center;
-          padding: 26rpx 0;
-          border-radius: 16rpx;
-          font-size: 35rpx;
+            height: 96rpx;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-radius: 12rpx;
+            font-size: 34rpx;
+            font-weight: 600;
         }
 
         .btn-left {
@@ -148,7 +207,7 @@ const goToHome = () => {
   .logo {
       position: absolute;
       right: 0;
-      bottom: 200rpx;
+      bottom: 240rpx;
       height: 400rpx;
       width: 150rpx;
       background-image: url('https://cdn.ipadbiz.cn/xys/booking/logo.png');