vue：绑定内联样式

https://cn.vuejs.org/guide/essentials/class-and-style.html#binding-inline-styles

https://uniapp.dcloud.net.cn/tutorial/syntax-css.html

https://uniapp.dcloud.net.cn/tutorial/vue3-basics.html#%E7%BB%91%E5%AE%9A%E5%86%85%E8%81%94%E6%A0%B7%E5%BC%8F

:style 支持绑定 JavaScript 对象值，对应的是 HTML 元素的 style 属性。

CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名。推荐使用驼峰式。

例如：

   <view class="navbar" :style="{ paddingTop: safeAreaInsets?.top + 'px' }">
  </view>

或者：

   <view class="navbar" :style="{ 'padding-top': safeAreaInsets?.top + 'px' }">
  </view>

静态的样式统一写到 class 中。style 接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进 style 中，以免影响渲染速度。