Hooke / xyxBooking-weapp

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
5f3f543a 1 parent 7358e785

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

重构搜索页面的样式结构，改进输入框和按钮的UI设计
添加背景图片并调整布局间距
将底部按钮改为固定定位以提升用户体验
Inline Side-by-side
Showing 1 changed file with 121 additions and 62 deletions
1 <!-- 1 <!--
2 * @Date: 2024-01-26 13:08:09 2 * @Date: 2024-01-26 13:08:09
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2026-01-06 23:23:30 4 + * @LastEditTime: 2026-01-08 10:33:16
5 * @FilePath: /xyxBooking-weapp/src/pages/search/index.vue 5 * @FilePath: /xyxBooking-weapp/src/pages/search/index.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
...@@ -9,31 +9,38 @@ ...@@ -9,31 +9,38 @@
9 <view class="search-page"> 9 <view class="search-page">
10 <view> 10 <view>
11 <view v-if="!is_search"> 11 <view v-if="!is_search">
12 - <view class="input-item"> 12 + <view class="input-card">
13 - <view>证件号码</view> 13 + <view class="input-label">证件号码</view>
14 - <view> 14 + <input
15 - <input type="text" v-model="idCode" placeholder="请输入证件号码" @blur="checkIdCode" maxlength="18" style="width: 100%;"> 15 + class="id-input"
16 - </view> 16 + type="text"
17 + v-model="idCode"
18 + placeholder="请输入证件号码"
19 + @blur="checkIdCode"
20 + maxlength="18"
21 + >
17 </view> 22 </view>
18 - <view style="color:#A67939; font-size: 30rpx; text-align: center;"> 23 + <view class="tip-block">
19 - <view style="display: flex; align-items: center; justify-content: center;"> 24 + <view class="tip-title">
20 - <IconFont name="tips" />&nbsp;温馨提示 25 + <IconFont name="tips" size="16" color="#A67939" />
26 + <text class="tip-title-text">温馨提示</text>
21 </view> 27 </view>
22 - <view style="margin-top: 16rpx;">获取参观码，扫码或识别身份证成功进闸机</view> 28 + <view class="tip-desc">获取参观码，扫码或识别身份证成功进闸机</view>
23 </view> 29 </view>
24 </view> 30 </view>
25 <view v-else> 31 <view v-else>
26 <qrCodeSearch :id="id_number" /> 32 <qrCodeSearch :id="id_number" />
27 </view> 33 </view>
28 - <view v-if="!is_search" class="save-wrapper">
29 - <view class="save-btn" @tap="searchBtn">查询</view>
30 - </view>
31 - <view v-else class="success-btn">
32 - <view @tap="goToHome" class="btn-item btn-left">首页</view>
33 - <view @tap="goBack" class="btn-item btn-right">返回查询</view>
34 - </view>
35 </view> 34 </view>
36 <view class="logo"></view> 35 <view class="logo"></view>
36 +
37 + <view v-if="!is_search" class="footer">
38 + <view class="footer-btn" @tap="searchBtn">查询</view>
39 + </view>
40 + <view v-else class="success-footer">
41 + <view @tap="goToHome" class="btn-item btn-left">首页</view>
42 + <view @tap="goBack" class="btn-item btn-right">返回查询</view>
43 + </view>
37 </view> 44 </view>
38 </template> 45 </template>
39 46
...@@ -85,70 +92,122 @@ const goToHome = () => { ...@@ -85,70 +92,122 @@ const goToHome = () => {
85 92
86 <style lang="less"> 93 <style lang="less">
87 .search-page { 94 .search-page {
88 - padding: 32rpx; 95 + position: relative;
89 min-height: 100vh; 96 min-height: 100vh;
90 - background-color: #F6F6F6; 97 + padding: 32rpx;
98 + padding-bottom: 220rpx;
99 + background-image: url('https://cdn.ipadbiz.cn/xys/booking/bg.jpg');
100 + background-repeat: no-repeat;
101 + background-position: center;
102 + background-size: cover;
91 103
92 - .input-item { 104 + .input-card {
93 background-color: #FFF; 105 background-color: #FFF;
94 - padding: 32rpx;
95 border-radius: 16rpx; 106 border-radius: 16rpx;
107 + border: 2rpx solid rgba(166, 121, 57, 0.45);
96 margin-bottom: 32rpx; 108 margin-bottom: 32rpx;
109 + height: 112rpx;
110 + display: flex;
111 + align-items: center;
112 + padding: 0 32rpx;
97 113
98 - view:first-child { 114 + .input-label {
99 - margin-bottom: 16rpx; 115 + width: 160rpx;
100 - font-weight: bold; 116 + color: #333;
117 + font-size: 30rpx;
118 + font-weight: 600;
101 } 119 }
102 - input { 120 +
103 - border-bottom: 2rpx solid #EEE; 121 + .id-input {
104 - padding: 16rpx 0; 122 + flex: 1;
123 + width: 100%;
124 + text-align: right;
125 + font-size: 30rpx;
126 + color: #333;
105 } 127 }
106 } 128 }
107 129
108 - .save-wrapper { 130 + .tip-block {
109 margin-top: 64rpx; 131 margin-top: 64rpx;
110 - .save-btn { 132 + color: #A67939;
133 + text-align: center;
134 + font-size: 30rpx;
135 +
136 + .tip-title {
137 + display: flex;
138 + align-items: center;
139 + justify-content: center;
140 + }
141 +
142 + .tip-title-text {
143 + margin-left: 10rpx;
144 + font-weight: 600;
145 + }
146 +
147 + .tip-desc {
148 + margin-top: 16rpx;
149 + font-weight: 600;
150 + }
151 + }
152 +
153 + .footer {
154 + position: fixed;
155 + left: 0;
156 + right: 0;
157 + bottom: 0;
158 + padding: 24rpx 32rpx calc(24rpx + env(safe-area-inset-bottom));
159 + }
160 +
161 + .footer-btn {
162 + background-color: #A67939;
163 + color: #FFF;
164 + text-align: center;
165 + height: 96rpx;
166 + display: flex;
167 + align-items: center;
168 + justify-content: center;
169 + border-radius: 12rpx;
170 + font-size: 34rpx;
171 + font-weight: 600;
172 + }
173 +
174 + .success-footer {
175 + position: fixed;
176 + left: 0;
177 + right: 0;
178 + bottom: 0;
179 + padding: 24rpx 32rpx calc(24rpx + env(safe-area-inset-bottom));
180 + display: flex;
181 + gap: 24rpx;
182 +
183 + .btn-item {
184 + flex: 1;
185 + text-align: center;
186 + height: 96rpx;
187 + display: flex;
188 + align-items: center;
189 + justify-content: center;
190 + border-radius: 12rpx;
191 + font-size: 34rpx;
192 + font-weight: 600;
193 + }
194 +
195 + .btn-left {
196 + border: 2rpx solid #A67939;
197 + color: #A67939;
198 + background-color: #FFF;
199 + }
200 +
201 + .btn-right {
111 background-color: #A67939; 202 background-color: #A67939;
112 color: #FFF; 203 color: #FFF;
113 - text-align: center;
114 - padding: 26rpx 0;
115 - border-radius: 16rpx;
116 - font-size: 35rpx;
117 } 204 }
118 } 205 }
119 206
120 - .success-btn {
121 - position: fixed;
122 - bottom: 64rpx;
123 - width: 750rpx;
124 - left: 0;
125 - display: flex;
126 - justify-content: space-around;
127 -
128 - .btn-item {
129 - width: 40%;
130 - text-align: center;
131 - padding: 26rpx 0;
132 - border-radius: 16rpx;
133 - font-size: 35rpx;
134 - }
135 -
136 - .btn-left {
137 - border: 2rpx solid #A67939;
138 - color: #A67939;
139 - background-color: #FFF;
140 - }
141 -
142 - .btn-right {
143 - background-color: #A67939;
144 - color: #FFF;
145 - }
146 - }
147 -
148 .logo { 207 .logo {
149 position: absolute; 208 position: absolute;
150 right: 0; 209 right: 0;
151 - bottom: 200rpx; 210 + bottom: 240rpx;
152 height: 400rpx; 211 height: 400rpx;
153 width: 150rpx; 212 width: 150rpx;
154 background-image: url('https://cdn.ipadbiz.cn/xys/booking/logo.png'); 213 background-image: url('https://cdn.ipadbiz.cn/xys/booking/logo.png');
......