请帮我写一个vue样式，让图片在移动端设备页面的上半40%部分显示一个图片，把图片放在圆角阴影边框内，确保样式是响应的，可以使这个样式在平板上也可以显示

为了创建一个响应式的Vue组件样式，让图片在移动端显示特定区域，并且包含在一个圆角阴影边框内，你可以使用CSS Grid布局和媒体查询。首先，假设你有一个名为`image-container.vue`的文件，这里是一个基本的例子：

<template>
  <div class="image-container">
    <img :src="imageUrl" alt="Image" />
  </div>
</template>

<script>
export default {
  props: {
    imageUrl: { type: String, required: true },
  },
};
</script>

然后，在对应的`.vue`文件的<style scoped>标签里添加样式：

<style scoped>
.image-container {
  display: flex;
  justify-content: center;
  align-items: center; /* Centers the image vertically */
  height: 100%; /* Full height of the container */
  background-color: #f8f8f8; /* Light gray background for better contrast */
}

@media (max-width: 767px) { /* Adjust for tablets */
  .image-container {
    position: relative;
    overflow: hidden;
  }

  img {
    width: 100%;
    max-height: calc(40vh - 4rem); /* Subtract a little padding from the viewport height */
    object-fit: cover; /* Keep aspect ratio and fit within the defined area */
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15); /* Shadow effect */
  }
}
</style>

这里，我们设置了`.image-container`容器的高度为100%，并在移动设备宽度小于768px时，调整了图片样式使其适应屏幕。图片会居中显示，并且在移动端上半部分显示40%高度，同时包含圆角阴影效果。