写一个vue页面，使用vant组件，在一行中左边是发布活动四个字，右边用popup点击可弹出界面选择时间

以下是一个使用vant组件的vue页面，左边是"发布活动"四个字，右边是一个popup，点击后可以弹出界面选择时间：

<template>
  <div>
    <van-nav-bar title="发布活动" />
    <van-popup v-model="showPopup" position="bottom">
      <van-datetime-picker
        type="datetime"
        :min-date="minDate"
        :max-date="maxDate"
        :default-date="defaultDate"
        @confirm="onConfirm"
      />
    </van-popup>
    <van-button type="primary" @click="showPopup = true" plain round>选择时间</van-button>
  </div>
</template>

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

export default {
  components: {
    VanPopup: Popup,
    VanDatetimePicker: DatetimePicker,
    VanButton: Button,
    VanNavBar: NavBar,
  },
  data() {
    return {
      showPopup: false,
      minDate: new Date(),
      maxDate: new Date(2030, 10, 1),
      defaultDate: new Date(),
    };
  },
  methods: {
    onConfirm(value) {
      console.log(value);
      this.showPopup = false;
    },
  },
};
</script>