Browse Source

弹窗样式修改

mh
menghao 6 days ago
parent
commit
696e395a02
  1. 40
      ruoyi-ui/src/assets/styles/element-ui.scss
  2. 16
      ruoyi-ui/src/views/cesiumMap/index.vue
  3. 33
      ruoyi-ui/src/views/childRoom/GanttDrawer.vue

40
ruoyi-ui/src/assets/styles/element-ui.scss

@ -47,11 +47,51 @@
}
// to fixed https://github.com/ElemeFE/element/issues/2461
// 编辑航线自定义面板一致白底8px 圆角标题字重与头部分割线
.el-dialog {
transform: none;
left: 0;
position: relative;
margin: 0 auto;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
background: #fff;
}
.el-dialog__header {
padding: 14px 20px 12px;
border-bottom: 1px solid #ebeef5;
}
.el-dialog__title {
font-size: 16px;
font-weight: 700;
color: #303133;
line-height: 1.4;
}
.el-dialog__headerbtn {
top: 14px;
right: 16px;
}
.el-dialog__headerbtn .el-dialog__close {
color: #909399;
}
.el-dialog__headerbtn:focus .el-dialog__close,
.el-dialog__headerbtn:hover .el-dialog__close {
color: #606266;
}
.el-dialog__body {
padding: 12px 20px 16px;
}
.el-dialog__footer {
padding: 10px 20px 16px;
border-top: 1px solid #ebeef5;
}
// refine element ui upload

16
ruoyi-ui/src/views/cesiumMap/index.vue

@ -14342,10 +14342,11 @@ export default {
text-align: right;
}
/* 优化:居中且带圆角 */
/* 与「编辑航线」面板一致:8px 圆角、白底标题栏、标题字重与内边距 */
::v-deep .el-dialog {
border-radius: 12px;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
display: flex;
flex-direction: column;
margin: 0 !important;
@ -14356,23 +14357,24 @@ export default {
}
::v-deep .el-dialog .el-dialog__header {
background-color: #f5f7fa;
background-color: #fff;
border-bottom: 1px solid #ebeef5;
padding: 15px 20px;
padding: 14px 20px 12px;
}
::v-deep .el-dialog .el-dialog__title {
font-weight: 600;
font-weight: 700;
font-size: 16px;
color: #303133;
}
::v-deep .el-dialog .el-dialog__body {
padding: 20px 25px;
padding: 12px 20px 16px;
}
::v-deep .el-dialog .el-dialog__footer {
border-top: 1px solid #ebeef5;
padding: 10px 20px;
padding: 10px 20px 16px;
background-color: #fff;
}

33
ruoyi-ui/src/views/childRoom/GanttDrawer.vue

@ -741,8 +741,8 @@ export default {
flex-direction: column;
background: #fff;
border-radius: 8px;
border: 1px solid #e4e7ed;
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
border: none;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
z-index: 2500;
overflow: hidden;
}
@ -1078,17 +1078,16 @@ export default {
align-items: center;
justify-content: space-between;
width: 100%;
padding: 8px 12px 8px 16px;
border-bottom: 1px solid #e9edf3;
background: linear-gradient(180deg, #fafbfd 0%, #f5f8fc 100%);
padding: 14px 20px 12px;
border-bottom: 1px solid #ebeef5;
background: #fff;
cursor: move;
}
.gantt-dialog-title-text {
font-size: 14px;
line-height: 20px;
font-weight: 500;
color: #5c6778;
letter-spacing: 0.2px;
font-size: 16px;
line-height: 1.4;
font-weight: 700;
color: #303133;
}
.gantt-dialog-title-actions {
display: inline-flex;
@ -1096,23 +1095,23 @@ export default {
gap: 2px;
}
.gantt-dialog-header-icon {
width: 28px;
height: 28px;
width: 24px;
height: 24px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-size: 16px;
color: #909399;
cursor: pointer;
transition: color 0.2s;
border-radius: 4px;
transition: color 0.2s, background 0.2s;
border-radius: 50%;
border: none;
background: none;
outline: none;
}
.gantt-dialog-header-icon:hover {
color: #303133;
background: #eef2f8;
color: #606266;
background: #f5f5f5;
}
.fade-enter-active,
.fade-leave-active {

Loading…
Cancel
Save