首页搜索栏优化

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; }