<el-card >设置弹出样式

如果您想要为 `<el-card>` 组件设置弹出样式，可以使用 Element UI 提供的 `<el-dialog>` 组件。具体步骤如下：

1. 在模板中添加 `<el-dialog>` 组件，设置相关属性和样式，例如：

<el-dialog
  title="弹出框标题"
  :visible.sync="dialogVisible"
  width="30%"
  :before-close="handleClose">
  <p>弹出框内容</p>
</el-dialog>

其中 `title` 属性用于设置弹出框的标题，`:visible.sync` 属性用于控制弹出框的显示和隐藏，`width` 属性用于设置弹出框的宽度，`:before-close` 属性用于设置弹出框关闭前的回调函数，用于处理一些逻辑。在弹出框中可以添加任意 HTML 内容。

2. 在 `<el-card>` 组件中添加一个按钮或其他触发弹出框的元素，例如：

<el-card>
  <p>卡片内容</p>
  <el-button @click="dialogVisible = true">弹出框按钮</el-button>
</el-card>

其中 `@click="dialogVisible = true"` 用于在按钮被点击时设置 `dialogVisible` 变量为 `true`，从而显示弹出框。

3. 在 Vue 实例中定义 `dialogVisible` 变量，并添加相关逻辑，例如：

new Vue({
  el: '#app',
  data: {
    dialogVisible: false,
  },
  methods: {
    handleClose: function(done) {
      // 处理关闭逻辑
      done();
    },
  },
});

其中 `dialogVisible` 变量用于控制弹出框的显示和隐藏，`handleClose` 方法用于处理弹出框关闭前的逻辑。在该方法中可以调用 `done()` 函数，用于关闭弹出框。

通过以上步骤，您可以为 `<el-card>` 组件设置弹出样式。