mirror of
https://github.com/crmeb/CRMEB.git
synced 2026-10-29 22:10:49 +00:00
style: 修复弹窗样式作用域问题并优化样式结构
将组件内弹窗的 custom-class 替换为 class，解决 append-to-body 弹窗样式无法通过 scoped :deep 命中的问题； 重构多处弹窗样式，移除冗余的全局样式代码，统一使用业务前缀类名处理弹窗壳层样式； 调整数据库备份详情抽屉尺寸和内边距，优化表格展示布局； 简化多个弹窗的属性绑定，移除不必要的模态框追加属性。
This commit is contained in:
sugar1569
parent
969e5d93bf
commit
ad445f0c2b
@ -5,7 +5,7 @@
|
||||
direction="rtl"
|
||||
size="720"
|
||||
:wrapper-closable="false"
|
||||
custom-class="schema-drawer"
|
||||
class="schema-drawer"
|
||||
@closed="emit('closed')"
|
||||
>
|
||||
<div class="schema-drawer__content">
|
||||
|
||||
@ -822,9 +822,6 @@ defineExpose({ modals, handleCheckChange });
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
:deep(.el-dialog__body) {
|
||||
}
|
||||
|
||||
:deep(.el-tree-node__content) {
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
@ -15,7 +15,7 @@
|
||||
|
||||
<!-- <rightBtn :activeIndex="activeIndex" :configObj="configObj"></rightBtn> -->
|
||||
<el-dialog
|
||||
custom-class="custom-design-dialog"
|
||||
class="custom-design-dialog"
|
||||
v-model="modals"
|
||||
width="100%"
|
||||
fullscreen
|
||||
|
||||
@ -7,7 +7,6 @@
|
||||
:show-close="false"
|
||||
append-to-body
|
||||
:modal="true"
|
||||
:modal-append-to-body="true"
|
||||
:lock-scroll="true"
|
||||
@close="handleClose"
|
||||
>
|
||||
|
||||
@ -68,11 +68,10 @@
|
||||
v-model="styleDialogVisible"
|
||||
width="1188px"
|
||||
top="9vh"
|
||||
custom-class="theme-dialog"
|
||||
class="theme-dialog"
|
||||
:show-close="false"
|
||||
append-to-body
|
||||
:modal="true"
|
||||
:modal-append-to-body="true"
|
||||
:lock-scroll="true"
|
||||
@close="handleClose"
|
||||
>
|
||||
@ -576,34 +575,13 @@ function saveAndClose() {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 弹窗样式
|
||||
:deep(.theme-dialog) {
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
margin-top: 50px !important;
|
||||
margin-bottom: 50px !important;
|
||||
width: calc(100vw - 140px) !important;
|
||||
height: calc(100vh - 100px) !important;
|
||||
margin-left: 70px !important;
|
||||
margin-right: 70px !important;
|
||||
|
||||
.el-dialog__header {
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
padding: 0px 20px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
:deep(.el-dialog__body) {
|
||||
max-height: max-content;
|
||||
padding: 0px !important;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.dialog-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
padding: 15px 24px;
|
||||
.dialog-header-tabs {
|
||||
background: #fff;
|
||||
|
||||
@ -634,7 +612,6 @@ function saveAndClose() {
|
||||
.dialog-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: calc(100% - 20px);
|
||||
background-color: #f5f7fa;
|
||||
|
||||
.content-wrapper {
|
||||
@ -666,6 +643,7 @@ function saveAndClose() {
|
||||
overflow-y: auto;
|
||||
padding-right: 5px;
|
||||
flex: 1;
|
||||
max-height: calc(100vh - 340px);
|
||||
|
||||
.theme-item {
|
||||
background: #fff;
|
||||
@ -1033,3 +1011,24 @@ function saveAndClose() {
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
/* 弹窗壳层覆盖（非 scoped）：append-to-body 弹窗 teleport 到 body 后
|
||||
脱离组件样式作用域，scoped :deep 无法命中，必须用业务前缀全局类。
|
||||
高度随内容自适应，滚动交给内部网格/详情区，避免内容少时大片空白 */
|
||||
.theme-dialog {
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
|
||||
/* header 内边距归零，留白由内部 .dialog-header（15px 24px）提供 */
|
||||
.el-dialog__header {
|
||||
padding: 0 !important;
|
||||
border-bottom: 1px solid var(--prev-border-color-lighter);
|
||||
}
|
||||
|
||||
.el-dialog__body {
|
||||
padding: 0 !important;
|
||||
max-height: calc(100vh - 100px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -5,7 +5,6 @@
|
||||
@close="$emit('update:visible', false)"
|
||||
title="物流查询"
|
||||
size="420px"
|
||||
:modal-append-to-body="true"
|
||||
:wrapper-closable="true"
|
||||
class="order_box2"
|
||||
>
|
||||
@ -76,19 +75,6 @@ function copyNum() {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.order_box2 {
|
||||
:deep(.el-drawer__wrapper) {
|
||||
z-index: 3000 !important;
|
||||
}
|
||||
|
||||
:deep(.el-drawer__body) {
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* 快递单号信息区域 */
|
||||
.express-header {
|
||||
display: flex;
|
||||
@ -201,3 +187,15 @@ function copyNum() {
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
/* 抽屉壳层覆盖（非 scoped）：抽屉根类自锚的 scoped :deep 在组件作用域外无法命中；
|
||||
body 满高 flex 布局供底部滚动区使用。原 .el-drawer__wrapper z-index 覆盖为
|
||||
iView 遗留死规则（选择器结构写反且 EP 层级由弹层管理），不再保留 */
|
||||
.order_box2 .el-drawer__body {
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -954,11 +954,6 @@ function formatFullTime(timestamp) {
|
||||
}
|
||||
|
||||
/* 运行详情回放 */
|
||||
.run-detail-dialog {
|
||||
:deep(.el-dialog__body) {
|
||||
padding-top: 10px;
|
||||
}
|
||||
}
|
||||
.run-detail-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -1039,3 +1034,11 @@ function formatFullTime(timestamp) {
|
||||
color: #f56c6c;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
/* 运行详情弹窗壳层（非 scoped）：append-to-body 弹窗 teleport 到 body 后
|
||||
脱离组件样式作用域，scoped :deep 无法命中，必须用全局类 */
|
||||
.run-detail-dialog .el-dialog__body {
|
||||
padding-top: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -62,13 +62,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<!-- 添加分组 -->
|
||||
<el-dialog
|
||||
v-model="cateData.isCate"
|
||||
width="470px"
|
||||
:show-close="true"
|
||||
custom-class="vertical-center-modal"
|
||||
class="words-box"
|
||||
>
|
||||
<el-dialog v-model="cateData.isCate" width="470px" :show-close="true" align-center class="words-box">
|
||||
<div class="mask-title">
|
||||
{{ cateData.status ? '编辑分组' : '新增分组' }}
|
||||
<span class="iconfont iconcha" v-db-click @click.stop="closeCate"></span>
|
||||
@ -84,13 +78,7 @@
|
||||
>
|
||||
</el-dialog>
|
||||
<!-- 添加话术 -->
|
||||
<el-dialog
|
||||
v-model="msgData.isCateMeg"
|
||||
width="470px"
|
||||
:show-close="true"
|
||||
custom-class="vertical-center-modal"
|
||||
class="words-box"
|
||||
>
|
||||
<el-dialog v-model="msgData.isCateMeg" width="470px" :show-close="true" align-center class="words-box">
|
||||
<div class="mask-title">
|
||||
{{ msgData.status ? '修改话术' : '添加话术' }}
|
||||
<span class="iconfont iconcha" v-db-click @click.stop="closeMsgBox"></span>
|
||||
@ -156,13 +144,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<!-- 编辑分组列表 -->
|
||||
<el-dialog
|
||||
v-model="editList.status"
|
||||
width="470px"
|
||||
:show-close="true"
|
||||
custom-class="vertical-center-modal"
|
||||
class="words-box cate-list"
|
||||
>
|
||||
<el-dialog v-model="editList.status" width="470px" :show-close="true" align-center class="words-box cate-list">
|
||||
<div class="mask-title">
|
||||
编辑分组
|
||||
<span class="iconfont iconcha" v-db-click @click.stop="editList.status = false"></span>
|
||||
@ -840,19 +822,6 @@ function delCate(row, tit, num) {
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
.kf_mobile .ivu-modal-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.vertical-center-modal {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.ivu-modal {
|
||||
top: 0;
|
||||
}
|
||||
.noinput input,
|
||||
.noinput textarea {
|
||||
border-color: transparent !important;
|
||||
|
||||
@ -55,7 +55,8 @@
|
||||
</el-card>
|
||||
<el-dialog
|
||||
v-model="modals"
|
||||
:custom-class="className"
|
||||
class="file-manage-dialog"
|
||||
:class="className"
|
||||
:close-on-click-modal="false"
|
||||
width="80%"
|
||||
top="5vh"
|
||||
@ -975,11 +976,6 @@ function editModalChange() {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
:deep(.el-dialog__body) {
|
||||
padding: 0 !important;
|
||||
height: 80vh;
|
||||
max-height: 80vh;
|
||||
}
|
||||
.diy-button {
|
||||
height: 35px;
|
||||
padding: 0 15px;
|
||||
@ -1127,37 +1123,6 @@ body :deep(.ivu-select-dropdown) {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
:deep(.diy-fullscreen) {
|
||||
overflow: hidden;
|
||||
.ivu-modal {
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
height: 100%;
|
||||
width: 100% !important;
|
||||
.ivu-modal-content {
|
||||
height: 100%;
|
||||
.ivu-modal-body {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.ivu-tabs {
|
||||
.ivu-tabs-content-animated {
|
||||
height: 92%;
|
||||
background-color: #2f2f2f !important;
|
||||
}
|
||||
}
|
||||
.ivu-tabs-content {
|
||||
height: 100%;
|
||||
}
|
||||
.ivu-tabs {
|
||||
.ivu-tabs-tabpane {
|
||||
height: 92%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
:deep(.ivu-modal) {
|
||||
top: 70px;
|
||||
}
|
||||
@ -1193,3 +1158,49 @@ body :deep(.ivu-select-dropdown) {
|
||||
background-color: #333;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
/* 弹窗壳层覆盖（非 scoped）：append-to-body 弹窗 teleport 到 body 后
|
||||
脱离组件样式作用域，scoped :deep 无法命中，必须用业务前缀全局类 */
|
||||
.file-manage-dialog {
|
||||
.el-dialog__body {
|
||||
padding: 0 !important;
|
||||
height: 80vh;
|
||||
max-height: 80vh;
|
||||
}
|
||||
}
|
||||
|
||||
/* 全屏类由 :class 动态挂到弹窗根；内层 .ivu-modal 为 iView 遗留死选择器，
|
||||
EP 下不生效（全屏功能实际失效），此处原样归位维持现状，待后续按 EP 重写 */
|
||||
.file-manage-dialog.diy-fullscreen {
|
||||
overflow: hidden;
|
||||
.ivu-modal {
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
height: 100%;
|
||||
width: 100% !important;
|
||||
.ivu-modal-content {
|
||||
height: 100%;
|
||||
.ivu-modal-body {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.ivu-tabs {
|
||||
.ivu-tabs-content-animated {
|
||||
height: 92%;
|
||||
background-color: #2f2f2f !important;
|
||||
}
|
||||
}
|
||||
.ivu-tabs-content {
|
||||
height: 100%;
|
||||
}
|
||||
.ivu-tabs {
|
||||
.ivu-tabs-tabpane {
|
||||
height: 92%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -61,7 +61,7 @@
|
||||
</el-card>
|
||||
<el-drawer
|
||||
v-model="modals"
|
||||
:custom-class="className"
|
||||
:class="className"
|
||||
title="Create"
|
||||
size="80%"
|
||||
:wrapperClosable="false"
|
||||
|
||||
@ -368,7 +368,7 @@
|
||||
width="800px"
|
||||
destroy-on-close
|
||||
:close-on-click-modal="false"
|
||||
custom-class="agreement-dialog"
|
||||
class="agreement-dialog"
|
||||
>
|
||||
<div class="agreement-content" v-loading="agreementLoading">
|
||||
<div v-html="agreementContent"></div>
|
||||
@ -389,7 +389,7 @@
|
||||
width="400px"
|
||||
:show-close="false"
|
||||
:close-on-click-modal="false"
|
||||
custom-class="upload-success-dialog"
|
||||
class="upload-success-dialog"
|
||||
>
|
||||
<div class="upload-success-content">
|
||||
<i class="el-icon-circle-check" style="font-size: 48px; color: #67c23a; margin-bottom: 16px"></i>
|
||||
|
||||
@ -72,10 +72,11 @@
|
||||
<el-drawer
|
||||
v-model="modals"
|
||||
:wrapperClosable="false"
|
||||
:size="740"
|
||||
:size="1000"
|
||||
:title="'[ ' + rows.name + ' ]' + rows.comment"
|
||||
>
|
||||
<el-table ref="selection" :data="tabList3" v-loading="loading2" empty-text="暂无数据" max-height="600">
|
||||
<!-- 详情为纯表格，内边距收窄对齐 header 的 15px；滚动交给抽屉 body（全局 overflow:auto），滚动条贴边 -->
|
||||
<el-table ref="selection" :data="tabList3" v-loading="loading2" empty-text="暂无数据">
|
||||
<el-table-column label="字段名" min-width="100">
|
||||
<template #default="scope">
|
||||
<span>{{ scope.row.COLUMN_NAME }}</span>
|
||||
@ -433,6 +434,10 @@ getfileList();
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/* 数据库详情抽屉为纯表格展示，覆盖全局 20px 35px 的大内边距 */
|
||||
:deep(.el-drawer__body) {
|
||||
padding: 15px;
|
||||
}
|
||||
:deep(.el-tabs__item) {
|
||||
height: 54px !important;
|
||||
line-height: 54px !important;
|
||||
|
||||
@ -425,7 +425,7 @@
|
||||
@onceGetList="onceGetList"
|
||||
></userLabel>
|
||||
</el-dialog>
|
||||
<el-drawer custom-class="demo-drawer" v-model="modals" :wrapperClosable="false" size="720" title="用户信息填写">
|
||||
<el-drawer class="demo-drawer" v-model="modals" :wrapperClosable="false" size="720" title="用户信息填写">
|
||||
<div class="demo-drawer__content">
|
||||
<UserEdit ref="userEditRef" v-if="modals" :userData="userData"></UserEdit>
|
||||
<div class="fix_footer acea-row row-center">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user