el-dialog修改成横着的

### 修改 `el-dialog` 组件实现横向布局

为了使 `el-dialog` 实现横向布局，可以考虑调整对话框内部结构并应用 CSS 样式来控制其子元素的排列方式。默认情况下，`el-dialog` 是垂直居中的模态窗口；要创建一个侧边弹窗效果，则需通过自定义样式和 HTML 结构达成目标。

#### 自定义样式与模板结构调整

1. **HTML 模板**

需要在 `el-dialog` 中设置特定类名以便于后续样式覆盖，并确保内容区域支持水平扩展：

   <el-dialog class="horizontal-dialog" :visible.sync="dialogVisible">
     <!-- 对话框主体 -->
     <div slot="title">标题</div>
     <div style="display: flex;">
       <div>左边部分</div>
       <div>右边部分</div>
     </div>
   </el-dialog>

2. **CSS 样式**

使用 `/deep/` 或者更推荐的方式是在全局或组件作用域内引入 SCSS/SASS 变量覆盖原有样式，以适应新的布局需求：

   /* 如果使用的是 Vue CLI */
   .horizontal-dialog {
     top: auto;
     bottom: 0;
     left: 0;
     transform: none;
     margin-left: 0;
     max-width: calc(100% - 40px); /* 减去 padding */
     min-height: 80vh;            /* 设置最小高度 */

     /deep/ .el-dialog__body {
       display: flex;
       justify-content: space-between;

       > div:first-child,
       > div:last-child {
         width: 50%;
         box-sizing: border-box;
       }
     }

     @media (max-width: 768px) {
       min-height: initial;
       max-width: 90vw;
     }
   }

上述方法允许 `el-dialog` 内部的内容按照指定比例分配给左右两侧容器[^1]。需要注意的是，在实际开发过程中可能还需要针对不同屏幕尺寸做响应式的适配处理，以及根据具体业务逻辑进一步优化交互体验。