138 lines
4.0 KiB
Vue
138 lines
4.0 KiB
Vue
<template>
|
|
<div id="work-label" class="l-text">
|
|
<h2>{{ $t('global.work_label') }}</h2>
|
|
</div>
|
|
<div id="works">
|
|
<swiper
|
|
:modules="modules"
|
|
:navigation="true"
|
|
:keyboard="{ enabled: true }"
|
|
|
|
:slidesPerView="1"
|
|
:breakpoints="{
|
|
'1000': {
|
|
slidesPerView: 1.5,
|
|
},
|
|
}"
|
|
:centeredSlides="true"
|
|
>
|
|
<swiper-slide v-for="work in works.slice().reverse()" :key="work.works_id" class="work-card">
|
|
<div class="work-poster">
|
|
<a :href="work.url" target="_blank">
|
|
<video :src="`/videos/${work.video}.mp4`" no-controls autoplay loop disablePictureInPicture mute></video>
|
|
<img
|
|
:src="`/imgs/small/${work.poster}.webp`"
|
|
:alt="$t(`works.${ work.id }.title`)"
|
|
/>
|
|
</a>
|
|
</div>
|
|
<div class="work-catchphrase">{{ $t(`works.${ work.id }.catchphrase`) }}</div>
|
|
<div class="work-infos">
|
|
<div class="text-content">
|
|
<a :href="work.url" target="_blank">{{ $t(`works.${ work.id }.title`) }}</a>
|
|
<p>{{ work.year }}</p>
|
|
</div>
|
|
<div class="text-content">
|
|
<p>{{ work.technologies }}</p>
|
|
</div>
|
|
</div>
|
|
<div></div>
|
|
<div class="text-content">
|
|
<p>
|
|
{{ $t(`works.${ work.id }.description`) }}
|
|
</p>
|
|
</div>
|
|
</swiper-slide>
|
|
</swiper>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { Keyboard, A11y, Navigation } from "swiper/modules";
|
|
import { Swiper, SwiperSlide } from "swiper/vue";
|
|
import "swiper/css";
|
|
|
|
export default {
|
|
async setup() {
|
|
const works = ref([]);
|
|
|
|
const { data: worksData } = useFetch('/api/items/works', { server: true });
|
|
|
|
onMounted(async () => {
|
|
if (worksData.value) {
|
|
works.value = worksData.value.data;
|
|
}
|
|
});
|
|
|
|
useFetchTranslation('works');
|
|
|
|
let globalData = await useFetchGlobalData();
|
|
globalData = globalData.globalData._object.$sglobalData;
|
|
|
|
return {
|
|
modules: [Keyboard, Navigation, A11y],
|
|
works,
|
|
globalData,
|
|
}
|
|
},
|
|
components: {
|
|
Swiper,
|
|
SwiperSlide,
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@import 'assets/scss/_variables.scss';
|
|
|
|
.swiper {
|
|
height: 100%;
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
grid-template-rows: 1fr auto;
|
|
@media screen and (min-width: $breakpoint-large) {
|
|
width: calc(100% + $margin-x);
|
|
}
|
|
.swiper-wrapper {
|
|
grid-column-start: 1;
|
|
grid-column-end: 3;
|
|
grid-row-start: 1;
|
|
grid-row-end: 1;
|
|
}
|
|
.swiper-button-prev,
|
|
.swiper-button-next {
|
|
height: 3rem;
|
|
opacity: 1;
|
|
transition: opacity 0.2s;
|
|
display: flex;
|
|
&:hover {
|
|
opacity: 0.8;
|
|
}
|
|
}
|
|
.swiper-button-prev {
|
|
margin-right: 1rem;
|
|
justify-self: end;
|
|
}
|
|
.swiper-button-next {
|
|
margin-left: 1rem;
|
|
justify-self: start;
|
|
}
|
|
.swiper-button-disabled::before {
|
|
color: $light-color !important;
|
|
}
|
|
.swiper-button-prev::before,
|
|
.swiper-button-next::before {
|
|
transition: color 0.2s ease;
|
|
font-size: $l-txt-size;
|
|
color: $brand-color;
|
|
cursor: pointer;
|
|
align-self: flex-end;
|
|
}
|
|
.swiper-button-prev::before {
|
|
content: "←";
|
|
}
|
|
.swiper-button-next::before {
|
|
content: "→";
|
|
}
|
|
}
|
|
</style> |