feat(组件): 添加指标说明工具提示功能
在个人仪表盘、团队报表和统计指标组件中添加工具提示功能,当用户悬停在指标信息图标上时显示详细说明 创建新的Tooltip组件用于显示指标说明 更新API基础路径配置
This commit is contained in:
53
my-vue-app/src/components/Tooltip.vue
Normal file
53
my-vue-app/src/components/Tooltip.vue
Normal file
@@ -0,0 +1,53 @@
|
||||
<template>
|
||||
<Teleport to="body">
|
||||
<div v-if="visible" class="stat-tooltip" :style="{ left: x + 'px', top: y + 'px' }">
|
||||
<div class="tooltip-title">
|
||||
{{ title }}
|
||||
</div>
|
||||
<div class="tooltip-description">
|
||||
<p>{{ description }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</Teleport>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
defineProps({
|
||||
visible: Boolean,
|
||||
x: Number,
|
||||
y: Number,
|
||||
title: String,
|
||||
description: String
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.stat-tooltip {
|
||||
position: fixed;
|
||||
z-index: 9999;
|
||||
background: rgba(0, 0, 0, 0.9);
|
||||
color: white;
|
||||
padding: 12px 16px;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
max-width: 300px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.tooltip-title {
|
||||
font-weight: 600;
|
||||
margin-bottom: 4px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.tooltip-description {
|
||||
font-size: 13px;
|
||||
color: #e0e0e0;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.tooltip-description p {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user