Захаров Дмитрий Анатольевич
109 lines
2.9 KiB
Vue
109 lines
2.9 KiB
Vue
<template>
|
|
<div :class="$style.CustomHomeServiceCard">
|
|
<h3 :class="$style.CustomHomeServiceCardTitle">{{ title }}</h3>
|
|
|
|
<div :class="$style.CustomHomeServiceCardLinks">
|
|
<Component v-for="article in articles" :is="!article.disabled && article.link ? VPLink : 'div'"
|
|
v-bind="{ ...(!article.disabled && article.link && { href: article.link }) }"
|
|
:class="[$style.CustomHomeServiceCardLink, { [$style.CustomHomeServiceCardLinkDisabled]: article.disabled || !article.link }]">
|
|
<div :class="$style.CustomHomeServiceCardLinkTitle">
|
|
<div :class="[$style.CustomHomeServiceCardLinkTitleIcon, { [$style.CustomHomeServiceCardLinkTitleIconActive] : article.link && article.icon === 'magic' }]">
|
|
<CustomIcon :icon="(article.icon || 'cloud') as Icons" />
|
|
</div>
|
|
<div :class="[$style.CustomHomeServiceCardLinkTitleText, { [$style.CustomHomeServiceCardLinkTitleTextActive]: article.link }]">
|
|
{{ article.title }}
|
|
</div>
|
|
</div>
|
|
<div :class="$style.CustomHomeServiceCardLinkDescription">
|
|
{{ article.description }}
|
|
</div>
|
|
</Component>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import VPLink from 'vitepress/dist/client/theme-default/components/VPLink.vue'
|
|
import CustomIcon from './CustomIcon.vue'
|
|
import { Icons } from '@beeline/design-tokens/js/iconfont/icons'
|
|
|
|
export type ServiceArticle = {
|
|
title: string
|
|
description: string
|
|
icon: string
|
|
link?: string
|
|
disabled?: boolean
|
|
}
|
|
|
|
defineProps<{
|
|
title: string
|
|
articles: ServiceArticle[]
|
|
}>()
|
|
</script>
|
|
|
|
<style lang="scss" module>
|
|
@use "@beeline/design-tokens/scss/tokens/globals/sizes";
|
|
@use "@beeline/design-tokens/scss/tokens/themes";
|
|
@use "@beeline/design-tokens/scss/mixin";
|
|
|
|
.CustomHomeServiceCard {
|
|
background-color: themes.$color-background-secondary;
|
|
border-radius: sizes.$size-border-radius-x6;
|
|
padding: sizes.$size-spacing-x8 sizes.$size-spacing-x6;
|
|
|
|
&Title {
|
|
@include mixin.h4();
|
|
color: themes.$color-text-active;
|
|
margin-bottom: sizes.$size-spacing-x6;
|
|
}
|
|
|
|
&Links {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: sizes.$size-spacing-x6;
|
|
}
|
|
|
|
&Link {
|
|
$iconRightSpacing: 8px;
|
|
$iconSize: 20px;
|
|
$el: &;
|
|
|
|
color: themes.$color-text-active !important;
|
|
|
|
&Disabled {
|
|
color: themes.$color-text-disabled !important;
|
|
}
|
|
|
|
&Title {
|
|
margin-bottom: sizes.$size-spacing-x1;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
&Icon {
|
|
width: $iconSize;
|
|
height: $iconSize;
|
|
margin-right: $iconRightSpacing;
|
|
|
|
&Active {
|
|
color: themes.$color-text-link;
|
|
}
|
|
}
|
|
|
|
&Text {
|
|
@include mixin.subtitle2;
|
|
|
|
&Active:hover {
|
|
color: themes.$color-text-link;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
&Description {
|
|
padding-left: calc($iconSize + $iconRightSpacing);
|
|
color: themes.$color-text-inactive;
|
|
@include mixin.caption;
|
|
}
|
|
}
|
|
}
|
|
</style> |