79 lines
2.8 KiB
Vue
79 lines
2.8 KiB
Vue
<script>
|
|
|
|
import {ref} from "vue";
|
|
import {useServicesList} from "../../stores/services_list.js";
|
|
|
|
export default {
|
|
name: "ServicesLinks",
|
|
data: () => ({
|
|
links: ref([]),
|
|
servicesListStore: useServicesList(),
|
|
fetching: true,
|
|
windowHeight: document.documentElement.clientHeight,
|
|
windowWidth: document.documentElement.clientWidth,
|
|
isWide: window.innerWidth >= 654
|
|
}),
|
|
mounted() {
|
|
this.fetching = true;
|
|
this.servicesListStore.getList().then(()=>{
|
|
this.links = this.servicesListStore.links;
|
|
this.fetching = false;
|
|
});
|
|
this.myEventHandler();
|
|
window.addEventListener("resize", this.myEventHandler, { passive: true });
|
|
},
|
|
methods: {
|
|
myEventHandler(e) {
|
|
this.windowHeight = document.documentElement.clientHeight;
|
|
this.windowWidth = document.documentElement.clientWidth;
|
|
this.isWide = this.windowWidth >= 654;
|
|
}
|
|
},
|
|
created() {
|
|
window.addEventListener("resize", this.myEventHandler);
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<v-app>
|
|
<v-sheet class="bg-gradient h-100 w-100 d-flex justify-center">
|
|
<v-sheet class="bg-grey-darken-3 mt-5 mb-5 rounded-lg w-75 pl-3 pr-3">
|
|
<p class="text-xl-h3 text-lg-h3 text-md-h4 text-sm-h4 text-h5 text-center pt-3">Список сервисов и страниц</p>
|
|
<v-skeleton-loader v-if="fetching" class="bg-grey-darken-3" type="card"/>
|
|
<div class="pt-5 h-100" v-else>
|
|
<v-row class="ma-0" v-for="n in Math.ceil(links.length / 3)" v-if="isWide">
|
|
<v-col class="d-flex justify-center align-center" v-for="j in 3">
|
|
<v-btn v-if="links[(n - 1) * 3 + j - 1]" class="w-100 h-100 pa-5 text-white mt-5 mb-5 bg-btn" :href="links[(n - 1) * 3 + j - 1].link" target="_blank">
|
|
{{ links[(n - 1) * 3 + j - 1].name }}
|
|
</v-btn>
|
|
</v-col>
|
|
</v-row>
|
|
<div v-else class="ma-0">
|
|
<v-btn class="w-100 h-100 pa-5 text-white mt-5 mb-5 bg-btn" v-for="link in links" :href="link.link" target="_blank">
|
|
{{ link.name }}
|
|
</v-btn>
|
|
</div>
|
|
</div>
|
|
</v-sheet>
|
|
</v-sheet>
|
|
</v-app>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.bg-gradient {
|
|
--s: 50px; /* control the size */
|
|
|
|
--c: #E08E79 0 25%,#774F38 0 50%,#0000 0;
|
|
background:
|
|
conic-gradient(from 180deg,var(--c))
|
|
0/var(--s) var(--s),
|
|
repeating-conic-gradient(from 90deg,var(--c))
|
|
0/calc(3*var(--s)) calc(3*var(--s))
|
|
}
|
|
|
|
.bg-btn {
|
|
background-color: #E08E79
|
|
}
|
|
</style>
|