优化评查结果的显示效果
This commit is contained in:
@@ -0,0 +1,249 @@
|
||||
/* Tooltip 基础样式 */
|
||||
.tooltip-trigger {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.tooltip-container {
|
||||
position: absolute;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
z-index: 9999;
|
||||
width: max-content;
|
||||
max-width: 320px;
|
||||
transition: opacity 0.3s ease, visibility 0.3s ease;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.tooltip-visible {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.tooltip-content {
|
||||
position: relative;
|
||||
padding: 0.75rem 1rem;
|
||||
border-radius: 0.375rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.5;
|
||||
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.tooltip-arrow {
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Tooltip 主题 */
|
||||
.tooltip-dark .tooltip-content {
|
||||
background-color: #1e293b;
|
||||
color: #f1f5f9;
|
||||
}
|
||||
|
||||
.tooltip-dark .tooltip-arrow {
|
||||
border-color: #1e293b;
|
||||
}
|
||||
|
||||
.tooltip-light .tooltip-content {
|
||||
background-color: #ffffff;
|
||||
color: #334155;
|
||||
border: 1px solid #e2e8f0;
|
||||
}
|
||||
|
||||
.tooltip-light .tooltip-arrow {
|
||||
border-color: #ffffff;
|
||||
}
|
||||
|
||||
.tooltip-primary .tooltip-content {
|
||||
background-color: #2563eb;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.tooltip-primary .tooltip-arrow {
|
||||
border-color: #2563eb;
|
||||
}
|
||||
|
||||
.tooltip-success .tooltip-content {
|
||||
background-color: #22c55e;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.tooltip-success .tooltip-arrow {
|
||||
border-color: #22c55e;
|
||||
}
|
||||
|
||||
.tooltip-warning .tooltip-content {
|
||||
background-color: #f59e0b;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.tooltip-warning .tooltip-arrow {
|
||||
border-color: #f59e0b;
|
||||
}
|
||||
|
||||
.tooltip-error .tooltip-content {
|
||||
background-color: #ef4444;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.tooltip-error .tooltip-arrow {
|
||||
border-color: #ef4444;
|
||||
}
|
||||
|
||||
.tooltip-info .tooltip-content {
|
||||
background-color: #3b82f6;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.tooltip-info .tooltip-arrow {
|
||||
border-color: #3b82f6;
|
||||
}
|
||||
|
||||
/* Tooltip 位置基本样式 */
|
||||
.tooltip-top .tooltip-arrow {
|
||||
border-width: 8px 8px 0 8px;
|
||||
border-color: inherit transparent transparent transparent;
|
||||
}
|
||||
|
||||
.tooltip-bottom .tooltip-arrow {
|
||||
border-width: 0 8px 8px 8px;
|
||||
border-color: transparent transparent inherit transparent;
|
||||
}
|
||||
|
||||
.tooltip-left .tooltip-arrow {
|
||||
border-width: 8px 0 8px 8px;
|
||||
border-color: transparent transparent transparent inherit;
|
||||
}
|
||||
|
||||
.tooltip-right .tooltip-arrow {
|
||||
border-width: 8px 8px 8px 0;
|
||||
border-color: transparent inherit transparent transparent;
|
||||
}
|
||||
|
||||
/* 富文本提示框样式 */
|
||||
.tooltip-rich .tooltip-content {
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tooltip-header {
|
||||
padding: 0.5rem 1rem;
|
||||
font-weight: 600;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.tooltip-body {
|
||||
padding: 0.75rem 1rem;
|
||||
}
|
||||
|
||||
.tooltip-footer {
|
||||
padding: 0.5rem 1rem;
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||
font-size: 0.75rem;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* 深色主题特定样式调整 */
|
||||
.tooltip-dark .tooltip-header {
|
||||
border-bottom-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.tooltip-dark .tooltip-footer {
|
||||
background-color: rgba(255, 255, 255, 0.05);
|
||||
border-top-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
/* 浅色主题特定样式调整 */
|
||||
.tooltip-light .tooltip-header {
|
||||
border-bottom-color: #e2e8f0;
|
||||
}
|
||||
|
||||
.tooltip-light .tooltip-footer {
|
||||
background-color: #f8fafc;
|
||||
border-top-color: #e2e8f0;
|
||||
}
|
||||
|
||||
/* 浅色主题下的箭头样式修正 */
|
||||
.tooltip-light.tooltip-top .tooltip-arrow {
|
||||
border-color: #ffffff transparent transparent transparent;
|
||||
}
|
||||
|
||||
.tooltip-light.tooltip-bottom .tooltip-arrow {
|
||||
border-color: transparent transparent #ffffff transparent;
|
||||
}
|
||||
|
||||
.tooltip-light.tooltip-left .tooltip-arrow {
|
||||
border-color: transparent transparent transparent #ffffff;
|
||||
}
|
||||
|
||||
.tooltip-light.tooltip-right .tooltip-arrow {
|
||||
border-color: transparent #ffffff transparent transparent;
|
||||
}
|
||||
|
||||
/* 表格样式 */
|
||||
.tooltip-content table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.tooltip-content table th,
|
||||
.tooltip-content table td {
|
||||
padding: 0.25rem 0.5rem;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.tooltip-content table th {
|
||||
font-weight: 600;
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.tooltip-content table tr:nth-child(even) {
|
||||
background-color: rgba(0, 0, 0, 0.02);
|
||||
}
|
||||
|
||||
/* 深色主题下的表格样式 */
|
||||
.tooltip-dark .tooltip-content table th,
|
||||
.tooltip-dark .tooltip-content table td {
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.tooltip-dark .tooltip-content table th {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.tooltip-dark .tooltip-content table tr:nth-child(even) {
|
||||
background-color: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
/* 动画效果 */
|
||||
@keyframes tooltip-fade-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.tooltip-visible {
|
||||
animation: tooltip-fade-in 0.2s ease-out;
|
||||
}
|
||||
|
||||
/* 自定义偏移类 */
|
||||
.tooltip-custom-offset.tooltip-top {
|
||||
margin-top: 8px; /* 增加顶部边距 */
|
||||
pointer-events: auto; /* 允许鼠标事件 */
|
||||
}
|
||||
|
||||
/* 延长鼠标移入tooltip的路径 */
|
||||
.tooltip-custom-offset .tooltip-arrow {
|
||||
height: 12px; /* 增加箭头高度 */
|
||||
pointer-events: auto; /* 允许鼠标事件 */
|
||||
}
|
||||
+3
-2
@@ -26,6 +26,7 @@
|
||||
@import './components/file-tag.css';
|
||||
@import './components/message-modal.css';
|
||||
@import './components/toast.css';
|
||||
@import './components/TooltipStyles.css';
|
||||
|
||||
/* @import './components/modal.css'; */
|
||||
|
||||
@@ -132,7 +133,7 @@
|
||||
|
||||
/* === 侧边栏 === */
|
||||
.sidebar {
|
||||
@apply w-[280px] h-screen bg-white border-r border-gray-100 flex flex-col
|
||||
@apply w-[240px] h-screen bg-white border-r border-gray-100 flex flex-col
|
||||
transition-all duration-300 fixed left-0 top-0 z-[100] overflow-y-auto
|
||||
shadow-[0_0_15px_rgba(0,0,0,0.05)];
|
||||
}
|
||||
@@ -199,7 +200,7 @@
|
||||
|
||||
/* === 主内容区域 === */
|
||||
.main-content {
|
||||
@apply flex-1 ml-[280px] transition-all duration-300 min-h-screen flex flex-col;
|
||||
@apply flex-1 ml-[240px] transition-all duration-300 min-h-screen flex flex-col;
|
||||
}
|
||||
|
||||
.main-content.sidebar-collapsed {
|
||||
|
||||
@@ -225,7 +225,7 @@
|
||||
.review-point-item:hover {
|
||||
/* background-color: #f5f5f5; */
|
||||
/* box-shadow: 10px 10px 10px 3px rgba(250, 173, 20, 0.6); */
|
||||
transform: translateX(-2px);
|
||||
/* transform: translateX(-2px); */
|
||||
box-shadow: 1px 4px 10px rgba(0, 0, 0, 0.08);
|
||||
|
||||
}
|
||||
@@ -294,8 +294,10 @@
|
||||
}
|
||||
|
||||
.status-success {
|
||||
background-color: #f6ffed;
|
||||
/* background-color: #f6ffed; */
|
||||
background-color: #e7ffcd;
|
||||
color: #52c41a;
|
||||
/* color: #143503; */
|
||||
}
|
||||
|
||||
.status-error {
|
||||
@@ -304,7 +306,7 @@
|
||||
}
|
||||
|
||||
.status-warning {
|
||||
background-color: #fffbe6;
|
||||
background-color: #fff2aec7;
|
||||
color: #faad14;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user