用vue写一个宽768尺寸的ipad移动端

好的，以下是一个简单的示例代码：

<template>
  <div class="ipad-container">
    <!-- ipad内容区域 -->
  </div>
</template>

<script>
export default {
  name: 'Ipad',
  mounted() {
    // 监听窗口大小变化，适配不同尺寸的屏幕
    window.addEventListener('resize', this.handleResize);
    this.handleResize();
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize);
  },
  methods: {
    handleResize() {
      // 根据窗口宽度计算内容区域宽度
      const width = Math.min(window.innerWidth, 768);
      this.$el.style.width = `${width}px`;
    },
  },
};
</script>

<style scoped>
.ipad-container {
  margin: 0 auto;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  padding: 20px;
  /* 768px是ipad横屏的分辨率 */
  width: 768px;
  height: 100%;
  box-sizing: border-box;
}
</style>

这个组件会根据当前窗口大小动态计算内容区域的宽度，并保持在768px以内。你只需要在`<div class="ipad-container">`中添加你需要展示的内容即可。注意，这个示例只是一个简单的实现，实际使用中可能需要根据具体的需求进行修改和优化。