vue3 quasar 使用q-splitter设计一个对半分的画面布局，中间和上面用横线隔开，左边居中放控件，右边放读取到的pdf文件

可以使用 Quasar 的 q-splitter 组件来实现对半分的画面布局，并在中间和上面添加横线。左边居中放置控件，右边则用来展示读取到的 PDF 文件。

首先，在你的 Vue 组件中引入 q-splitter 组件和 q-separator 组件：

<template>
  <div>
    <q-splitter>
      <div slot="before" class="control-panel">
        <!-- 控件放置区域 -->
      </div>

      <div slot="after" class="pdf-viewer">
        <!-- PDF 文件展示区域 -->
      </div>
    </q-splitter>
  </div>
</template>

<script>
import { QSplitter, QSeparator } from 'quasar'

export default {
  components: {
    QSplitter,
    QSeparator
  }
}
</script>

<style scoped>
.control-panel {
  text-align: center;
}

.pdf-viewer {
  /* 样式设置 */
}
</style>

在上述代码中，我们使用了 `q-splitter` 组件来实现对半分的布局，通过 `slot="before"` 和 `slot="after"` 来分别指定左侧和右侧的内容。在左侧的 `div` 中，我们使用了 `class="control-panel"` 来居中放置控件，而右侧的 `div` 使用了 `class="pdf-viewer"` 来展示 PDF 文件。

你可以根据需要自定义样式，并在控件放置区域和 PDF 文件展示区域添加相应的内容和逻辑。

希望对你有所帮助！如果还有其他问题，请随时提问。