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

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

style(search): 优化搜索页面样式和布局
重构搜索页面的样式结构，改进输入框和按钮的UI设计添加背景图片并调整布局间距将底部按钮改为固定定位以提升用户体验
hookehuyr
Commit 5f3f543ac1817bd25cf4eb9589997c843df79fc2 5f3f543a 1 parent 7358e785
Showing 1 changed file with 99 additions and 40 deletions
src/pages/search/index.vue
--- a/src/pages/search/index.vue
View file @5f3f543
+++ b/src/pages/search/index.vue
View file @5f3f543
 <!--
  * @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 class="input-card">
-          <view>证件号码</view>
+          <view class="input-label">证件号码</view>
-          <view>
+          <input
-            <input type="text" v-model="idCode" placeholder="请输入证件号码" @blur="checkIdCode" maxlength="18" style="width: 100%;">
+            class="id-input"
-          </view>
+            type="text"
+            v-model="idCode"
+            placeholder="请输入证件号码"
+            @blur="checkIdCode"
+            maxlength="18"
+          >
         </view>
-        <view style="color:#A67939; font-size: 30rpx; text-align: center;">
+        <view class="tip-block">
-          <view style="display: flex; align-items: center; justify-content: center;">
+          <view class="tip-title">
-            <IconFont name="tips" />&nbsp;温馨提示
+            <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 {
+        .input-label {
-            margin-bottom: 16rpx;
+            width: 160rpx;
-            font-weight: bold;
+            color: #333;
+            font-size: 30rpx;
+            font-weight: 600;
         }
-        input {
+
-            border-bottom: 2rpx solid #EEE;
+        .id-input {
-            padding: 16rpx 0;
+            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;
+        height: 96rpx;
-            border-radius: 16rpx;
+        display: flex;
-            font-size: 35rpx;
+        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;
+            height: 96rpx;
-          border-radius: 16rpx;
+            display: flex;
-          font-size: 35rpx;
+            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');