el-dialog弹窗改变默认样式,改变弹窗高度位置

2023-11-13

el-dialog弹窗改变默认样式 ,改变弹窗高度位置
在el-dialog上添加class=“view-dialog”

<el-dialog :title="dialogData.title" :visible.sync="dialogData.dialog" ref="drawer" :size="620"
            class="view-dialog">
            <div class="demo-drawer__content">
                <el-form :model="dialogData.dataForm" :label-position="dialogData.right" label-width="150px"
                    class="form" :inline="true"
                    <el-form-item :show-overflow-tooltip="true" label="采样时间:">
                        <el-tooltip :disabled="disabledTooltip" effect="dark" :content="dialogData.dataForm.recordTime"
                            placement="top">
                            <span v-text="dialogData.dataForm.recordTime"></span>
                        </el-tooltip>
                    </el-form-item>
                    
                </el-form>
                <div class="demo-drawer__footer">
                    <el-button size="small" @click="cancelGeologyForm">取 消</el-button>
                    <el-button size="small" type="primary" @click="cancelGeologyForm">确 定</el-button>
                </div>
            </div>
        </el-dialog>
/* 弹窗 */
/* 改变高度弹窗位置*/
.dialog-content /deep/ .el-dialog__body {
    height: 40vh;
    overflow: auto;
}
*/deep/.view-dialog>.el-dialog {
    margin-top: 20vh !important;
    background: #FFFFFF;
    border-radius: 12px;
    box-shadow: 2px 2px 5px #d0d0d0;
}

*/deep/.view-dialog>.el-dialog>.el-dialog__header {
    width: 100%;
    height: 54px;
    line-height: 54px;
    text-align: center;
    background: #F4F5F7;
    border-radius: 12px 12px 0px 0px;
    font-size: 20px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #252B3A;
    padding: 0 0 0 40px;
    padding-left: 0;
}

*/deep/.view-dialog>.el-dialog>.el-dialog__footer {
    padding-left: 0;
    padding-right: 0;
    text-align: center;
}

*/deep/.dialog-form>.el-form-item {
    margin-bottom: 30px;
}

*/deep/.dialog-form>.el-form-item>.el-form-item__content>.el-input>.el-input__inner {
    width: 220px;
    height: 34px;
    background: #FFFFFF;
    border: 1px solid #DCDEE2;
    border-radius: 3px;
}

*/deep/.dialog-form>.el-form-item>.el-form-item__content>.el-select>.el-input>.el-input__inner {
    width: 220px;
    height: 34px;
    background: #FFFFFF;
    border: 1px solid #DCDEE2;
    border-radius: 3px;
}

*/deep/.view-dialog>.el-dialog>.el-dialog__header>.el-dialog__headerbtn {
    top: 0;
}

