wancat/linux-odyssey
1
0 Fork 0
mirror of https://github.com/linux-odyssey/linux-odyssey.git synced 2026-11-08 03:20:12 +08:00
Code Issues Packages Projects Releases Wiki Activity

Add tree chart and drag to scroll function

Browse Source
This commit is contained in:
Chen, Tai-Lin committed 2023-08-22 14:32:15 +08:00
1 parent fb826c2f0e
commit ab3014bf4b
6 files changed
+315 -52
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

app/src/components/TreeChart.vue
+192
View File
@@ -0,0 +1,192 @@
<script setup></script>
<template>
<div class="tree w-max h-max">
<ul>
<li>
<a href="#">Parent</a>
<ul>
<li>
<a href="#">Child</a>
<ul>
<li>
<a href="#">Grand Child</a>
</li>
</ul>
</li>
<li>
<a href="#">Child</a>
<ul>
<li><a href="#">Grand Child</a></li>
<li>
<a href="#">Grand Child</a>
<ul>
<li>
<a href="#"
>Great Grand Child
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</a
>
</li>
<li>
<a href="#">Great Grand Child</a>
</li>
<li>
<a href="#">Great Grand Child</a>
<ul>
<li><a>Grand Child</a></li>
<li>
<a>Grand Child</a>
<ul>
<li>
<a>Great Grand Child</a>
</li>
<li>
<a>Great Grand Child</a>
<ul>
<li>
<a>Great Grand Child</a>
</li>
<li>
<a>Great Grand Child</a>
<ul>
<li>
<a>Great Grand Child</a>
</li>
<li>
<a>Great Grand Child</a>
<ul>
<li>
<a>Great Grand Child</a>
</li>
<li>
<a>Great Grand Child</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a>Grand Child</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Grand Child</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</template>
<style>
.tree ul {
padding-top: 20px;
position: relative;
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
}
.tree li {
display: inline-block;
text-align: center;
list-style-type: none;
position: relative;
padding: 20px 5px 0 5px;
vertical-align: top;
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
}
.tree li::before,
.tree li::after {
content: '';
position: absolute;
top: 0;
right: 50%;
border-top: 1px solid #ccc;
width: 50%;
height: 20px;
}
.tree li::after {
right: auto;
left: 50%;
border-left: 1px solid #ccc;
}
.tree li:only-child::after,
.tree li:only-child::before {
display: none;
}
.tree li:only-child {
padding-top: 0;
}
.tree li:first-child::before,
.tree li:last-child::after {
border: 0 none;
}
.tree li:last-child::before {
border-right: 1px solid #ccc;
border-radius: 0 5px 0 0;
-webkit-border-radius: 0 5px 0 0;
-moz-border-radius: 0 5px 0 0;
}
.tree li:first-child::after {
border-radius: 5px 0 0 0;
-webkit-border-radius: 5px 0 0 0;
-moz-border-radius: 5px 0 0 0;
}
.tree ul ul::before {
content: '';
position: absolute;
top: 0;
left: 50%;
border-left: 1px solid #ccc;
width: 0;
height: 20px;
}
.tree li a {
border: 1px solid #ccc;
padding: 5px 10px;
text-decoration: none;
color: #666;
font-family: arial, verdana, tahoma;
font-size: 11px;
display: inline-block;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
}
.tree li a:hover,
.tree li a:hover + ul li a {
background: #c8e4f8;
color: #000;
border: 1px solid #94a0b4;
}
.tree li a:hover + ul li::after,
.tree li a:hover + ul li::before,
.tree li a:hover + ul::before,
.tree li a:hover + ul ul::before {
border-color: #94a0b4;
}
</style>