el-carousel 兼容移动端高度

`el-carousel` 是 Element UI 提供的一个轮播组件，它内置了响应式设计，可以很好地适应移动端屏幕。在处理移动端高度兼容时，你可以通过以下几种方式来实现：

1. 利用 CSS 媒体查询 (Media Queries)：设置不同的样式规则针对不同的设备尺寸。例如，你可以为小屏幕设备（如手机）定义一个特定的最小高度，并调整 `el-carousel` 的样式。

@media screen and (max-width: 768px) {
  .el-carousel {
    height: auto !important; /* 或者自适应的高度值 */
  }
}

2. 使用 Vue 的 v-bind 指令绑定高度：在数据里定义一个变量存储高度，然后动态地将其绑定到组件上。

<el-carousel :height="mobileHeight" @ready="carouselReady">
...
</el-carousel>

<script>
export default {
  data() {
    return {
      mobileHeight: 'calc(100vh - 40px)', // 高度计算示例，减去底部导航或其他固定元素高度
    };
  },
  methods: {
    carouselReady() {
      this.$refs.carousel.setHeight(this.mobileHeight);
    },
  },
};
</script>