修改一个具有科技感的el-dialog样式

要修改 el-dialog 样式，可以通过以下步骤实现：

1. 在 CSS 文件中添加以下样式：

.el-dialog {
  background-color: #1E1E1E; /* 设置背景色 */
  border-radius: 10px; /* 设置圆角 */
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); /* 添加阴影 */
}

.el-dialog__title {
  color: #fff; /* 设置标题颜色 */
  font-size: 18px; /* 设置标题字号 */
}

.el-dialog__body {
  color: #fff; /* 设置内容颜色 */
  font-size: 16px; /* 设置内容字号 */
}

.el-dialog__footer {
  background-color: #292929; /* 设置底部背景色 */
  border-top: none; /* 去除底部边框 */
  border-radius: 0 0 10px 10px; /* 设置底部圆角 */
}

.el-button {
  background-color: #4CAF50; /* 设置按钮背景色 */
  border-color: #4CAF50; /* 设置按钮边框颜色 */
  color: #fff; /* 设置按钮文字颜色 */
  font-size: 14px; /* 设置按钮字号 */
  border-radius: 4px; /* 设置按钮圆角 */
  padding: 8px 16px; /* 设置按钮内边距 */
}

.el-button:hover {
  background-color: #3E8E41; /* 设置按钮悬停背景色 */
  border-color: #3E8E41; /* 设置按钮悬停边框颜色 */
}

2. 在 el-dialog 组件中加入 class 属性，指定样式类名，例如：

<el-dialog
  title="Dialog Title"
  :visible.sync="dialogVisible"
  width="30%"
  :close-on-click-modal="false"
  :center="false"
  class="my-dialog"
>
  <span>Dialog Content</span>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">Cancel</el-button>
    <el-button type="primary" @click="dialogVisible = false">Confirm</el-button>
  </div>
</el-dialog>

其中，class 属性的值为自定义的样式类名，这里是 my-dialog。

3. 在 CSS 文件中添加 my-dialog 样式，例如：

.my-dialog .el-dialog__title {
  font-size: 20px;
}

.my-dialog .el-button {
  background-color: #FF5722;
  border-color: #FF5722;
}

.my-dialog .el-button:hover {
  background-color: #E64A19;
  border-color: #E64A19;
}

这里修改了标题字号、按钮背景色和边框颜色等。