Vue.js 实现 iOS 手机下面的小黑框适配

在移动端开发中，我们经常需要适配不同的设备和操作系统，以确保应用程序在各种手机上都能正常显示和交互。对于 iOS 手机来说，底部有一个特殊的小黑框，它通常包含了虚拟的 Home 按钮以及其他系统导航元素。在 Vue.js 中，我们可以使用一些技术来适配这个小黑框。

一种常见的方法是通过 CSS 来处理页面布局，以确保内容不会被小黑框遮挡。我们可以使用 Vue.js 的内联样式和动态类绑定来实现这一点。下面是一个示例：

<template>
  <div :style="containerStyle" :class