63 lines
1.2 KiB
Vue
63 lines
1.2 KiB
Vue
|
<template>
|
||
|
|
<div class="sources">
|
||
|
|
<div :class="['sources__container', 'sources__container-' + sources.length]">
|
||
|
|
<div class="sources__container-ring">
|
||
|
|
<div
|
||
|
|
v-for="(source, idx) in sources"
|
||
|
|
:class="['sources__source', 'sources__source-' + idx]"
|
||
|
|
:key="source.id"
|
||
|
|
>
|
||
|
|
{{ source }}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
props: ['sources'],
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss">
|
||
|
|
.sources {
|
||
|
|
position: relative;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
|
||
|
|
&__container {
|
||
|
|
position: absolute;
|
||
|
|
left: 10%;
|
||
|
|
top: 10%;
|
||
|
|
width: 80%;
|
||
|
|
height: 80%;
|
||
|
|
}
|
||
|
|
|
||
|
|
&__container-ring {
|
||
|
|
position: absolute;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
&__source {
|
||
|
|
position: absolute;
|
||
|
|
width: 10px;
|
||
|
|
height: 10px;
|
||
|
|
margin: -5px 0 0 -5px;
|
||
|
|
background-color: #ffffff;
|
||
|
|
}
|
||
|
|
|
||
|
|
&__container-4,
|
||
|
|
&__container-5,
|
||
|
|
&__container-6 {
|
||
|
|
.sources__source-0 { top: 20%; left: 100%; }
|
||
|
|
.sources__source-1 { top: 80%; left: 100%; }
|
||
|
|
.sources__source-2 { top: 80%; left: 0; }
|
||
|
|
.sources__source-3 { top: 20%; left: 0; }
|
||
|
|
.sources__source-4 { top: 0; left: 50%; }
|
||
|
|
.sources__source-5 { top: 100%; left: 50%; }
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|