.view-dialog /deep/ .el-form-item__content {
    width: 250PX;
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

el-dialog弹窗改变默认样式,改变弹窗高度位置 的相关文章

随机推荐

  • Android 下拉刷新实践

    1 手动实现一个下拉刷新功能 2 效果图 3 view结构 4 实现思路
  • linux系统调用线程

    1 基础概念 早期unix系统中 没有线程概念 后来才引入线程 linxu 为了迎合 windows引入了线程 linux 上进程是非常优秀了 linux 上用线程和进程的区别不大 老程序都是用进程 gdb不支持线程 因为gdb比线程出现了
  • net core 下的图形验证码

    首先 通过 Nuget 安装 dotnet add package Lazy Captcha Core 注册服务 默认使用了内存存储 AddDistributedMemoryCache builder Services AddCaptcha
  • 什么是IDP?---What Is an Internal Developer Platform (IDP)?

    The modern approach to software delivery is based on cloud native services and the DevOps culture entailing software dev
  • 项目-天气邮局

    一 项目背景 http协议被广泛使用 从移动端 pc端浏览器 http协议无疑是打开互联网应用窗口的重要协议 http在网络应用层中的地位不可撼动 是能准确区分前后台的重要协议 在学习完网络的有关知识后 HTTP服务器无疑是巩固及应用所学知
  • 怎么用linux查看xml文件格式,xml是什么格式?xml文件格式用什么软件可以打开

    xml是什么格式 xml文件是很多用户在电脑上看见过了 很多小伙伴看到了xml格式的文件都不知道这个是什么东东 其实这个xml也是一种比较有用的文件 可以用来存储软件数据 不过不是所有的软件都可以打开的 下面智能手机网就来科普一下xml是什
  • 各种虚拟机体验杂谈 --- 兼发布 google chrome os (chromiumos) vmware版本

    前两天赶时髦 把笔记本换上了win8 pro 换win8pro的原因 一个是价格真的很有诚意 另一个就是从DP版本开始就一直用 虽然兼容性问题多多 但作为宿主主机还行 而且xenclient也实在是让人窝火 号称裸机虚拟 其实硬盘速度慢如蜗
  • 读论文(五)MedDialog【参考性大】【可复现】

    Abstract 医疗对话系统有望帮助远程医疗增加医疗保健服务的可及性 提高患者护理质量并降低医疗成本 为促进医学对话系统的研发 我们构建了大规模的医学对话数据集 MedDialog 其中包含中文数据集340万条医患对话 英文数据集120条
  • 24 个 ES6 方法,解决实际开发的 JS 问题

    1 如何隐藏所有指定的元素 tips 本文主要介绍 24 中 es6 方法 这些方法都挺实用的 本本请记好 时不时翻出来看看 const hide el gt Array from el forEach e gt e style displ
  • 使用 Socket 通信实现 FTP 客户端程序

    转 https www ibm com developerworks cn linux l cn socketftp index html FTP FTP 概述 文件传输协议 FTP 作为网络共享文件的传输协议 在网络应用软件中具有广泛的应
  • python是一门面向过程的语言有哪些,python是面向过程的吗

    python是面向过程的吗 1 面向过程 核心是过程二字 过程指的是解决问题的步骤 好比如设计一条流水线 是一种机械式的思维方式 就是程序从上到下一步步执行 一步步从上到下 从头到尾的解决问题 基本设计思路就是程序一开始是要着手解决一个大的
  • 迷你Web文件服务器

    在开发Web程序的时候 有时候需要一个轻量级的Web服务器 用来响应前端的请求 前端一般的请求可以通过本地文件的方式显示 但是毕竟不是真正的Web服务器 有了这个需求 我们开发了一款迷你绿色通用的Web文件服务器 下载地址 WebServe
  • Ubuntu16.04.7+Qt15.5.0环境配置(一条龙讲解)

    目录 1 下载并安装Ubuntu 2 Qt下载与安装 3 Qt环境配置 4 设置编译套件 5 创建qt快速启动脚本 1 下载并安装Ubuntu Ubuntu16 04 7下载链接https releases ubuntu com xenia
  • ipconfig bash: ipconfig: command not found...

    在使用linux查看端口的时候 应该用ifconfig Windows才使用ipconfig
  • Qt 操作SQLite数据库

    一 SQLite 介绍 Sqlite 数据库作为 Qt 项目开发中经常使用的一个轻量级的数据库 可以说是兼容性相对比较好的数据库之一 Sqlite就像Qt的亲儿子 如同微软兼容Access数据库一样 Qt5 以上版本可以直接使用 Qt自带驱
  • 09字符串排序

    给定两个字符串 从字符串2中找出字符串1中的所有字符 去重并按照ASCII码值从小到大排列 输入字符串1长度不超过1024 字符串2长度不超过100 字符范围满足ASCII编码要求 按照ASCII由小到大排序 输入描述 bach bbaac
  • CBAM:融合通道和空间注意力的注意力模块

    点击上方 AI公园 关注公众号 选择加 星标 或 置顶 作者 Sik Ho Tsang 编译 ronghuaiyang 导读 使用CBAM加持的MobileNetV1 ResNeXt ResNet WRN优于使用SENet的网络 在这篇文章
  • java:统计数组中元素出现的个数

    问题描述 定义一个方法传入一个int类型数组 输出这个数组中每一个数字及其出现的个数 例如 传入数组 1 2 2 2 3 3 4 4 4 4 打印结果 数字1出现了1次 数字2出现了3次 算法思想 这里主要是在实现数组元素的遍历过程中 如果
  • Springboot 整合mybatis-plus +代码生成器

    mybatis plus官方文档 https mp baomidou com guide 新建一个Springboot项目 代码生成结构如下 一 添加依赖
  • el-dialog弹窗改变默认样式,改变弹窗高度位置

    el dialog弹窗改变默认样式 改变弹窗高度位置 在el dialog上添加class view dialog