帮我用uni app写一个有样式的搜索界面

好的，以下是一个简单的搜索界面的uni-app示例：

<template>
  <view class="container">
    <view class="search-wrapper">
      <input
        type="text"
        class="search-input"
        v-model="searchTerm"
        @input="search"
        placeholder="请输入关键字"
      />
      <button class="search-button" @click="search">搜索</button>
    </view>
    <view class="search-results">
      <view v-if="!searchResults.length" class="no-results">暂无搜索结果</view>
      <view v-else class="result-item" v-for="(result, index) in searchResults" :key="index">
        {{ result }}
      </view>
    </view>
  </view>
</template>

<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: #f5f5f5;
}

.search-wrapper {
  display: flex;
  flex-direction: row;
  width: 80%;
  margin-bottom: 20px;
}

.search-input {
  flex: 1;
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #ccc;
}

.search-button {
  padding: 10px 20px;
  margin-left: 10px;
  background-color: #409eff;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.search-button:hover {
  background-color: #66b1ff;
}

.search-results {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 80%;
  padding: 20px;
  border-radius: 5px;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.no-results {
  font-size: 20px;
  color: #999;
}

.result-item {
  font-size: 16px;
  color: #333;
  margin-bottom: 10px;
}
</style>

<script>
export default {
  data() {
    return {
      searchTerm: '',
      searchResults: []
    };
  },
  methods: {
    search() {
      // 在这里进行搜索操作
      // 将搜索结果赋值给 searchResults 数组
    }
  }
};
</script>

在这个示例中，我们使用了flex布局来使搜索界面在垂直方向上居中，并添加了一些样式来美化界面。输入框和搜索按钮的样式通过类名来控制，搜索结果的样式也进行了相应的调整。你可以根据自己的需求修改这个示例并添加相应的搜索逻辑。希望能对你有所帮助！