[ {brand: ';华为';, type: ';Mate20';, price: 3699}, {brand: ';苹果';, type: ';iPhone7';, price: 2949}, {brand: ';三星';, type: ';Galaxy S8+';, price: 3299}, {brand: ';vivo';, type: ';Z5x';, price: 1698}, {brand: ';一加';, type: ';OnePlus7';, price: 2999}, {brand: ';360';, type: ';N7 Pro';, price: 1099}, {brand: ';oppo';, type: ';Reno';, price: 2599} ], 根据提供的数据 构思一个手机展示页面 基于element-plus实现

好的，可以使用 Element-Plus 中的表格和卡片组件来展示这些手机数据。以下是一个简单的代码示例：

<template>
  <div>
    <el-table :data="phones" style="width: 100%">
      <el-table-column prop="brand" label="品牌"></el-table-column>
      <el-table-column prop="type" label="型号"></el-table-column>
      <el-table-column prop="price" label="价格"></el-table-column>
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button type="primary" size="mini" @click="showPhone(row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :visible.sync="dialogVisible" width="30%" title="手机详情">
      <el-card>
        <div slot="header" class="clearfix">
          <span>{{ currentPhone.brand }} {{ currentPhone.type }}</span>
          <el-button style="float: right; padding: 3px 0" type="text" @click="dialogVisible = false">关闭</el-button>
        </div>
        <div style="padding: 30px">
          <p>价格：{{ currentPhone.price }}</p>
          <p>描述：暂无描述</p>
        </div>
      </el-card>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      phones: [
        { brand: '华为', type: 'Mate20', price: 3699 },
        { brand: '苹果', type: 'iPhone7', price: 2949 },
        { brand: '三星', type: 'Galaxy S8+', price: 3299 },
        { brand: 'vivo', type: 'Z5x', price: 1698 },
        { brand: '一加', type: 'OnePlus7', price: 2999 },
        { brand: '360', type: 'N7 Pro', price: 1099 },
        { brand: 'oppo', type: 'Reno', price: 2599 }
      ],
      dialogVisible: false,
      currentPhone: {}
    }
  },
  methods: {
    showPhone(phone) {
      this.currentPhone = phone
      this.dialogVisible = true
    }
  }
}
</script>

这个组件中，我们使用了 `el-table` 表格组件来展示手机数据，同时在最后一列添加了一个“查看”按钮，点击该按钮会弹出一个对话框，用 `el-dialog` 和 `el-card` 组件展示当前手机的详细信息。其中 `currentPhone` 对象用来保存当前选中的手机数据，`dialogVisible` 属性用来控制对话框是否可见。