483 行
9.9 KiB
CSS
可执行文件
483 行
9.9 KiB
CSS
可执行文件
/* 简约白灰浅色风格弹窗组件样式 */
|
|
|
|
/* Element UI 弹窗基础样式重写 */
|
|
.el-dialog {
|
|
border-radius: 8px !important;
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
|
|
border: 1px solid #e9ecef !important;
|
|
overflow: hidden !important;
|
|
}
|
|
|
|
.el-dialog__wrapper {
|
|
background: rgba(0, 0, 0, 0.3) !important;
|
|
}
|
|
|
|
.el-dialog__header {
|
|
background: #fafbfc !important;
|
|
border-bottom: 1px solid #e9ecef !important;
|
|
padding: 16px 20px !important;
|
|
position: relative;
|
|
}
|
|
|
|
.el-dialog__title {
|
|
font-size: 16px !important;
|
|
font-weight: 500 !important;
|
|
color: #212529 !important;
|
|
line-height: 1.4 !important;
|
|
}
|
|
|
|
.el-dialog__headerbtn {
|
|
top: 16px !important;
|
|
right: 16px !important;
|
|
width: 28px !important;
|
|
height: 28px !important;
|
|
background: #f8f9fa !important;
|
|
border-radius: 6px !important;
|
|
transition: all 0.2s ease !important;
|
|
}
|
|
|
|
.el-dialog__headerbtn:hover {
|
|
background: #dc3545 !important;
|
|
}
|
|
|
|
.el-dialog__close {
|
|
color: #6c757d !important;
|
|
font-size: 14px !important;
|
|
font-weight: normal !important;
|
|
}
|
|
|
|
.el-dialog__headerbtn:hover .el-dialog__close {
|
|
color: #ffffff !important;
|
|
}
|
|
|
|
.el-dialog__body {
|
|
padding: 20px !important;
|
|
background: #ffffff !important;
|
|
color: #495057 !important;
|
|
line-height: 1.6 !important;
|
|
}
|
|
|
|
.el-dialog__footer {
|
|
padding: 12px 20px 20px !important;
|
|
background: #ffffff !important;
|
|
border-top: 1px solid #f1f3f4 !important;
|
|
text-align: right !important;
|
|
}
|
|
|
|
/* 表单样式优化 */
|
|
.el-form-item {
|
|
margin-bottom: 18px !important;
|
|
}
|
|
|
|
.el-form-item__label {
|
|
font-weight: 500 !important;
|
|
color: #495057 !important;
|
|
font-size: 14px !important;
|
|
line-height: 1.6 !important;
|
|
}
|
|
|
|
.el-input__inner {
|
|
border-radius: 6px !important;
|
|
border: 1px solid #ced4da !important;
|
|
padding: 10px 12px !important;
|
|
font-size: 14px !important;
|
|
transition: all 0.2s ease !important;
|
|
background: #ffffff !important;
|
|
}
|
|
|
|
.el-input__inner:focus {
|
|
border-color: #1976d2 !important;
|
|
box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.1) !important;
|
|
}
|
|
|
|
.el-input__inner:hover {
|
|
border-color: #adb5bd !important;
|
|
}
|
|
|
|
/* 按钮样式优化 */
|
|
.el-button {
|
|
border-radius: 6px !important;
|
|
padding: 8px 16px !important;
|
|
font-weight: 400 !important;
|
|
font-size: 14px !important;
|
|
transition: all 0.2s ease !important;
|
|
border: 1px solid transparent !important;
|
|
}
|
|
|
|
.el-button--primary {
|
|
background: #1976d2 !important;
|
|
border-color: #1976d2 !important;
|
|
color: #ffffff !important;
|
|
}
|
|
|
|
.el-button--primary:hover {
|
|
background: #1565c0 !important;
|
|
border-color: #1565c0 !important;
|
|
}
|
|
|
|
.el-button--default {
|
|
background: #ffffff !important;
|
|
border: 1px solid #dee2e6 !important;
|
|
color: #495057 !important;
|
|
}
|
|
|
|
.el-button--default:hover {
|
|
background: #f8f9fa !important;
|
|
border-color: #adb5bd !important;
|
|
}
|
|
|
|
.el-button--danger {
|
|
background: #dc3545 !important;
|
|
border-color: #dc3545 !important;
|
|
color: #ffffff !important;
|
|
}
|
|
|
|
.el-button--danger:hover {
|
|
background: #c82333 !important;
|
|
border-color: #bd2130 !important;
|
|
}
|
|
|
|
/* 修改密码弹窗特定样式 */
|
|
.password-dialog .el-dialog {
|
|
width: 460px !important;
|
|
}
|
|
|
|
.password-dialog .el-form-item__label {
|
|
width: 90px !important;
|
|
}
|
|
|
|
.password-dialog .el-form-item__content {
|
|
margin-left: 90px !important;
|
|
}
|
|
|
|
/* 头像设置弹窗样式 */
|
|
.avatar-dialog .el-dialog {
|
|
width: 500px !important;
|
|
}
|
|
|
|
.avatar-upload-area {
|
|
border: 2px dashed #ced4da;
|
|
border-radius: 8px;
|
|
padding: 32px 16px;
|
|
text-align: center;
|
|
background: #f8f9fa;
|
|
transition: all 0.2s ease;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.avatar-upload-area:hover {
|
|
border-color: #1976d2;
|
|
background: rgba(25, 118, 210, 0.05);
|
|
}
|
|
|
|
.avatar-upload-area i {
|
|
font-size: 40px;
|
|
color: #adb5bd;
|
|
margin-bottom: 12px;
|
|
display: block;
|
|
}
|
|
|
|
.avatar-upload-area:hover i {
|
|
color: #1976d2;
|
|
}
|
|
|
|
.avatar-upload-text {
|
|
color: #6c757d;
|
|
font-size: 14px;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.avatar-preview {
|
|
width: 100px;
|
|
height: 100px;
|
|
border-radius: 8px;
|
|
object-fit: cover;
|
|
border: 2px solid #e9ecef;
|
|
margin: 0 auto 16px;
|
|
display: block;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
/* 微信绑定弹窗样式 */
|
|
.wechat-dialog .el-dialog {
|
|
width: 380px !important;
|
|
}
|
|
|
|
.qr-code-container {
|
|
text-align: center;
|
|
padding: 16px;
|
|
}
|
|
|
|
.qr-code-container canvas {
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.qr-code-tip {
|
|
color: #6c757d;
|
|
font-size: 14px;
|
|
line-height: 1.6;
|
|
margin-top: 12px;
|
|
}
|
|
|
|
/* 退出登录确认弹窗样式 */
|
|
.logout-dialog .el-dialog {
|
|
width: 400px !important;
|
|
}
|
|
|
|
.logout-dialog .el-dialog__body {
|
|
text-align: center;
|
|
padding: 32px 20px 20px !important;
|
|
}
|
|
|
|
.logout-icon {
|
|
width: 56px;
|
|
height: 56px;
|
|
background: #fff3cd;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 0 auto 16px;
|
|
border: 2px solid #ffeaa7;
|
|
}
|
|
|
|
.logout-icon i {
|
|
font-size: 24px;
|
|
color: #856404;
|
|
}
|
|
|
|
.logout-message {
|
|
font-size: 16px;
|
|
color: #495057;
|
|
font-weight: 500;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.logout-submessage {
|
|
font-size: 14px;
|
|
color: #6c757d;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
/* 消息提示样式优化 */
|
|
.el-message {
|
|
border-radius: 6px !important;
|
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1) !important;
|
|
border: 1px solid #e9ecef !important;
|
|
}
|
|
|
|
.el-message--success {
|
|
background: #d4edda !important;
|
|
border-color: #c3e6cb !important;
|
|
color: #155724 !important;
|
|
}
|
|
|
|
.el-message--warning {
|
|
background: #fff3cd !important;
|
|
border-color: #ffeaa7 !important;
|
|
color: #856404 !important;
|
|
}
|
|
|
|
.el-message--error {
|
|
background: #f8d7da !important;
|
|
border-color: #f5c6cb !important;
|
|
color: #721c24 !important;
|
|
}
|
|
|
|
.el-message--info {
|
|
background: #d1ecf1 !important;
|
|
border-color: #bee5eb !important;
|
|
color: #0c5460 !important;
|
|
}
|
|
|
|
/* 加载动画优化 */
|
|
.el-loading-mask {
|
|
background: rgba(255, 255, 255, 0.8) !important;
|
|
}
|
|
|
|
.el-loading-spinner {
|
|
margin-top: -25px !important;
|
|
}
|
|
|
|
.el-loading-spinner .circular {
|
|
width: 42px !important;
|
|
height: 42px !important;
|
|
}
|
|
|
|
.el-loading-spinner .path {
|
|
stroke: #1976d2 !important;
|
|
stroke-width: 2 !important;
|
|
}
|
|
|
|
.el-loading-text {
|
|
color: #495057 !important;
|
|
font-weight: 400 !important;
|
|
font-size: 14px !important;
|
|
margin-top: 12px !important;
|
|
}
|
|
|
|
/* 响应式设计 */
|
|
@media (max-width: 768px) {
|
|
.el-dialog {
|
|
width: 90% !important;
|
|
margin: 0 auto !important;
|
|
}
|
|
|
|
.password-dialog .el-dialog,
|
|
.avatar-dialog .el-dialog,
|
|
.wechat-dialog .el-dialog,
|
|
.logout-dialog .el-dialog {
|
|
width: 90% !important;
|
|
}
|
|
|
|
.el-dialog__body {
|
|
padding: 16px 12px !important;
|
|
}
|
|
|
|
.el-dialog__footer {
|
|
padding: 8px 12px 16px !important;
|
|
}
|
|
|
|
.password-dialog .el-form-item__label {
|
|
width: 70px !important;
|
|
}
|
|
|
|
.password-dialog .el-form-item__content {
|
|
margin-left: 70px !important;
|
|
}
|
|
}
|
|
|
|
/* 动画效果 */
|
|
@keyframes dialogSlideIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(-20px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.el-dialog {
|
|
animation: dialogSlideIn 0.2s ease-out !important;
|
|
}
|
|
|
|
/* 表单验证样式 */
|
|
.el-form-item.is-error .el-input__inner {
|
|
border-color: #dc3545 !important;
|
|
}
|
|
|
|
.el-form-item__error {
|
|
color: #dc3545 !important;
|
|
font-size: 12px !important;
|
|
line-height: 1 !important;
|
|
padding-top: 4px !important;
|
|
}
|
|
|
|
/* 工具提示样式 */
|
|
.el-tooltip__popper {
|
|
background: #495057 !important;
|
|
color: #ffffff !important;
|
|
border-radius: 4px !important;
|
|
font-size: 12px !important;
|
|
padding: 6px 8px !important;
|
|
}
|
|
|
|
.el-tooltip__popper .popper__arrow {
|
|
border-top-color: #495057 !important;
|
|
}
|
|
|
|
.el-tooltip__popper .popper__arrow::after {
|
|
border-top-color: #495057 !important;
|
|
}
|
|
|
|
/* 选择器样式 */
|
|
.el-select-dropdown {
|
|
border: 1px solid #e9ecef !important;
|
|
border-radius: 6px !important;
|
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1) !important;
|
|
}
|
|
|
|
.el-select-dropdown__item {
|
|
color: #495057 !important;
|
|
font-size: 14px !important;
|
|
padding: 8px 12px !important;
|
|
}
|
|
|
|
.el-select-dropdown__item:hover {
|
|
background: #f8f9fa !important;
|
|
}
|
|
|
|
.el-select-dropdown__item.selected {
|
|
background: #e3f2fd !important;
|
|
color: #1976d2 !important;
|
|
font-weight: 500 !important;
|
|
}
|
|
|
|
/* 日期选择器样式 */
|
|
.el-date-picker {
|
|
border: 1px solid #e9ecef !important;
|
|
border-radius: 6px !important;
|
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1) !important;
|
|
}
|
|
|
|
.el-picker-panel__header {
|
|
background: #fafbfc !important;
|
|
border-bottom: 1px solid #e9ecef !important;
|
|
}
|
|
|
|
.el-date-table th {
|
|
color: #6c757d !important;
|
|
font-weight: 500 !important;
|
|
}
|
|
|
|
.el-date-table td.today .cell {
|
|
color: #1976d2 !important;
|
|
font-weight: 500 !important;
|
|
}
|
|
|
|
.el-date-table td.current:not(.disabled) .cell {
|
|
background: #1976d2 !important;
|
|
color: #ffffff !important;
|
|
}
|
|
|
|
/* 分页器样式 */
|
|
.el-pagination {
|
|
color: #495057 !important;
|
|
}
|
|
|
|
.el-pagination .el-pager li {
|
|
background: #ffffff !important;
|
|
border: 1px solid #dee2e6 !important;
|
|
color: #495057 !important;
|
|
border-radius: 4px !important;
|
|
margin: 0 2px !important;
|
|
}
|
|
|
|
.el-pagination .el-pager li:hover {
|
|
background: #f8f9fa !important;
|
|
border-color: #adb5bd !important;
|
|
}
|
|
|
|
.el-pagination .el-pager li.active {
|
|
background: #1976d2 !important;
|
|
border-color: #1976d2 !important;
|
|
color: #ffffff !important;
|
|
}
|
|
|
|
.el-pagination .btn-prev,
|
|
.el-pagination .btn-next {
|
|
background: #ffffff !important;
|
|
border: 1px solid #dee2e6 !important;
|
|
color: #495057 !important;
|
|
border-radius: 4px !important;
|
|
}
|
|
|
|
.el-pagination .btn-prev:hover,
|
|
.el-pagination .btn-next:hover {
|
|
background: #f8f9fa !important;
|
|
border-color: #adb5bd !important;
|
|
} |