帮我用vue 和css写一个查询语句，通过姓名和电话号码可以进行查询，例如姓名：张三，电话:123

好的，以下是一个简单的查询语句的界面，使用Vue和CSS实现：

<template>
  <div class="query-container">
    <form class="query-form" @submit.prevent="submitQuery">
      <label for="name-input">姓名：</label>
      <input id="name-input" type="text" v-model="name" required />
      <label for="phone-input">电话：</label>
      <input id="phone-input" type="text" v-model="phone" required />
      <button type="submit">查询</button>
    </form>

    <div v-if="queryResult">
      <h2>查询结果：</h2>
      <p>姓名：{{ queryResult.name }}</p>
      <p>电话：{{ queryResult.phone }}</p>
    </div>
  </div>
</template>

<script>
export default {
  name: "QueryForm",
  data() {
    return {
      name: "",
      phone: "",
      queryResult: null,
    };
  },
  methods: {
    submitQuery() {
      // 在这里可以使用 Ajax 或其他技术进行查询
      // 然后将结果保存到 queryResult 中
      this.queryResult = {
        name: this.name,
        phone: this.phone,
      };
    },
  },
};
</script>

<style>
.query-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 50px;
}

.query-form {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.query-form label {
  margin-right: 10px;
}

.query-form input {
  padding: 5px;
  margin-right: 10px;
  border-radius: 3px;
  border: 1px solid #ccc;
}

.query-form button {
  padding: 5px 10px;
  background-color: #007fff;
  color: #fff;
  border-radius: 3px;
  border: none;
  cursor: pointer;
}

.query-form button:hover {
  background-color: #0066cc;
}
</style>

这个查询界面包含一个表单，可以输入姓名和电话号码进行查询。当用户提交表单时，会调用 `submitQuery` 方法进行查询。在这里，我们只是简单地将输入的姓名和电话号码保存到 `queryResult` 变量中，并在界面上展示查询结果。实际上，你需要通过 Ajax 或其他技术将查询发送到服务器端，并获取服务器端返回的查询结果。