```html
<!DOCTYPE html>
<html lang="zh
-CN">
<head>
<meta charset="UTF
-8">
<meta name="viewport" content="width=device
-width, initial
-scale=1
.0">
<title>
十月工作导图</title>
<style>
body {
font
-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans
-serif;
margin: 0;
padding: 20px;
background: linear
-gradient(135deg, #e0f7fa 0%, #bbdefb 100%);
min
-height: 100vh;
}
.mindmap
-container {
width: 100%;
height: 100vh;
position: relative;
overflow: auto;
}
.mindmap {
width: 2400px;
height: 1600px;
position: relative;
margin: 0 auto;
}
.node {
position: absolute;
background: rgba(255, 255, 255, 0
.8);
backdrop
-filter: blur(10px);
border
-radius: 12px;
padding: 15px 20px;
box
-shadow: 0 8px 32px rgba(31, 38, 135, 0
.15);
cursor: pointer;
transition: all 0
.3s ease;
font
-size: 14px;
line
-height: 1
.5;
border: 1px solid rgba(255, 255, 255, 0
.3);
z
-index: 10;
}
.node:hover {
transform: translateY(
-5px);
box
-shadow: 0 12px 40px rgba(31, 38, 135, 0
.25);
background: rgba(255, 255, 255, 0
.95);
z
-index: 20;
}
.node
.level
-0 {
background: rgba(41, 98, 255, 0
.85);
color: white;
font
-size: 24px;
font
-weight: bold;
padding: 25px 35px;
top: 50px;
left: 50%;
transform: translateX(
-50%);
box
-shadow: 0 10px 30px rgba(41, 98, 255, 0
.3);
}
.node
.level
-1 {
background: rgba(66, 133, 244, 0
.85);
color: white;
font
-size: 18px;
font
-weight: bold;
padding: 20px 30px;
}
.node
.level
-2 {
background: rgba(52, 168, 83, 0
.85);
color: white;
font
-size: 16px;
}
.node
.level
-3 {
background: rgba(251, 188, 5, 0
.85);
color: #333;
font
-size: 14px;
}
.node
.level
-4 {
background: rgba(234, 67, 53, 0
.85);
color: white;
font
-size: 13px;
padding: 10px 15px;
}
.connection {
position: absolute;
background: linear
-gradient(to right, rgba(66, 133, 244, 0
.6), rgba(66, 133, 244, 0
.3));
height: 3px;
transform
-origin: left center;
z
-index: 1;
border
-radius: 2px;
}
.highlight {
animation: pulse 2s infinite;
}
@keyframes pulse {
0% {
box
-shadow: 0 0 0 0 rgba(41, 98, 255, 0
.4);
transform: scale(1);
}
70% {
box
-shadow: 0 0 0 15px rgba(41, 98, 255, 0);
transform: scale(1
.05);
}
100% {
box
-shadow: 0 0 0 0 rgba(41, 98, 255, 0);
transform: scale(1);
}
}
</style>
</head>
<body>
<div class="mindmap
-container">
<div class="mindmap" id="mindmap">
<!
-- 中心节点
-->
<div class="node level
-0" style="top: 50px; left: 50%; transform: translateX(
-50%);">
十月工作导图
</div>
<!
-- 一级节点
-->
<div class="node level
-1" style="top: 200px; left: 200px;">
一、目标
</div>
<div class="node level
-1" style="top: 200px; left: 700px;">
二、节奏
</div>
<div class="node level
-1" style="top: 200px; left: 1200px;">
三、资源
</div>
<div class="node level
-1" style="top: 200px; left: 1700px;">
四、动作
</div>
<!
-- 目标子节点
-->
<div class="node level
-2" style="top: 350px; left: 100px;">
标保8%、2893万<br>双品举绩30%<br>鑫福岁悦举绩15%
</div>
<div class="node level
-2" style="top: 350px; left: 350px;">
U人力155人<br>4U占比10%
</div>
<!
-- 节奏子节点
-->
<div class="node level
-2" style="top: 350px; left: 550px;">
黄金周<br>标保3
.5%、1266万<br>U人力78人<br>CT占比15%、10个
</div>
<div class="node level
-2" style="top: 350px; left: 750px;">
二周<br>标保4
.5%、1627万<br>U人力93人<br>CT占比25%、17个
</div>
<div class="node level
-2" style="top: 350px; left: 950px;">
三周<br>标保6%、2170万<br>U人力124人<br>CT占比35%、23个
</div>
<div class="node level
-2" style="top: 500px; left: 750px;">
四周<br>标保8%、2893万<br>U人
十.一黄金月
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
