92 lines
2.4 KiB
Vue
92 lines
2.4 KiB
Vue
<template>
|
|
<div class="sources">
|
|
<div :class="['sources__container', 'sources__container-' + sources.length]">
|
|
<div class="sources__container-ring">
|
|
<Source
|
|
v-for="(source, idx) in sources"
|
|
:class="['sources__source-' + idx]"
|
|
:source="source"
|
|
:selectable="selectable"
|
|
:key="source.id"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: ['sources', 'selectable'],
|
|
mounted() {
|
|
this.$store.commit('selection/clearSelection')
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@import '~/assets/css/components';
|
|
|
|
.sources {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
&__container {
|
|
position: absolute;
|
|
left: 15%;
|
|
top: 10%;
|
|
width: 70%;
|
|
height: 80%;
|
|
}
|
|
|
|
&__container-ring {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
&__container-2,
|
|
&__container-3 {
|
|
.sources__source-0 { left: 10%; top: 10%; }
|
|
.sources__source-1 { left: 90%; top: 10%; }
|
|
.sources__source-2 { left: 50%; top: 100%; }
|
|
}
|
|
&__container-4,
|
|
&__container-5,
|
|
&__container-6 {
|
|
.sources__source-0 { left: 100%; top: 20%; }
|
|
.sources__source-1 { left: 100%; top: 80%; }
|
|
.sources__source-2 { left: 0; top: 80%; }
|
|
.sources__source-3 { left: 0; top: 20%; }
|
|
.sources__source-4 { left: 50%; top: 0; }
|
|
.sources__source-5 { left: 50%; top: 100%; }
|
|
}
|
|
&__container-7,
|
|
&__container-9 {
|
|
.sources__source-0 { left: 95%; top: 20%; }
|
|
.sources__source-1 { left: 95%; top: 80%; }
|
|
.sources__source-2 { left: 5%; top: 80%; }
|
|
.sources__source-3 { left: 5%; top: 20%; }
|
|
.sources__source-4 { left: 50%; top: 0; }
|
|
.sources__source-5 { left: 30%; top: 100%; }
|
|
.sources__source-6 { left: 70%; top: 100%; }
|
|
.sources__source-7 { left: 0%; top: 50%; }
|
|
.sources__source-8 { left: 100%; top: 50%; }
|
|
}
|
|
&__container-8,
|
|
&__container-10 {
|
|
.sources__source-0 { left: 95%; top: 25%; }
|
|
.sources__source-1 { left: 95%; top: 75%; }
|
|
.sources__source-2 { left: 5%; top: 75%; }
|
|
.sources__source-3 { left: 5%; top: 25%; }
|
|
.sources__source-4 { left: 30%; top: 0; }
|
|
.sources__source-5 { left: 70%; top: 0; }
|
|
.sources__source-6 { left: 30%; top: 100%; }
|
|
.sources__source-7 { left: 70%; top: 100%; }
|
|
.sources__source-8 { left: 0%; top: 50%; }
|
|
.sources__source-9 { left: 100%; top: 50%; }
|
|
}
|
|
}
|
|
</style>
|