vue elementui商品详情页面

可以参考下面的示例代码来搭建一个基本的商品详情页面：

<template>
  <div class="product-detail">
    <el-row>
      <el-col :span="12">
        <img :src="product.imageUrl" class="product-image" />
      </el-col>
      <el-col :span="12">
        <h2 class="product-title">{{ product.title }}</h2>
        <p class="product-description">{{ product.description }}</p>
        <p class="product-price">Price: {{ product.price }}</p>
        <el-button type="primary" size="medium" @click="addToCart">Add to Cart</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "ProductDetail",
  props: {
    product: Object,
  },
  methods: {
    addToCart() {
      // Add product to cart
    },
  },
};
</script>

<style scoped>
.product-image {
  width: 100%;
  height: auto;
}

.product-title {
  font-size: 24px;
  margin-top: 0;
}

.product-description {
  font-size: 16px;
  margin-top: 0;
}

.product-price {
  font-size: 20px;
  margin-top: 0;
  margin-bottom: 20px;
}
</style>

在这个示例代码中，我们使用了 ElementUI 的 `el-row` 和 `el-col` 组件来实现页面的布局。`el-button` 组件用于添加商品到购物车。在 `props` 中接收商品对象作为参数，可以根据具体的需求去渲染商品的图片、标题、描述和价格等信息。