首页搜索栏优化

pages/search/search.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="page">
+  <view class="page search-page" :class="{ show: shown }">
     <fy-header title="搜索" back />
     <wd-search v-model="q" placeholder="搜索同事、会话或待办" hide-cancel focus placeholder-left />
     <view v-if="!q.trim()">
@@ -52,7 +52,10 @@ import { store, previewOf } from '../../utils/store.js'
 
 export default {
   components: { FyHeader, FyFileMark },
-  data() { return { q: '' } },
+  data() { return { q: '', shown: false } },
+  onShow() {
+    this.$nextTick(() => { this.shown = true })
+  },
   computed: {
     people() {
       const q = this.q.trim()
@@ -99,6 +102,21 @@ export default {
 </script>
 
 <style scoped>
+.search-page {
+  position: fixed;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 30;
+  background: #F5F7FA;
+  transform: translateX(100%);
+  overflow: auto;
+}
+.search-page.show {
+  transform: translateX(0);
+  transition: transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
+}
 .search { padding: 12rpx 28rpx 16rpx; }
 .search input { height: 80rpx; background: #fff; border-radius: 20rpx; padding: 0 28rpx; font-size: 28rpx; border: 1rpx solid rgba(17,24,39,0.06); }
 .sec { padding: 24rpx 28rpx 8rpx; font-size: 24rpx; color: #6B7280; }

pages/tabs/messages.vue

@@ -2,10 +2,13 @@
   <view class="page msg edge">
     <fy-header :title="unread ? ('消息(' + unread + ')') : '消息'">
       <template #right>
-        <text class="ico sm" @click="goSearch">⌕</text>
         <text class="ico" @click="plus">＋</text>
       </template>
     </fy-header>
+    <view class="finder" @click="goSearch">
+      <text class="finder-ico">⌕</text>
+      <text>搜索</text>
+    </view>
     <fy-scroll class="edge-scroll list" dock @refresh="reload">
       <view v-if="!rows.length" class="empty">暂无会话</view>
       <view
@@ -124,13 +127,31 @@ export default {
         }
       })
     },
-    goSearch() { uni.navigateTo({ url: '/pages/search/search' }) }
+    goSearch() {
+      uni.navigateTo({
+        url: '/pages/search/search',
+        animationType: 'slide-in-right',
+        animationDuration: 280
+      })
+    }
   }
 }
 </script>
 
 <style scoped>
-.msg { display: flex; flex-direction: column; height: 100%; background: #F5F7FA; overflow: hidden; }
+.msg { display: flex; flex-direction: column; height: 100%; background: #fff; overflow: hidden; }
+.finder {
+  margin: 12rpx 24rpx 16rpx;
+  height: 72rpx;
+  border-radius: 16rpx;
+  background: #F3F4F6;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #9CA3AF;
+  font-size: 28rpx;
+}
+.finder-ico { margin-right: 8rpx; font-size: 30rpx; }
 .list { background: #fff; }
 .ico.sm { font-size: 34rpx; color: #1677FF; }
 .item { display: flex; align-items: center; padding: 22rpx 28rpx; background: #fff; }