generated from cms/tibi-docs
nex session
This commit is contained in:
@@ -7,7 +7,7 @@
|
||||
|
||||
let count = col.iconCycleCircle.boxes.length // The number of surrounding circles.
|
||||
let angleStep = 360 / count
|
||||
let radius = 100 // Distance from center
|
||||
let radius = 360
|
||||
|
||||
let circles = []
|
||||
|
||||
@@ -23,44 +23,183 @@
|
||||
}
|
||||
circles = circles
|
||||
})
|
||||
let focused = -1
|
||||
setInterval(() => {
|
||||
focused += 1
|
||||
if (focused == count) focused = 0
|
||||
const svgObject = document.getElementById("mySvgObject" + focused)
|
||||
}, 1000)
|
||||
</script>
|
||||
|
||||
<div class="main-circle">
|
||||
{#each circles as { x, y, rotation }}
|
||||
<div class="circle" style="transform: translate(calc(100px + {x}px - 25px), calc(100px + {y}px - 25px))"></div>
|
||||
<div
|
||||
class="arrow"
|
||||
style="transform: translate(calc(100px + {x / 2}px - 1px), calc(100px + {y /
|
||||
2}px - 25px)) rotate({rotation}deg)"
|
||||
></div>
|
||||
{/each}
|
||||
<div class="container">
|
||||
<div class="main-circle">
|
||||
<div class="content">
|
||||
{col.iconCycleCircle.innerText}
|
||||
</div>
|
||||
{#each circles as { x, y, rotation }, i}
|
||||
<div
|
||||
class:focused="{focused == i}"
|
||||
class="circle"
|
||||
style="transform: translate(calc(100px + {x}px - 90px), calc(100px + {y}px - 90px))"
|
||||
>
|
||||
<div class="half" style="transform: rotate(calc({rotation}deg + 90deg))">
|
||||
<div class="number" style="transform: rotate(calc( -1 * {rotation}deg - 90deg ))">{i + 1}</div>
|
||||
</div>
|
||||
|
||||
<div class="content" style="transform: translate(calc({x}px / 15) , calc({y}px / 15))">
|
||||
<div class="icon">
|
||||
<svg
|
||||
id="mySvgObject{i}"
|
||||
stroke="{i == focused ? 'white' : 'black'}"
|
||||
data-src="{apiBaseURL}page/{pageId}/{col.iconCycleCircle?.boxes[i]?.icon?.src}"></svg>
|
||||
</div>
|
||||
<div class="text">
|
||||
{col.iconCycleCircle?.boxes[i]?.text}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="arrow"
|
||||
style="transform: translate(calc(90px + {(x * 0.8) / 2}px - 10px ), calc(90px + {(y * 0.8) /
|
||||
2}px - 37.5px)) rotate(calc({rotation}deg - 90deg))"
|
||||
>
|
||||
<img src="/media/arrow-l-fat.svg" alt="arrow" />
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style lang="less">
|
||||
.main-circle {
|
||||
position: relative;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
margin: auto;
|
||||
background: red;
|
||||
border-radius: 50%;
|
||||
}
|
||||
@import "../../assets/css/main.less";
|
||||
|
||||
.circle {
|
||||
position: absolute;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background: blue;
|
||||
z-index: 100;
|
||||
border-radius: 50%;
|
||||
transform-origin: center;
|
||||
}
|
||||
.container {
|
||||
height: 1000px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
|
||||
.arrow {
|
||||
position: absolute;
|
||||
width: 2px;
|
||||
height: 50px;
|
||||
background: black;
|
||||
transform-origin: center;
|
||||
@media (max-width: 1430px) {
|
||||
transform: scale(0.9);
|
||||
height: 900px;
|
||||
}
|
||||
|
||||
@media (max-width: 1290px) {
|
||||
transform: scale(0.7);
|
||||
height: 700px;
|
||||
}
|
||||
|
||||
@media (max-width: 680px) {
|
||||
transform: scale(0.5);
|
||||
height: 500px;
|
||||
}
|
||||
@media (max-width: 520px) {
|
||||
transform: scale(0.37);
|
||||
height: 370px;
|
||||
}
|
||||
.main-circle {
|
||||
position: relative;
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
margin: auto;
|
||||
background: rgb(0, 0, 0);
|
||||
border-radius: 50%;
|
||||
& > .content {
|
||||
font-weight: bold;
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
color: @font-color-secondary;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 120;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
.circle {
|
||||
position: absolute;
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
background: rgba(255, 255, 255, 0);
|
||||
border: 4px solid @bg-color-secondary;
|
||||
z-index: 100;
|
||||
transform-origin: center;
|
||||
border-radius: 50%;
|
||||
transform-origin: center;
|
||||
& > .content {
|
||||
position: relative;
|
||||
display: flex;
|
||||
line-height: 1;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
font-size: 1.2rem;
|
||||
justify-content: center;
|
||||
svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.half {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
background: rgb(255, 255, 255);
|
||||
color: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.number {
|
||||
position: absolute;
|
||||
top: 0%;
|
||||
left: 0%;
|
||||
width: 19%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 30px; /* oder eine passende Größe */
|
||||
color: white;
|
||||
}
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
background: rgb(0, 0, 0);
|
||||
border-radius: 50%;
|
||||
top: -50%;
|
||||
left: 0;
|
||||
width: 19%;
|
||||
height: 200%;
|
||||
}
|
||||
}
|
||||
|
||||
&.focused {
|
||||
background: @bg-color-secondary !important;
|
||||
.number {
|
||||
color: @font-color !important;
|
||||
}
|
||||
.content {
|
||||
color: @font-color-secondary !important;
|
||||
}
|
||||
.half {
|
||||
background: @bg-color-secondary !important;
|
||||
&::before {
|
||||
background: @bg-color !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.arrow {
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 75px;
|
||||
|
||||
transform-origin: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user