企业官网建设流程全解析

弹窗最终效果1

<template><el-dialog:visible.sync="dialogVisible":close-on-click-modal="false":close-on-press-escape="false":show-close="false":width="width"append-to-bodymodal-append-to-bodycustom-class="screen-dialog"><!-- 装饰性图片 --><imgsrc="~@/assets/img/screen/dialog/border-left.png"class="border-left"alt=""/><imgsrc="~@/assets/img/screen/dialog/border-right.png"class="border-right"alt=""/><imgsrc="~@/assets/img/screen/dialog/border-top.png"class="border-top-left"alt=""/><imgsrc="~@/assets/img/screen/dialog/border-top.png"class="border-top-right"alt=""/><imgsrc="~@/assets/img/screen/dialog/border-bottom.png"class="border-bottom-left"alt=""/><imgsrc="~@/assets/img/screen/dialog/border-bottom.png"class="border-bottom-right"alt=""/><imgsrc="~@/assets/img/screen/dialog/top-left-angle.png"class="top-left-angle"alt=""/><imgsrc="~@/assets/img/screen/dialog/top-right-angle.png"class="top-right-angle"alt=""/><imgsrc="~@/assets/img/screen/dialog/bottom-left-angle.png"class="bottom-left-angle"alt=""/><imgsrc="~@/assets/img/screen/dialog/bottom-right-angle.png"class="bottom-right-angle"alt=""/><imgsrc="~@/assets/img/screen/dialog/top-icon.png"class="top-icon"alt=""/><imgsrc="~@/assets/img/screen/dialog/bottom-icon.png"class="bottom-icon"alt=""/><imgsrc="~@/assets/img/screen/dialog/close.png"class="close-icon"alt=""@click="close"/><!-- 标题区域 --><divclass="screen-dialog-head"><divclass="title-pnl"><imgclass="left-img"src="~@/assets/img/screen/dialog/right-arrow.png"alt=""/><divclass="title-name">{{ title }}</div><imgclass="right-img"src="~@/assets/img/screen/dialog/left-arrow.png"alt=""/></div></div><!-- 内容区域 --><divclass="screen-dialog-body"><slot></slot></div><!-- 底部区域 --><divclass="screen-dialog-footer"><slotname="footer"></slot></div></el-dialog></template><script>exportdefault{name:'ScreenDialog',props:{title:{type:String,default:'标题'},width:{type:String,default:'1200px'},visible:{type:Boolean,default:false}},data(){return{dialogVisible:this.visible};},watch:{visible(newVal){this.dialogVisible=newVal;},dialogVisible(newVal){if(!newVal){this.$emit('update:visible',false);}}},methods:{close(){this.dialogVisible=false;}}};</script><stylelang="scss">.screen-dialog{background:transparent;box-shadow:none;.el-dialog__header{display:none;}.el-dialog__body{background:url("~@/assets/img/screen/dialog/body-bg.png")no-repeat;background-size:100% 100%;background-origin:content-box;padding:37px 33px 53px;position:relative;// 左边框 .border-left{width:33px;// 100% - 左上角标高度 - 左下角标高度height:calc(100% - 37px - 53px);position:absolute;left:0;top:37px;}// 右边框 .border-right{width:33px;// 100% - 右上角标高度 - 右下角标高度height:calc(100% - 37px - 53px);position:absolute;right:0;top:37px;}// 上边框 .border-top-left{height:37px;// 100% - 左上角标宽度 - 右上角标宽度 - 中间图标宽度width:calc((100% - 33px - 33px - 236px)/ 2);position:absolute;top:0;left:33px;}// 上边框 .border-top-right{height:37px;// 100% - 左上角标宽度 - 右上角标宽度 - 中间图标宽度width:calc((100% - 33px - 33px - 236px)/ 2);position:absolute;top:0;right:33px;}// 下边框 .border-bottom-left{height:53px;// 100% - 左下角标宽度 - 右下角标宽度 - 中间图标宽度width:calc((100% - 33px - 33px - 166px)/ 2);position:absolute;bottom:0;left:33px;}// 下边框 .border-bottom-right{height:53px;// 100% - 左下角标宽度 - 右下角标宽度 - 中间图标宽度width:calc((100% - 33px - 33px - 166px)/ 2);position:absolute;bottom:0;right:33px;}// 左上角标 .top-left-angle{width:33px;height:37px;position:absolute;top:0;left:0;}// 左下角标 .bottom-left-angle{width:33px;height:53px;position:absolute;bottom:0;left:0;}// 右上角标 .top-right-angle{width:33px;height:37px;position:absolute;top:0;right:0;}// 右下角标 .bottom-right-angle{width:33px;height:53px;position:absolute;bottom:0;right:0;}.top-icon{width:236px;height:39px;position:absolute;top:-2px;left:50%;transform:translateX(-50%);}.bottom-icon{width:166px;height:51px;position:absolute;bottom:2px;left:50%;transform:translateX(-50%);}// 关闭按钮 .close-icon{width:24px;height:24px;position:absolute;top:20px;right:20px;cursor:pointer;z-index:1;}// 头部标题 .screen-dialog-head{.title-pnl{display:flex;justify-content:center;align-items:center;column-gap:20px;padding:0px 40px;background:linear-gradient(90deg,rgba(7,47,93,0.2)0%,rgba(7,47,93,1)50%,rgba(7,47,93,0.2)100%);.left-img, .right-img{width:13px;height:10px;}.title-name{font-size:26px;font-family:"you-she-biao-ti-hei";color:#ffffff;height:40px;line-height:40px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}}}}.screen-dialog-body{min-height:400px;}}</style>

使用方式

<template><screen-dialog:title="dialogTitle":visible.sync="dialogVisible"width="800px"><!-- 主体内容 --><div>这里是对话框的内容</div><!-- 底部内容 --><template#footer><el-button@click="dialogVisible = false">取消</el-button><el-buttontype="primary"@click="handleConfirm">确认</el-button></template></screen-dialog></template><script>importScreenDialogfrom'@/components/ScreenDialog.vue';exportdefault{components:{ScreenDialog},data(){return{dialogTitle:'自定义标题',dialogVisible:false};},methods:{handleConfirm(){// 处理确认逻辑this.dialogVisible=false;}}};</script>