vue3 用pug语法 怎么写 一个页面 页面背景和手机状态栏的颜色都是蓝色

在 Vue 3 中使用 Pug (也称为 Jade) 模板语言编写页面时，你可以将HTML结构与样式分开，让模板更清晰。对于页面背景和手机状态栏颜色都设置为蓝色的情况，可以在组件的 template 部分这样写：

doctype html
html
  head
    meta(name="viewport", content='width=device-width, initial-scale=1.0')
    style
      body,
      ::-webkit-scrollbar {
        background-color: blue; /* 设置背景色 */
      }
      - if $isPhone && window.matchMedia("(orientation: portrait)").matches
        [data-vue-meta]
          meta(name="apple-mobile-web-app-status-bar-style" content="blue")  /* 设置手机状态栏颜色 */

  body(data-vue="YourComponentName")  <!-- 将 "YourComponentName" 替换为你的实际组件名 -->
    div(class="content")  <!-- 这里可以替换为你需要的页面主要内容 -->

这个Pug片段首先设置了整个 `body` 的背景颜色为蓝色，并且针对手机屏幕（通过媒体查询判断 `window.matchMedia("(orientation: portrait)")`），添加了一个自定义元标签来设置状态栏颜色。