XiaoETech_app/pages/search/index.vue

<template>
  <view class="search-container">
    <view class="search-box">
      <input 
        v-model="searchQuery" 
        type="text" 
        @input="onSearchInput" 
        @confirm="onSearch"
      />
      <button @click="onSearch">搜索</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      searchQuery: ''
    };
  },
  methods: {
    onSearchInput() {
      // 可以在这里添加输入时的实时搜索逻辑
      console.log('当前输入内容:', this.searchQuery);
    },
    onSearch() {
      // 在这里添加搜索逻辑
      console.log('开始搜索:', this.searchQuery);
    }
  }
};
</script>

<style scoped>
.search-container {
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  padding-top: 50px; 
  height: auto; 
  display: flex;
  width: 100%;
}

.search-box {
  width: 90%; 
  display: flex;
  gap: 0; /* 确保元素之间没有间隙 */
}

input {
  flex: 1;
  height: 50px;
  padding: 15px; 
  border: 1px solid #ccc;
  border-radius: 4px 0 0 4px;
  box-sizing: border-box; /* 确保内边距和边框包含在宽度内 */
}

button {
  padding: 15px 25px; 
  background-color: #007AFF;
  height: 50px;
  color: white;
  border: none;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
  white-space: nowrap; /* 防止按钮文字换行 */
  /* 添加以下样式让文字垂直居中 */
  display: flex;
  align-items: center;
  justify-content: center;
}

button:hover {
  background-color: #0056b3;
}
</style>