Dhaverd/ New-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Добавил адаптивности под мобилки

This commit is contained in:
Dhaverd 2025-06-18 14:11:16 +08:00
parent afcfcfe690
commit 5715c4c6c8
1 changed files with 31 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
resources/views/ServiceLinks/ServicesLinks.vue
View File

@ -8,7 +8,10 @@ export default {
data: () => ({ data: () => ({
links: ref([]), links: ref([]),
servicesListStore: useServicesList(), servicesListStore: useServicesList(),
fetching: true fetching: true,
windowHeight: document.documentElement.clientHeight,
windowWidth: document.documentElement.clientWidth,
isWide: window.innerWidth >= 654
}), }),
mounted() { mounted() {
this.fetching = true; this.fetching = true;
@ -16,24 +19,41 @@ export default {
this.links = this.servicesListStore.links; this.links = this.servicesListStore.links;
this.fetching = false; 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> </script>
<template> <template>
<v-app> <v-app>
<v-sheet class="bg-gradient h-100 w-100 d-flex justify-center"> <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"> <v-sheet class="bg-grey-darken-3 mt-5 mb-5 rounded-lg w-75 pl-3 pr-3">
<p class="text-h3 text-center pt-3">Список сервисов и страниц</p> <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"/> <v-skeleton-loader v-if="fetching" class="bg-grey-darken-3" type="card"/>
<div class="pt-5 h-100" v-else> <div class="pt-5 h-100" v-else>
<v-row class="ma-0" v-for="n in Math.ceil(links.length / 3)"> <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-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" style="background-color: #E08E79" :href="links[(n - 1) * 3 + j - 1].link" target="_blank"> <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 }} {{ links[(n - 1) * 3 + j - 1].name }}
</v-btn> </v-btn>
</v-col> </v-col>
</v-row> </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> </div>
</v-sheet> </v-sheet>
</v-sheet> </v-sheet>
@ -51,4 +71,8 @@ export default {
repeating-conic-gradient(from 90deg,var(--c)) repeating-conic-gradient(from 90deg,var(--c))
0/calc(3*var(--s)) calc(3*var(--s)) 0/calc(3*var(--s)) calc(3*var(--s))
} }
.bg-btn {
background-color: #E08E79
}
</style> </style>