42 lines
995 B
Vue
42 lines
995 B
Vue
|
<template>
|
||
|
|
<div class="project">
|
||
|
|
<div class="project__image project__image--left" v-if="variant === 'left'">
|
||
|
|
<a :href="image" target="_blank"><img :src="thumb" :alt="title" /></a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="project__infobox">
|
||
|
|
<div class="project__info-title">
|
||
|
|
<h2>
|
||
|
|
<a :href="href" target="_blank">{{ title }}</a>
|
||
|
|
</h2>
|
||
|
|
</div>
|
||
|
|
<div class="project__info-body">
|
||
|
|
<slot></slot>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div
|
||
|
|
class="project__image project__image--right"
|
||
|
|
v-if="variant === 'right'"
|
||
|
|
>
|
||
|
|
<a :href="image" target="_blank"><img :src="thumb" :alt="title" /></a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
const props = defineProps<{
|
||
|
|
variant: 'left' | 'right';
|
||
|
|
title: string;
|
||
|
|
href: string;
|
||
|
|
image: string;
|
||
|
|
}>();
|
||
|
|
|
||
|
|
const thumb = computed(() => {
|
||
|
|
const split = props.image.split('/');
|
||
|
|
const last = split.length - 1;
|
||
|
|
split[last] = `thumb_${split[last]}`;
|
||
|
|
return split.join('/');
|
||
|
|
});
|
||
|
|
</script>
|