110 lines
2.4 KiB
Vue
110 lines
2.4 KiB
Vue
<script setup>
|
|
const props = defineProps({
|
|
data: {
|
|
type: null,
|
|
required: true,
|
|
},
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<VCard class="mb-4">
|
|
<VCardText>
|
|
<div class="text-body-2 mb-4 text-disabled">
|
|
ABOUT
|
|
</div>
|
|
<div class="d-flex flex-column gap-y-4">
|
|
<div
|
|
v-for="item in props.data.about"
|
|
:key="item.property"
|
|
class="d-flex align-center gap-x-2"
|
|
>
|
|
<VIcon
|
|
:icon="item.icon"
|
|
size="24"
|
|
/>
|
|
<div class="font-weight-medium">
|
|
{{ item.property }}:
|
|
</div>
|
|
<div>
|
|
{{ item.value }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="text-body-2 text-disabled mt-6 mb-4">
|
|
CONTACTS
|
|
</div>
|
|
<div class="d-flex flex-column gap-y-4">
|
|
<div
|
|
v-for="item in props.data.contacts"
|
|
:key="item.property"
|
|
class="d-flex align-center gap-x-2"
|
|
>
|
|
<VIcon
|
|
:icon="item.icon"
|
|
size="24"
|
|
/>
|
|
<div class="font-weight-medium">
|
|
{{ item.property }}:
|
|
</div>
|
|
<div class="text-truncate">
|
|
{{ item.value }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="text-body-2 text-disabled mt-6 mb-4">
|
|
TEAMS
|
|
</div>
|
|
|
|
<div class="d-flex flex-column gap-y-4">
|
|
<div
|
|
v-for="item in props.data.teams"
|
|
:key="item.property"
|
|
>
|
|
<div class="d-flex align-center gap-x-2">
|
|
<div class="font-weight-medium text-no-wrap">
|
|
{{ item.property }}:
|
|
</div>
|
|
<div class="text-no-wrap text-truncate">
|
|
{{ item.value }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</VCardText>
|
|
</VCard>
|
|
|
|
<VCard>
|
|
<VCardText>
|
|
<div class="text-body-2 text-disabled mb-4">
|
|
OVERVIEW
|
|
</div>
|
|
|
|
<div class="d-flex flex-column gap-y-4">
|
|
<div
|
|
v-for="item in props.data.overview"
|
|
:key="item.property"
|
|
class="d-flex gap-x-2 align-center"
|
|
>
|
|
<VIcon
|
|
:icon="item.icon"
|
|
size="24"
|
|
/>
|
|
<div class="font-weight-medium">
|
|
{{ item.property }}:
|
|
</div>
|
|
<div>{{ item.value }}</div>
|
|
</div>
|
|
</div>
|
|
</VCardText>
|
|
</VCard>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.card-list {
|
|
--v-card-list-gap: 16px;
|
|
}
|
|
</style>
|