vant弹出层里上面要展示开始时间结束时间两个选择框点击某个框弹出层下方选择时间

Vant 是一个基于 Vue.js 的移动端组件库，它提供了一套丰富的界面组件供开发者快速构建移动端应用。在 Vant 中，弹出层（Popup）组件可以用来创建模态对话框、信息提示等场景。

要实现在 Vant 弹出层中上方展示开始时间和结束时间选择框，并在点击某个选择框时弹出下方的时间选择器，你可以按照以下步骤进行：

1. 在页面中引入 Vant 组件库，并注册你需要的组件，例如 Popup、DatetimePicker 等。
2. 创建两个选择框组件，分别用于开始时间和结束时间的选择。
3. 在数据对象中设置选择框的值，并为每个选择框绑定点击事件。
4. 在点击事件的回调函数中，使用 Vant 的 Popup 组件来展示时间选择器，并通过条件渲染来控制哪个时间选择器显示。
5. 将时间选择器的值绑定到对应的数据属性上，这样用户选择的时间就会实时更新。

以下是一个简单的示例代码：

<template>
  <van-popup v-model="showStartTimePicker" position="bottom">
    <van-datetime-picker
      type="time"
      title="开始时间"
      v-model="startTime"
      @confirm="confirm('startTime')"
    />
  </van-popup>

  <van-popup v-model="showEndTimePicker" position="bottom">
    <van-datetime-picker
      type="time"
      title="结束时间"
      v-model="endTime"
      @confirm="confirm('endTime')"
    />
  </van-popup>

  <van-cell-group>
    <van-cell title="开始时间" @click="showStartTimePicker = true" />
    <van-cell title="结束时间" @click="showEndTimePicker = true" />
  </van-cell-group>
</template>

<script>
import { Popup, DatetimePicker } from 'vant';

export default {
  components: {
    [Popup.name]: Popup,
    [DatetimePicker.name]: DatetimePicker,
  },
  data() {
    return {
      showStartTimePicker: false,
      showEndTimePicker: false,
      startTime: null,
      endTime: null,
    };
  },
  methods: {
    confirm(type) {
      return (value) => {
        this.$emit(`update:${type}`, value);
        this[`show${type}Picker`] = false;
      };
    },
  },
};
</script>

在这个示例中，我们创建了两个 Popup 组件，分别用于展示开始时间和结束时间的选择器。当点击对应的 cell 时，会触发对应的 Popup 显示，并且通过 `confirm` 方法来处理时间选择确认的逻辑。