element ui 对话框改 模仿苹果手机 预览视图
2024-04-10 11:37:24
修改了一下 element ui的对话框 做一个手机模拟预览的样式
<!-- 预览 --><div class="look_box"><el-dialog :visible.sync="lookState" width="370px"><div class="phone"><div class="phone_shadow"><div class="nav"><vab-icon class="two" :icon="['fas', 'wifi']"></vab-icon><vab-iconclass="three":icon="['fas', 'battery-three-quarters']"></vab-icon></div><div class="nav_s"><div class="span_title">查看标签</div><div class="left"><i class="el-icon-arrow-left"></i></div><div class="right"></div></div><!-- 内容区域 这里直接写内容 --><div class="phone_conts"></div></div><div class="volume"></div><div class="bang"><div class="yuan"></div></div><div class="power"></div><div class="power1"></div><div class="receiver"><div></div></div></div></el-dialog></div>// 预览窗口 手机样式.look_box .el-dialog__header {display: none;}.look_box .el-dialog {border-radius: 0px !important;}.look_box .el-dialog__body {padding: 0 !important;}.look_box .el-dialog {background: transparent !important;box-shadow: none;}.look_box .el-dialog__body {border: none !important;}.html_conts img {width: 100%;height: auto;vertical-align: bottom;padding: 5px 0;}.look_box {.look_box_cont {height: 500px;}}.phone {position: relative;width: 370px;height: 650px;border: 15px solid #000;border-radius: 60px;box-sizing: border-box;}.phone_shadow {content: '';position: absolute;width: 350px;height: 634px;box-shadow: 0px 0px 24px #fff;border-radius: 51px;left: -5px;top: -7px;background: #fff;border: 10px solid #000;box-sizing: border-box;overflow: hidden;.nav {height: 25px;color: #333333;font-size: 16px;display: flex;align-items: center;justify-content: flex-end;box-sizing: border-box;padding-right: 27px;.three {font-size: 20px;margin-left: 8px;}.two {margin-left: 5px;}}.nav_s {height: 30px;display: flex;align-items: center;justify-content: space-between;position: relative;background-color: #f4f4f5;box-sizing: border-box;padding: 0 10px;font-size: 16px;.span_title {position: absolute;font-size: 16px;left: 50%;top: 50%;transform: translate(-50%, -50%);color: #000;}.left {color: #000;font-size: 20px;}.right {color: #83878d;.one {margin-right: 5px;}}}.phone_conts {height: 559px;overflow-y: scroll;box-sizing: border-box;padding: 10px;color: #000;.titles {font-size: 16px;font-weight: 700;line-height: 30px;}.data {color: #666769;border-bottom: 1px dashed #c6c6c6;line-height: 26px;}.html_conts {margin-top: 20px;color: #666769;line-height: 30px;word-break: break-all;}}}.phone_conts::-webkit-scrollbar {display: none;}.volume {width: 9px;height: 100px;border: #000 1px solid;background: linear-gradient(#8c8c8c, #000 9%, #222, #000 94%, #353535 100%);position: absolute;right: -21px;top: 120px;z-index: -1;border-radius: 20px;}.power {width: 9px;height: 46px;border: #000 1px solid;background: linear-gradient(#8c8c8c, #000 9%, #222, #000 94%, #353535 100%);position: absolute;left: -21px;top: 100px;z-index: -1;border-radius: 20px;}.power1 {width: 9px;height: 46px;border: #000 1px solid;background: linear-gradient(#8c8c8c, #000 9%, #222, #000 94%, #353535 100%);position: absolute;left: -21px;top: 160px;z-index: -1;border-radius: 20px;}.receiver {position: absolute;top: 4px;left: 50%;transform: translateX(-50%);background: #000000;border: #484848 1px solid;width: 50px;height: 8px;z-index: 9;border-radius: 20px;}.receiver ul {list-style: none;display: flex;flex-wrap: wrap;margin: 1px;justify-content: space-around;}.receiver ul li {background: #303030;width: 1px;height: 1.5px;float: left;transform: skewX(-38deg);}.bang {width: 150px;height: 25px;background-color: #000;position: absolute;left: 50%;transform: translateX(-50%);border-radius: 0 0 13px 13px;top: 0;}.yuan {width: 10px;height: 10px;background-color: #070e21;box-sizing: border-box;position: absolute;top: 4px;right: 18px;border-radius: 50%;}图标可以自己自行替换 手机大小是写死的 可以自行修改
样式可以直接写在全局 也可以使用样式穿透写在组件中
element ui 对话框改 模仿苹果手机 预览视图相关推荐
- Element文件上传 pdf 及预览
目标:vue+element 实现上传图片及pdf 和预览功能 技术:vue.element.vue-pdf 安装及引入: //安装 npm install --save vue-pdf//引入 im ...
- element UI 对话框编辑取消事件，当前行会清空或者替换掉bug解决
问题:如题element UI 对话框编辑取消事件,当前行会清空或者被替换掉,table表格里的编辑按钮打开对话框,关闭对话框,this.$refs.ruleForm.resetFields()不生效 ...
- 关于苹果手机预览文件以及安卓手机下载问题
由于苹果手机没有文件系统,本人也只是在微信公众号里做的苹果手机预览功能,以及苹果手机打开文件名乱码问题处理,安卓手机正常下载 public void UploadFile(BootdoConfig b ...
- MarkdownView：Markdown 文档预览视图组件
原文链接:https://github.com/keitaoouchi/MarkdownView MarkdownView:Markdown 文档预览视图组件.# 为开源点赞# -- 由SwiftLa ...
- Android Studio xml文件中的布局预览视图
操作系统:Windows 10 x64 IDE:Android Studio 3.3.1 更新了Android Studio之后,xml文件中的布局预览视图变得如此简洁! 原因是没有勾选Show La ...
- android视图工具栏,Android studio预览视图工具栏不见了
解决办法1: 查看 - >工具窗口 - >预览 解决办法2: 1.双击shift或者右上角的搜索图标 2.输入preview 3.单击该选项 搜索preview 观看previewtool ...
- MFC 对话框打印和打印预览知识总结
1.准备知识 函数名 覆盖函数可能完成的任务 CView::OnPreparePrinting() 调用CprintInfo成员函数(如CprintInfo::SetMaxPage设置文档长度)或设置 ...
- Vue+wangeditor富文本+element——--上传+下载文件+图片预览
一:上传文件 HTML <el-upload class="upload-demo" action="haircut/upload" :on-previe ...
- 视图-叠印预览_使用预览视图显示摄像机预览
视图-叠印预览 A common use case for any camera app is to display a preview from the camera. So far, this h ...
最新文章
- bzoj4396[Usaco2015 dec]High Card Wins*
- MySQL/MariaDB数据库主从复制
- java随机动态分组_Java将一组数随机分组
- html地图无法点击,无法触发谷歌地图标记点击事件从HTML按钮
- [linux驱动]linux驱动模块
- java分数表示_表示Java分数的最佳方法？
- BZOJ.4909.[SDOI2017]龙与地下城(正态分布 中心极限定理 FFT Simpson积分)
- EF mysql 数据迁移_Asp.Net Core EFCore Migrations 数据迁移
- 《zabbix中文支持》-4
- Fibonacci算法
- python ide_Python id（）
- springboot+activiti工作流mybatis冲突解决办法
- ghost方式批量安装win7
- 怎么在wps里做计算机,解决方案：如何在wps中制作电子小报
- AppServer 灰度集群接口超时 / CPU 负载高专项问题排查
- OpenCV + CPP 系列（九）颜色空间
- 怎么关闭计算机桌面的弹窗,电脑桌面弹出的广告怎么设置关闭
- oracle 信用检查,Oracle EBS 信用(Credit)额度(1)
- 指数基金（一）：宽基指数简介
- elasticsearch8.2集群部署