64 lines
1.7 KiB
Vue
64 lines
1.7 KiB
Vue
<script
|
|
setup
|
|
lang="ts"
|
|
>
|
|
const { route = "" } = defineProps<{
|
|
iconImageSource: string,
|
|
bgImageSource: string,
|
|
name: string,
|
|
route?: string,
|
|
}>();
|
|
|
|
const onClickExternalShortcut = () => {
|
|
window.open(route, '_blank')?.focus();
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
class="full-width cursor-pointer bg-dark shadow-2 rounded-15 q-pa-xs position-relative"
|
|
style="border: solid 1px var(--q-accent);"
|
|
@click="onClickExternalShortcut"
|
|
>
|
|
<span
|
|
v-if="$q.platform.is.mobile"
|
|
class="col text-uppercase text-bold text-accent absolute"
|
|
style="transform: translate(20px, -20px);"
|
|
>
|
|
{{ name }}
|
|
</span>
|
|
|
|
<div
|
|
class="row items-center q-px-lg q-py-sm link-card rounded-10 inset-shadow"
|
|
:style="`background-image: url(${bgImageSource}); background-size: ${$q.platform.is.mobile ? 'cover' : 'contain'};`"
|
|
>
|
|
<q-icon
|
|
round
|
|
color="dark"
|
|
size="md"
|
|
:name="`img:${iconImageSource}`"
|
|
class="col-auto q-pr-md"
|
|
/>
|
|
|
|
<span
|
|
v-if="!$q.platform.is.mobile"
|
|
class="col text-uppercase text-bold"
|
|
>
|
|
{{ name }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style
|
|
scoped
|
|
lang="css"
|
|
>
|
|
.link-card {
|
|
background-blend-mode: multiply;
|
|
background-position: bottom right;
|
|
background-repeat: no-repeat;
|
|
background-color: var(--q-dark);
|
|
background-size: contain;
|
|
}
|
|
</style> |