用vue写一个简单的电影的详情页的页面

好的，我可以为您提供一个简单的电影详情页的页面，代码如下所示：

<template>
  <div class="movie-details">
    <img :src="movie.poster" alt="movie poster" class="movie-poster" />
    <div class="movie-info">
      <h1>{{ movie.title }}</h1>
      <p>{{ movie.description }}</p>
      <div class="movie-meta">
        <span>{{ movie.release_date }}</span>
        <span>{{ movie.genre }}</span>
        <span>{{ movie.runtime }} min</span>
      </div>
      <div class="movie-rating">
        <span class="rating-label">Rating:</span>
        <span class="rating-value">{{ movie.rating }}/10</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "MovieDetails",
  props: {
    movie: {
      type: Object,
      required: true,
    },
  },
};
</script>

<style scoped>
.movie-details {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  margin: 2rem 0;
}

.movie-poster {
  width: 40%;
  margin-right: 2rem;
}

.movie-info {
  width: 55%;
}

.movie-meta {
  margin-top: 1rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}

.movie-meta span {
  margin-right: 1rem;
  font-size: 0.9rem;
  color: #555;
}

.movie-rating {
  margin-top: 1rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}

.rating-label {
  font-size: 1.2rem;
  color: #555;
  margin-right: 0.5rem;
}

.rating-value {
  font-size: 1.2rem;
  color: #f39c12;
}
</style>

这是一个基于Vue框架开发的电影详情页的组件，包含电影的海报、电影信息、电影元数据和评分等等。使用时，只需要将电影信息通过props传入即可。希望这个简单的示例可以帮助到您。